@distri/react 0.3.5 → 0.3.6

package/dist/index.js

@@ -491,7 +491,8 @@ var useChatStateStore = create((set, get2) => ({
           const shouldUpdateTaskId = !get2().currentTaskId;
           set({
             currentRunId: runId,
-            currentTaskId: shouldUpdateTaskId ? taskId : get2().currentTaskId
+            currentTaskId: shouldUpdateTaskId ? taskId : get2().currentTaskId,
+            currentAgentId: runStartedEvent.data.agentId || get2().currentAgentId
           });
           get2().setStreamingIndicator("typing");
           set({ isStreaming: true });
@@ -659,8 +660,21 @@ var useChatStateStore = create((set, get2) => ({
             });
           }
           break;
-        case "agent_handover":
+        case "agent_handover": {
+          const handoverEvent = event;
+          set({ currentAgentId: handoverEvent.data.to_agent });
+          const handoverMsg = {
+            id: `handover-${Date.now()}`,
+            role: "system",
+            parts: [{
+              part_type: "text",
+              data: `Transferring to **${handoverEvent.data.to_agent}**${handoverEvent.data.reason ? ` \u2014 ${handoverEvent.data.reason}` : ""}`
+            }],
+            created_at: timestamp
+          };
+          set((state) => ({ messages: [...state.messages, handoverMsg] }));
           break;
+        }
         case "todos_updated": {
           const todosEvent = event;
           if (todosEvent.data.todos) {
@@ -757,14 +771,6 @@ var useChatStateStore = create((set, get2) => ({
     } catch (error) {
       console.error(`\u274C Error completing tool ${toolCall.tool_name}:`, error);
       const errorMessage = error instanceof Error ? error.message : "Tool completion failed";
-      try {
-        console.log(`\u{1F504} Retrying completeTool for ${toolCall.tool_name}`);
-        await agent2.completeTool(result);
-        console.log(`\u2705 Retry successful for ${toolCall.tool_name}`);
-        return;
-      } catch (retryError) {
-        console.error(`\u274C Retry also failed for ${toolCall.tool_name}:`, retryError);
-      }
       get2().updateToolCallStatus(toolCall.tool_call_id, {
         status: "error",
         error: errorMessage,
@@ -1277,7 +1283,11 @@ function useChat({
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
-  }, []);
+    failAllPendingToolCalls("User cancelled the operation");
+    setStreamingIndicator(void 0);
+    setStreaming(false);
+    setLoading(false);
+  }, [failAllPendingToolCalls, setStreamingIndicator, setStreaming, setLoading]);
   return {
     isStreaming,
     messages,
@@ -1792,11 +1802,56 @@ function useAgentsByUsage(options) {
   };
 }
 
+// src/useModels.ts
+import { useState as useState7, useEffect as useEffect6, useCallback as useCallback8 } from "react";
+function useModels() {
+  const { client, error: clientError, isLoading: clientLoading } = useDistri();
+  const [providers, setProviders] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const [error, setError] = useState7(null);
+  const fetchModels = useCallback8(async () => {
+    if (!client) return;
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await client.fetchAvailableModels();
+      setProviders(result);
+    } catch (err) {
+      console.error("[useModels] Failed to fetch models:", err);
+      setError(err instanceof Error ? err : new Error("Failed to fetch models"));
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+  useEffect6(() => {
+    if (clientLoading) {
+      setLoading(true);
+      return;
+    }
+    if (clientError) {
+      setError(clientError);
+      setLoading(false);
+      return;
+    }
+    if (client) {
+      fetchModels();
+    } else {
+      setLoading(false);
+    }
+  }, [clientLoading, clientError, client, fetchModels]);
+  return {
+    providers,
+    loading: loading || clientLoading,
+    error: error || clientError,
+    refetch: fetchModels
+  };
+}
+
 // src/components/Chat.tsx
-import { useState as useState18, useCallback as useCallback17, useRef as useRef13, useEffect as useEffect15, useImperativeHandle, forwardRef as forwardRef5, useMemo as useMemo6 } from "react";
+import { useState as useState19, useCallback as useCallback18, useRef as useRef13, useEffect as useEffect16, useImperativeHandle, forwardRef as forwardRef5, useMemo as useMemo6 } from "react";
 
 // src/components/ChatInput.tsx
-import { useRef as useRef7, useEffect as useEffect8, useCallback as useCallback10, useState as useState10, useMemo as useMemo3 } from "react";
+import { useRef as useRef7, useEffect as useEffect9, useCallback as useCallback11, useState as useState11, useMemo as useMemo3 } from "react";
 
 // ../../node_modules/.pnpm/orderedmap@2.1.1/node_modules/orderedmap/dist/index.js
 function OrderedMap(content) {
@@ -17973,7 +18028,7 @@ function canInsertNode(state, nodeType) {
 }
 
 // ../../node_modules/.pnpm/@tiptap+react@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2__@tiptap+pm@2.27.2_react-dom_4dad981b9d8ee28eba93d4c829cfb5ca/node_modules/@tiptap/react/dist/index.js
-import React6, { forwardRef as forwardRef3, useState as useState7, useDebugValue, useLayoutEffect, useEffect as useEffect6, useRef as useRef5, createContext as createContext3, useContext as useContext3, version, createRef, memo, createElement } from "react";
+import React6, { forwardRef as forwardRef3, useState as useState8, useDebugValue, useLayoutEffect, useEffect as useEffect7, useRef as useRef5, createContext as createContext3, useContext as useContext3, version, createRef, memo, createElement } from "react";
 import ReactDOM, { flushSync } from "react-dom";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -18063,7 +18118,7 @@ function requireUseSyncExternalStoreShim_development() {
         return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
       }
       var objectIs = typeof Object.is === "function" ? Object.is : is;
-      var useState24 = React$1.useState, useEffect21 = React$1.useEffect, useLayoutEffect2 = React$1.useLayoutEffect, useDebugValue2 = React$1.useDebugValue;
+      var useState28 = React$1.useState, useEffect22 = React$1.useEffect, useLayoutEffect2 = React$1.useLayoutEffect, useDebugValue2 = React$1.useDebugValue;
       var didWarnOld18Alpha = false;
       var didWarnUncachedGetSnapshot = false;
       function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
@@ -18085,7 +18140,7 @@ function requireUseSyncExternalStoreShim_development() {
             }
           }
         }
-        var _useState = useState24({
+        var _useState = useState28({
           inst: {
             value,
             getSnapshot
@@ -18100,7 +18155,7 @@ function requireUseSyncExternalStoreShim_development() {
             });
           }
         }, [subscribe, value, getSnapshot]);
-        useEffect21(function() {
+        useEffect22(function() {
           if (checkIfSnapshotChanged(inst)) {
             forceUpdate({
               inst
@@ -18419,9 +18474,9 @@ function requireWithSelector_development() {
       }
       var objectIs = typeof Object.is === "function" ? Object.is : is;
       var useSyncExternalStore = shim2.useSyncExternalStore;
-      var useRef14 = React$1.useRef, useEffect21 = React$1.useEffect, useMemo10 = React$1.useMemo, useDebugValue2 = React$1.useDebugValue;
+      var useRef16 = React$1.useRef, useEffect22 = React$1.useEffect, useMemo11 = React$1.useMemo, useDebugValue2 = React$1.useDebugValue;
       function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-        var instRef = useRef14(null);
+        var instRef = useRef16(null);
         var inst;
         if (instRef.current === null) {
           inst = {
@@ -18432,7 +18487,7 @@ function requireWithSelector_development() {
         } else {
           inst = instRef.current;
         }
-        var _useMemo = useMemo10(function() {
+        var _useMemo = useMemo11(function() {
           var hasMemo = false;
           var memoizedSnapshot;
           var memoizedSelection;
@@ -18476,7 +18531,7 @@ function requireWithSelector_development() {
           return [getSnapshotWithSelector, getServerSnapshotWithSelector];
         }, [getSnapshot, getServerSnapshot, selector, isEqual]), getSelection2 = _useMemo[0], getServerSelection = _useMemo[1];
         var value = useSyncExternalStore(subscribe, getSelection2, getServerSelection);
-        useEffect21(function() {
+        useEffect22(function() {
           inst.hasValue = true;
           inst.value = value;
         }, [value]);
@@ -18497,7 +18552,7 @@ if (process.env.NODE_ENV === "production") {
   withSelector.exports = requireWithSelector_development();
 }
 var withSelectorExports = withSelector.exports;
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect6;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect7;
 var EditorStateManager = class {
   constructor(initialEditor) {
     this.transactionNumber = 0;
@@ -18557,7 +18612,7 @@ var EditorStateManager = class {
 };
 function useEditorState(options) {
   var _a;
-  const [editorStateManager] = useState7(() => new EditorStateManager(options.editor));
+  const [editorStateManager] = useState8(() => new EditorStateManager(options.editor));
   const selectedState = withSelectorExports.useSyncExternalStoreWithSelector(editorStateManager.subscribe, editorStateManager.getSnapshot, editorStateManager.getServerSnapshot, options.selector, (_a = options.equalityFn) !== null && _a !== void 0 ? _a : deepEqual);
   useIsomorphicLayoutEffect(() => {
     return editorStateManager.watch(options.editor);
@@ -18781,10 +18836,10 @@ var EditorInstanceManager = class _EditorInstanceManager {
 function useEditor(options = {}, deps = []) {
   const mostRecentOptions = useRef5(options);
   mostRecentOptions.current = options;
-  const [instanceManager] = useState7(() => new EditorInstanceManager(mostRecentOptions));
+  const [instanceManager] = useState8(() => new EditorInstanceManager(mostRecentOptions));
   const editor = shimExports.useSyncExternalStore(instanceManager.subscribe, instanceManager.getEditor, instanceManager.getServerSnapshot);
   useDebugValue(editor);
-  useEffect6(instanceManager.onRender(deps));
+  useEffect7(instanceManager.onRender(deps));
   useEditorState({
     editor,
     selector: ({ transactionNumber }) => {
@@ -20840,18 +20895,18 @@ var Placeholder = Extension.create({
 import { Send, Square, X, Mic as Mic2, MicOff as MicOff2, Radio, Globe, Plus } from "lucide-react";
 
 // src/components/VoiceInput.tsx
-import { useState as useState9, useCallback as useCallback9, useEffect as useEffect7 } from "react";
+import { useState as useState10, useCallback as useCallback10, useEffect as useEffect8 } from "react";
 import { Mic, MicOff, Loader2 } from "lucide-react";
 import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";
 
 // src/hooks/useSpeechToText.ts
-import { useCallback as useCallback8, useRef as useRef6, useState as useState8 } from "react";
+import { useCallback as useCallback9, useRef as useRef6, useState as useState9 } from "react";
 var useSpeechToText = () => {
   const { client } = useDistri();
-  const [isTranscribing, setIsTranscribing] = useState8(false);
-  const [isStreaming, setIsStreaming] = useState8(false);
+  const [isTranscribing, setIsTranscribing] = useState9(false);
+  const [isStreaming, setIsStreaming] = useState9(false);
   const streamingConnectionRef = useRef6(null);
-  const transcribe = useCallback8(async (audioBlob, config = {}) => {
+  const transcribe = useCallback9(async (audioBlob, config = {}) => {
     if (!client) {
       throw new Error("DistriClient not initialized");
     }
@@ -20866,7 +20921,7 @@ var useSpeechToText = () => {
       setIsTranscribing(false);
     }
   }, [client, isTranscribing]);
-  const startStreamingTranscription = useCallback8(async (options = {}) => {
+  const startStreamingTranscription = useCallback9(async (options = {}) => {
     if (!client) {
       throw new Error("DistriClient not initialized");
     }
@@ -20907,7 +20962,7 @@ var useSpeechToText = () => {
       throw error;
     }
   }, [client, isStreaming]);
-  const stopStreamingTranscription = useCallback8(() => {
+  const stopStreamingTranscription = useCallback9(() => {
     if (streamingConnectionRef.current) {
       console.log("\u{1F3A4} Stopping streaming transcription");
       streamingConnectionRef.current.stop();
@@ -20916,14 +20971,14 @@ var useSpeechToText = () => {
     }
     setIsStreaming(false);
   }, []);
-  const sendAudio = useCallback8((audioData) => {
+  const sendAudio = useCallback9((audioData) => {
     if (streamingConnectionRef.current) {
       streamingConnectionRef.current.sendAudio(audioData);
     } else {
       console.warn("\u{1F3A4} No active streaming connection to send audio to");
     }
   }, []);
-  const sendText = useCallback8((text) => {
+  const sendText = useCallback9((text) => {
     if (streamingConnectionRef.current) {
       streamingConnectionRef.current.sendText(text);
     } else {
@@ -20954,10 +21009,10 @@ var VoiceInput = ({
   interimResults = true,
   useBrowserSpeechRecognition = true
 }) => {
-  const [isListening, setIsListening] = useState9(false);
-  const [showModal, setShowModal] = useState9(false);
-  const [interimTranscript, setInterimTranscript] = useState9("");
-  const [mediaRecorder, setMediaRecorder] = useState9(null);
+  const [isListening, setIsListening] = useState10(false);
+  const [showModal, setShowModal] = useState10(false);
+  const [interimTranscript, setInterimTranscript] = useState10("");
+  const [mediaRecorder, setMediaRecorder] = useState10(null);
   const {
     transcript,
     interimTranscript: browserInterimTranscript,
@@ -20969,7 +21024,7 @@ var VoiceInput = ({
   const speechToText = useSpeechToText();
   const useBrowser = useBrowserSpeechRecognition && browserSupportsSpeechRecognition;
   const canUseBackend = !useBrowser && speechToText;
-  useEffect7(() => {
+  useEffect8(() => {
     if (finalTranscript && finalTranscript.trim()) {
       onTranscript(finalTranscript.trim());
       resetTranscript();
@@ -20977,12 +21032,12 @@ var VoiceInput = ({
       setIsListening(false);
     }
   }, [finalTranscript, onTranscript, resetTranscript]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (useBrowser) {
       setInterimTranscript(browserInterimTranscript || transcript);
     }
   }, [browserInterimTranscript, transcript, useBrowser]);
-  const startListening = useCallback9(async () => {
+  const startListening = useCallback10(async () => {
     if (disabled) return;
     setShowModal(true);
     setIsListening(true);
@@ -21055,7 +21110,7 @@ var VoiceInput = ({
       setIsListening(false);
     }
   }, [canUseBackend, disabled, interimResults, language, onError, onTranscript, speechToText, useBrowser]);
-  const stopListening = useCallback9(() => {
+  const stopListening = useCallback10(() => {
     if (useBrowser) {
       SpeechRecognition.stopListening();
     } else if (mediaRecorder && mediaRecorder.state === "recording") {
@@ -21072,7 +21127,7 @@ var VoiceInput = ({
     setInterimTranscript("");
     resetTranscript();
   }, [useBrowser, mediaRecorder, interimTranscript, onTranscript, resetTranscript]);
-  const handleCancel = useCallback9(() => {
+  const handleCancel = useCallback10(() => {
     if (useBrowser) {
       SpeechRecognition.stopListening();
     } else if (mediaRecorder && mediaRecorder.state === "recording") {
@@ -21086,7 +21141,7 @@ var VoiceInput = ({
     setInterimTranscript("");
     resetTranscript();
   }, [useBrowser, mediaRecorder, resetTranscript]);
-  useEffect7(() => {
+  useEffect8(() => {
     let timeoutId;
     if (isListening && !listening && interimTranscript.trim()) {
       timeoutId = setTimeout(() => {
@@ -21187,8 +21242,8 @@ var ChatInput = ({
 }) => {
   const fileInputRef = useRef7(null);
   const mediaRecorderRef = useRef7(null);
-  const [isRecording, setIsRecording] = useState10(false);
-  const [recordingTime, setRecordingTime] = useState10(0);
+  const [isRecording, setIsRecording] = useState11(false);
+  const [recordingTime, setRecordingTime] = useState11(0);
   const imageAttachments = useMemo3(() => attachedImages ?? [], [attachedImages]);
   const onChangeRef = useRef7(onChange);
   const handleSendRef = useRef7(() => {
@@ -21229,20 +21284,20 @@ var ChatInput = ({
       }
     }
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [editor, disabled]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (editor && editor.getText() !== value) {
       editor.commands.setContent(value || "");
     }
   }, [value, editor]);
-  useEffect8(() => {
+  useEffect9(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  const convertFileToBase64 = useCallback10((file) => {
+  const convertFileToBase64 = useCallback11((file) => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.onload = () => {
@@ -21257,14 +21312,14 @@ var ChatInput = ({
       reader.readAsDataURL(file);
     });
   }, []);
-  const handleFileSelect = useCallback10((e) => {
+  const handleFileSelect = useCallback11((e) => {
     const files = e.target.files;
     if (files && files.length > 0 && onAddImages) {
       onAddImages(files);
     }
     e.target.value = "";
   }, [onAddImages]);
-  const startRecording = useCallback10(async () => {
+  const startRecording = useCallback11(async () => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       const mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
@@ -21293,7 +21348,7 @@ var ChatInput = ({
       console.error("Error starting recording:", error);
     }
   }, [onVoiceRecord]);
-  const stopRecording = useCallback10(() => {
+  const stopRecording = useCallback11(() => {
     if (mediaRecorderRef.current && isRecording) {
       if (mediaRecorderRef.current._timer) {
         clearInterval(mediaRecorderRef.current._timer);
@@ -21303,23 +21358,23 @@ var ChatInput = ({
       setRecordingTime(0);
     }
   }, [isRecording]);
-  const handleVoiceToggle = useCallback10(() => {
+  const handleVoiceToggle = useCallback11(() => {
     if (isRecording) {
       stopRecording();
     } else {
       startRecording();
     }
   }, [isRecording, startRecording, stopRecording]);
-  const handleBrowserToggle = useCallback10(() => {
+  const handleBrowserToggle = useCallback11(() => {
     if (onToggleBrowser) {
       onToggleBrowser(!browserEnabled);
     }
   }, [onToggleBrowser, browserEnabled]);
-  const handleSpeechTranscript = useCallback10((transcript) => {
+  const handleSpeechTranscript = useCallback11((transcript) => {
     onChangeRef.current(transcript);
     onSpeechTranscript?.(transcript);
   }, [onSpeechTranscript]);
-  const handleSend = useCallback10(async () => {
+  const handleSend = useCallback11(async () => {
     if (!value.trim() && imageAttachments.length === 0 || disabled || isStreaming) {
       return;
     }
@@ -21356,7 +21411,7 @@ var ChatInput = ({
       onStop();
     }
   };
-  useEffect8(() => {
+  useEffect9(() => {
     handleSendRef.current = handleSend;
   }, [handleSend]);
   const hasContent = value.trim().length > 0 || imageAttachments.length > 0;
@@ -21593,12 +21648,12 @@ ${JSON.stringify(part, null, 2)}
 }
 
 // src/components/renderers/ImageRenderer.tsx
-import { useState as useState11, useCallback as useCallback11, useEffect as useEffect9 } from "react";
+import { useState as useState12, useCallback as useCallback12, useEffect as useEffect10 } from "react";
 import { createPortal } from "react-dom";
 import { X as X2 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var ImageDialog = ({ src, alt, onClose }) => {
-  useEffect9(() => {
+  useEffect10(() => {
     const handleKeyDown2 = (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -21607,7 +21662,7 @@ var ImageDialog = ({ src, alt, onClose }) => {
     document.addEventListener("keydown", handleKeyDown2);
     return () => document.removeEventListener("keydown", handleKeyDown2);
   }, [onClose]);
-  useEffect9(() => {
+  useEffect10(() => {
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "";
@@ -21654,8 +21709,8 @@ var ImageRenderer = ({
   imageParts,
   className = ""
 }) => {
-  const [viewingImage, setViewingImage] = useState11(null);
-  const handleClose = useCallback11(() => {
+  const [viewingImage, setViewingImage] = useState12(null);
+  const handleClose = useCallback12(() => {
     setViewingImage(null);
   }, []);
   if (!imageParts || imageParts.length === 0) {
@@ -21968,12 +22023,82 @@ var AssistantMessageRenderer = ({
   ] });
 };
 
-// src/components/renderers/ThinkingRenderer.tsx
+// src/components/renderers/thinkingPhrases.json
+var thinkingPhrases_default = { planning: [{ text: "Brewing something good", emoji: "\u2615", icon: "coffee" }, { text: "Pulling the right strings", emoji: "\u{1F3AD}", icon: "wand" }, { text: "Assembling the crew", emoji: "\u{1F91D}", icon: "users" }, { text: "Plotting world domination", emoji: "\u{1F5FA}\uFE0F", icon: "map" }, { text: "Sharpening the strategy", emoji: "\u265F\uFE0F", icon: "swords" }, { text: "Loading the master plan", emoji: "\u{1F3AF}", icon: "target" }, { text: "Cooking with gas now", emoji: "\u{1F525}", icon: "flame" }, { text: "Spinning up the agents", emoji: "\u26A1", icon: "zap" }], replanning: [{ text: "Plot twist incoming", emoji: "\u{1F504}", icon: "refresh-cw" }, { text: "Pivoting gracefully", emoji: "\u{1FA70}", icon: "sparkles" }, { text: "Taking a different angle", emoji: "\u{1F9ED}", icon: "compass" }, { text: "Recalibrating the vibe", emoji: "\u{1F39B}\uFE0F", icon: "sliders" }, { text: "New plan, better plan", emoji: "\u2728", icon: "sparkles" }], thinking: [{ text: "Hold my coffee", emoji: "\u2615", icon: "coffee" }, { text: "Crunching the numbers", emoji: "\u{1F9EE}", icon: "calculator" }, { text: "Working some magic", emoji: "\u{1FA84}", icon: "wand" }, { text: "Almost got it", emoji: "\u{1F3C1}", icon: "flag" }, { text: "Neurons firing", emoji: "\u{1F9E0}", icon: "brain" }, { text: "On it like a bonnet", emoji: "\u{1F3A9}", icon: "zap" }, { text: "Deep in the zone", emoji: "\u{1F3A7}", icon: "headphones" }, { text: "Wrangling the bits", emoji: "\u{1F920}", icon: "cog" }] };
+
+// src/components/renderers/DistriLoadingIcon.tsx
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var LoadingShimmer = ({ text, className }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: `w-full ${className || ""}`, children: [
-    /* @__PURE__ */ jsx13("span", { className: "font-medium text-shimmer", children: text }),
+var DistriLoadingIcon = ({
+  className = "",
+  size = 16
+}) => {
+  return /* @__PURE__ */ jsxs8("span", { className: `inline-flex items-center ${className}`, children: [
+    /* @__PURE__ */ jsxs8(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 361 437",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "distri-loading-icon",
+        children: [
+          /* @__PURE__ */ jsx13(
+            "path",
+            {
+              d: "M207 148C276.036 148 332 203.964 332 273C332 342.036 276.036 398 207 398H82V148H207Z",
+              stroke: "currentColor",
+              strokeWidth: "50"
+            }
+          ),
+          /* @__PURE__ */ jsx13("path", { d: "M147 63H187V123H147V63Z", fill: "currentColor" }),
+          /* @__PURE__ */ jsx13(
+            "path",
+            {
+              d: "M220 258C220 246.954 228.954 238 240 238C251.046 238 260 246.954 260 258V288C260 299.046 251.046 308 240 308C228.954 308 220 299.046 220 288V258Z",
+              fill: "currentColor",
+              className: "distri-eye"
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "path",
+            {
+              d: "M136 258C136 246.954 144.954 238 156 238C167.046 238 176 246.954 176 258V288C176 299.046 167.046 308 156 308C144.954 308 136 299.046 136 288V258Z",
+              fill: "currentColor",
+              className: "distri-eye"
+            }
+          ),
+          /* @__PURE__ */ jsx13("path", { d: "M2 215H42V315H2V215Z", fill: "currentColor" }),
+          /* @__PURE__ */ jsx13("circle", { cx: "167", cy: "40", r: "40", fill: "currentColor" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx13("style", { children: `
+        @keyframes distri-slide {
+          0%, 100% { transform: translateX(0); }
+          50% { transform: translateX(4px); }
+        }
+        @keyframes distri-blink {
+          0%, 90%, 100% { opacity: 1; }
+          95% { opacity: 0.1; }
+        }
+        .distri-loading-icon {
+          animation: distri-slide 1.5s ease-in-out infinite;
+        }
+        .distri-eye {
+          animation: distri-blink 3s ease-in-out infinite;
+        }
+      ` })
+  ] });
+};
+
+// src/components/renderers/ThinkingRenderer.tsx
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var LoadingShimmer = ({ text, className, showIcon = false }) => {
+  return /* @__PURE__ */ jsxs9("div", { className: `flex items-center gap-2 ${className || ""}`, children: [
+    showIcon && /* @__PURE__ */ jsx14(DistriLoadingIcon, { size: 14, className: "text-primary/70" }),
+    /* @__PURE__ */ jsx14("span", { className: "font-medium text-shimmer", children: text }),
+    /* @__PURE__ */ jsx14("style", { children: `
           @keyframes shimmer {
             0% { background-position: -150% 0; }
             100% { background-position: 150% 0; }
@@ -21992,23 +22117,25 @@ var LoadingShimmer = ({ text, className }) => {
 var ThinkingRenderer = ({
   className = ""
 }) => {
-  const component = LoadingShimmer({ text: "Thinking..." });
-  return /* @__PURE__ */ jsx13("div", { className: `flex items-start gap-3 py-3 ${className}`, children: /* @__PURE__ */ jsx13("div", { className: "w-full", children: /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: component }) }) });
+  const pool = thinkingPhrases_default.thinking;
+  const pick = pool[Math.floor(Math.random() * pool.length)];
+  const component = LoadingShimmer({ text: `${pick.text}\u2026`, showIcon: true });
+  return /* @__PURE__ */ jsx14("div", { className: `flex items-start gap-3 py-3 ${className}`, children: /* @__PURE__ */ jsx14("div", { className: "w-full", children: /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: component }) }) });
 };
 
 // src/components/renderers/MessageFeedback.tsx
-import { useState as useState13, useEffect as useEffect10, useCallback as useCallback13 } from "react";
+import { useState as useState14, useEffect as useEffect11, useCallback as useCallback14 } from "react";
 import { ThumbsUp, ThumbsDown, Loader2 as Loader22, MessageSquare } from "lucide-react";
 
 // src/hooks/useMessageFeedback.ts
-import { useState as useState12, useCallback as useCallback12 } from "react";
+import { useState as useState13, useCallback as useCallback13 } from "react";
 function useMessageReadStatus(options) {
   const { threadId, messageId, autoFetch = false } = options;
   const { client } = useDistri();
-  const [readStatus, setReadStatus] = useState12(null);
-  const [loading, setLoading] = useState12(autoFetch);
-  const [error, setError] = useState12(null);
-  const refetch = useCallback12(async () => {
+  const [readStatus, setReadStatus] = useState13(null);
+  const [loading, setLoading] = useState13(autoFetch);
+  const [error, setError] = useState13(null);
+  const refetch = useCallback13(async () => {
     if (!client) {
       setError(new Error("Client not available"));
       return;
@@ -22025,7 +22152,7 @@ function useMessageReadStatus(options) {
       setLoading(false);
     }
   }, [client, threadId, messageId]);
-  const markAsRead = useCallback12(async () => {
+  const markAsRead = useCallback13(async () => {
     if (!client) {
       setError(new Error("Client not available"));
       return null;
@@ -22055,10 +22182,10 @@ function useMessageReadStatus(options) {
 function useThreadReadStatus(options) {
   const { threadId, enabled = true } = options;
   const { client } = useDistri();
-  const [readStatuses, setReadStatuses] = useState12([]);
-  const [loading, setLoading] = useState12(enabled);
-  const [error, setError] = useState12(null);
-  const refetch = useCallback12(async () => {
+  const [readStatuses, setReadStatuses] = useState13([]);
+  const [loading, setLoading] = useState13(enabled);
+  const [error, setError] = useState13(null);
+  const refetch = useCallback13(async () => {
     if (!client) {
       setError(new Error("Client not available"));
       return;
@@ -22075,13 +22202,13 @@ function useThreadReadStatus(options) {
       setLoading(false);
     }
   }, [client, threadId]);
-  const isRead = useCallback12(
+  const isRead = useCallback13(
     (messageId) => {
       return readStatuses.some((status) => status.message_id === messageId);
     },
     [readStatuses]
   );
-  const markAsRead = useCallback12(
+  const markAsRead = useCallback13(
     async (messageId) => {
       if (!client) {
         setError(new Error("Client not available"));
@@ -22117,10 +22244,10 @@ function useThreadReadStatus(options) {
 function useMessageVote(options) {
   const { threadId, messageId, autoFetch = false } = options;
   const { client } = useDistri();
-  const [summary, setSummary] = useState12(null);
-  const [loading, setLoading] = useState12(autoFetch);
-  const [error, setError] = useState12(null);
-  const refetch = useCallback12(async () => {
+  const [summary, setSummary] = useState13(null);
+  const [loading, setLoading] = useState13(autoFetch);
+  const [error, setError] = useState13(null);
+  const refetch = useCallback13(async () => {
     if (!client) {
       setError(new Error("Client not available"));
       return;
@@ -22137,7 +22264,7 @@ function useMessageVote(options) {
       setLoading(false);
     }
   }, [client, threadId, messageId]);
-  const vote = useCallback12(
+  const vote = useCallback13(
     async (voteType, comment) => {
       if (!client) {
         setError(new Error("Client not available"));
@@ -22178,8 +22305,8 @@ function useMessageVote(options) {
     },
     [client, threadId, messageId]
   );
-  const upvote = useCallback12(() => vote("upvote"), [vote]);
-  const downvote = useCallback12(
+  const upvote = useCallback13(() => vote("upvote"), [vote]);
+  const downvote = useCallback13(
     (comment) => {
       if (!comment || comment.trim() === "") {
         setError(new Error("Downvotes require a comment"));
@@ -22189,7 +22316,7 @@ function useMessageVote(options) {
     },
     [vote]
   );
-  const removeVote = useCallback12(async () => {
+  const removeVote = useCallback13(async () => {
     if (!client) {
       setError(new Error("Client not available"));
       return;
@@ -22229,10 +22356,10 @@ function useMessageVote(options) {
 function useMessageVotes(options) {
   const { threadId, messageId, enabled = false } = options;
   const { client } = useDistri();
-  const [votes, setVotes] = useState12([]);
-  const [loading, setLoading] = useState12(enabled);
-  const [error, setError] = useState12(null);
-  const refetch = useCallback12(async () => {
+  const [votes, setVotes] = useState13([]);
+  const [loading, setLoading] = useState13(enabled);
+  const [error, setError] = useState13(null);
+  const refetch = useCallback13(async () => {
     if (!client) {
       setError(new Error("Client not available"));
       return;
@@ -22258,7 +22385,7 @@ function useMessageVotes(options) {
 }
 
 // src/components/renderers/MessageFeedback.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var MessageFeedback = ({
   threadId,
   messageId,
@@ -22266,9 +22393,9 @@ var MessageFeedback = ({
   className,
   onVote
 }) => {
-  const [showCommentInput, setShowCommentInput] = useState13(false);
-  const [comment, setComment] = useState13("");
-  const [pendingDownvote, setPendingDownvote] = useState13(false);
+  const [showCommentInput, setShowCommentInput] = useState14(false);
+  const [comment, setComment] = useState14("");
+  const [pendingDownvote, setPendingDownvote] = useState14(false);
   const {
     summary,
     loading,
@@ -22278,10 +22405,10 @@ var MessageFeedback = ({
     removeVote,
     refetch
   } = useMessageVote({ threadId, messageId, autoFetch: false });
-  useEffect10(() => {
+  useEffect11(() => {
     refetch();
   }, [refetch]);
-  const handleUpvote = useCallback13(async () => {
+  const handleUpvote = useCallback14(async () => {
     if (loading) return;
     if (summary?.user_vote === "upvote") {
       await removeVote();
@@ -22292,7 +22419,7 @@ var MessageFeedback = ({
       }
     }
   }, [loading, summary, upvote, removeVote, onVote]);
-  const handleDownvoteClick = useCallback13(() => {
+  const handleDownvoteClick = useCallback14(() => {
     if (loading) return;
     if (summary?.user_vote === "downvote") {
       removeVote();
@@ -22301,7 +22428,7 @@ var MessageFeedback = ({
     setPendingDownvote(true);
     setShowCommentInput(true);
   }, [loading, summary, removeVote]);
-  const handleDownvoteSubmit = useCallback13(async () => {
+  const handleDownvoteSubmit = useCallback14(async () => {
     if (!comment.trim()) return;
     const result = await downvote(comment.trim());
     if (result) {
@@ -22313,16 +22440,16 @@ var MessageFeedback = ({
       }
     }
   }, [comment, downvote, onVote]);
-  const handleCancelDownvote = useCallback13(() => {
+  const handleCancelDownvote = useCallback14(() => {
     setShowCommentInput(false);
     setComment("");
     setPendingDownvote(false);
   }, []);
   const isUpvoted = summary?.user_vote === "upvote";
   const isDownvoted = summary?.user_vote === "downvote";
-  return /* @__PURE__ */ jsxs9("div", { className: cn("flex flex-col gap-2", className), children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs10(
         "button",
         {
           onClick: handleUpvote,
@@ -22337,12 +22464,12 @@ var MessageFeedback = ({
           "aria-label": isUpvoted ? "Remove upvote" : "Upvote",
           "aria-pressed": isUpvoted,
           children: [
-            loading ? /* @__PURE__ */ jsx14(Loader22, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx14(ThumbsUp, { className: cn("h-3.5 w-3.5", isUpvoted && "fill-current") }),
-            !compact && summary && summary.upvotes > 0 && /* @__PURE__ */ jsx14("span", { children: summary.upvotes })
+            loading ? /* @__PURE__ */ jsx15(Loader22, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx15(ThumbsUp, { className: cn("h-3.5 w-3.5", isUpvoted && "fill-current") }),
+            !compact && summary && summary.upvotes > 0 && /* @__PURE__ */ jsx15("span", { children: summary.upvotes })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsxs10(
         "button",
         {
           onClick: handleDownvoteClick,
@@ -22357,18 +22484,18 @@ var MessageFeedback = ({
           "aria-label": isDownvoted ? "Remove downvote" : "Downvote",
           "aria-pressed": isDownvoted,
           children: [
-            loading ? /* @__PURE__ */ jsx14(Loader22, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx14(ThumbsDown, { className: cn("h-3.5 w-3.5", isDownvoted && "fill-current") }),
-            !compact && summary && summary.downvotes > 0 && /* @__PURE__ */ jsx14("span", { children: summary.downvotes })
+            loading ? /* @__PURE__ */ jsx15(Loader22, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx15(ThumbsDown, { className: cn("h-3.5 w-3.5", isDownvoted && "fill-current") }),
+            !compact && summary && summary.downvotes > 0 && /* @__PURE__ */ jsx15("span", { children: summary.downvotes })
           ]
         }
       )
     ] }),
-    showCommentInput && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2 p-3 bg-muted/50 rounded-lg border border-border/50", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx14(MessageSquare, { className: "h-3.5 w-3.5" }),
-        /* @__PURE__ */ jsx14("span", { children: "Please tell us what was wrong with this response" })
+    showCommentInput && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2 p-3 bg-muted/50 rounded-lg border border-border/50", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx15(MessageSquare, { className: "h-3.5 w-3.5" }),
+        /* @__PURE__ */ jsx15("span", { children: "Please tell us what was wrong with this response" })
       ] }),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "textarea",
         {
           value: comment,
@@ -22383,8 +22510,8 @@ var MessageFeedback = ({
           autoFocus: true
         }
       ),
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 justify-end", children: [
-        /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 justify-end", children: [
+        /* @__PURE__ */ jsx15(
           "button",
           {
             onClick: handleCancelDownvote,
@@ -22396,7 +22523,7 @@ var MessageFeedback = ({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "button",
           {
             onClick: handleDownvoteSubmit,
@@ -22407,29 +22534,29 @@ var MessageFeedback = ({
               "hover:bg-primary/90 transition-colors",
               "disabled:opacity-50 disabled:cursor-not-allowed"
             ),
-            children: loading ? /* @__PURE__ */ jsx14(Loader22, { className: "h-3 w-3 animate-spin" }) : "Submit Feedback"
+            children: loading ? /* @__PURE__ */ jsx15(Loader22, { className: "h-3 w-3 animate-spin" }) : "Submit Feedback"
           }
         )
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx14("div", { className: "text-xs text-destructive", children: error.message })
+    error && /* @__PURE__ */ jsx15("div", { className: "text-xs text-destructive", children: error.message })
   ] });
 };
 
 // src/components/renderers/StepBasedRenderer.tsx
 import { Clock, CheckCircle as CheckCircle2, AlertCircle } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var StepIndicator = ({ step }) => {
   const getStatusIcon2 = () => {
     switch (step.status) {
       case "running":
-        return /* @__PURE__ */ jsx15("div", { className: "animate-spin rounded-full h-3 w-3 border-b-2 border-primary" });
+        return /* @__PURE__ */ jsx16("div", { className: "animate-spin rounded-full h-3 w-3 border-b-2 border-primary" });
       case "completed":
-        return /* @__PURE__ */ jsx15(CheckCircle2, { className: "h-3 w-3 text-green-500" });
+        return /* @__PURE__ */ jsx16(CheckCircle2, { className: "h-3 w-3 text-green-500" });
       case "failed":
-        return /* @__PURE__ */ jsx15(AlertCircle, { className: "h-3 w-3 text-red-500" });
+        return /* @__PURE__ */ jsx16(AlertCircle, { className: "h-3 w-3 text-red-500" });
       default:
-        return /* @__PURE__ */ jsx15(Clock, { className: "h-3 w-3 text-muted-foreground" });
+        return /* @__PURE__ */ jsx16(Clock, { className: "h-3 w-3 text-muted-foreground" });
     }
   };
   const getStatusText = () => {
@@ -22448,7 +22575,7 @@ var StepIndicator = ({ step }) => {
   const renderShimmerForRunning = () => {
     if (step.status !== "running") return null;
     const text = step.title || "AI is writing...";
-    return /* @__PURE__ */ jsx15(LoadingShimmer, { text, className: "text-sm" });
+    return /* @__PURE__ */ jsx16(LoadingShimmer, { text, className: "text-sm" });
   };
   const getDuration = () => {
     if (step.startTime) {
@@ -22459,19 +22586,19 @@ var StepIndicator = ({ step }) => {
     return "";
   };
   if (step.status === "completed") {
-    return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-xs text-muted-foreground mb-1 opacity-60", children: [
+    return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-xs text-muted-foreground mb-1 opacity-60", children: [
       getStatusIcon2(),
-      /* @__PURE__ */ jsx15("span", { className: "font-medium", children: step.title }),
-      /* @__PURE__ */ jsxs10("span", { children: [
+      /* @__PURE__ */ jsx16("span", { className: "font-medium", children: step.title }),
+      /* @__PURE__ */ jsxs11("span", { children: [
         "(",
         getDuration(),
         ")"
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-sm text-muted-foreground mb-3", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-sm text-muted-foreground mb-3", children: [
     getStatusIcon2(),
-    step.status === "running" ? renderShimmerForRunning() : /* @__PURE__ */ jsx15("span", { className: "font-medium", children: getStatusText() })
+    step.status === "running" ? renderShimmerForRunning() : /* @__PURE__ */ jsx16("span", { className: "font-medium", children: getStatusText() })
   ] });
 };
 var StepBasedRenderer = ({
@@ -22487,15 +22614,15 @@ var StepBasedRenderer = ({
   const stepId = distriMessage.step_id;
   const step = stepId ? steps.get(stepId) : null;
   if (distriMessage.role === "user") {
-    return /* @__PURE__ */ jsx15(UserMessageRenderer, { message: distriMessage });
+    return /* @__PURE__ */ jsx16(UserMessageRenderer, { message: distriMessage });
   }
   if (distriMessage.role === "assistant") {
     const showFeedback = enableFeedback && threadId && distriMessage.id && step?.status !== "running";
-    return /* @__PURE__ */ jsx15("div", { className: "flex items-start gap-4", children: /* @__PURE__ */ jsxs10("div", { className: "w-full", children: [
-      (distriMessage.agent_id || distriMessage.agent_name) && /* @__PURE__ */ jsx15("div", { className: "mb-2", children: /* @__PURE__ */ jsx15("span", { className: "inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-primary/10 text-primary border border-primary/20", children: distriMessage.agent_name || distriMessage.agent_id }) }),
-      step && /* @__PURE__ */ jsx15(StepIndicator, { step }),
-      /* @__PURE__ */ jsx15("div", { className: "transition-all duration-200 ease-in-out", children: /* @__PURE__ */ jsx15(AssistantMessageRenderer, { message: distriMessage }) }),
-      showFeedback && /* @__PURE__ */ jsx15("div", { className: "mt-3 pt-2 border-t border-border/30", children: /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16("div", { className: "flex items-start gap-4", children: /* @__PURE__ */ jsxs11("div", { className: "w-full", children: [
+      (distriMessage.agent_id || distriMessage.agent_name) && /* @__PURE__ */ jsx16("div", { className: "mb-2", children: /* @__PURE__ */ jsx16("span", { className: "inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-primary/10 text-primary border border-primary/20", children: distriMessage.agent_name || distriMessage.agent_id }) }),
+      step && /* @__PURE__ */ jsx16(StepIndicator, { step }),
+      /* @__PURE__ */ jsx16("div", { className: "transition-all duration-200 ease-in-out", children: /* @__PURE__ */ jsx16(AssistantMessageRenderer, { message: distriMessage }) }),
+      showFeedback && /* @__PURE__ */ jsx16("div", { className: "mt-3 pt-2 border-t border-border/30", children: /* @__PURE__ */ jsx16(
         MessageFeedback,
         {
           threadId,
@@ -22509,13 +22636,13 @@ var StepBasedRenderer = ({
 };
 
 // src/components/renderers/ToolExecutionRenderer.tsx
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { ChevronDown, ChevronRight, CheckCircle as CheckCircle3, XCircle as XCircle2, Clock as Clock2 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var renderPart = (part, index) => {
   switch (part.part_type) {
     case "text":
-      return /* @__PURE__ */ jsx16("div", { className: "whitespace-pre-wrap break-words", children: part.data }, index);
+      return /* @__PURE__ */ jsx17("div", { className: "whitespace-pre-wrap break-words", children: part.data }, index);
     case "image": {
       const imageData = part.data;
       let src;
@@ -22524,9 +22651,9 @@ var renderPart = (part, index) => {
       } else if (imageData.type === "url" && imageData.url) {
         src = imageData.url;
       } else {
-        return /* @__PURE__ */ jsx16("div", { className: "text-muted-foreground italic", children: "Invalid image data" }, index);
+        return /* @__PURE__ */ jsx17("div", { className: "text-muted-foreground italic", children: "Invalid image data" }, index);
       }
-      return /* @__PURE__ */ jsx16("div", { className: "my-2", children: /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17("div", { className: "my-2", children: /* @__PURE__ */ jsx17(
         "img",
         {
           src,
@@ -22540,130 +22667,172 @@ var renderPart = (part, index) => {
       if (typeof data === "object" && data !== null && "success" in data) {
         const result = data;
         if (result.error) {
-          return /* @__PURE__ */ jsxs11("div", { className: "text-destructive", children: [
+          return /* @__PURE__ */ jsxs12("div", { className: "text-destructive", children: [
             "Error: ",
             result.error
           ] }, index);
         }
         if (result.result !== void 0) {
-          return /* @__PURE__ */ jsx16("pre", { className: "whitespace-pre-wrap break-words", children: typeof result.result === "string" ? result.result : JSON.stringify(result.result, null, 2) }, index);
+          return /* @__PURE__ */ jsx17("pre", { className: "whitespace-pre-wrap break-words", children: typeof result.result === "string" ? result.result : JSON.stringify(result.result, null, 2) }, index);
         }
-        return /* @__PURE__ */ jsx16("div", { className: "text-green-600", children: "Success" }, index);
+        return /* @__PURE__ */ jsx17("div", { className: "text-green-600", children: "Success" }, index);
       }
-      return /* @__PURE__ */ jsx16("pre", { className: "whitespace-pre-wrap break-words", children: JSON.stringify(data, null, 2) }, index);
+      return /* @__PURE__ */ jsx17("pre", { className: "whitespace-pre-wrap break-words", children: JSON.stringify(data, null, 2) }, index);
     }
     default:
-      return /* @__PURE__ */ jsx16("pre", { className: "whitespace-pre-wrap break-words", children: JSON.stringify(part, null, 2) }, index);
+      return /* @__PURE__ */ jsx17("pre", { className: "whitespace-pre-wrap break-words", children: JSON.stringify(part, null, 2) }, index);
   }
 };
 var renderToolResultParts = (result) => {
   if (!result.parts || result.parts.length === 0) {
     return "No result available";
   }
-  return /* @__PURE__ */ jsx16("div", { className: "space-y-2", children: result.parts.map((part, index) => renderPart(part, index)) });
+  return /* @__PURE__ */ jsx17("div", { className: "space-y-2", children: result.parts.map((part, index) => renderPart(part, index)) });
 };
-var getFriendlyToolMessage = (toolName, input) => {
+var formatToolCall = (toolName, input) => {
+  const str = (key) => input?.[key] || "?";
+  const truncate = (s, max) => s.length > max ? `${s.slice(0, max)}\u2026` : s;
   switch (toolName) {
+    case "load_skill":
+      return `load_skill("${str("skill_name")}")`;
+    case "run_skill_script": {
+      const step = input?.step_index;
+      return step != null ? `run_skill_script("${str("skill_name")}", step=${step})` : `run_skill_script("${str("skill_name")}")`;
+    }
+    case "create_skill":
+    case "delete_skill":
+      return `${toolName}("${input?.name || input?.skill_name || "?"}")`;
     case "search":
-      return `Searching "${input?.query || "unknown query"}"`;
-    case "call_search_agent":
-      return `Searching`;
-    case "read_values":
-      return `Reading values`;
-    case "get_sheet_info":
-      return `Getting sheet info`;
-    case "get_context_pack":
-      return `Understanding the spreadsheet`;
-    case "write_values":
-      return `Updating values`;
-    case "clear_values":
-      return `Clearing values`;
-    case "merge_cells":
-      return `Merging cells`;
-    case "call_blink_ops_agent":
-      return `Planning sheet updates`;
-    case "apply_blink_ops":
-      return `Applying sheet updates`;
-    default:
-      return `Executing ${toolName}`;
+      return `search("${truncate(str("query"), 60)}")`;
+    case "tool_search":
+      return `tool_search("${truncate(str("query"), 60)}")`;
+    case "execute_shell":
+      return `execute_shell("${truncate(str("command"), 60)}")`;
+    case "start_shell":
+    case "stop_shell":
+      return `${toolName}()`;
+    case "browsr_scrape":
+    case "browsr_crawl":
+      return `${toolName}("${truncate(str("url"), 60)}")`;
+    case "transfer_to_agent":
+      return `transfer_to_agent("${str("agent_name")}")`;
+    case "api_request": {
+      const method = input?.method || "GET";
+      const path = input?.path;
+      const url = input?.url;
+      if (url) return `api_request(${method} ${truncate(url, 50)})`;
+      if (path) return `api_request(${method} ${path})`;
+      return `api_request(${method})`;
+    }
+    case "final":
+    case "reflect":
+      return `${toolName}()`;
+    default: {
+      const compact = JSON.stringify(input || {});
+      return `${toolName}(${truncate(compact, 80)})`;
+    }
   }
 };
-var ToolCallCard = ({ toolCall, state, renderResultData }) => {
-  const [isExpanded, setIsExpanded] = useState14(false);
-  const [activeTab, setActiveTab] = useState14("output");
-  const friendlyMessage = getFriendlyToolMessage(toolCall.tool_name, toolCall.input);
+var summarizeResult = (state) => {
+  if (!state.result?.parts?.length) return null;
+  for (const part of state.result.parts) {
+    const p = part;
+    if (p.part_type === "text" && typeof p.data === "string") {
+      const text = p.data.trim();
+      return text.length > 120 ? `${text.slice(0, 120)}\u2026` : text;
+    }
+    if (p.part_type === "data" && typeof p.data === "object" && p.data !== null) {
+      const obj = p.data;
+      if (obj.error) return `Error: ${obj.error}`;
+      if (obj.data && typeof obj.data === "object") {
+        const inner = obj.data;
+        if (Array.isArray(inner)) return `${inner.length} items`;
+        const label = inner.name || inner.id || inner.title || inner.status;
+        if (label) return String(label);
+      }
+      if (obj.status && obj.data !== void 0) {
+        const compact = JSON.stringify(obj.data);
+        return compact.length > 100 ? `${compact.slice(0, 100)}\u2026` : compact;
+      }
+    }
+  }
+  return null;
+};
+var ToolCallCard = ({ toolCall, state, renderResultData, debug = false }) => {
+  const [isExpanded, setIsExpanded] = useState15(false);
+  const [activeTab, setActiveTab] = useState15("output");
+  const formatted = formatToolCall(toolCall.tool_name, toolCall.input);
   const executionTime = state?.endTime && state?.startTime ? state.endTime - state.startTime : void 0;
-  const renderTabs = () => /* @__PURE__ */ jsxs11("div", { className: "mt-2", children: [
-    /* @__PURE__ */ jsx16("div", { className: "mb-2 flex items-center gap-2", children: ["output", "input"].map((tab) => /* @__PURE__ */ jsx16(
+  const renderDebugTabs = () => /* @__PURE__ */ jsxs12("div", { className: "mt-1.5 ml-5", children: [
+    /* @__PURE__ */ jsx17("div", { className: "mb-1.5 flex items-center gap-1.5", children: ["output", "input"].map((tab) => /* @__PURE__ */ jsx17(
       "button",
       {
         onClick: () => setActiveTab(tab),
-        className: `text-xs px-2 py-1 rounded border transition-colors ${activeTab === tab ? "bg-primary text-primary-foreground border-primary" : "bg-muted text-muted-foreground hover:text-foreground"}`,
+        className: `text-[11px] px-1.5 py-0.5 rounded transition-colors ${activeTab === tab ? "bg-muted-foreground/20 text-foreground" : "text-muted-foreground hover:text-foreground"}`,
         children: tab === "output" ? "Output" : "Input"
       },
       tab
     )) }),
-    activeTab === "input" ? /* @__PURE__ */ jsx16("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap overflow-auto break-words border border-muted rounded-md p-3", children: JSON.stringify(toolCall.input, null, 2) }) : /* @__PURE__ */ jsx16("div", { className: "text-xs text-muted-foreground overflow-auto border border-muted rounded-md p-3", children: renderResultData(state) }),
-    state?.error && activeTab === "output" && /* @__PURE__ */ jsxs11("div", { className: "mt-2 text-xs text-destructive", children: [
-      "Error: ",
-      state.error
-    ] })
+    activeTab === "input" ? /* @__PURE__ */ jsx17("pre", { className: "text-[11px] text-muted-foreground whitespace-pre-wrap overflow-auto break-words bg-muted/50 rounded p-2 max-h-[200px]", children: JSON.stringify(toolCall.input, null, 2) }) : /* @__PURE__ */ jsx17("div", { className: "text-[11px] text-muted-foreground overflow-auto bg-muted/50 rounded p-2 max-h-[200px]", children: renderResultData(state) })
   ] });
   if (state?.status === "pending" || state?.status === "running") {
-    return /* @__PURE__ */ jsx16("div", { className: "mb-2", children: /* @__PURE__ */ jsx16(LoadingShimmer, { text: friendlyMessage }) });
+    return /* @__PURE__ */ jsx17("div", { className: "mb-1", children: /* @__PURE__ */ jsx17(LoadingShimmer, { text: formatted, className: "text-xs", showIcon: true }) });
   }
   if (state?.status === "completed") {
     const time = executionTime || 0;
-    return /* @__PURE__ */ jsxs11("div", { className: "mb-2", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx16(CheckCircle3, { className: "w-4 h-4 text-green-600" }),
-          /* @__PURE__ */ jsxs11("span", { children: [
-            friendlyMessage,
-            " completed",
-            time > 100 && /* @__PURE__ */ jsxs11("span", { className: "ml-1 text-xs", children: [
-              "(",
-              (time / 1e3).toFixed(1),
-              "s)"
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs11(
-          "button",
-          {
-            onClick: () => setIsExpanded(!isExpanded),
-            className: "flex items-center gap-1 text-xs transition-colors hover:text-foreground",
-            children: [
-              isExpanded ? /* @__PURE__ */ jsx16(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx16(ChevronRight, { className: "h-3 w-3" }),
-              "View details"
-            ]
-          }
-        )
+    const summary = summarizeResult(state);
+    return /* @__PURE__ */ jsxs12("div", { className: "mb-1 group", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx17(CheckCircle3, { className: "w-3 h-3 text-green-600 mt-0.5 shrink-0" }),
+        /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs12(
+            "span",
+            {
+              className: debug ? "cursor-pointer hover:text-foreground transition-colors" : "",
+              onClick: debug ? () => setIsExpanded(!isExpanded) : void 0,
+              children: [
+                formatted,
+                time > 100 && /* @__PURE__ */ jsxs12("span", { className: "ml-1 text-muted-foreground/60", children: [
+                  (time / 1e3).toFixed(1),
+                  "s"
+                ] }),
+                debug && (isExpanded ? /* @__PURE__ */ jsx17(ChevronDown, { className: "inline h-3 w-3 ml-0.5" }) : /* @__PURE__ */ jsx17(ChevronRight, { className: "inline h-3 w-3 ml-0.5 opacity-0 group-hover:opacity-100 transition-opacity" }))
+              ]
+            }
+          ),
+          summary && !isExpanded && /* @__PURE__ */ jsx17("div", { className: "text-muted-foreground/60 truncate", children: `\u23BF ${summary}` })
+        ] })
       ] }),
-      isExpanded && renderTabs()
+      debug && isExpanded && renderDebugTabs()
     ] });
   }
   if (state?.status === "error") {
-    return /* @__PURE__ */ jsxs11("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "mb-2 flex items-center gap-2 text-sm text-destructive", children: [
-        /* @__PURE__ */ jsx16(XCircle2, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsxs11("span", { children: [
-          friendlyMessage,
-          " failed",
-          state.error && /* @__PURE__ */ jsxs11("span", { className: "ml-1 text-xs text-muted-foreground", children: [
-            "- ",
-            state.error
-          ] })
+    return /* @__PURE__ */ jsxs12("div", { className: "mb-1", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-1.5 text-xs", children: [
+        /* @__PURE__ */ jsx17(XCircle2, { className: "h-3 w-3 text-destructive mt-0.5 shrink-0" }),
+        /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs12(
+            "span",
+            {
+              className: `text-destructive ${debug ? "cursor-pointer hover:text-destructive/80" : ""}`,
+              onClick: debug ? () => setIsExpanded(!isExpanded) : void 0,
+              children: [
+                formatted,
+                " failed"
+              ]
+            }
+          ),
+          state.error && /* @__PURE__ */ jsx17("div", { className: "text-muted-foreground/60 text-[11px] truncate", children: `\u23BF ${state.error}` })
         ] })
       ] }),
-      renderTabs()
+      debug && isExpanded && renderDebugTabs()
     ] });
   }
   if (state) {
-    return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx16(Clock2, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsxs11("span", { children: [
-        friendlyMessage,
+    return /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground mb-1", children: [
+      /* @__PURE__ */ jsx17(Clock2, { className: "h-3 w-3" }),
+      /* @__PURE__ */ jsxs12("span", { children: [
+        formatted,
         " (",
         state.status,
         ")"
@@ -22675,7 +22844,8 @@ var ToolCallCard = ({ toolCall, state, renderResultData }) => {
 var ToolExecutionRenderer = ({
   event,
   toolCallStates,
-  toolRenderers
+  toolRenderers,
+  debug = false
 }) => {
   const toolCalls = event.data?.tool_calls || [];
   if (toolCalls.length === 0) {
@@ -22687,7 +22857,7 @@ var ToolExecutionRenderer = ({
     }
     return renderToolResultParts(toolCallState.result);
   };
-  return /* @__PURE__ */ jsx16(Fragment4, { children: toolCalls.filter((toolCall) => toolCall.tool_name !== "final").map((toolCall) => {
+  return /* @__PURE__ */ jsx17(Fragment4, { children: toolCalls.filter((toolCall) => toolCall.tool_name !== "final").map((toolCall) => {
     const state = toolCallStates.get(toolCall.tool_call_id);
     const renderer = toolRenderers?.[toolCall.tool_name];
     if (renderer) {
@@ -22696,14 +22866,15 @@ var ToolExecutionRenderer = ({
         tool_name: toolCall.tool_name,
         input: toolCall.input
       };
-      return /* @__PURE__ */ jsx16("div", { children: renderer({ toolCall: toolCallPayload, state }) }, toolCall.tool_call_id);
+      return /* @__PURE__ */ jsx17("div", { children: renderer({ toolCall: toolCallPayload, state }) }, toolCall.tool_call_id);
     }
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       ToolCallCard,
       {
         toolCall,
         state,
-        renderResultData
+        renderResultData,
+        debug
       },
       toolCall.tool_call_id
     );
@@ -22711,11 +22882,11 @@ var ToolExecutionRenderer = ({
 };
 
 // src/components/renderers/MessageReadTracker.tsx
-import { useEffect as useEffect12, useRef as useRef9 } from "react";
+import { useEffect as useEffect13, useRef as useRef9 } from "react";
 
 // src/components/renderers/MessageReadContext.tsx
-import { createContext as createContext4, useContext as useContext4, useState as useState15, useCallback as useCallback14, useEffect as useEffect11, useRef as useRef8 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { createContext as createContext4, useContext as useContext4, useState as useState16, useCallback as useCallback15, useEffect as useEffect12, useRef as useRef8 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var MessageReadContext = createContext4(null);
 var MessageReadProvider = ({
   threadId,
@@ -22723,11 +22894,11 @@ var MessageReadProvider = ({
   children
 }) => {
   const { client } = useDistri();
-  const [readMessageIds, setReadMessageIds] = useState15(/* @__PURE__ */ new Set());
-  const [isLoading, setIsLoading] = useState15(true);
+  const [readMessageIds, setReadMessageIds] = useState16(/* @__PURE__ */ new Set());
+  const [isLoading, setIsLoading] = useState16(true);
   const pendingMarks = useRef8(/* @__PURE__ */ new Set());
   const fetchedThreadId = useRef8(null);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!enabled || !client || !threadId) {
       setIsLoading(false);
       return;
@@ -22750,16 +22921,16 @@ var MessageReadProvider = ({
     };
     fetchReadStatuses();
   }, [client, threadId, enabled]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (fetchedThreadId.current !== threadId) {
       setReadMessageIds(/* @__PURE__ */ new Set());
       pendingMarks.current = /* @__PURE__ */ new Set();
     }
   }, [threadId]);
-  const isRead = useCallback14((messageId) => {
+  const isRead = useCallback15((messageId) => {
     return readMessageIds.has(messageId);
   }, [readMessageIds]);
-  const markAsRead = useCallback14(async (messageId) => {
+  const markAsRead = useCallback15(async (messageId) => {
     if (!client || !threadId || !enabled) {
       return;
     }
@@ -22786,14 +22957,14 @@ var MessageReadProvider = ({
     readMessageIds,
     isLoading
   };
-  return /* @__PURE__ */ jsx17(MessageReadContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx18(MessageReadContext.Provider, { value, children });
 };
 var useMessageReadContext = () => {
   return useContext4(MessageReadContext);
 };
 
 // src/components/renderers/MessageReadTracker.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var MessageReadTracker = ({
   messageId,
   enabled = true,
@@ -22805,7 +22976,7 @@ var MessageReadTracker = ({
   const ref = useRef9(null);
   const timeoutRef = useRef9(null);
   const hasTriggered = useRef9(false);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!enabled || !readContext || !ref.current || !messageId) {
       return;
     }
@@ -22847,19 +23018,19 @@ var MessageReadTracker = ({
       }
     };
   }, [enabled, threshold, delay, messageId, readContext]);
-  useEffect12(() => {
+  useEffect13(() => {
     hasTriggered.current = false;
   }, [messageId]);
-  return /* @__PURE__ */ jsx18("div", { ref, "data-message-id": messageId, children });
+  return /* @__PURE__ */ jsx19("div", { ref, "data-message-id": messageId, children });
 };
 
 // src/components/renderers/MessageRenderer.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var RendererWrapper = ({
   children,
   className = "",
   isUserMessage = false
-}) => /* @__PURE__ */ jsx19("div", { className: `w-full px-4 overflow-hidden ${className}`, style: { maxWidth: "100%", wordBreak: "break-word" }, children: /* @__PURE__ */ jsx19(
+}) => /* @__PURE__ */ jsx20("div", { className: `w-full px-4 overflow-hidden ${className}`, style: { maxWidth: "100%", wordBreak: "break-word" }, children: /* @__PURE__ */ jsx20(
   "div",
   {
     className: `w-full overflow-hidden ${isUserMessage ? "ml-auto" : "max-w-4xl mx-auto"}`,
@@ -22888,7 +23059,7 @@ function MessageRenderer({
     const distriMessage = message;
     switch (distriMessage.role) {
       case "user":
-        return /* @__PURE__ */ jsx19(RendererWrapper, { className: "distri-user-message", isUserMessage: true, children: /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx20(RendererWrapper, { className: "distri-user-message", isUserMessage: true, children: /* @__PURE__ */ jsx20(
           UserMessageRenderer,
           {
             message: distriMessage
@@ -22896,7 +23067,7 @@ function MessageRenderer({
         ) }, `user-${index}`);
       case "assistant": {
         const shouldTrackRead = enableFeedback && distriMessage.id;
-        const content = /* @__PURE__ */ jsx19(
+        const content = /* @__PURE__ */ jsx20(
           StepBasedRenderer,
           {
             message: distriMessage,
@@ -22904,7 +23075,7 @@ function MessageRenderer({
             enableFeedback
           }
         );
-        return /* @__PURE__ */ jsx19(RendererWrapper, { className: "distri-assistant-message", children: shouldTrackRead ? /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx20(RendererWrapper, { className: "distri-assistant-message", children: shouldTrackRead ? /* @__PURE__ */ jsx20(
           MessageReadTracker,
           {
             messageId: distriMessage.id,
@@ -22917,9 +23088,9 @@ function MessageRenderer({
         if (!debug) {
           return null;
         }
-        return /* @__PURE__ */ jsx19(RendererWrapper, { className: "distri-developer-message", children: /* @__PURE__ */ jsxs12("div", { className: "p-3 bg-muted/50 border border-dashed border-muted-foreground/30 rounded text-sm", children: [
-          /* @__PURE__ */ jsx19("div", { className: "text-xs text-muted-foreground font-medium mb-1", children: "Developer Context" }),
-          /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx20(RendererWrapper, { className: "distri-developer-message", children: /* @__PURE__ */ jsxs13("div", { className: "p-3 bg-muted/50 border border-dashed border-muted-foreground/30 rounded text-sm", children: [
+          /* @__PURE__ */ jsx20("div", { className: "text-xs text-muted-foreground font-medium mb-1", children: "Developer Context" }),
+          /* @__PURE__ */ jsx20(
             UserMessageRenderer,
             {
               message: distriMessage
@@ -22954,32 +23125,33 @@ function MessageRenderer({
         if (toolCallsState.size === 0) {
           return null;
         }
-        return /* @__PURE__ */ jsx19(RendererWrapper, { className: "distri-tool-execution-start", children: /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx20(RendererWrapper, { className: "distri-tool-execution-start", children: /* @__PURE__ */ jsx20(
           ToolExecutionRenderer,
           {
             event,
             toolCallStates: toolCallsState,
-            toolRenderers
+            toolRenderers,
+            debug
           }
         ) }, `tool-execution-start-${index}`);
       case "tool_results":
         return null;
       case "agent_handover":
-        return /* @__PURE__ */ jsx19(RendererWrapper, { className: "distri-handover", children: /* @__PURE__ */ jsx19("div", { className: "p-3 bg-muted rounded border", children: /* @__PURE__ */ jsxs12("div", { className: "text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsx19("strong", { children: "Handover to:" }),
+        return /* @__PURE__ */ jsx20(RendererWrapper, { className: "distri-handover", children: /* @__PURE__ */ jsx20("div", { className: "p-3 bg-muted rounded border", children: /* @__PURE__ */ jsxs13("div", { className: "text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx20("strong", { children: "Handover to:" }),
           " ",
           event.data?.to_agent || "unknown agent"
         ] }) }) }, `handover-${index}`);
       case "run_finished":
         return null;
       case "run_error":
-        return /* @__PURE__ */ jsx19(RendererWrapper, { className: "distri-run-error", children: /* @__PURE__ */ jsxs12("div", { className: "p-3 bg-destructive/10 border border-destructive/20 rounded", children: [
-          /* @__PURE__ */ jsxs12("div", { className: "text-sm text-destructive", children: [
-            /* @__PURE__ */ jsx19("strong", { children: "Error:" }),
+        return /* @__PURE__ */ jsx20(RendererWrapper, { className: "distri-run-error", children: /* @__PURE__ */ jsxs13("div", { className: "p-3 bg-destructive/10 border border-destructive/20 rounded", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "text-sm text-destructive", children: [
+            /* @__PURE__ */ jsx20("strong", { children: "Error:" }),
             " ",
             event.data?.message || "Unknown error occurred"
           ] }),
-          /* @__PURE__ */ jsx19("button", { className: "mt-2 text-xs text-destructive underline", children: "Retry" })
+          /* @__PURE__ */ jsx20("button", { className: "mt-2 text-xs text-destructive underline", children: "Retry" })
         ] }) }, `run-error-${index}`);
       default:
         return null;
@@ -22990,16 +23162,16 @@ function MessageRenderer({
 
 // src/components/renderers/TodosDisplay.tsx
 import { CheckCircle2 as CheckCircle22, Circle, Loader2 as Loader23 } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var getStatusIcon = (status) => {
   switch (status) {
     case "done":
-      return /* @__PURE__ */ jsx20(CheckCircle22, { className: "h-4 w-4 text-green-500 flex-shrink-0" });
+      return /* @__PURE__ */ jsx21(CheckCircle22, { className: "h-4 w-4 text-green-500 flex-shrink-0" });
     case "in_progress":
-      return /* @__PURE__ */ jsx20(Loader23, { className: "h-4 w-4 text-blue-500 animate-spin flex-shrink-0" });
+      return /* @__PURE__ */ jsx21(Loader23, { className: "h-4 w-4 text-blue-500 animate-spin flex-shrink-0" });
     case "open":
     default:
-      return /* @__PURE__ */ jsx20(Circle, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" });
+      return /* @__PURE__ */ jsx21(Circle, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" });
   }
 };
 var getStatusStyles = (status) => {
@@ -23024,10 +23196,10 @@ var TodosDisplay = ({
   const completedCount = todos.filter((t) => t.status === "done").length;
   const inProgressCount = todos.filter((t) => t.status === "in_progress").length;
   const totalCount = todos.length;
-  return /* @__PURE__ */ jsxs13("div", { className: `rounded-lg border bg-card p-3 ${className}`, children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx20("h4", { className: "text-sm font-medium text-foreground", children: title }),
-      /* @__PURE__ */ jsxs13("span", { className: "text-xs text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: `rounded-lg border bg-card p-3 ${className}`, children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx21("h4", { className: "text-sm font-medium text-foreground", children: title }),
+      /* @__PURE__ */ jsxs14("span", { className: "text-xs text-muted-foreground", children: [
         completedCount,
         "/",
         totalCount,
@@ -23035,20 +23207,20 @@ var TodosDisplay = ({
         inProgressCount > 0 && ` (${inProgressCount} in progress)`
       ] })
     ] }),
-    /* @__PURE__ */ jsx20("div", { className: "h-1.5 bg-muted rounded-full mb-3 overflow-hidden", children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21("div", { className: "h-1.5 bg-muted rounded-full mb-3 overflow-hidden", children: /* @__PURE__ */ jsx21(
       "div",
       {
         className: "h-full bg-green-500 transition-all duration-300",
         style: { width: `${completedCount / totalCount * 100}%` }
       }
     ) }),
-    /* @__PURE__ */ jsx20("ul", { className: "space-y-1.5", children: todos.map((todo) => /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsx21("ul", { className: "space-y-1.5", children: todos.map((todo) => /* @__PURE__ */ jsxs14(
       "li",
       {
         className: "flex items-start gap-2 text-sm",
         children: [
           getStatusIcon(todo.status),
-          /* @__PURE__ */ jsx20("span", { className: getStatusStyles(todo.status), children: todo.content })
+          /* @__PURE__ */ jsx21("span", { className: getStatusStyles(todo.status), children: todo.content })
         ]
       },
       todo.id
@@ -23057,24 +23229,24 @@ var TodosDisplay = ({
 };
 
 // src/components/renderers/TypingIndicator.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var TypingIndicator = () => {
-  return /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-4 py-3", children: /* @__PURE__ */ jsx21("div", { className: "w-full", children: /* @__PURE__ */ jsx21("div", { className: "flex items-center space-x-1 p-3 bg-muted/30 rounded-lg w-fit", children: /* @__PURE__ */ jsxs14("div", { className: "flex space-x-1", children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22("div", { className: "flex items-center gap-4 py-3", children: /* @__PURE__ */ jsx22("div", { className: "w-full", children: /* @__PURE__ */ jsx22("div", { className: "flex items-center space-x-1 p-3 bg-muted/30 rounded-lg w-fit", children: /* @__PURE__ */ jsxs15("div", { className: "flex space-x-1", children: [
+    /* @__PURE__ */ jsx22(
       "div",
       {
         className: "h-2 w-2 bg-muted-foreground rounded-full animate-bounce",
         style: { animationDelay: "0ms" }
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       "div",
       {
         className: "h-2 w-2 bg-muted-foreground rounded-full animate-bounce",
         style: { animationDelay: "150ms" }
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       "div",
       {
         className: "h-2 w-2 bg-muted-foreground rounded-full animate-bounce",
@@ -23085,7 +23257,7 @@ var TypingIndicator = () => {
 };
 
 // src/components/renderers/LoadingAnimation.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var sizeClasses = {
   sm: { dot: "h-1.5 w-1.5", container: "p-2", avatar: "w-8 h-8 text-base" },
   md: { dot: "h-2 w-2", container: "p-3", avatar: "w-10 h-10 text-lg" },
@@ -23095,8 +23267,8 @@ var TypingDotsAnimation = ({ config }) => {
   const size = config.size || "md";
   const classes = sizeClasses[size];
   const dotColor = config.primaryColor || "currentColor";
-  return /* @__PURE__ */ jsx22("div", { className: `flex items-center gap-4 py-3 ${config.className || ""}`, children: /* @__PURE__ */ jsx22("div", { className: "w-full", children: /* @__PURE__ */ jsxs15("div", { className: `flex items-center space-x-1 ${classes.container} bg-muted/30 rounded-lg w-fit`, children: [
-    /* @__PURE__ */ jsx22("div", { className: "flex space-x-1", children: [0, 150, 300].map((delay, i) => /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23("div", { className: `flex items-center gap-4 py-3 ${config.className || ""}`, children: /* @__PURE__ */ jsx23("div", { className: "w-full", children: /* @__PURE__ */ jsxs16("div", { className: `flex items-center space-x-1 ${classes.container} bg-muted/30 rounded-lg w-fit`, children: [
+    /* @__PURE__ */ jsx23("div", { className: "flex space-x-1", children: [0, 150, 300].map((delay, i) => /* @__PURE__ */ jsx23(
       "div",
       {
         className: `${classes.dot} rounded-full animate-bounce`,
@@ -23107,7 +23279,7 @@ var TypingDotsAnimation = ({ config }) => {
       },
       i
     )) }),
-    config.label && /* @__PURE__ */ jsx22("span", { className: "ml-2 text-sm text-muted-foreground", children: config.label })
+    config.label && /* @__PURE__ */ jsx23("span", { className: "ml-2 text-sm text-muted-foreground", children: config.label })
   ] }) }) });
 };
 var PulseRingAnimation = ({ config }) => {
@@ -23115,16 +23287,16 @@ var PulseRingAnimation = ({ config }) => {
   const sizeMap = { sm: "w-8 h-8", md: "w-12 h-12", lg: "w-16 h-16" };
   const primaryColor = config.primaryColor || "#10B981";
   const secondaryColor = config.secondaryColor || "#34D399";
-  return /* @__PURE__ */ jsxs15("div", { className: `flex items-center gap-3 py-3 ${config.className || ""}`, children: [
-    /* @__PURE__ */ jsxs15("div", { className: `${sizeMap[size]} relative flex items-center justify-center`, children: [
-      /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs16("div", { className: `flex items-center gap-3 py-3 ${config.className || ""}`, children: [
+    /* @__PURE__ */ jsxs16("div", { className: `${sizeMap[size]} relative flex items-center justify-center`, children: [
+      /* @__PURE__ */ jsx23(
         "div",
         {
           className: "absolute inset-1 rounded-full animate-pulse",
           style: { background: `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})` }
         }
       ),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         "div",
         {
           className: "absolute inset-0 rounded-full animate-ping opacity-75",
@@ -23132,7 +23304,7 @@ var PulseRingAnimation = ({ config }) => {
         }
       )
     ] }),
-    config.label && /* @__PURE__ */ jsx22("span", { className: "text-sm text-muted-foreground", children: config.label })
+    config.label && /* @__PURE__ */ jsx23("span", { className: "text-sm text-muted-foreground", children: config.label })
   ] });
 };
 var TeacherTypingAnimation = ({ config }) => {
@@ -23141,8 +23313,8 @@ var TeacherTypingAnimation = ({ config }) => {
   const primaryColor = config.primaryColor || "#10B981";
   const secondaryColor = config.secondaryColor || "#34D399";
   const avatar = config.avatar || "\u{1F393}";
-  return /* @__PURE__ */ jsxs15("div", { className: `flex items-start gap-3 py-3 ${config.className || ""}`, children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs16("div", { className: `flex items-start gap-3 py-3 ${config.className || ""}`, children: [
+    /* @__PURE__ */ jsx23(
       "div",
       {
         className: `${classes.avatar} rounded-full flex items-center justify-center shrink-0`,
@@ -23150,9 +23322,9 @@ var TeacherTypingAnimation = ({ config }) => {
         children: avatar
       }
     ),
-    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
-      config.label && /* @__PURE__ */ jsx22("span", { className: "text-xs font-medium text-muted-foreground", children: config.label }),
-      /* @__PURE__ */ jsx22("div", { className: `flex items-center space-x-1 ${classes.container} bg-muted/50 rounded-2xl w-fit`, children: /* @__PURE__ */ jsx22("div", { className: "flex space-x-1", children: [0, 200, 400].map((delay, i) => /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+      config.label && /* @__PURE__ */ jsx23("span", { className: "text-xs font-medium text-muted-foreground", children: config.label }),
+      /* @__PURE__ */ jsx23("div", { className: `flex items-center space-x-1 ${classes.container} bg-muted/50 rounded-2xl w-fit`, children: /* @__PURE__ */ jsx23("div", { className: "flex space-x-1", children: [0, 200, 400].map((delay, i) => /* @__PURE__ */ jsx23(
         "div",
         {
           className: `${classes.dot} bg-muted-foreground/50 rounded-full`,
@@ -23164,7 +23336,7 @@ var TeacherTypingAnimation = ({ config }) => {
         i
       )) }) })
     ] }),
-    /* @__PURE__ */ jsx22("style", { children: `
+    /* @__PURE__ */ jsx23("style", { children: `
         @keyframes typingBounce {
           0%, 60%, 100% { transform: translateY(0); }
           30% { transform: translateY(-6px); }
@@ -23176,15 +23348,15 @@ var SpinnerAnimation = ({ config }) => {
   const size = config.size || "md";
   const sizeMap = { sm: "w-5 h-5", md: "w-8 h-8", lg: "w-10 h-10" };
   const primaryColor = config.primaryColor || "currentColor";
-  return /* @__PURE__ */ jsxs15("div", { className: `flex items-center gap-3 py-3 ${config.className || ""}`, children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs16("div", { className: `flex items-center gap-3 py-3 ${config.className || ""}`, children: [
+    /* @__PURE__ */ jsx23(
       "div",
       {
         className: `${sizeMap[size]} animate-spin rounded-full border-2 border-muted border-t-current`,
         style: primaryColor !== "currentColor" ? { borderTopColor: primaryColor } : void 0
       }
     ),
-    config.label && /* @__PURE__ */ jsx22("span", { className: "text-sm text-muted-foreground", children: config.label })
+    config.label && /* @__PURE__ */ jsx23("span", { className: "text-sm text-muted-foreground", children: config.label })
   ] });
 };
 var WaveAnimation = ({ config }) => {
@@ -23192,8 +23364,8 @@ var WaveAnimation = ({ config }) => {
   const barHeights = { sm: "h-4", md: "h-6", lg: "h-8" };
   const barWidths = { sm: "w-1", md: "w-1.5", lg: "w-2" };
   const primaryColor = config.primaryColor || "#6366F1";
-  return /* @__PURE__ */ jsxs15("div", { className: `flex items-center gap-3 py-3 ${config.className || ""}`, children: [
-    /* @__PURE__ */ jsx22("div", { className: "flex items-end gap-1", children: [0, 100, 200, 300, 400].map((delay, i) => /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs16("div", { className: `flex items-center gap-3 py-3 ${config.className || ""}`, children: [
+    /* @__PURE__ */ jsx23("div", { className: "flex items-end gap-1", children: [0, 100, 200, 300, 400].map((delay, i) => /* @__PURE__ */ jsx23(
       "div",
       {
         className: `${barWidths[size]} ${barHeights[size]} rounded-full`,
@@ -23205,8 +23377,8 @@ var WaveAnimation = ({ config }) => {
       },
       i
     )) }),
-    config.label && /* @__PURE__ */ jsx22("span", { className: "text-sm text-muted-foreground", children: config.label }),
-    /* @__PURE__ */ jsx22("style", { children: `
+    config.label && /* @__PURE__ */ jsx23("span", { className: "text-sm text-muted-foreground", children: config.label }),
+    /* @__PURE__ */ jsx23("style", { children: `
         @keyframes wave {
           0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
           50% { transform: scaleY(1); opacity: 1; }
@@ -23218,17 +23390,17 @@ var LoadingAnimation = ({ config = {} }) => {
   const preset = config.preset || "typing-dots";
   switch (preset) {
     case "typing-dots":
-      return /* @__PURE__ */ jsx22(TypingDotsAnimation, { config });
+      return /* @__PURE__ */ jsx23(TypingDotsAnimation, { config });
     case "pulse-ring":
-      return /* @__PURE__ */ jsx22(PulseRingAnimation, { config });
+      return /* @__PURE__ */ jsx23(PulseRingAnimation, { config });
     case "teacher-typing":
-      return /* @__PURE__ */ jsx22(TeacherTypingAnimation, { config });
+      return /* @__PURE__ */ jsx23(TeacherTypingAnimation, { config });
     case "spinner":
-      return /* @__PURE__ */ jsx22(SpinnerAnimation, { config });
+      return /* @__PURE__ */ jsx23(SpinnerAnimation, { config });
     case "wave":
-      return /* @__PURE__ */ jsx22(WaveAnimation, { config });
+      return /* @__PURE__ */ jsx23(WaveAnimation, { config });
     default:
-      return /* @__PURE__ */ jsx22(TypingDotsAnimation, { config });
+      return /* @__PURE__ */ jsx23(TypingDotsAnimation, { config });
   }
 };
 
@@ -23236,11 +23408,11 @@ var LoadingAnimation = ({ config = {} }) => {
 import * as React15 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check2, ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
+var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs17(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -23251,12 +23423,12 @@ var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx23(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx23(ChevronDown2, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx24(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx24(ChevronDown2, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -23265,11 +23437,11 @@ var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx23(ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx24(ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -23278,11 +23450,11 @@ var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx23(ChevronDown2, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx24(ChevronDown2, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React15.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs16(
+var SelectContent = React15.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx24(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs17(
   SelectPrimitive.Content,
   {
     ref,
@@ -23294,8 +23466,8 @@ var SelectContent = React15.forwardRef(({ className, children, position = "poppe
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx23(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx24(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -23305,12 +23477,12 @@ var SelectContent = React15.forwardRef(({ className, children, position = "poppe
           children
         }
       ),
-      /* @__PURE__ */ jsx23(SelectScrollDownButton, {})
+      /* @__PURE__ */ jsx24(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   SelectPrimitive.Label,
   {
     ref,
@@ -23319,7 +23491,7 @@ var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
+var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs17(
   SelectPrimitive.Item,
   {
     ref,
@@ -23329,13 +23501,13 @@ var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) =>
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx23("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx23(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx23(Check2, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx23(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx24("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx24(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx24(Check2, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx24(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   SelectPrimitive.Separator,
   {
     ref,
@@ -23346,13 +23518,13 @@ var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @_
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/hooks/useTts.ts
-import { useCallback as useCallback15, useRef as useRef10, useState as useState16 } from "react";
+import { useCallback as useCallback16, useRef as useRef10, useState as useState17 } from "react";
 var useTts = (config = {}) => {
   const baseUrl = config.baseUrl || "http://localhost:8080/v1";
-  const [isSynthesizing, setIsSynthesizing] = useState16(false);
+  const [isSynthesizing, setIsSynthesizing] = useState17(false);
   const wsRef = useRef10(null);
   const audioContextRef = useRef10(null);
-  const synthesize = useCallback15(async (request) => {
+  const synthesize = useCallback16(async (request) => {
     const authHeader = config.accessToken ? `Bearer ${config.accessToken}` : void 0;
     const response = await fetch(`${baseUrl}/tts/synthesize`, {
       method: "POST",
@@ -23368,7 +23540,7 @@ var useTts = (config = {}) => {
     }
     return response.blob();
   }, [baseUrl, config.accessToken]);
-  const getAvailableVoices = useCallback15(async () => {
+  const getAvailableVoices = useCallback16(async () => {
     const authHeader = config.accessToken ? `Bearer ${config.accessToken}` : void 0;
     const response = await fetch(`${baseUrl}/tts/voices`, {
       headers: {
@@ -23380,7 +23552,7 @@ var useTts = (config = {}) => {
     }
     return response.json();
   }, [baseUrl, config.accessToken]);
-  const playAudio = useCallback15((audioBlob) => {
+  const playAudio = useCallback16((audioBlob) => {
     const audioUrl = URL.createObjectURL(audioBlob);
     const audio = new Audio(audioUrl);
     return new Promise((resolve, reject) => {
@@ -23395,7 +23567,7 @@ var useTts = (config = {}) => {
       audio.play().catch(reject);
     });
   }, []);
-  const streamingPlayAudio = useCallback15((audioChunks) => {
+  const streamingPlayAudio = useCallback16((audioChunks) => {
     if (!audioContextRef.current) {
       audioContextRef.current = new AudioContext();
     }
@@ -23422,7 +23594,7 @@ var useTts = (config = {}) => {
       })();
     });
   }, []);
-  const startStreamingTts = useCallback15((options = {}) => {
+  const startStreamingTts = useCallback16((options = {}) => {
     if (isSynthesizing) {
       throw new Error("Streaming TTS already in progress");
     }
@@ -23490,7 +23662,7 @@ var useTts = (config = {}) => {
       }
     };
   }, [isSynthesizing, baseUrl]);
-  const stopStreamingTts = useCallback15(() => {
+  const stopStreamingTts = useCallback16(() => {
     if (wsRef.current) {
       wsRef.current.close();
       wsRef.current = null;
@@ -23509,7 +23681,7 @@ var useTts = (config = {}) => {
 };
 
 // src/components/ChatEmptyState.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var DefaultChatEmptyState = ({ controller, options, maxWidth }) => {
   const disabled = controller.isLoading || controller.isStreaming;
   const categories = options?.categories ?? [];
@@ -23531,7 +23703,7 @@ var DefaultChatEmptyState = ({ controller, options, maxWidth }) => {
   const renderStarter = (starter, layout) => {
     const variant = starter.variant ?? "outline";
     const isGrid = layout === "grid";
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18(
       Button,
       {
         type: "button",
@@ -23545,44 +23717,44 @@ var DefaultChatEmptyState = ({ controller, options, maxWidth }) => {
         },
         disabled,
         children: [
-          starter.icon && /* @__PURE__ */ jsx24("span", { className: `text-lg ${isGrid ? "" : "mr-2"}`, children: starter.icon }),
-          /* @__PURE__ */ jsxs17("span", { className: `flex flex-col ${isGrid ? "items-center text-center" : "items-start"} gap-1`, children: [
-            /* @__PURE__ */ jsx24("span", { className: "font-medium text-foreground", children: starter.label }),
-            starter.description ? /* @__PURE__ */ jsx24("span", { className: "text-xs text-muted-foreground", children: starter.description }) : null
+          starter.icon && /* @__PURE__ */ jsx25("span", { className: `text-lg ${isGrid ? "" : "mr-2"}`, children: starter.icon }),
+          /* @__PURE__ */ jsxs18("span", { className: `flex flex-col ${isGrid ? "items-center text-center" : "items-start"} gap-1`, children: [
+            /* @__PURE__ */ jsx25("span", { className: "font-medium text-foreground", children: starter.label }),
+            starter.description ? /* @__PURE__ */ jsx25("span", { className: "text-xs text-muted-foreground", children: starter.description }) : null
           ] })
         ]
       },
       starter.id ?? starter.label
     );
   };
-  return /* @__PURE__ */ jsx24("div", { className: "py-4 sm:py-8", children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25("div", { className: "py-4 sm:py-8", children: /* @__PURE__ */ jsx25(
     "div",
     {
       className: "mx-auto w-full px-2",
       style: maxWidth ? { maxWidth } : void 0,
-      children: /* @__PURE__ */ jsx24("div", { className: "", children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-6", children: [
-        controller.composer ? /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
+      children: /* @__PURE__ */ jsx25("div", { className: "", children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-6", children: [
+        controller.composer ? /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2", children: [
           controller.composer,
-          options?.promptHelperText ? /* @__PURE__ */ jsx24("p", { className: "text-xs text-muted-foreground text-center sm:text-left", children: options.promptHelperText }) : null
+          options?.promptHelperText ? /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground text-center sm:text-left", children: options.promptHelperText }) : null
         ] }) : null,
-        categories.length > 0 ? /* @__PURE__ */ jsxs17("div", { className: "space-y-1 p-1", children: [
-          options?.categoriesLabel ? /* @__PURE__ */ jsx24("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: options.categoriesLabel }) : null,
-          options?.startersLabel ? /* @__PURE__ */ jsx24("p", { className: "text-sm font-medium text-muted-foreground", children: options.startersLabel }) : null,
-          /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-3", children: categories.map((category) => {
+        categories.length > 0 ? /* @__PURE__ */ jsxs18("div", { className: "space-y-1 p-1", children: [
+          options?.categoriesLabel ? /* @__PURE__ */ jsx25("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: options.categoriesLabel }) : null,
+          options?.startersLabel ? /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: options.startersLabel }) : null,
+          /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-3", children: categories.map((category) => {
             const categoryLayout = category.layout ?? defaultLayout;
-            return /* @__PURE__ */ jsxs17(
+            return /* @__PURE__ */ jsxs18(
               "div",
               {
                 className: "bg-background/70 p-1 sm:p-4",
                 children: [
-                  category.title || category.description || category.icon ? /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-2 mb-3", children: [
-                    category.icon && /* @__PURE__ */ jsx24("span", { className: "text-xl", children: category.icon }),
-                    /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-1", children: [
-                      category.title ? /* @__PURE__ */ jsx24("h3", { className: "text-xs font-semibold text-foreground", children: category.title }) : null,
-                      category.description ? /* @__PURE__ */ jsx24("p", { className: "text-xs text-muted-foreground", children: category.description }) : null
+                  category.title || category.description || category.icon ? /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-2 mb-3", children: [
+                    category.icon && /* @__PURE__ */ jsx25("span", { className: "text-xl", children: category.icon }),
+                    /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-1", children: [
+                      category.title ? /* @__PURE__ */ jsx25("h3", { className: "text-xs font-semibold text-foreground", children: category.title }) : null,
+                      category.description ? /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground", children: category.description }) : null
                     ] })
                   ] }) : null,
-                  category.starters && category.starters.length > 0 ? /* @__PURE__ */ jsx24("div", { className: categoryLayout === "grid" ? "grid grid-cols-2 sm:grid-cols-3 gap-2" : "flex flex-col gap-2", children: category.starters.map((starter) => renderStarter(starter, categoryLayout)) }) : null
+                  category.starters && category.starters.length > 0 ? /* @__PURE__ */ jsx25("div", { className: categoryLayout === "grid" ? "grid grid-cols-2 sm:grid-cols-3 gap-2" : "flex flex-col gap-2", children: category.starters.map((starter) => renderStarter(starter, categoryLayout)) }) : null
                 ]
               },
               category.id
@@ -23595,7 +23767,7 @@ var DefaultChatEmptyState = ({ controller, options, maxWidth }) => {
 };
 
 // src/hooks/useChatMessages.ts
-import { useCallback as useCallback16, useEffect as useEffect13, useState as useState17, useRef as useRef11 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect14, useState as useState18, useRef as useRef11 } from "react";
 
 // ../core/src/encoder.ts
 function convertA2AMessageToDistri(a2aMessage) {
@@ -23905,27 +24077,27 @@ function useChatMessages({
 } = {}) {
   const onErrorRef = useRef11(onError);
   const { client } = useDistri();
-  useEffect13(() => {
+  useEffect14(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  const [messages, setMessages] = useState17(initialMessages);
-  const [isLoading, setIsLoading] = useState17(false);
-  const [error, setError] = useState17(null);
+  const [messages, setMessages] = useState18(initialMessages);
+  const [isLoading, setIsLoading] = useState18(false);
+  const [error, setError] = useState18(null);
   const initialMessagesLength = initialMessages.length;
-  useEffect13(() => {
+  useEffect14(() => {
     if (initialMessages.length > 0) {
       setMessages(initialMessages);
     }
   }, [initialMessages]);
-  const addMessage = useCallback16((message) => {
+  const addMessage = useCallback17((message) => {
     setMessages((prev) => {
       return [...prev, message];
     });
   }, []);
-  const clearMessages = useCallback16(() => {
+  const clearMessages = useCallback17(() => {
     setMessages([]);
   }, []);
-  const fetchMessages = useCallback16(async () => {
+  const fetchMessages = useCallback17(async () => {
     if (!client || !threadId) return;
     try {
       setIsLoading(true);
@@ -23941,7 +24113,7 @@ function useChatMessages({
       setIsLoading(false);
     }
   }, [client, threadId]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (threadId && client && !initialMessagesLength && enabled) {
       fetchMessages();
     }
@@ -23957,9 +24129,9 @@ function useChatMessages({
 }
 
 // src/components/AuthLoading.tsx
-import { useEffect as useEffect14, useRef as useRef12, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect15, useRef as useRef12, useMemo as useMemo5 } from "react";
 import { Loader2 as Loader24, AlertCircle as AlertCircle2 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var AuthLoading = ({
   children,
   className = ""
@@ -23977,7 +24149,7 @@ var AuthLoading = ({
   } = useDistriAuth();
   const iframeRef = useRef12(null);
   const timeoutRef = useRef12(null);
-  useEffect14(() => {
+  useEffect15(() => {
     if (status !== "loading") return;
     if (config.debug) console.log("[AuthWorker] Starting authentication phase");
     iframeRef.current?.contentWindow?.postMessage({ type: "distri:refresh_token" }, "*");
@@ -24030,10 +24202,10 @@ var AuthLoading = ({
   }, [config]);
   const containerClass = `relative flex flex-col items-center justify-center p-8 text-center min-h-[400px] w-full bg-background animate-in fade-in duration-300 ${className}`;
   if (status === "loading") {
-    return /* @__PURE__ */ jsxs18("div", { className: containerClass, children: [
-      /* @__PURE__ */ jsx25(Loader24, { className: "h-8 w-8 animate-spin text-primary mb-4" }),
-      /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground font-sans text-sm animate-pulse font-medium", children: "Initializing Security\u2026" }),
-      /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsxs19("div", { className: containerClass, children: [
+      /* @__PURE__ */ jsx26(Loader24, { className: "h-8 w-8 animate-spin text-primary mb-4" }),
+      /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground font-sans text-sm animate-pulse font-medium", children: "Initializing Security\u2026" }),
+      /* @__PURE__ */ jsx26(
         "iframe",
         {
           ref: iframeRef,
@@ -24053,11 +24225,11 @@ var AuthLoading = ({
     ] });
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsxs18("div", { className: containerClass, children: [
-      /* @__PURE__ */ jsx25(AlertCircle2, { className: "h-12 w-12 text-destructive mb-4" }),
-      /* @__PURE__ */ jsx25("h2", { className: "text-lg font-semibold text-foreground mb-2", children: "Authentication Failed" }),
-      /* @__PURE__ */ jsx25("p", { className: "text-muted-foreground font-sans text-sm mb-6 max-w-xs", children: error || "Could not establish a secure connection." }),
-      /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsxs19("div", { className: containerClass, children: [
+      /* @__PURE__ */ jsx26(AlertCircle2, { className: "h-12 w-12 text-destructive mb-4" }),
+      /* @__PURE__ */ jsx26("h2", { className: "text-lg font-semibold text-foreground mb-2", children: "Authentication Failed" }),
+      /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground font-sans text-sm mb-6 max-w-xs", children: error || "Could not establish a secure connection." }),
+      /* @__PURE__ */ jsx26(
         "button",
         {
           onClick: () => requestAuth(),
@@ -24067,21 +24239,51 @@ var AuthLoading = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx25(Fragment5, { children });
+  return /* @__PURE__ */ jsx26(Fragment5, { children });
 };
 
 // src/components/Chat.tsx
 import { AlertCircle as AlertCircle3, Loader2 as Loader25 } from "lucide-react";
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 var RendererWrapper2 = ({
   children,
   className = ""
-}) => /* @__PURE__ */ jsx26("div", { className: `max-w-3xl mx-auto w-full ${className}`, children });
+}) => /* @__PURE__ */ jsx27("div", { className: `max-w-3xl mx-auto w-full ${className}`, children });
 var getThemeClasses = (theme) => {
   if (theme === "dark") return "dark";
   if (theme === "light") return "light";
   return "";
 };
+function formatTokenCount(tokens) {
+  if (tokens >= 1e6) return `${(tokens / 1e6).toFixed(1)}M`;
+  if (tokens >= 1e3) return `${(tokens / 1e3).toFixed(1)}k`;
+  return String(tokens);
+}
+var ThreadTokensBanner = ({ thread }) => {
+  if (!thread || !(thread.total_tokens ?? 0)) return null;
+  return /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-center gap-3 py-1.5 text-[11px] text-muted-foreground/70", children: [
+    /* @__PURE__ */ jsxs20("span", { children: [
+      /* @__PURE__ */ jsx27("span", { className: "opacity-60", children: "In:" }),
+      " ",
+      /* @__PURE__ */ jsx27("span", { className: "font-medium text-muted-foreground", children: formatTokenCount(thread.input_tokens ?? 0) })
+    ] }),
+    /* @__PURE__ */ jsx27("span", { className: "opacity-30", children: "\xB7" }),
+    /* @__PURE__ */ jsxs20("span", { children: [
+      /* @__PURE__ */ jsx27("span", { className: "opacity-60", children: "Out:" }),
+      " ",
+      /* @__PURE__ */ jsx27("span", { className: "font-medium text-muted-foreground", children: formatTokenCount(thread.output_tokens ?? 0) })
+    ] }),
+    /* @__PURE__ */ jsx27("span", { className: "opacity-30", children: "\xB7" }),
+    /* @__PURE__ */ jsxs20("span", { children: [
+      /* @__PURE__ */ jsx27("span", { className: "opacity-60", children: "Total:" }),
+      " ",
+      /* @__PURE__ */ jsxs20("span", { className: "font-medium text-foreground/70", children: [
+        formatTokenCount(thread.total_tokens ?? 0),
+        " tokens"
+      ] })
+    ] })
+  ] });
+};
 var ChatInner = forwardRef5(function ChatInner2({
   threadId,
   agent: agent2,
@@ -24115,24 +24317,24 @@ var ChatInner = forwardRef5(function ChatInner2({
   debug = false,
   enableFeedback = false
 }, ref) {
-  const [input, setInput] = useState18(initialInput ?? "");
+  const [input, setInput] = useState19(initialInput ?? "");
   const initialInputRef = useRef13(initialInput ?? "");
-  const [expandedTools, setExpandedTools] = useState18(/* @__PURE__ */ new Set());
+  const [expandedTools, setExpandedTools] = useState19(/* @__PURE__ */ new Set());
   const messagesEndRef = useRef13(null);
-  const [pendingMessage, setPendingMessage] = useState18(null);
-  const [attachedImages, setAttachedImages] = useState18([]);
-  const [isDragOver, setIsDragOver] = useState18(false);
+  const [pendingMessage, setPendingMessage] = useState19(null);
+  const [attachedImages, setAttachedImages] = useState19([]);
+  const [isDragOver, setIsDragOver] = useState19(false);
   const speechToText = useSpeechToText();
   const tts = useTts();
-  const [isStreamingVoice, setIsStreamingVoice] = useState18(false);
-  const [streamingTranscript, setStreamingTranscript] = useState18("");
-  const [audioChunks, setAudioChunks] = useState18([]);
-  const [browserEnabled, setBrowserEnabled] = useState18(false);
+  const [isStreamingVoice, setIsStreamingVoice] = useState19(false);
+  const [streamingTranscript, setStreamingTranscript] = useState19("");
+  const [audioChunks, setAudioChunks] = useState19([]);
+  const [browserEnabled, setBrowserEnabled] = useState19(false);
   const browserViewerUrl = useChatStateStore((state) => state.browserViewerUrl);
   const agentDefinition = useMemo6(() => agent2?.getDefinition(), [agent2]);
   const supportsBrowserStreaming = allowBrowserPreview && Boolean(agentDefinition?.browser_config);
   const browserAgentIdRef = useRef13(void 0);
-  useEffect15(() => {
+  useEffect16(() => {
     const agentId = agentDefinition?.id;
     if (!agentDefinition || !supportsBrowserStreaming) {
       setBrowserEnabled(false);
@@ -24145,14 +24347,14 @@ var ChatInner = forwardRef5(function ChatInner2({
       setBrowserEnabled(defaultEnabled);
     }
   }, [agentDefinition, supportsBrowserStreaming]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (typeof initialInput === "string" && initialInput !== initialInputRef.current) {
       setInput(initialInput);
       initialInputRef.current = initialInput;
     }
   }, [initialInput]);
   const browserSessionId = useChatStateStore((state) => state.browserSessionId);
-  const mergedMetadataProvider = useCallback17(async () => {
+  const mergedMetadataProvider = useCallback18(async () => {
     const baseMetadata = await getMetadataProp?.() ?? {};
     const existingOverrides = baseMetadata.definition_overrides ?? {};
     const overrides = supportsBrowserStreaming ? { ...existingOverrides, use_browser: browserEnabled } : existingOverrides;
@@ -24202,13 +24404,32 @@ var ChatInner = forwardRef5(function ChatInner2({
   const currentThought = useChatStateStore((state) => state.currentThought);
   const currentState = useChatStateStore((state) => state);
   const todos = useChatStateStore((state) => state.todos);
-  useEffect15(() => {
+  useEffect16(() => {
     if (onChatStateChange) {
       onChatStateChange(currentState);
     }
   }, [currentState, onChatStateChange]);
   const { client: distriClient } = useDistri();
-  const handleToggleBrowser = useCallback17(async (enabled) => {
+  const [threadDetails, setThreadDetails] = useState19(null);
+  const wasStreamingRef = useRef13(false);
+  const refreshThreadDetails = useCallback18(() => {
+    if (distriClient && threadId) {
+      distriClient.getThread(threadId).then(setThreadDetails).catch(() => {
+      });
+    }
+  }, [distriClient, threadId]);
+  useEffect16(() => {
+    if (wasStreamingRef.current && !isStreaming) {
+      refreshThreadDetails();
+    }
+    wasStreamingRef.current = isStreaming;
+  }, [isStreaming, refreshThreadDetails]);
+  useEffect16(() => {
+    if (distriClient && threadId && initialMessages && initialMessages.length > 0) {
+      refreshThreadDetails();
+    }
+  }, [distriClient, threadId]);
+  const handleToggleBrowser = useCallback18(async (enabled) => {
     if (!supportsBrowserStreaming) return;
     setBrowserEnabled(enabled);
     if (enabled && !browserSessionId && distriClient) {
@@ -24220,7 +24441,7 @@ var ChatInner = forwardRef5(function ChatInner2({
       }
     }
   }, [supportsBrowserStreaming, browserSessionId, distriClient]);
-  const addImages = useCallback17(async (files) => {
+  const addImages = useCallback18(async (files) => {
     const imageFiles = Array.from(files).filter((file) => file.type.startsWith("image/"));
     for (const file of imageFiles) {
       const id = Date.now().toString() + Math.random().toString(36).substring(2, 11);
@@ -24234,7 +24455,7 @@ var ChatInner = forwardRef5(function ChatInner2({
       setAttachedImages((prev) => [...prev, newImage]);
     }
   }, []);
-  const removeImage = useCallback17((id) => {
+  const removeImage = useCallback18((id) => {
     setAttachedImages((prev) => {
       const image = prev.find((img) => img.id === id);
       if (image) {
@@ -24243,19 +24464,19 @@ var ChatInner = forwardRef5(function ChatInner2({
       return prev.filter((img) => img.id !== id);
     });
   }, []);
-  const handleDragOver = useCallback17((e) => {
+  const handleDragOver = useCallback18((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(true);
   }, []);
-  const handleDragLeave = useCallback17((e) => {
+  const handleDragLeave = useCallback18((e) => {
     e.preventDefault();
     e.stopPropagation();
     if (!e.currentTarget.contains(e.relatedTarget)) {
       setIsDragOver(false);
     }
   }, []);
-  const handleDrop2 = useCallback17((e) => {
+  const handleDrop2 = useCallback18((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
@@ -24264,13 +24485,13 @@ var ChatInner = forwardRef5(function ChatInner2({
       addImages(files);
     }
   }, [addImages]);
-  const contentToParts = useCallback17((content) => {
+  const contentToParts = useCallback18((content) => {
     if (typeof content === "string") {
       return [{ part_type: "text", data: content }];
     }
     return content;
   }, []);
-  const handleSendMessage = useCallback17(async (content) => {
+  const handleSendMessage = useCallback18(async (content) => {
     if (typeof content === "string" && !content.trim()) return;
     if (Array.isArray(content) && content.length === 0) return;
     setInput("");
@@ -24285,12 +24506,12 @@ var ChatInner = forwardRef5(function ChatInner2({
       await sendMessage(content);
     }
   }, [sendMessage, isStreaming, contentToParts]);
-  const handleStopStreaming = useCallback17(() => {
+  const handleStopStreaming = useCallback18(() => {
     console.log("handleStopStreaming called, about to call stopStreaming()");
     stopStreaming();
     useChatStateStore.getState().resetStreamingStates();
   }, [stopStreaming]);
-  const handleTriggerTool = useCallback17(async (toolName, input2) => {
+  const handleTriggerTool = useCallback18(async (toolName, input2) => {
     const toolCallId = `manual_${Date.now()}_${Math.random().toString(36).substring(2, 11)} `;
     const toolCall = {
       tool_call_id: toolCallId,
@@ -24305,7 +24526,7 @@ var ChatInner = forwardRef5(function ChatInner2({
       console.error("Tool not found:", toolName);
     }
   }, []);
-  const handleVoiceRecord = useCallback17(async (audioBlob) => {
+  const handleVoiceRecord = useCallback18(async (audioBlob) => {
     try {
       if (!voiceEnabled || !speechToText) {
         console.error("Voice recording not properly configured - missing speechToText");
@@ -24323,7 +24544,7 @@ var ChatInner = forwardRef5(function ChatInner2({
       }
     }
   }, [voiceEnabled, speechToText, handleSendMessage, onError]);
-  const startStreamingVoice = useCallback17(async () => {
+  const startStreamingVoice = useCallback18(async () => {
     if (!voiceEnabled || isStreamingVoice || !speechToText) {
       console.error("Cannot start streaming voice - missing requirements");
       return;
@@ -24375,7 +24596,7 @@ var ChatInner = forwardRef5(function ChatInner2({
       setIsStreamingVoice(false);
     }
   }, [voiceEnabled, isStreamingVoice, speechToText, tts, ttsConfig, handleSendMessage, onError, audioChunks]);
-  const stopStreamingVoice = useCallback17(() => {
+  const stopStreamingVoice = useCallback18(() => {
     if (!isStreamingVoice) return;
     if (speechToText) {
       speechToText.stopStreamingTranscription();
@@ -24385,12 +24606,12 @@ var ChatInner = forwardRef5(function ChatInner2({
     setStreamingTranscript("");
     setAudioChunks([]);
   }, [isStreamingVoice, speechToText, tts]);
-  const handleSpeechTranscript = useCallback17(async (transcript) => {
+  const handleSpeechTranscript = useCallback18(async (transcript) => {
     if (transcript.trim()) {
       await handleSendMessage(transcript);
     }
   }, [handleSendMessage]);
-  useEffect15(() => {
+  useEffect16(() => {
     const sendPendingMessage = async () => {
       if (!isStreaming && pendingMessage && pendingMessage.length > 0) {
         console.log("Streaming ended, sending pending message parts:", pendingMessage);
@@ -24405,7 +24626,7 @@ var ChatInner = forwardRef5(function ChatInner2({
     };
     sendPendingMessage();
   }, [isStreaming, pendingMessage, sendMessage]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!voiceEnabled || !ttsConfig || isStreamingVoice) return;
     const lastMessage = messages[messages.length - 1];
     if (lastMessage && "role" in lastMessage && lastMessage.role === "assistant" && "content" in lastMessage && typeof lastMessage.content === "string") {
@@ -24430,13 +24651,13 @@ var ChatInner = forwardRef5(function ChatInner2({
     streamingTranscript: voiceEnabled && speechToText ? streamingTranscript : void 0
   }), [handleSendMessage, handleStopStreaming, handleTriggerTool, isStreaming, isLoading, voiceEnabled, speechToText, startStreamingVoice, stopStreamingVoice, isStreamingVoice, streamingTranscript]);
   useImperativeHandle(ref, () => chatInstance, [chatInstance]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (onChatInstanceReady) {
       onChatInstanceReady(chatInstance);
     }
   }, [onChatInstanceReady, chatInstance]);
   const completedTaskIdsRef = useRef13(/* @__PURE__ */ new Set());
-  useEffect15(() => {
+  useEffect16(() => {
     if (!onTaskFinish) return;
     const unsub = useChatStateStore.subscribe((state) => state.tasks);
     const tasks = useChatStateStore.getState().tasks;
@@ -24448,7 +24669,7 @@ var ChatInner = forwardRef5(function ChatInner2({
     });
     return () => unsub();
   }, [onTaskFinish]);
-  const toggleToolExpansion = useCallback17((toolId) => {
+  const toggleToolExpansion = useCallback18((toolId) => {
     setExpandedTools((prev) => {
       const newSet = new Set(prev);
       if (newSet.has(toolId)) {
@@ -24459,10 +24680,10 @@ var ChatInner = forwardRef5(function ChatInner2({
       return newSet;
     });
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  useEffect15(() => {
+  useEffect16(() => {
     const newExpanded = new Set(expandedTools);
     let hasChanges = false;
     toolCalls.forEach((toolCall) => {
@@ -24480,7 +24701,7 @@ var ChatInner = forwardRef5(function ChatInner2({
   const renderMessages = () => {
     const elements = [];
     messages.forEach((message, index) => {
-      const renderedMessage = /* @__PURE__ */ jsx26(
+      const renderedMessage = /* @__PURE__ */ jsx27(
         MessageRenderer,
         {
           message,
@@ -24510,13 +24731,13 @@ var ChatInner = forwardRef5(function ChatInner2({
     );
     externalToolCalls.forEach((toolCall) => {
       elements.push(
-        /* @__PURE__ */ jsx26(RendererWrapper2, { children: toolCall.component }, `external-tool-${toolCall.tool_call_id}`)
+        /* @__PURE__ */ jsx27(RendererWrapper2, { children: toolCall.component }, `external-tool-${toolCall.tool_call_id}`)
       );
     });
     return elements;
   };
   const showEmptyState = messages.length === 0 && !isLoading && !error;
-  const submitFromEmptyState = useCallback17(async (value) => {
+  const submitFromEmptyState = useCallback18(async (value) => {
     console.log("[Chat] submitFromEmptyState called with:", value);
     if (typeof value === "string" || Array.isArray(value)) {
       console.log("[Chat] Sending message:", value);
@@ -24526,7 +24747,7 @@ var ChatInner = forwardRef5(function ChatInner2({
     console.log("[Chat] Sending input:", input);
     await handleSendMessage(input);
   }, [handleSendMessage, input]);
-  const setComposerInput = useCallback17((value) => {
+  const setComposerInput = useCallback18((value) => {
     setInput(value);
   }, [setInput]);
   const emptyStateController = useMemo6(() => ({
@@ -24536,9 +24757,9 @@ var ChatInner = forwardRef5(function ChatInner2({
     isLoading,
     isStreaming
   }), [input, setComposerInput, submitFromEmptyState, isLoading, isStreaming]);
-  const renderComposer = useCallback17((variant, className2) => {
+  const renderComposer = useCallback18((variant, className2) => {
     const basePlaceholder = showEmptyState && emptyState?.promptPlaceholder ? emptyState.promptPlaceholder : "Type your message\u2026";
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       ChatInput,
       {
         value: input,
@@ -24596,7 +24817,7 @@ var ChatInner = forwardRef5(function ChatInner2({
     const className2 = maxWidth ? baseClass : `${baseClass} max-w-2xl`;
     const composer = renderComposer("hero", className2);
     if (maxWidth) {
-      return /* @__PURE__ */ jsx26("div", { style: { maxWidth }, children: composer });
+      return /* @__PURE__ */ jsx27("div", { style: { maxWidth }, children: composer });
     }
     return composer;
   }, [renderComposer, maxWidth]);
@@ -24612,7 +24833,7 @@ var ChatInner = forwardRef5(function ChatInner2({
     if (renderEmptyState) {
       return renderEmptyState(controllerWithComposer);
     }
-    return /* @__PURE__ */ jsx26(DefaultChatEmptyState, { controller: controllerWithComposer, options: emptyState, maxWidth });
+    return /* @__PURE__ */ jsx27(DefaultChatEmptyState, { controller: controllerWithComposer, options: emptyState, maxWidth });
   }, [showEmptyState, renderEmptyState, controllerWithComposer, emptyState, maxWidth]);
   const shouldRenderFooterComposer = !showEmptyState || Boolean(renderEmptyState);
   const footerHasContent = shouldRenderFooterComposer || models && models.length > 0 || voiceEnabled && speechToText && (isStreamingVoice || streamingTranscript);
@@ -24620,14 +24841,14 @@ var ChatInner = forwardRef5(function ChatInner2({
   const renderThinkingIndicator = () => {
     if (streamingIndicator === "typing") {
       if (renderLoadingAnimation) {
-        return /* @__PURE__ */ jsx26(RendererWrapper2, { className: "distri-typing-indicator", children: renderLoadingAnimation() }, `typing-indicator`);
+        return /* @__PURE__ */ jsx27(RendererWrapper2, { className: "distri-typing-indicator", children: renderLoadingAnimation() }, `typing-indicator`);
       }
       if (loadingAnimation) {
-        return /* @__PURE__ */ jsx26(RendererWrapper2, { className: "distri-typing-indicator", children: /* @__PURE__ */ jsx26(LoadingAnimation, { config: loadingAnimation }) }, `typing-indicator`);
+        return /* @__PURE__ */ jsx27(RendererWrapper2, { className: "distri-typing-indicator", children: /* @__PURE__ */ jsx27(LoadingAnimation, { config: loadingAnimation }) }, `typing-indicator`);
       }
-      return /* @__PURE__ */ jsx26(RendererWrapper2, { className: "distri-typing-indicator", children: /* @__PURE__ */ jsx26(TypingIndicator, {}) }, `typing-indicator`);
+      return /* @__PURE__ */ jsx27(RendererWrapper2, { className: "distri-typing-indicator", children: /* @__PURE__ */ jsx27(TypingIndicator, {}) }, `typing-indicator`);
     } else if (streamingIndicator) {
-      return /* @__PURE__ */ jsx26(RendererWrapper2, { className: "distri-thinking-indicator", children: /* @__PURE__ */ jsx26(
+      return /* @__PURE__ */ jsx27(RendererWrapper2, { className: "distri-thinking-indicator", children: /* @__PURE__ */ jsx27(
         ThinkingRenderer,
         {
           indicator: streamingIndicator,
@@ -24640,38 +24861,38 @@ var ChatInner = forwardRef5(function ChatInner2({
   const renderPendingMessage = () => {
     if (!pendingMessage || pendingMessage.length === 0) return null;
     const partCount = pendingMessage.length;
-    return /* @__PURE__ */ jsx26(RendererWrapper2, { children: /* @__PURE__ */ jsx26("div", { className: "border-l-4 border-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-r-lg", children: /* @__PURE__ */ jsxs19("div", { className: "flex items-start", children: [
-      /* @__PURE__ */ jsx26("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx26("div", { className: "w-2 h-2 bg-yellow-400 rounded-full animate-pulse mt-2" }) }),
-      /* @__PURE__ */ jsxs19("div", { className: "ml-3 flex-1", children: [
-        /* @__PURE__ */ jsxs19("h3", { className: "text-sm font-medium text-yellow-800 dark:text-yellow-200", children: [
+    return /* @__PURE__ */ jsx27(RendererWrapper2, { children: /* @__PURE__ */ jsx27("div", { className: "border-l-4 border-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-r-lg", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-start", children: [
+      /* @__PURE__ */ jsx27("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx27("div", { className: "w-2 h-2 bg-yellow-400 rounded-full animate-pulse mt-2" }) }),
+      /* @__PURE__ */ jsxs20("div", { className: "ml-3 flex-1", children: [
+        /* @__PURE__ */ jsxs20("h3", { className: "text-sm font-medium text-yellow-800 dark:text-yellow-200", children: [
           "Message queued (",
           partCount,
           " part",
           partCount > 1 ? "s" : "",
           ")"
         ] }),
-        /* @__PURE__ */ jsx26("div", { className: "mt-2", children: /* @__PURE__ */ jsx26("div", { className: "text-sm text-yellow-700 dark:text-yellow-300 bg-white dark:bg-gray-800 p-2 rounded border", children: pendingMessage.map((part, partIndex) => {
+        /* @__PURE__ */ jsx27("div", { className: "mt-2", children: /* @__PURE__ */ jsx27("div", { className: "text-sm text-yellow-700 dark:text-yellow-300 bg-white dark:bg-gray-800 p-2 rounded border", children: pendingMessage.map((part, partIndex) => {
           if (part.part_type === "text") {
-            return /* @__PURE__ */ jsx26("span", { className: "block mb-1", children: part.data }, partIndex);
+            return /* @__PURE__ */ jsx27("span", { className: "block mb-1", children: part.data }, partIndex);
           } else if (part.part_type === "image" && typeof part.data === "object" && part.data !== null && "name" in part.data) {
-            return /* @__PURE__ */ jsxs19("span", { className: "inline-block text-xs text-muted-foreground bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded mr-2 mb-1", children: [
+            return /* @__PURE__ */ jsxs20("span", { className: "inline-block text-xs text-muted-foreground bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded mr-2 mb-1", children: [
               "\u{1F4F7} ",
               part.data.name
             ] }, partIndex);
           }
-          return /* @__PURE__ */ jsxs19("span", { className: "inline-block text-xs text-muted-foreground bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded mr-2 mb-1", children: [
+          return /* @__PURE__ */ jsxs20("span", { className: "inline-block text-xs text-muted-foreground bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded mr-2 mb-1", children: [
             "[",
             part.part_type,
             "]"
           ] }, partIndex);
         }) }) }),
-        /* @__PURE__ */ jsx26("p", { className: "mt-2 text-xs text-yellow-600 dark:text-yellow-400", children: "Will be sent automatically when AI response is complete" })
+        /* @__PURE__ */ jsx27("p", { className: "mt-2 text-xs text-yellow-600 dark:text-yellow-400", children: "Will be sent automatically when AI response is complete" })
       ] })
     ] }) }) }, "pending-message");
   };
   if (!agent2)
-    return /* @__PURE__ */ jsx26("div", { children: " Agent not available" });
-  return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsx27("div", { children: " Agent not available" });
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: `flex flex-col h-full bg-background font-sans overflow-hidden relative ${getThemeClasses(theme)} ${className}`,
@@ -24680,34 +24901,35 @@ var ChatInner = forwardRef5(function ChatInner2({
       onDragLeave: handleDragLeave,
       onDrop: handleDrop2,
       children: [
-        isDragOver && /* @__PURE__ */ jsx26("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-primary/10 border-2 border-primary border-dashed", children: /* @__PURE__ */ jsx26("div", { className: "text-primary font-medium text-lg", children: "Drop images anywhere to upload" }) }),
-        /* @__PURE__ */ jsx26("div", { className: "flex-1 overflow-y-auto bg-background text-foreground selection:bg-primary/20 selection:text-primary-foreground dark:selection:bg-primary/40", children: /* @__PURE__ */ jsxs19(
+        isDragOver && /* @__PURE__ */ jsx27("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-primary/10 border-2 border-primary border-dashed", children: /* @__PURE__ */ jsx27("div", { className: "text-primary font-medium text-lg", children: "Drop images anywhere to upload" }) }),
+        /* @__PURE__ */ jsx27("div", { className: "flex-1 overflow-y-auto bg-background text-foreground selection:bg-primary/20 selection:text-primary-foreground dark:selection:bg-primary/40", children: /* @__PURE__ */ jsxs20(
           "div",
           {
             className: "mx-auto w-full px-2 py-4 text-sm space-y-4",
             style: { maxWidth: maxWidth || "768px", width: "100%", boxSizing: "border-box" },
             children: [
-              error && /* @__PURE__ */ jsx26("div", { className: "p-4 bg-destructive/10 border-l-4 border-destructive", children: /* @__PURE__ */ jsxs19("div", { className: "text-destructive text-xs", children: [
-                /* @__PURE__ */ jsx26("strong", { children: "Error:" }),
+              error && /* @__PURE__ */ jsx27("div", { className: "p-4 bg-destructive/10 border-l-4 border-destructive", children: /* @__PURE__ */ jsxs20("div", { className: "text-destructive text-xs", children: [
+                /* @__PURE__ */ jsx27("strong", { children: "Error:" }),
                 " ",
                 error.message
               ] }) }),
-              todos && todos.length > 0 && /* @__PURE__ */ jsx26(TodosDisplay, { todos, className: "mb-4" }),
-              /* @__PURE__ */ jsxs19(
+              /* @__PURE__ */ jsx27(ThreadTokensBanner, { thread: threadDetails }),
+              todos && todos.length > 0 && /* @__PURE__ */ jsx27(TodosDisplay, { todos, className: "mb-4" }),
+              /* @__PURE__ */ jsxs20(
                 "div",
                 {
                   className: "flex flex-col gap-4 lg:flex-row lg:items-start",
                   style: maxWidth ? { maxWidth: "100%" } : void 0,
                   children: [
-                    /* @__PURE__ */ jsx26(MessageReadProvider, { threadId, enabled: enableFeedback, children: /* @__PURE__ */ jsxs19("div", { className: "flex-1 min-w-0 space-y-4 w-full", children: [
+                    /* @__PURE__ */ jsx27(MessageReadProvider, { threadId, enabled: enableFeedback, children: /* @__PURE__ */ jsxs20("div", { className: "flex-1 min-w-0 space-y-4 w-full", children: [
                       emptyStateContent,
                       renderMessages(),
                       renderExternalToolCalls(),
                       renderThinkingIndicator(),
                       renderPendingMessage(),
-                      /* @__PURE__ */ jsx26("div", { ref: messagesEndRef })
+                      /* @__PURE__ */ jsx27("div", { ref: messagesEndRef })
                     ] }) }),
-                    showBrowserPreview && browserViewerUrl && /* @__PURE__ */ jsx26("div", { className: "w-full lg:w-[320px] xl:w-[360px] shrink-0", children: /* @__PURE__ */ jsx26("div", { className: "lg:sticky lg:top-4 space-y-3", children: /* @__PURE__ */ jsx26("div", { className: "overflow-hidden rounded-xl border border-border/40 bg-background", children: /* @__PURE__ */ jsx26(
+                    showBrowserPreview && browserViewerUrl && /* @__PURE__ */ jsx27("div", { className: "w-full lg:w-[320px] xl:w-[360px] shrink-0", children: /* @__PURE__ */ jsx27("div", { className: "lg:sticky lg:top-4 space-y-3", children: /* @__PURE__ */ jsx27("div", { className: "overflow-hidden rounded-xl border border-border/40 bg-background", children: /* @__PURE__ */ jsx27(
                       "iframe",
                       {
                         src: browserViewerUrl,
@@ -24722,24 +24944,24 @@ var ChatInner = forwardRef5(function ChatInner2({
             ]
           }
         ) }),
-        footerHasContent ? /* @__PURE__ */ jsx26("footer", { className: "\n  sticky bottom-0 inset-x-0 z-30\n  border-t border-border\n  bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60\n  pb-[env(safe-area-inset-bottom)]\n", children: /* @__PURE__ */ jsxs19(
+        footerHasContent ? /* @__PURE__ */ jsx27("footer", { className: "\n  sticky bottom-0 inset-x-0 z-30\n  border-t border-border\n  bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60\n  pb-[env(safe-area-inset-bottom)]\n", children: /* @__PURE__ */ jsxs20(
           "div",
           {
             className: "mx-auto w-full px-4 py-3 sm:py-4 space-y-3",
             style: { maxWidth: maxWidth || "768px" },
             children: [
-              models && models.length > 0 && /* @__PURE__ */ jsxs19("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ jsx26("span", { className: "text-sm text-muted-foreground shrink-0", children: "Model:" }),
-                /* @__PURE__ */ jsxs19(Select, { value: selectedModelId, onValueChange: onModelChange, children: [
-                  /* @__PURE__ */ jsx26(SelectTrigger, { className: "w-64 max-w-full", children: /* @__PURE__ */ jsx26(SelectValue, { placeholder: "Select a model" }) }),
-                  /* @__PURE__ */ jsx26(SelectContent, { children: models.map((model) => /* @__PURE__ */ jsx26(SelectItem, { value: model.id, children: model.name }, model.id)) })
+              models && models.length > 0 && /* @__PURE__ */ jsxs20("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsx27("span", { className: "text-sm text-muted-foreground shrink-0", children: "Model:" }),
+                /* @__PURE__ */ jsxs20(Select, { value: selectedModelId, onValueChange: onModelChange, children: [
+                  /* @__PURE__ */ jsx27(SelectTrigger, { className: "w-64 max-w-full", children: /* @__PURE__ */ jsx27(SelectValue, { placeholder: "Select a model" }) }),
+                  /* @__PURE__ */ jsx27(SelectContent, { children: models.map((model) => /* @__PURE__ */ jsx27(SelectItem, { value: model.id, children: model.name }, model.id)) })
                 ] })
               ] }),
-              voiceEnabled && speechToText && (isStreamingVoice || streamingTranscript) && /* @__PURE__ */ jsxs19("div", { className: "p-3 bg-muted/50 border border-muted rounded-lg", children: [
-                /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx26("span", { className: "w-2 h-2 rounded-full bg-red-500 animate-pulse" }),
-                  /* @__PURE__ */ jsx26("span", { className: "text-sm font-medium text-muted-foreground", children: isStreamingVoice ? "Listening\u2026" : "Processing\u2026" }),
-                  isStreamingVoice && /* @__PURE__ */ jsx26(
+              voiceEnabled && speechToText && (isStreamingVoice || streamingTranscript) && /* @__PURE__ */ jsxs20("div", { className: "p-3 bg-muted/50 border border-muted rounded-lg", children: [
+                /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx27("span", { className: "w-2 h-2 rounded-full bg-red-500 animate-pulse" }),
+                  /* @__PURE__ */ jsx27("span", { className: "text-sm font-medium text-muted-foreground", children: isStreamingVoice ? "Listening\u2026" : "Processing\u2026" }),
+                  isStreamingVoice && /* @__PURE__ */ jsx27(
                     "button",
                     {
                       onClick: stopStreamingVoice,
@@ -24748,7 +24970,7 @@ var ChatInner = forwardRef5(function ChatInner2({
                     }
                   )
                 ] }),
-                streamingTranscript && /* @__PURE__ */ jsxs19("p", { className: "mt-2 text-sm text-foreground font-mono break-words", children: [
+                streamingTranscript && /* @__PURE__ */ jsxs20("p", { className: "mt-2 text-sm text-foreground font-mono break-words", children: [
                   "\u201C",
                   streamingTranscript,
                   "\u201D"
@@ -24763,7 +24985,7 @@ var ChatInner = forwardRef5(function ChatInner2({
   );
 });
 var Chat = forwardRef5((props, ref) => {
-  return /* @__PURE__ */ jsx26(AuthLoading, { children: /* @__PURE__ */ jsx26(ChatContainer, { ref, ...props }) });
+  return /* @__PURE__ */ jsx27(AuthLoading, { children: /* @__PURE__ */ jsx27(ChatContainer, { ref, ...props }) });
 });
 var ChatContainer = forwardRef5(function ChatContainer2({ agent: agentProp, agentId, enableHistory, threadId, initialMessages: initialMessagesProp, theme, enableFeedback, ...props }, ref) {
   const { isLoading: clientLoading } = useDistri();
@@ -24778,30 +25000,30 @@ var ChatContainer = forwardRef5(function ChatContainer2({ agent: agentProp, agen
   });
   const initialMessages = initialMessagesProp || fetchedMessages;
   if (clientLoading || agentLoading || enableHistory && historyLoading) {
-    return /* @__PURE__ */ jsxs19("div", { className: `flex flex-col items-center justify-center p-8 text-center h-full bg-background ${getThemeClasses(theme || "auto")}`, children: [
-      /* @__PURE__ */ jsx26(Loader25, { className: "h-8 w-8 animate-spin text-primary mb-4" }),
-      /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground font-sans text-sm", children: "Initializing..." })
+    return /* @__PURE__ */ jsxs20("div", { className: `flex flex-col items-center justify-center p-8 text-center h-full bg-background ${getThemeClasses(theme || "auto")}`, children: [
+      /* @__PURE__ */ jsx27(Loader25, { className: "h-8 w-8 animate-spin text-primary mb-4" }),
+      /* @__PURE__ */ jsx27("p", { className: "text-muted-foreground font-sans text-sm", children: "Initializing..." })
     ] });
   }
   if (!agent2) {
-    return /* @__PURE__ */ jsxs19("div", { className: `flex flex-col items-center justify-center p-8 text-center h-full bg-background ${getThemeClasses(theme || "auto")}`, children: [
-      /* @__PURE__ */ jsx26(AlertCircle3, { className: "h-12 w-12 text-amber-500 mb-4" }),
-      /* @__PURE__ */ jsx26("h2", { className: "text-lg font-semibold text-foreground mb-2", children: "Agent Not Available" }),
-      /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground font-sans text-sm mb-4", children: "No agent has been configured or the backend is not responding." }),
-      /* @__PURE__ */ jsx26("p", { className: "text-muted-foreground font-sans text-xs", children: "Make sure your Distri backend is running and accessible." })
+    return /* @__PURE__ */ jsxs20("div", { className: `flex flex-col items-center justify-center p-8 text-center h-full bg-background ${getThemeClasses(theme || "auto")}`, children: [
+      /* @__PURE__ */ jsx27(AlertCircle3, { className: "h-12 w-12 text-amber-500 mb-4" }),
+      /* @__PURE__ */ jsx27("h2", { className: "text-lg font-semibold text-foreground mb-2", children: "Agent Not Available" }),
+      /* @__PURE__ */ jsx27("p", { className: "text-muted-foreground font-sans text-sm mb-4", children: "No agent has been configured or the backend is not responding." }),
+      /* @__PURE__ */ jsx27("p", { className: "text-muted-foreground font-sans text-xs", children: "Make sure your Distri backend is running and accessible." })
     ] });
   }
-  return /* @__PURE__ */ jsx26(ChatInner, { ref, agent: agent2, threadId, initialMessages, theme, enableFeedback, ...props });
+  return /* @__PURE__ */ jsx27(ChatInner, { ref, agent: agent2, threadId, initialMessages, theme, enableFeedback, ...props });
 });
 
 // src/components/AgentList.tsx
 import React18 from "react";
 import { RefreshCw, Play, Bot } from "lucide-react";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 
 // src/components/AgentSelect.tsx
 import { Bot as Bot2 } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 var AgentSelect = ({
   agents,
   selectedAgentId,
@@ -24811,29 +25033,29 @@ var AgentSelect = ({
   disabled = false
 }) => {
   const selectedAgent = agents.find((agent2) => agent2.id === selectedAgentId);
-  return /* @__PURE__ */ jsxs21(Select, { value: selectedAgentId, onValueChange: onAgentSelect, disabled, children: [
-    /* @__PURE__ */ jsx28(SelectTrigger, { className: `w-full ${className} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`, children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center space-x-2", children: [
-      /* @__PURE__ */ jsx28(Bot2, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx28(SelectValue, { placeholder, children: selectedAgent?.name || placeholder })
+  return /* @__PURE__ */ jsxs22(Select, { value: selectedAgentId, onValueChange: onAgentSelect, disabled, children: [
+    /* @__PURE__ */ jsx29(SelectTrigger, { className: `w-full ${className} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`, children: /* @__PURE__ */ jsxs22("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx29(Bot2, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx29(SelectValue, { placeholder, children: selectedAgent?.name || placeholder })
     ] }) }),
-    /* @__PURE__ */ jsx28(SelectContent, { children: agents.map((agent2) => /* @__PURE__ */ jsx28(SelectItem, { value: agent2.id, children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center space-x-2", children: [
-      /* @__PURE__ */ jsx28(Bot2, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsxs21("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx28("span", { className: "font-medium", children: agent2.name }),
-        agent2.description && /* @__PURE__ */ jsx28("span", { className: "text-xs text-muted-foreground", children: agent2.description })
+    /* @__PURE__ */ jsx29(SelectContent, { children: agents.map((agent2) => /* @__PURE__ */ jsx29(SelectItem, { value: agent2.id, children: /* @__PURE__ */ jsxs22("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx29(Bot2, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsxs22("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx29("span", { className: "font-medium", children: agent2.name }),
+        agent2.description && /* @__PURE__ */ jsx29("span", { className: "text-xs text-muted-foreground", children: agent2.description })
       ] })
     ] }) }, agent2.id)) })
   ] });
 };
 
 // src/components/BrowserPreviewPanel.tsx
-import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var BrowserPreviewPanel = ({
   frameSrc,
   timestampLabel,
   className
 }) => {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn(
@@ -24841,14 +25063,14 @@ var BrowserPreviewPanel = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-3 py-2 border-b bg-background/70 backdrop-blur text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsx29("span", { className: "text-xs sm:text-sm font-medium text-foreground", children: "Live browser preview" }),
-          timestampLabel && /* @__PURE__ */ jsxs22("span", { className: "text-[11px] text-muted-foreground/80", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between px-3 py-2 border-b bg-background/70 backdrop-blur text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx30("span", { className: "text-xs sm:text-sm font-medium text-foreground", children: "Live browser preview" }),
+          timestampLabel && /* @__PURE__ */ jsxs23("span", { className: "text-[11px] text-muted-foreground/80", children: [
             "Updated ",
             timestampLabel
           ] })
         ] }),
-        /* @__PURE__ */ jsx29("div", { className: "bg-background", children: /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30("div", { className: "bg-background", children: /* @__PURE__ */ jsx30(
           "img",
           {
             src: frameSrc,
@@ -24862,10 +25084,10 @@ var BrowserPreviewPanel = ({
 };
 
 // src/components/BrowserViewport.tsx
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
-var DefaultEmptyState = () => /* @__PURE__ */ jsxs23("div", { className: "flex h-full flex-col items-center justify-center gap-2 text-center text-sm text-muted-foreground", children: [
-  /* @__PURE__ */ jsx30("p", { children: "No browser session." }),
-  /* @__PURE__ */ jsx30("p", { className: "text-xs text-muted-foreground/70", children: "Browser will appear here when an agent uses it." })
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+var DefaultEmptyState = () => /* @__PURE__ */ jsxs24("div", { className: "flex h-full flex-col items-center justify-center gap-2 text-center text-sm text-muted-foreground", children: [
+  /* @__PURE__ */ jsx31("p", { children: "No browser session." }),
+  /* @__PURE__ */ jsx31("p", { className: "text-xs text-muted-foreground/70", children: "Browser will appear here when an agent uses it." })
 ] });
 var BrowserViewport = ({
   className,
@@ -24876,7 +25098,7 @@ var BrowserViewport = ({
   const browserSessionId = useChatStateStore((state) => state.browserSessionId);
   const effectiveViewerUrl = viewerUrlOverride || browserViewerUrl;
   if (effectiveViewerUrl) {
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "div",
       {
         className: cn(
@@ -24884,11 +25106,11 @@ var BrowserViewport = ({
           className
         ),
         children: [
-          browserSessionId && /* @__PURE__ */ jsxs23("div", { className: "absolute left-2 top-2 z-10 rounded-md bg-background/90 px-2 py-1 text-xs text-muted-foreground backdrop-blur-sm", children: [
+          browserSessionId && /* @__PURE__ */ jsxs24("div", { className: "absolute left-2 top-2 z-10 rounded-md bg-background/90 px-2 py-1 text-xs text-muted-foreground backdrop-blur-sm", children: [
             "Session: ",
             browserSessionId
           ] }),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             "iframe",
             {
               src: effectiveViewerUrl,
@@ -24901,30 +25123,30 @@ var BrowserViewport = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       className: cn(
         "h-full min-h-[220px] rounded-xl border border-dashed border-border/40 bg-muted/10 p-4",
         className
       ),
-      children: emptyState ?? /* @__PURE__ */ jsx30(DefaultEmptyState, {})
+      children: emptyState ?? /* @__PURE__ */ jsx31(DefaultEmptyState, {})
     }
   );
 };
 
 // src/components/ConfigurationPanel.tsx
-import { useEffect as useEffect17, useMemo as useMemo7, useState as useState20 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo7, useState as useState21 } from "react";
 
 // src/hooks/useConfiguration.ts
-import { useCallback as useCallback18, useEffect as useEffect16, useState as useState19 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect17, useState as useState20 } from "react";
 function useConfiguration() {
   const { client, isLoading } = useDistri();
-  const [configuration, setConfiguration] = useState19(null);
-  const [meta, setMeta2] = useState19(null);
-  const [loading, setLoading] = useState19(true);
-  const [error, setError] = useState19(null);
-  const refresh = useCallback18(async () => {
+  const [configuration, setConfiguration] = useState20(null);
+  const [meta, setMeta2] = useState20(null);
+  const [loading, setLoading] = useState20(true);
+  const [error, setError] = useState20(null);
+  const refresh = useCallback19(async () => {
     setLoading(true);
     try {
       if (isLoading || !client) return;
@@ -24939,7 +25161,7 @@ function useConfiguration() {
       setLoading(false);
     }
   }, [client, isLoading]);
-  const saveConfiguration = useCallback18(
+  const saveConfiguration = useCallback19(
     async (config) => {
       setLoading(true);
       try {
@@ -24958,7 +25180,7 @@ function useConfiguration() {
     },
     [client]
   );
-  useEffect16(() => {
+  useEffect17(() => {
     void refresh();
   }, [refresh]);
   return {
@@ -24974,8 +25196,8 @@ function useConfiguration() {
 
 // src/components/ui/card.tsx
 import * as React19 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var Card = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Card = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   "div",
   {
     ref,
@@ -24987,7 +25209,7 @@ var Card = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var CardHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   "div",
   {
     ref,
@@ -24996,7 +25218,7 @@ var CardHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var CardTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   "h3",
   {
     ref,
@@ -25008,7 +25230,7 @@ var CardTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var CardDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   "p",
   {
     ref,
@@ -25017,9 +25239,9 @@ var CardDescription = React19.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var CardFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   "div",
   {
     ref,
@@ -25031,10 +25253,10 @@ CardFooter.displayName = "CardFooter";
 
 // src/components/ui/input.tsx
 import * as React20 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Input = React20.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx33(
       "input",
       {
         type,
@@ -25051,12 +25273,12 @@ var Input = React20.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/skeleton.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Skeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: cn("animate-pulse rounded-md bg-muted", className),
@@ -25067,7 +25289,7 @@ function Skeleton({
 
 // src/components/ui/badge.tsx
 import { cva } from "class-variance-authority";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -25085,13 +25307,15 @@ var badgeVariants = cva(
   }
 );
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx34("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ jsx35("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/ConfigurationPanel.tsx
-import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var providerOptions = [
   { value: "openai", label: "OpenAI", hint: "Hosted" },
+  { value: "anthropic", label: "Anthropic", hint: "Claude" },
+  { value: "azure_openai", label: "Azure OpenAI", hint: "Azure" },
   { value: "openai_compat", label: "OpenAI Compatible", hint: "Custom base URL" },
   { value: "vllora", label: "VLLora", hint: "Local" }
 ];
@@ -25100,7 +25324,7 @@ var defaultModelSettings = (settings) => {
   return {
     model: settings?.model || "gpt-4.1-mini",
     temperature: settings?.temperature ?? 0.7,
-    max_tokens: settings?.max_tokens ?? 1e3,
+    max_tokens: settings?.max_tokens,
     context_size: settings?.context_size ?? 2e4,
     top_p: settings?.top_p ?? 1,
     frequency_penalty: settings?.frequency_penalty ?? 0,
@@ -25124,32 +25348,38 @@ var providerDefaults = (name) => {
   switch (name) {
     case "openai_compat":
       return { name, base_url: "http://localhost:8080/v1" };
+    case "azure_openai":
+      return { name, base_url: "", deployment: "", api_version: "2024-02-01" };
     case "vllora":
       return { name, base_url: "http://localhost:9090/v1" };
     default:
       return { name };
   }
 };
-var FieldLabel = ({ children }) => /* @__PURE__ */ jsx35("span", { className: "text-xs font-medium text-muted-foreground", children });
+var FieldLabel = ({ children }) => /* @__PURE__ */ jsx36("span", { className: "text-xs font-medium text-muted-foreground", children });
 var MetaRow = ({ meta }) => {
   if (!meta) return null;
-  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
-    /* @__PURE__ */ jsx35(Badge, { variant: meta.overrides_active ? "secondary" : "outline", children: meta.overrides_active ? "Overrides active" : "Using base configuration" }),
-    /* @__PURE__ */ jsxs24("span", { className: "truncate", children: [
+  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsx36(Badge, { variant: meta.overrides_active ? "secondary" : "outline", children: meta.overrides_active ? "Overrides active" : "Using base configuration" }),
+    /* @__PURE__ */ jsxs25("span", { className: "truncate", children: [
       "Base: ",
       meta.base_path
     ] }),
-    /* @__PURE__ */ jsxs24("span", { className: "truncate", children: [
+    /* @__PURE__ */ jsxs25("span", { className: "truncate", children: [
       "Overrides: ",
       meta.overrides_path
     ] })
   ] });
 };
 function ConfigurationPanel({ className, title = "Agent Settings" }) {
-  const { configuration, meta, loading, error } = useConfiguration();
-  const [draft, setDraft] = useState20(null);
-  const [useCustomAnalysis, setUseCustomAnalysis] = useState20(false);
-  useEffect17(() => {
+  const { configuration, meta, loading, error, saveConfiguration } = useConfiguration();
+  const { providers } = useModels();
+  const [draft, setDraft] = useState21(null);
+  const [useCustomAnalysis, setUseCustomAnalysis] = useState21(false);
+  const [saving, setSaving] = useState21(false);
+  const [saveError, setSaveError] = useState21(null);
+  const [saveSuccess, setSaveSuccess] = useState21(false);
+  useEffect18(() => {
     if (configuration) {
       setDraft({
         ...configuration,
@@ -25192,110 +25422,181 @@ function ConfigurationPanel({ className, title = "Agent Settings" }) {
   const renderProviderExtras = (settings, fallbackName) => {
     const provider = parseProvider(settings?.provider);
     const activeName = provider.name || fallbackName;
-    if (!activeName || activeName !== "openai_compat" && activeName !== "vllora") {
-      return null;
-    }
-    return /* @__PURE__ */ jsxs24("div", { className: "space-y-2 rounded-md border border-dashed border-border/60 p-3", children: [
-      /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx35(FieldLabel, { children: "Provider details" }),
-        /* @__PURE__ */ jsx35(Badge, { variant: "outline", className: "uppercase", children: activeName })
+    const target = settings === draft?.analysis_model_settings ? "analysis_model_settings" : "model_settings";
+    const needsExtras = activeName === "openai_compat" || activeName === "vllora" || activeName === "azure_openai";
+    if (!activeName || !needsExtras) return null;
+    return /* @__PURE__ */ jsxs25("div", { className: "md:col-span-2 space-y-3 rounded-md border border-dashed border-border/60 p-3", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx36(FieldLabel, { children: "Provider details" }),
+        /* @__PURE__ */ jsx36(Badge, { variant: "outline", className: "uppercase", children: activeName })
       ] }),
-      /* @__PURE__ */ jsx35(
-        Input,
-        {
-          value: provider.base_url || "",
-          onChange: (e) => updateModelSetting(
-            settings === draft?.analysis_model_settings ? "analysis_model_settings" : "model_settings",
-            "provider",
-            { ...provider, base_url: e.target.value }
-          ),
-          placeholder: "https://your-provider/v1"
-        }
-      ),
-      activeName === "openai_compat" && /* @__PURE__ */ jsx35("p", { className: "text-xs text-muted-foreground", children: "Base URL for your compatible gateway. Credentials are pulled from the backend environment when available." })
+      (activeName === "openai_compat" || activeName === "vllora" || activeName === "azure_openai") && /* @__PURE__ */ jsxs25("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx36(FieldLabel, { children: "Base URL" }),
+        /* @__PURE__ */ jsx36(
+          Input,
+          {
+            value: provider.base_url || "",
+            onChange: (e) => updateModelSetting(target, "provider", { ...provider, base_url: e.target.value }),
+            placeholder: activeName === "azure_openai" ? "https://your-resource.openai.azure.com" : "https://your-provider/v1"
+          }
+        )
+      ] }),
+      activeName === "azure_openai" && /* @__PURE__ */ jsxs25(Fragment6, { children: [
+        /* @__PURE__ */ jsxs25("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx36(FieldLabel, { children: "Deployment name" }),
+          /* @__PURE__ */ jsx36(
+            Input,
+            {
+              value: provider.deployment || "",
+              onChange: (e) => updateModelSetting(target, "provider", { ...provider, deployment: e.target.value }),
+              placeholder: "gpt-4o"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs25("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx36(FieldLabel, { children: "API version" }),
+          /* @__PURE__ */ jsx36(
+            Input,
+            {
+              value: provider.api_version || "2024-02-01",
+              onChange: (e) => updateModelSetting(target, "provider", { ...provider, api_version: e.target.value }),
+              placeholder: "2024-02-01"
+            }
+          )
+        ] })
+      ] }),
+      activeName === "openai_compat" && /* @__PURE__ */ jsx36("p", { className: "text-xs text-muted-foreground", children: "Base URL for your compatible gateway. Credentials are pulled from the backend environment when available." })
     ] });
   };
-  const disabled = true;
-  return /* @__PURE__ */ jsxs24("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs24("div", { children: [
-        /* @__PURE__ */ jsx35("p", { className: "text-xs uppercase tracking-[0.3em] text-muted-foreground", children: "Distri" }),
-        /* @__PURE__ */ jsx35("h2", { className: "text-xl font-semibold", children: title })
+  const handleSave = async () => {
+    if (!draft) return;
+    setSaving(true);
+    setSaveError(null);
+    setSaveSuccess(false);
+    try {
+      await saveConfiguration(draft);
+      setSaveSuccess(true);
+      setTimeout(() => setSaveSuccess(false), 3e3);
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const renderModelSelect = (target, currentModel) => {
+    const modelLabel = (() => {
+      if (!currentModel) return void 0;
+      for (const p of providers) {
+        const m = p.models.find((m2) => m2.id === currentModel);
+        if (m) return m.name;
+      }
+      return currentModel;
+    })();
+    return /* @__PURE__ */ jsxs25(
+      Select,
+      {
+        value: currentModel || "",
+        onValueChange: (value) => updateModelSetting(target, "model", value),
+        children: [
+          /* @__PURE__ */ jsx36(SelectTrigger, { children: /* @__PURE__ */ jsx36(SelectValue, { placeholder: "Select a model", children: modelLabel }) }),
+          /* @__PURE__ */ jsx36(SelectContent, { children: providers.map((provider, idx) => /* @__PURE__ */ jsxs25(SelectGroup, { children: [
+            idx > 0 && /* @__PURE__ */ jsx36(SelectSeparator, {}),
+            /* @__PURE__ */ jsxs25(SelectLabel, { className: "flex items-center gap-2 text-xs", children: [
+              /* @__PURE__ */ jsx36(
+                "span",
+                {
+                  className: cn(
+                    "inline-block h-2 w-2 rounded-full",
+                    provider.configured ? "bg-emerald-500" : "bg-muted-foreground/40"
+                  )
+                }
+              ),
+              provider.provider_label,
+              !provider.configured && /* @__PURE__ */ jsx36("span", { className: "text-[10px] text-muted-foreground/60 font-normal", children: "(not configured)" })
+            ] }),
+            provider.models.map((model) => /* @__PURE__ */ jsx36(
+              SelectItem,
+              {
+                value: model.id,
+                disabled: !provider.configured,
+                children: model.name
+              },
+              model.id
+            ))
+          ] }, provider.provider_id)) })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs25("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs25("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs25("div", { children: [
+        /* @__PURE__ */ jsx36("p", { className: "text-xs uppercase tracking-[0.3em] text-muted-foreground", children: "Distri" }),
+        /* @__PURE__ */ jsx36("h2", { className: "text-xl font-semibold", children: title })
       ] }),
-      /* @__PURE__ */ jsx35("div", { className: "flex items-center gap-2", children: meta && /* @__PURE__ */ jsx35(MetaRow, { meta }) })
+      /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-2", children: meta && /* @__PURE__ */ jsx36(MetaRow, { meta }) })
     ] }),
-    error && /* @__PURE__ */ jsx35("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: error }),
-    !draft && loading && /* @__PURE__ */ jsx35(Card, { children: /* @__PURE__ */ jsxs24(CardContent, { className: "space-y-3 p-4", children: [
-      /* @__PURE__ */ jsx35(Skeleton, { className: "h-6 w-1/3" }),
-      /* @__PURE__ */ jsx35(Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsx35(Skeleton, { className: "h-4 w-2/3" })
+    error && /* @__PURE__ */ jsx36("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: error }),
+    !draft && loading && /* @__PURE__ */ jsx36(Card, { children: /* @__PURE__ */ jsxs25(CardContent, { className: "space-y-3 p-4", children: [
+      /* @__PURE__ */ jsx36(Skeleton, { className: "h-6 w-1/3" }),
+      /* @__PURE__ */ jsx36(Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx36(Skeleton, { className: "h-4 w-2/3" })
     ] }) }),
-    draft && /* @__PURE__ */ jsxs24(Fragment6, { children: [
-      /* @__PURE__ */ jsx35(Card, { children: /* @__PURE__ */ jsxs24(CardContent, { className: "grid gap-4 md:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx35(FieldLabel, { children: "Name" }),
-          /* @__PURE__ */ jsx35(
+    draft && /* @__PURE__ */ jsxs25(Fragment6, { children: [
+      /* @__PURE__ */ jsx36(Card, { children: /* @__PURE__ */ jsxs25(CardContent, { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx36(FieldLabel, { children: "Name" }),
+          /* @__PURE__ */ jsx36(
             Input,
             {
               value: draft.name,
               onChange: (e) => setDraft((curr) => curr ? { ...curr, name: e.target.value } : curr),
-              placeholder: "browsr",
-              disabled
+              placeholder: "browsr"
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx35(FieldLabel, { children: "Version" }),
-          /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx36(FieldLabel, { children: "Version" }),
+          /* @__PURE__ */ jsx36(
             Input,
             {
               value: draft.version,
               onChange: (e) => setDraft((curr) => curr ? { ...curr, version: e.target.value } : curr),
-              placeholder: "0.1.0",
-              disabled
+              placeholder: "0.1.0"
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs24(Card, { children: [
-        /* @__PURE__ */ jsxs24(CardHeader, { children: [
-          /* @__PURE__ */ jsx35(CardTitle, { children: "Default model" }),
-          /* @__PURE__ */ jsx35(CardDescription, { children: "Used for most agent calls unless a definition overrides it." })
+      /* @__PURE__ */ jsxs25(Card, { children: [
+        /* @__PURE__ */ jsxs25(CardHeader, { children: [
+          /* @__PURE__ */ jsx36(CardTitle, { children: "Default model" }),
+          /* @__PURE__ */ jsx36(CardDescription, { children: "Used for most agent calls unless a definition overrides it." })
         ] }),
-        /* @__PURE__ */ jsxs24(CardContent, { className: "grid gap-4 md:grid-cols-2", children: [
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Provider" }),
-            /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(CardContent, { className: "grid gap-4 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Provider" }),
+            /* @__PURE__ */ jsxs25(
               Select,
               {
                 value: providerName,
                 onValueChange: (value) => updateProvider("model_settings", value),
-                disabled,
                 children: [
-                  /* @__PURE__ */ jsx35(SelectTrigger, { children: /* @__PURE__ */ jsx35(SelectValue, { placeholder: "Choose provider" }) }),
-                  /* @__PURE__ */ jsx35(SelectContent, { children: providerOptions.map((option) => /* @__PURE__ */ jsx35(SelectItem, { value: option.value, children: /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsx35("span", { children: option.label }),
-                    option.hint && /* @__PURE__ */ jsx35("span", { className: "text-xs text-muted-foreground", children: option.hint })
+                  /* @__PURE__ */ jsx36(SelectTrigger, { children: /* @__PURE__ */ jsx36(SelectValue, { placeholder: "Choose provider" }) }),
+                  /* @__PURE__ */ jsx36(SelectContent, { children: providerOptions.map((option) => /* @__PURE__ */ jsx36(SelectItem, { value: option.value, children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsx36("span", { children: option.label }),
+                    option.hint && /* @__PURE__ */ jsx36("span", { className: "text-xs text-muted-foreground", children: option.hint })
                   ] }) }, option.value)) })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Model ID" }),
-            /* @__PURE__ */ jsx35(
-              Input,
-              {
-                value: draft.model_settings?.model || "",
-                onChange: (e) => updateModelSetting("model_settings", "model", e.target.value),
-                placeholder: "gpt-4.1-mini",
-                disabled
-              }
-            )
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Model" }),
+            renderModelSelect("model_settings", draft.model_settings?.model)
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Temperature" }),
-            /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Temperature" }),
+            /* @__PURE__ */ jsx36(
               Input,
               {
                 type: "number",
@@ -25303,41 +25604,38 @@ function ConfigurationPanel({ className, title = "Agent Settings" }) {
                 min: "0",
                 max: "2",
                 value: draft.model_settings?.temperature ?? 0,
-                onChange: (e) => updateModelSetting("model_settings", "temperature", Number.parseFloat(e.target.value)),
-                disabled
+                onChange: (e) => updateModelSetting("model_settings", "temperature", Number.parseFloat(e.target.value))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Max tokens" }),
-            /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Max tokens" }),
+            /* @__PURE__ */ jsx36(
               Input,
               {
                 type: "number",
                 min: "1",
                 value: draft.model_settings?.max_tokens ?? 0,
-                onChange: (e) => updateModelSetting("model_settings", "max_tokens", Number(e.target.value)),
-                disabled
+                onChange: (e) => updateModelSetting("model_settings", "max_tokens", Number(e.target.value))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Context size" }),
-            /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Context size" }),
+            /* @__PURE__ */ jsx36(
               Input,
               {
                 type: "number",
                 min: "1024",
                 step: "512",
                 value: draft.model_settings?.context_size ?? 0,
-                onChange: (e) => updateModelSetting("model_settings", "context_size", Number(e.target.value)),
-                disabled
+                onChange: (e) => updateModelSetting("model_settings", "context_size", Number(e.target.value))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Top P" }),
-            /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Top P" }),
+            /* @__PURE__ */ jsx36(
               Input,
               {
                 type: "number",
@@ -25345,22 +25643,21 @@ function ConfigurationPanel({ className, title = "Agent Settings" }) {
                 max: "1",
                 step: "0.05",
                 value: draft.model_settings?.top_p ?? 1,
-                onChange: (e) => updateModelSetting("model_settings", "top_p", Number.parseFloat(e.target.value)),
-                disabled
+                onChange: (e) => updateModelSetting("model_settings", "top_p", Number.parseFloat(e.target.value))
               }
             )
           ] }),
           renderProviderExtras(draft.model_settings)
         ] })
       ] }),
-      /* @__PURE__ */ jsxs24(Card, { children: [
-        /* @__PURE__ */ jsxs24(CardHeader, { className: "flex flex-row items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx35(CardTitle, { children: "Analysis model" }),
-            /* @__PURE__ */ jsx35(CardDescription, { children: "Optional lighter model for planning and summaries." })
+      /* @__PURE__ */ jsxs25(Card, { children: [
+        /* @__PURE__ */ jsxs25(CardHeader, { className: "flex flex-row items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs25("div", { children: [
+            /* @__PURE__ */ jsx36(CardTitle, { children: "Analysis model" }),
+            /* @__PURE__ */ jsx36(CardDescription, { children: "Optional lighter model for planning and summaries." })
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx36(
               Checkbox,
               {
                 id: "analysis-toggle",
@@ -25384,43 +25681,34 @@ function ConfigurationPanel({ className, title = "Agent Settings" }) {
                 disabled: loading
               }
             ),
-            /* @__PURE__ */ jsx35("label", { htmlFor: "analysis-toggle", className: "text-sm text-muted-foreground", children: "Use dedicated analysis settings" })
+            /* @__PURE__ */ jsx36("label", { htmlFor: "analysis-toggle", className: "text-sm text-muted-foreground", children: "Use dedicated analysis settings" })
           ] })
         ] }),
-        useCustomAnalysis && /* @__PURE__ */ jsxs24(CardContent, { className: "grid gap-4 md:grid-cols-2", children: [
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Provider" }),
-            /* @__PURE__ */ jsxs24(
+        useCustomAnalysis && /* @__PURE__ */ jsxs25(CardContent, { className: "grid gap-4 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Provider" }),
+            /* @__PURE__ */ jsxs25(
               Select,
               {
                 value: analysisProviderName,
                 onValueChange: (value) => updateProvider("analysis_model_settings", value),
-                disabled,
                 children: [
-                  /* @__PURE__ */ jsx35(SelectTrigger, { children: /* @__PURE__ */ jsx35(SelectValue, { placeholder: "Choose provider" }) }),
-                  /* @__PURE__ */ jsx35(SelectContent, { children: providerOptions.map((option) => /* @__PURE__ */ jsx35(SelectItem, { value: option.value, children: /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsx35("span", { children: option.label }),
-                    option.hint && /* @__PURE__ */ jsx35("span", { className: "text-xs text-muted-foreground", children: option.hint })
+                  /* @__PURE__ */ jsx36(SelectTrigger, { children: /* @__PURE__ */ jsx36(SelectValue, { placeholder: "Choose provider" }) }),
+                  /* @__PURE__ */ jsx36(SelectContent, { children: providerOptions.map((option) => /* @__PURE__ */ jsx36(SelectItem, { value: option.value, children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsx36("span", { children: option.label }),
+                    option.hint && /* @__PURE__ */ jsx36("span", { className: "text-xs text-muted-foreground", children: option.hint })
                   ] }) }, option.value)) })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Model ID" }),
-            /* @__PURE__ */ jsx35(
-              Input,
-              {
-                value: draft.analysis_model_settings?.model || "",
-                onChange: (e) => updateModelSetting("analysis_model_settings", "model", e.target.value),
-                placeholder: "gpt-4.1-mini",
-                disabled
-              }
-            )
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Model" }),
+            renderModelSelect("analysis_model_settings", draft.analysis_model_settings?.model)
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Temperature" }),
-            /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Temperature" }),
+            /* @__PURE__ */ jsx36(
               Input,
               {
                 type: "number",
@@ -25428,41 +25716,38 @@ function ConfigurationPanel({ className, title = "Agent Settings" }) {
                 min: "0",
                 max: "2",
                 value: draft.analysis_model_settings?.temperature ?? 0,
-                onChange: (e) => updateModelSetting("analysis_model_settings", "temperature", Number.parseFloat(e.target.value)),
-                disabled
+                onChange: (e) => updateModelSetting("analysis_model_settings", "temperature", Number.parseFloat(e.target.value))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Max tokens" }),
-            /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Max tokens" }),
+            /* @__PURE__ */ jsx36(
               Input,
               {
                 type: "number",
                 min: "1",
                 value: draft.analysis_model_settings?.max_tokens ?? 0,
-                onChange: (e) => updateModelSetting("analysis_model_settings", "max_tokens", Number(e.target.value)),
-                disabled
+                onChange: (e) => updateModelSetting("analysis_model_settings", "max_tokens", Number(e.target.value))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Context size" }),
-            /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Context size" }),
+            /* @__PURE__ */ jsx36(
               Input,
               {
                 type: "number",
                 min: "1024",
                 step: "512",
                 value: draft.analysis_model_settings?.context_size ?? 0,
-                onChange: (e) => updateModelSetting("analysis_model_settings", "context_size", Number(e.target.value)),
-                disabled
+                onChange: (e) => updateModelSetting("analysis_model_settings", "context_size", Number(e.target.value))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx35(FieldLabel, { children: "Top P" }),
-            /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx36(FieldLabel, { children: "Top P" }),
+            /* @__PURE__ */ jsx36(
               Input,
               {
                 type: "number",
@@ -25470,21 +25755,23 @@ function ConfigurationPanel({ className, title = "Agent Settings" }) {
                 max: "1",
                 step: "0.05",
                 value: draft.analysis_model_settings?.top_p ?? 1,
-                onChange: (e) => updateModelSetting("analysis_model_settings", "top_p", Number.parseFloat(e.target.value)),
-                disabled
+                onChange: (e) => updateModelSetting("analysis_model_settings", "top_p", Number.parseFloat(e.target.value))
               }
             )
           ] }),
           renderProviderExtras(draft.analysis_model_settings, analysisProviderName)
         ] })
-      ] })
+      ] }),
+      saveError && /* @__PURE__ */ jsx36("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: saveError }),
+      saveSuccess && /* @__PURE__ */ jsx36("div", { className: "rounded-md border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-600", children: "Settings saved successfully." }),
+      /* @__PURE__ */ jsx36("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx36(Button, { onClick: handleSave, disabled: saving || loading, children: saving ? "Saving..." : "Save Settings" }) })
     ] })
   ] });
 }
 
 // src/components/ThemeProvider.tsx
-import { createContext as createContext5, useContext as useContext5, useState as useState21 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { createContext as createContext5, useContext as useContext5, useState as useState22 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var initialState = {
   theme: "system",
   setTheme: () => null
@@ -25496,7 +25783,7 @@ function ThemeProvider({
   storageKey = "distri-theme",
   ...props
 }) {
-  const [theme, setTheme] = useState21(() => {
+  const [theme, setTheme] = useState22(() => {
     if (typeof window === "undefined") {
       return defaultTheme === "system" ? "dark" : defaultTheme;
     }
@@ -25513,7 +25800,7 @@ function ThemeProvider({
       setTheme(theme2);
     }
   };
-  return /* @__PURE__ */ jsx36(ThemeProviderContext.Provider, { ...props, value, children });
+  return /* @__PURE__ */ jsx37(ThemeProviderContext.Provider, { ...props, value, children });
 }
 var useTheme = () => {
   const context = useContext5(ThemeProviderContext);
@@ -25525,31 +25812,31 @@ var useTheme = () => {
 // src/components/ThemeToggle.tsx
 import React23 from "react";
 import { Moon, Sun } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
 function ThemeToggle({ theme, onThemeChange }) {
   const dropdownRef = React23.useRef(null);
-  return /* @__PURE__ */ jsx37("div", { className: "relative", ref: dropdownRef, children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx38("div", { className: "relative", ref: dropdownRef, children: /* @__PURE__ */ jsxs26(
     "button",
     {
       onClick: () => onThemeChange?.(theme === "light" ? "dark" : "light"),
       className: "flex items-center justify-center w-9 h-9 rounded-md border bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors",
       children: [
-        /* @__PURE__ */ jsx37(Sun, { className: "h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
-        /* @__PURE__ */ jsx37(Moon, { className: "absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
-        /* @__PURE__ */ jsx37("span", { className: "sr-only", children: "Toggle theme" })
+        /* @__PURE__ */ jsx38(Sun, { className: "h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
+        /* @__PURE__ */ jsx38(Moon, { className: "absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
+        /* @__PURE__ */ jsx38("span", { className: "sr-only", children: "Toggle theme" })
       ]
     }
   ) });
 }
 
 // src/components/Toast.tsx
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "react";
 import { X as X3, CheckCircle as CheckCircle4, AlertCircle as AlertCircle4, AlertTriangle, Info } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
 
 // src/components/AskFollowUp.tsx
-import { useState as useState22, useCallback as useCallback19, useMemo as useMemo8, useEffect as useEffect19 } from "react";
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useState as useState23, useCallback as useCallback20, useMemo as useMemo8, useEffect as useEffect20 } from "react";
+import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
 var ASK_FOLLOW_UP_TOOL_NAME = "ask_follow_up";
 function createAskFollowUpTool() {
   return {
@@ -25621,8 +25908,8 @@ function AskFollowUpComponent({
   const input = toolCall.input;
   const questions = useMemo8(() => input?.questions || [], [input?.questions]);
   const hasQuestions = questions.length > 0;
-  const [currentStep, setCurrentStep] = useState22(0);
-  const [answers, setAnswers] = useState22(() => {
+  const [currentStep, setCurrentStep] = useState23(0);
+  const [answers, setAnswers] = useState23(() => {
     const defaults = {};
     questions.forEach((q) => {
       if (q.default !== void 0) {
@@ -25640,7 +25927,7 @@ function AskFollowUpComponent({
   const currentQuestion = hasQuestions ? questions[currentStep] : null;
   const isLastStep = currentStep === questions.length - 1;
   const isCompleted = toolCallState?.status === "completed";
-  useEffect19(() => {
+  useEffect20(() => {
     if (!hasQuestions && !isCompleted) {
       const output = { answers: {}, completed: true };
       completeTool({
@@ -25653,14 +25940,14 @@ function AskFollowUpComponent({
       });
     }
   }, [hasQuestions, isCompleted, completeTool, toolCall.tool_call_id, toolCall.tool_name]);
-  const handleAnswer = useCallback19((value) => {
+  const handleAnswer = useCallback20((value) => {
     if (!currentQuestion) return;
     setAnswers((prev) => ({
       ...prev,
       [currentQuestion.id]: value
     }));
   }, [currentQuestion]);
-  const handleNext = useCallback19(() => {
+  const handleNext = useCallback20(() => {
     if (!currentQuestion) return;
     if (currentQuestion.required && !answers[currentQuestion.id]) {
       return;
@@ -25682,12 +25969,12 @@ function AskFollowUpComponent({
       setCurrentStep((prev) => prev + 1);
     }
   }, [currentQuestion, answers, isLastStep, completeTool, toolCall]);
-  const handleBack = useCallback19(() => {
+  const handleBack = useCallback20(() => {
     if (currentStep > 0) {
       setCurrentStep((prev) => prev - 1);
     }
   }, [currentStep]);
-  const handleKeyDown2 = useCallback19((e) => {
+  const handleKeyDown2 = useCallback20((e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleNext();
@@ -25697,27 +25984,27 @@ function AskFollowUpComponent({
     return null;
   }
   if (isCompleted) {
-    return /* @__PURE__ */ jsxs27("div", { className: "border rounded-lg p-4 bg-muted/30", children: [
-      /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsx39(CheckIcon, { className: "w-4 h-4 text-green-500" }),
-        /* @__PURE__ */ jsx39("span", { children: "Follow-up questions answered" })
+    return /* @__PURE__ */ jsxs28("div", { className: "border rounded-lg p-4 bg-muted/30", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx40(CheckIcon, { className: "w-4 h-4 text-green-500" }),
+        /* @__PURE__ */ jsx40("span", { children: "Follow-up questions answered" })
       ] }),
-      /* @__PURE__ */ jsx39("div", { className: "mt-2 space-y-1", children: questions.map((q) => /* @__PURE__ */ jsxs27("div", { className: "text-xs", children: [
-        /* @__PURE__ */ jsx39("span", { className: "text-muted-foreground", children: q.question }),
-        /* @__PURE__ */ jsx39("span", { className: "ml-2 font-medium", children: Array.isArray(answers[q.id]) ? answers[q.id].join(", ") : String(answers[q.id]) })
+      /* @__PURE__ */ jsx40("div", { className: "mt-2 space-y-1", children: questions.map((q) => /* @__PURE__ */ jsxs28("div", { className: "text-xs", children: [
+        /* @__PURE__ */ jsx40("span", { className: "text-muted-foreground", children: q.question }),
+        /* @__PURE__ */ jsx40("span", { className: "ml-2 font-medium", children: Array.isArray(answers[q.id]) ? answers[q.id].join(", ") : String(answers[q.id]) })
       ] }, q.id)) })
     ] });
   }
   if (!currentQuestion) {
     return null;
   }
-  return /* @__PURE__ */ jsxs27("div", { className: "border rounded-lg overflow-hidden bg-background shadow-sm", children: [
-    (input.title || input.description) && /* @__PURE__ */ jsxs27("div", { className: "px-4 py-3 border-b bg-muted/30", children: [
-      input.title && /* @__PURE__ */ jsx39("h3", { className: "font-medium text-sm", children: input.title }),
-      input.description && /* @__PURE__ */ jsx39("p", { className: "text-xs text-muted-foreground mt-1", children: input.description })
+  return /* @__PURE__ */ jsxs28("div", { className: "border rounded-lg overflow-hidden bg-background shadow-sm", children: [
+    (input.title || input.description) && /* @__PURE__ */ jsxs28("div", { className: "px-4 py-3 border-b bg-muted/30", children: [
+      input.title && /* @__PURE__ */ jsx40("h3", { className: "font-medium text-sm", children: input.title }),
+      input.description && /* @__PURE__ */ jsx40("p", { className: "text-xs text-muted-foreground mt-1", children: input.description })
     ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "px-4 pt-3", children: [
-      /* @__PURE__ */ jsx39("div", { className: "flex items-center gap-1", children: questions.map((_, idx) => /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsxs28("div", { className: "px-4 pt-3", children: [
+      /* @__PURE__ */ jsx40("div", { className: "flex items-center gap-1", children: questions.map((_, idx) => /* @__PURE__ */ jsx40(
         "div",
         {
           className: cn(
@@ -25727,19 +26014,19 @@ function AskFollowUpComponent({
         },
         idx
       )) }),
-      /* @__PURE__ */ jsxs27("p", { className: "text-xs text-muted-foreground mt-2", children: [
+      /* @__PURE__ */ jsxs28("p", { className: "text-xs text-muted-foreground mt-2", children: [
         "Question ",
         currentStep + 1,
         " of ",
         questions.length
       ] })
     ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsxs27("label", { className: "block text-sm font-medium mb-3", children: [
+    /* @__PURE__ */ jsxs28("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxs28("label", { className: "block text-sm font-medium mb-3", children: [
         currentQuestion.question,
-        currentQuestion.required && /* @__PURE__ */ jsx39("span", { className: "text-destructive ml-1", children: "*" })
+        currentQuestion.required && /* @__PURE__ */ jsx40("span", { className: "text-destructive ml-1", children: "*" })
       ] }),
-      currentQuestion.type === "text" && /* @__PURE__ */ jsx39(
+      currentQuestion.type === "text" && /* @__PURE__ */ jsx40(
         "input",
         {
           type: "text",
@@ -25751,7 +26038,7 @@ function AskFollowUpComponent({
           autoFocus: true
         }
       ),
-      currentQuestion.type === "select" && currentQuestion.options && /* @__PURE__ */ jsx39("div", { className: "space-y-2", children: currentQuestion.options.map((option) => /* @__PURE__ */ jsx39(
+      currentQuestion.type === "select" && currentQuestion.options && /* @__PURE__ */ jsx40("div", { className: "space-y-2", children: currentQuestion.options.map((option) => /* @__PURE__ */ jsx40(
         "button",
         {
           onClick: () => handleAnswer(option),
@@ -25763,9 +26050,9 @@ function AskFollowUpComponent({
         },
         option
       )) }),
-      currentQuestion.type === "multiselect" && currentQuestion.options && /* @__PURE__ */ jsx39("div", { className: "space-y-2", children: currentQuestion.options.map((option) => {
+      currentQuestion.type === "multiselect" && currentQuestion.options && /* @__PURE__ */ jsx40("div", { className: "space-y-2", children: currentQuestion.options.map((option) => {
         const selected = (answers[currentQuestion.id] || []).includes(option);
-        return /* @__PURE__ */ jsxs27(
+        return /* @__PURE__ */ jsxs28(
           "button",
           {
             onClick: () => {
@@ -25778,18 +26065,18 @@ function AskFollowUpComponent({
               selected ? "border-primary bg-primary/10" : "hover:bg-muted"
             ),
             children: [
-              /* @__PURE__ */ jsx39("div", { className: cn(
+              /* @__PURE__ */ jsx40("div", { className: cn(
                 "w-4 h-4 border rounded flex items-center justify-center",
                 selected ? "bg-primary border-primary" : "border-muted-foreground"
-              ), children: selected && /* @__PURE__ */ jsx39(CheckIcon, { className: "w-3 h-3 text-primary-foreground" }) }),
+              ), children: selected && /* @__PURE__ */ jsx40(CheckIcon, { className: "w-3 h-3 text-primary-foreground" }) }),
               option
             ]
           },
           option
         );
       }) }),
-      currentQuestion.type === "boolean" && /* @__PURE__ */ jsxs27("div", { className: "flex gap-3", children: [
-        /* @__PURE__ */ jsx39(
+      currentQuestion.type === "boolean" && /* @__PURE__ */ jsxs28("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsx40(
           "button",
           {
             onClick: () => handleAnswer(true),
@@ -25800,7 +26087,7 @@ function AskFollowUpComponent({
             children: "Yes"
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "button",
           {
             onClick: () => handleAnswer(false),
@@ -25813,8 +26100,8 @@ function AskFollowUpComponent({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "px-4 pb-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsxs28("div", { className: "px-4 pb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx40(
         "button",
         {
           onClick: handleBack,
@@ -25826,7 +26113,7 @@ function AskFollowUpComponent({
           children: "Back"
         }
       ),
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40(
         "button",
         {
           onClick: handleNext,
@@ -25842,14 +26129,14 @@ function AskFollowUpComponent({
   ] });
 }
 function CheckIcon({ className }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "svg",
     {
       className,
       fill: "none",
       stroke: "currentColor",
       viewBox: "0 0 24 24",
-      children: /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsx40(
         "path",
         {
           strokeLinecap: "round",
@@ -25862,6 +26149,85 @@ function CheckIcon({ className }) {
   );
 }
 
+// src/components/ContextIndicator.tsx
+import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+function ContextIndicator({
+  contextHealth,
+  isCompacting = false,
+  className = ""
+}) {
+  if (!contextHealth) return null;
+  const percentage = Math.round(contextHealth.usage_ratio * 100);
+  const color = getColor(contextHealth.usage_ratio);
+  const tierLabel = contextHealth.last_compaction?.tier;
+  return /* @__PURE__ */ jsxs29("div", { className: `distri-context-indicator ${className}`, title: `Context: ${percentage}% used`, children: [
+    /* @__PURE__ */ jsx41("div", { className: "distri-context-bar-bg", style: { width: "100%", height: 4, background: "#e5e7eb", borderRadius: 2, overflow: "hidden" }, children: /* @__PURE__ */ jsx41(
+      "div",
+      {
+        className: "distri-context-bar-fill",
+        style: {
+          width: `${Math.min(percentage, 100)}%`,
+          height: "100%",
+          background: color,
+          borderRadius: 2,
+          transition: "width 0.5s ease, background 0.3s ease"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs29("div", { className: "distri-context-label", style: { fontSize: 11, color: "#6b7280", marginTop: 2, display: "flex", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx41("span", { children: isCompacting ? "Compacting..." : `${percentage}% context used` }),
+      tierLabel && /* @__PURE__ */ jsxs29("span", { style: { opacity: 0.7 }, children: [
+        "Last: ",
+        tierLabel
+      ] })
+    ] })
+  ] });
+}
+function getColor(ratio) {
+  if (ratio < 0.5) return "#22c55e";
+  if (ratio < 0.7) return "#eab308";
+  if (ratio < 0.85) return "#f97316";
+  return "#ef4444";
+}
+
+// src/hooks/useContextHealth.ts
+import { useCallback as useCallback21, useRef as useRef14, useState as useState24 } from "react";
+function useContextHealth() {
+  const [contextHealth, setContextHealth] = useState24(null);
+  const [isCompacting, setIsCompacting] = useState24(false);
+  const lastCompactionRef = useRef14(null);
+  const handleEvent = useCallback21((event) => {
+    if (event?.type !== "context_compaction") return;
+    const compactionEvent = event;
+    lastCompactionRef.current = compactionEvent;
+    setContextHealth({
+      usage_ratio: compactionEvent.tokens_after / compactionEvent.context_limit,
+      tokens_used: compactionEvent.tokens_after,
+      tokens_limit: compactionEvent.context_limit,
+      last_compaction: compactionEvent
+    });
+    setIsCompacting(true);
+    setTimeout(() => setIsCompacting(false), 1500);
+  }, []);
+  const reset = useCallback21(() => {
+    setContextHealth(null);
+    lastCompactionRef.current = null;
+    setIsCompacting(false);
+  }, []);
+  return {
+    /** Current context health snapshot, or null if no compaction has occurred yet */
+    contextHealth,
+    /** The most recent compaction event */
+    lastCompaction: lastCompactionRef.current,
+    /** Whether a compaction just occurred (true for ~1.5s after event) */
+    isCompacting,
+    /** Call with raw event objects from the stream to update health */
+    handleEvent,
+    /** Reset state (e.g., when switching threads) */
+    reset
+  };
+}
+
 // src/utils/toolWrapper.ts
 import React26 from "react";
 function wrapFnToolAsUiTool(fnTool, options = {}) {
@@ -25888,16 +26254,237 @@ function wrapTools(tools, options = {}) {
   });
 }
 
+// src/useWorkflow.ts
+import { useState as useState25, useCallback as useCallback22, useMemo as useMemo9 } from "react";
+import { countSteps, workflowProgress } from "@distri/core";
+function useWorkflow({ workflow: initial, onExecuteStep, onStateChange }) {
+  const [workflow, setWorkflow] = useState25(initial);
+  const [isRunning, setIsRunning] = useState25(false);
+  const progress = useMemo9(() => workflowProgress(workflow), [workflow]);
+  const counts = useMemo9(() => countSteps(workflow), [workflow]);
+  const updateAndNotify = useCallback22((w) => {
+    setWorkflow(w);
+    onStateChange?.(w);
+  }, [onStateChange]);
+  const findNextRunnable = useCallback22(() => {
+    for (let i = 0; i < workflow.steps.length; i++) {
+      const step = workflow.steps[i];
+      if (step.status !== "pending") continue;
+      const depsMet = (step.depends_on ?? []).every(
+        (depId) => workflow.steps.some((s) => s.id === depId && s.status === "done")
+      );
+      if (depsMet) return i;
+    }
+    return null;
+  }, [workflow]);
+  const runNextStep = useCallback22(async () => {
+    const idx = findNextRunnable();
+    if (idx === null) return;
+    const step = workflow.steps[idx];
+    const updated = { ...workflow };
+    updated.steps = [...workflow.steps];
+    updated.steps[idx] = { ...step, status: "running", started_at: (/* @__PURE__ */ new Date()).toISOString() };
+    updated.status = "running";
+    updateAndNotify(updated);
+    setIsRunning(true);
+    try {
+      const result = await onExecuteStep(step.id, step, workflow.context ?? {});
+      const final_ = { ...updated };
+      final_.steps = [...updated.steps];
+      final_.steps[idx] = {
+        ...final_.steps[idx],
+        status: result.status,
+        result: result.result,
+        error: result.error,
+        completed_at: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      if (result.context_updates) {
+        final_.context = { ...final_.context, ...result.context_updates };
+      }
+      const allDone = final_.steps.every((s) => s.status === "done" || s.status === "skipped");
+      const hasFailed = final_.steps.some((s) => s.status === "failed");
+      if (allDone) final_.status = "completed";
+      else if (hasFailed) final_.status = "failed";
+      final_.updated_at = (/* @__PURE__ */ new Date()).toISOString();
+      updateAndNotify(final_);
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : String(err);
+      const final_ = { ...updated };
+      final_.steps = [...updated.steps];
+      final_.steps[idx] = { ...final_.steps[idx], status: "failed", error: errMsg, completed_at: (/* @__PURE__ */ new Date()).toISOString() };
+      final_.status = "failed";
+      updateAndNotify(final_);
+    } finally {
+      setIsRunning(false);
+    }
+  }, [workflow, findNextRunnable, onExecuteStep, updateAndNotify]);
+  const runAll = useCallback22(async () => {
+    let current = workflow;
+    setIsRunning(true);
+    try {
+      while (true) {
+        const idx = (() => {
+          for (let i = 0; i < current.steps.length; i++) {
+            const step2 = current.steps[i];
+            if (step2.status !== "pending") continue;
+            const depsMet = (step2.depends_on ?? []).every(
+              (depId) => current.steps.some((s) => s.id === depId && s.status === "done")
+            );
+            if (depsMet) return i;
+          }
+          return null;
+        })();
+        if (idx === null) break;
+        const step = current.steps[idx];
+        current = { ...current, steps: [...current.steps] };
+        current.steps[idx] = { ...step, status: "running", started_at: (/* @__PURE__ */ new Date()).toISOString() };
+        current.status = "running";
+        updateAndNotify(current);
+        const result = await onExecuteStep(step.id, step, current.context ?? {});
+        current = { ...current, steps: [...current.steps] };
+        current.steps[idx] = {
+          ...current.steps[idx],
+          status: result.status,
+          result: result.result,
+          error: result.error,
+          completed_at: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        if (result.context_updates) {
+          current.context = { ...current.context, ...result.context_updates };
+        }
+        if (result.status === "failed") {
+          current.status = "failed";
+          updateAndNotify(current);
+          break;
+        }
+        const allDone = current.steps.every((s) => s.status === "done" || s.status === "skipped");
+        if (allDone) current.status = "completed";
+        current.updated_at = (/* @__PURE__ */ new Date()).toISOString();
+        updateAndNotify(current);
+      }
+    } finally {
+      setIsRunning(false);
+    }
+  }, [workflow, onExecuteStep, updateAndNotify]);
+  const updateWorkflow = useCallback22((w) => {
+    setWorkflow(w);
+  }, []);
+  return { workflow, isRunning, progress, counts, runNextStep, runAll, updateWorkflow };
+}
+
+// src/useWorkflowRunner.ts
+import { useState as useState26, useCallback as useCallback23, useRef as useRef15 } from "react";
+import {
+  WorkflowRunner
+} from "@distri/core";
+function useWorkflowRunner(options = {}) {
+  const { client } = useDistri();
+  const [isRunning, setIsRunning] = useState26(false);
+  const [status, setStatus] = useState26(null);
+  const [events, setEvents] = useState26([]);
+  const stoppedRef = useRef15(false);
+  const run2 = useCallback23(async (workflow, input = {}) => {
+    if (!client) throw new Error("DistriClient not initialized");
+    const runner = new WorkflowRunner(client, {
+      buildRequest: options.buildRequest,
+      env: options.env,
+      executeStep: options.executeStep
+    });
+    setIsRunning(true);
+    setStatus("running");
+    setEvents([]);
+    stoppedRef.current = false;
+    let finalStatus = "failed";
+    try {
+      for await (const event of runner.run(workflow, input)) {
+        if (stoppedRef.current) break;
+        setEvents((prev) => [...prev, event]);
+        options.onEvent?.(event);
+        if (event.event === "workflow_completed") {
+          finalStatus = event.status;
+          setStatus(event.status);
+        }
+      }
+    } catch (err) {
+      finalStatus = "failed";
+      setStatus("failed");
+    } finally {
+      setIsRunning(false);
+    }
+    return finalStatus;
+  }, [client, options.buildRequest, options.env, options.executeStep, options.onEvent]);
+  const stop = useCallback23(() => {
+    stoppedRef.current = true;
+  }, []);
+  return { run: run2, isRunning, status, events, stop };
+}
+
+// src/components/WorkflowProgress.tsx
+import { stepIcon, workflowProgress as workflowProgress2 } from "@distri/core";
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+function WorkflowProgress({ workflow, className, detailed }) {
+  const progress = workflowProgress2(workflow);
+  const done = workflow.steps.filter((s) => s.status === "done" || s.status === "skipped").length;
+  const total = workflow.steps.length;
+  return /* @__PURE__ */ jsxs30("div", { className, children: [
+    /* @__PURE__ */ jsxs30("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsx42("div", { style: {
+        flex: 1,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: "var(--muted, #e5e7eb)",
+        overflow: "hidden"
+      }, children: /* @__PURE__ */ jsx42("div", { style: {
+        width: `${progress}%`,
+        height: "100%",
+        borderRadius: 3,
+        backgroundColor: workflow.status === "failed" ? "var(--destructive, #ef4444)" : "var(--primary, #6366f1)",
+        transition: "width 0.3s ease"
+      } }) }),
+      /* @__PURE__ */ jsxs30("span", { style: { fontSize: 12, color: "var(--muted-foreground, #6b7280)", whiteSpace: "nowrap" }, children: [
+        done,
+        "/",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx42("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: workflow.steps.map((step) => /* @__PURE__ */ jsxs30(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 8,
+          padding: "6px 0",
+          opacity: step.status === "skipped" ? 0.5 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsx42("span", { style: { fontSize: 14, lineHeight: "20px" }, children: stepIcon(step.status ?? "pending") }),
+          /* @__PURE__ */ jsxs30("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx42("div", { style: {
+              fontSize: 13,
+              fontWeight: step.status === "running" ? 600 : 400,
+              color: step.status === "failed" ? "var(--destructive, #ef4444)" : "inherit"
+            }, children: step.label }),
+            step.error && /* @__PURE__ */ jsx42("div", { style: { fontSize: 11, color: "var(--destructive, #ef4444)", marginTop: 2 }, children: step.error }),
+            detailed && step.result != null && step.status === "done" && /* @__PURE__ */ jsx42("div", { style: { fontSize: 11, color: "var(--muted-foreground, #6b7280)", marginTop: 2 }, children: String(typeof step.result === "string" ? step.result : JSON.stringify(step.result)).slice(0, 100) })
+          ] })
+        ]
+      },
+      step.id
+    )) })
+  ] });
+}
+
 // src/components/ui/dialog.tsx
 import * as React27 from "react";
-import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 var Dialog = React27.createContext({});
 var DialogRoot = ({ open, onOpenChange, children }) => {
-  return /* @__PURE__ */ jsx40(Dialog.Provider, { value: { open, onOpenChange }, children });
+  return /* @__PURE__ */ jsx43(Dialog.Provider, { value: { open, onOpenChange }, children });
 };
 var DialogTrigger = React27.forwardRef(({ className, children, ...props }, ref) => {
   const context = React27.useContext(Dialog);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx43(
     "button",
     {
       ref,
@@ -25912,7 +26499,7 @@ DialogTrigger.displayName = "DialogTrigger";
 var DialogContent = React27.forwardRef(({ className, children, ...props }, ref) => {
   const context = React27.useContext(Dialog);
   if (!context.open) return null;
-  return /* @__PURE__ */ jsx40("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm", children: /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsx43("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm", children: /* @__PURE__ */ jsxs31(
     "div",
     {
       ref,
@@ -25923,12 +26510,12 @@ var DialogContent = React27.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx43(
           "button",
           {
             className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
             onClick: () => context.onOpenChange?.(false),
-            children: /* @__PURE__ */ jsxs28(
+            children: /* @__PURE__ */ jsxs31(
               "svg",
               {
                 width: "24",
@@ -25941,8 +26528,8 @@ var DialogContent = React27.forwardRef(({ className, children, ...props }, ref)
                 strokeLinejoin: "round",
                 className: "h-4 w-4",
                 children: [
-                  /* @__PURE__ */ jsx40("path", { d: "m18 6-12 12" }),
-                  /* @__PURE__ */ jsx40("path", { d: "m6 6 12 12" })
+                  /* @__PURE__ */ jsx43("path", { d: "m18 6-12 12" }),
+                  /* @__PURE__ */ jsx43("path", { d: "m6 6 12 12" })
                 ]
               }
             )
@@ -25953,7 +26540,7 @@ var DialogContent = React27.forwardRef(({ className, children, ...props }, ref)
   ) });
 });
 DialogContent.displayName = "DialogContent";
-var DialogHeader = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DialogHeader = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   "div",
   {
     ref,
@@ -25965,7 +26552,7 @@ var DialogHeader = React27.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DialogTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   "h3",
   {
     ref,
@@ -25980,10 +26567,10 @@ DialogTitle.displayName = "DialogTitle";
 
 // src/components/ui/textarea.tsx
 import * as React28 from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var Textarea = React28.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx44(
       "textarea",
       {
         className: cn(
@@ -26007,9 +26594,9 @@ import { PanelLeft } from "lucide-react";
 // src/components/ui/separator.tsx
 import * as React29 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var Separator2 = React29.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx42(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx45(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -26031,10 +26618,10 @@ import * as React30 from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva as cva2 } from "class-variance-authority";
 import { X as X4 } from "lucide-react";
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
 var Sheet = SheetPrimitive.Root;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var SheetOverlay = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
   SheetPrimitive.Overlay,
   {
     className: cn(
@@ -26062,9 +26649,9 @@ var sheetVariants = cva2(
     }
   }
 );
-var SheetContent = React30.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs29(SheetPortal, { children: [
-  /* @__PURE__ */ jsx43(SheetOverlay, {}),
-  /* @__PURE__ */ jsxs29(
+var SheetContent = React30.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs32(SheetPortal, { children: [
+  /* @__PURE__ */ jsx46(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs32(
     SheetPrimitive.Content,
     {
       ref,
@@ -26072,9 +26659,9 @@ var SheetContent = React30.forwardRef(({ side = "right", className, children, ..
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs29(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ jsx43(X4, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ jsxs32(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx46(X4, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx46("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
@@ -26084,7 +26671,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx43(
+}) => /* @__PURE__ */ jsx46(
   "div",
   {
     className: cn(
@@ -26098,7 +26685,7 @@ SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx43(
+}) => /* @__PURE__ */ jsx46(
   "div",
   {
     className: cn(
@@ -26109,7 +26696,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var SheetTitle = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
   SheetPrimitive.Title,
   {
     ref,
@@ -26118,7 +26705,7 @@ var SheetTitle = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var SheetDescription = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
   SheetPrimitive.Description,
   {
     ref,
@@ -26131,11 +26718,11 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;
 // src/components/ui/tooltip.tsx
 import * as React31 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React31.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx44(
+var TooltipContent = React31.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx47(
   TooltipPrimitive.Content,
   {
     ref,
@@ -26150,7 +26737,7 @@ var TooltipContent = React31.forwardRef(({ className, sideOffset = 4, ...props }
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/ui/sidebar.tsx
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar:state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
@@ -26233,7 +26820,7 @@ var SidebarProvider = React32.forwardRef(({ defaultOpen = true, open: openProp,
     };
     return vars;
   }, [style2]);
-  return /* @__PURE__ */ jsx45(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx45(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx48(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx48(
     "div",
     {
       style: providerStyle,
@@ -26251,7 +26838,7 @@ SidebarProvider.displayName = "SidebarProvider";
 var Sidebar = React32.forwardRef(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         className: cn(
@@ -26268,7 +26855,7 @@ var Sidebar = React32.forwardRef(({ side = "left", variant = "sidebar", collapsi
     "--sidebar-width": SIDEBAR_WIDTH_MOBILE
   };
   if (isMobile) {
-    return /* @__PURE__ */ jsx45(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx48(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsx48(
       SheetContent,
       {
         "data-sidebar": "sidebar",
@@ -26276,11 +26863,11 @@ var Sidebar = React32.forwardRef(({ side = "left", variant = "sidebar", collapsi
         className: "w-[--sidebar-width-mobile] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
         style: sheetStyles,
         side,
-        children: /* @__PURE__ */ jsx45("div", { className: "flex h-full w-full flex-col", children })
+        children: /* @__PURE__ */ jsx48("div", { className: "flex h-full w-full flex-col", children })
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       ref,
@@ -26290,7 +26877,7 @@ var Sidebar = React32.forwardRef(({ side = "left", variant = "sidebar", collapsi
       "data-variant": variant,
       "data-side": side,
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx48(
           "div",
           {
             className: cn(
@@ -26301,7 +26888,7 @@ var Sidebar = React32.forwardRef(({ side = "left", variant = "sidebar", collapsi
             )
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx48(
           "div",
           {
             className: cn(
@@ -26312,7 +26899,7 @@ var Sidebar = React32.forwardRef(({ side = "left", variant = "sidebar", collapsi
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsx45(
+            children: /* @__PURE__ */ jsx48(
               "div",
               {
                 "data-sidebar": "sidebar",
@@ -26329,7 +26916,7 @@ var Sidebar = React32.forwardRef(({ side = "left", variant = "sidebar", collapsi
 Sidebar.displayName = "Sidebar";
 var SidebarTrigger = React32.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs33(
     Button,
     {
       ref,
@@ -26343,8 +26930,8 @@ var SidebarTrigger = React32.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx45(PanelLeft, {}),
-        /* @__PURE__ */ jsx45("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx48(PanelLeft, {}),
+        /* @__PURE__ */ jsx48("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
@@ -26352,7 +26939,7 @@ var SidebarTrigger = React32.forwardRef(({ className, onClick, ...props }, ref)
 SidebarTrigger.displayName = "SidebarTrigger";
 var SidebarRail = React32.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "button",
     {
       ref,
@@ -26376,7 +26963,7 @@ var SidebarRail = React32.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarRail.displayName = "SidebarRail";
 var SidebarInset = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "main",
     {
       ref,
@@ -26391,7 +26978,7 @@ var SidebarInset = React32.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInset.displayName = "SidebarInset";
 var SidebarHeader = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -26403,7 +26990,7 @@ var SidebarHeader = React32.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarFooter = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -26415,7 +27002,7 @@ var SidebarFooter = React32.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarFooter.displayName = "SidebarFooter";
 var SidebarSeparator = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     Separator2,
     {
       ref,
@@ -26427,7 +27014,7 @@ var SidebarSeparator = React32.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarSeparator.displayName = "SidebarSeparator";
 var SidebarContent = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -26442,7 +27029,7 @@ var SidebarContent = React32.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarContent.displayName = "SidebarContent";
 var SidebarGroup = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -26455,7 +27042,7 @@ var SidebarGroup = React32.forwardRef(({ className, ...props }, ref) => {
 SidebarGroup.displayName = "SidebarGroup";
 var SidebarGroupLabel = React32.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     Comp,
     {
       ref,
@@ -26472,7 +27059,7 @@ var SidebarGroupLabel = React32.forwardRef(({ className, asChild = false, ...pro
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
 var SidebarGroupAction = React32.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     Comp,
     {
       ref,
@@ -26490,7 +27077,7 @@ var SidebarGroupAction = React32.forwardRef(({ className, asChild = false, ...pr
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
 var SidebarGroupContent = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -26502,7 +27089,7 @@ var SidebarGroupContent = React32.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarGroupContent.displayName = "SidebarGroupContent";
 var SidebarMenu = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "ul",
     {
       ref,
@@ -26514,7 +27101,7 @@ var SidebarMenu = React32.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarMenu.displayName = "SidebarMenu";
 var SidebarMenuItem = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "li",
     {
       ref,
@@ -26548,7 +27135,7 @@ var sidebarMenuButtonVariants = cva3(
 var SidebarMenuButton = React32.forwardRef(({ asChild = false, isActive: isActive2 = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ jsx45(
+  const button = /* @__PURE__ */ jsx48(
     Comp,
     {
       ref,
@@ -26567,9 +27154,9 @@ var SidebarMenuButton = React32.forwardRef(({ asChild = false, isActive: isActiv
       children: tooltip
     };
   }
-  return /* @__PURE__ */ jsxs30(Tooltip, { children: [
-    /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs33(Tooltip, { children: [
+    /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx48(
       TooltipContent,
       {
         side: "right",
@@ -26583,7 +27170,7 @@ var SidebarMenuButton = React32.forwardRef(({ asChild = false, isActive: isActiv
 SidebarMenuButton.displayName = "SidebarMenuButton";
 var SidebarMenuAction = React32.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     Comp,
     {
       ref,
@@ -26605,7 +27192,7 @@ var SidebarMenuAction = React32.forwardRef(({ className, asChild = false, showOn
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
 var SidebarMenuBadge = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -26629,7 +27216,7 @@ var SidebarMenuSkeleton = React32.forwardRef(({ className, showIcon = false, ...
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   const skeletonStyle = { "--skeleton-width": width };
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       ref,
@@ -26637,8 +27224,8 @@ var SidebarMenuSkeleton = React32.forwardRef(({ className, showIcon = false, ...
       className: cn("rounded-md h-8 flex gap-2 px-2 items-center", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx45(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
-        /* @__PURE__ */ jsx45(
+        showIcon && /* @__PURE__ */ jsx48(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
+        /* @__PURE__ */ jsx48(
           Skeleton,
           {
             className: "h-4 flex-1 max-w-[--skeleton-width]",
@@ -26652,7 +27239,7 @@ var SidebarMenuSkeleton = React32.forwardRef(({ className, showIcon = false, ...
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
 var SidebarMenuSub = React32.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     "ul",
     {
       ref,
@@ -26668,12 +27255,12 @@ var SidebarMenuSub = React32.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarMenuSub.displayName = "SidebarMenuSub";
 var SidebarMenuSubItem = React32.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ jsx45("li", { ref, ...props });
+  return /* @__PURE__ */ jsx48("li", { ref, ...props });
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 var SidebarMenuSubButton = React32.forwardRef(({ asChild = false, size = "md", isActive: isActive2, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx48(
     Comp,
     {
       ref,
@@ -26698,14 +27285,14 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 import * as React33 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check as Check3, ChevronRight as ChevronRight2, Circle as Circle2 } from "lucide-react";
-import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React33.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs31(
+var DropdownMenuSubTrigger = React33.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs34(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -26717,12 +27304,12 @@ var DropdownMenuSubTrigger = React33.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx46(ChevronRight2, { className: "ml-auto" })
+      /* @__PURE__ */ jsx49(ChevronRight2, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DropdownMenuSubContent = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -26734,7 +27321,7 @@ var DropdownMenuSubContent = React33.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React33.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx46(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx46(
+var DropdownMenuContent = React33.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx49(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx49(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -26748,7 +27335,7 @@ var DropdownMenuContent = React33.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React33.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DropdownMenuItem = React33.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx49(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -26761,7 +27348,7 @@ var DropdownMenuItem = React33.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React33.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs31(
+var DropdownMenuCheckboxItem = React33.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs34(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -26772,13 +27359,13 @@ var DropdownMenuCheckboxItem = React33.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx46("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx46(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx46(Check3, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx49("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx49(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx49(Check3, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React33.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs31(
+var DropdownMenuRadioItem = React33.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs34(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -26788,13 +27375,13 @@ var DropdownMenuRadioItem = React33.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx46("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx46(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx46(Circle2, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx49("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx49(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx49(Circle2, { className: "h-2 w-2 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React33.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DropdownMenuLabel = React33.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx49(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -26807,7 +27394,7 @@ var DropdownMenuLabel = React33.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DropdownMenuSeparator = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -26820,7 +27407,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx49(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest opacity-60", className),
@@ -26848,6 +27435,7 @@ export {
   ChatInner,
   ChatInput,
   ConfigurationPanel,
+  ContextIndicator,
   DialogRoot as Dialog,
   DialogContent,
   DialogHeader,
@@ -26933,6 +27521,7 @@ export {
   TypingIndicator,
   UserMessageRenderer,
   VoiceInput,
+  WorkflowProgress,
   createAskFollowUpTool,
   extractContent,
   useAgent,
@@ -26942,6 +27531,7 @@ export {
   useChatMessages,
   useChatStateStore,
   useConfiguration,
+  useContextHealth,
   useDistri,
   useDistriAuth,
   useDistriToken,
@@ -26949,12 +27539,15 @@ export {
   useMessageReadStatus,
   useMessageVote,
   useMessageVotes,
+  useModels,
   useSidebar,
   useSpeechToText,
   useTheme,
   useThreadReadStatus,
   useThreads,
   useTts,
+  useWorkflow,
+  useWorkflowRunner,
   useWorkspace,
   wrapFnToolAsUiTool,
   wrapTools