@cadraos/sdk 0.1.11-test → 0.1.13

package/dist/chat/index.cjs

@@ -3,6 +3,7 @@
 var react = require('react');
 var fetchEventSource = require('@microsoft/fetch-event-source');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 
@@ -588,9 +589,11 @@ var DEFAULT_STREAMING_CONFIG = {
   activityTimeoutMs: 3e4,
   pollingIntervalMs: 2e3
 };
+var DEFAULT_POLLING_ENABLED = true;
 var ExecutionStreamControllerImpl = class {
   options;
   config;
+  pollingEnabled;
   sseClient = null;
   status = "connecting";
   reconnectAttempts = 0;
@@ -624,6 +627,7 @@ var ExecutionStreamControllerImpl = class {
   constructor(options) {
     this.options = options;
     this.config = { ...DEFAULT_STREAMING_CONFIG, ...options.config };
+    this.pollingEnabled = options.pollingEnabled ?? DEFAULT_POLLING_ENABLED;
   }
   /**
    * Get the last event ID (for resume support)
@@ -964,15 +968,61 @@ var ExecutionStreamControllerImpl = class {
       if (this.status === "closed") {
         return;
       }
+      await this.recoverState();
+      if (this.status === "closed") {
+        return;
+      }
       try {
         await this.connectSSE();
       } catch {
         await this.handleConnectionError(error);
       }
     } else {
-      this.status = "fallback_polling";
-      this.emit("connectionChange", { connected: false, usingFallback: true });
-      this.startPolling();
+      if (this.pollingEnabled) {
+        this.status = "fallback_polling";
+        this.emit("connectionChange", { connected: false, usingFallback: true });
+        this.startPolling();
+      } else {
+        this.handleError({
+          error: "SSE connection failed and polling is disabled",
+          errorCode: "connection_failed"
+        });
+      }
+    }
+  }
+  /**
+   * Recover state by checking execution status.
+   *
+   * Called during reconnection to catch any events missed while SSE was down.
+   * If the execution completed while disconnected, emits completion immediately.
+   * Otherwise, emits any new logs that weren't seen via SSE.
+   */
+  async recoverState() {
+    try {
+      const execution = await this.options.getExecution(this.options.executionId);
+      if (execution.logs) {
+        for (const log of execution.logs) {
+          if (!this.seenEventIds.has(log.uuid)) {
+            this.seenEventIds.add(log.uuid);
+            this.emit("log", log);
+          }
+        }
+      }
+      if (execution.status === "completed") {
+        this.stopPolling();
+        this.handleComplete(execution);
+        return;
+      }
+      if (execution.status === "failed" || execution.status === "cancelled") {
+        this.stopPolling();
+        this.handleError({
+          error: execution.error ?? `Execution ${execution.status}`,
+          errorCode: execution.status
+        });
+        return;
+      }
+    } catch (err) {
+      console.warn("[SDK:StreamController] State recovery failed (non-fatal):", err);
     }
   }
   /**
@@ -2824,12 +2874,54 @@ function useExecutionStream(options) {
 }
 
 // src/chat/hooks/useAgentChat.ts
+var __DEV__ = typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 var SILENT_TOOL_NAMES = /* @__PURE__ */ new Set([
   "check_delegations"
 ]);
 function generateId() {
   return `msg-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 }
+function extractImagesFromResult(result, sourceToolCallId) {
+  if (!result) return [];
+  let data = result;
+  if (typeof result === "string") {
+    try {
+      data = JSON.parse(result);
+    } catch {
+      if (/\.(png|jpg|jpeg|gif|webp|svg|bmp)(\?.*)?$/i.test(result) || result.startsWith("data:image/")) {
+        return [{ url: result, sourceToolCallId }];
+      }
+      return [];
+    }
+  }
+  if (typeof data !== "object" || data === null) return [];
+  const obj = data;
+  if (Array.isArray(obj.images)) {
+    return obj.images.filter((img) => typeof img.url === "string").map((img) => ({
+      url: img.url,
+      alt: img.alt || img.prompt || void 0,
+      filename: img.filename,
+      sourceToolCallId
+    }));
+  }
+  if (typeof obj.url === "string" && /\.(png|jpg|jpeg|gif|webp|svg|bmp)(\?.*)?$/i.test(obj.url)) {
+    return [{ url: obj.url, alt: obj.alt, sourceToolCallId }];
+  }
+  if (typeof obj.imageUrl === "string") {
+    return [{ url: obj.imageUrl, alt: obj.alt, sourceToolCallId }];
+  }
+  return [];
+}
+function deriveImagesFromToolCalls(toolCalls) {
+  if (!toolCalls) return [];
+  const images = [];
+  for (const tc of toolCalls) {
+    if (tc.status === "completed" && tc.result) {
+      images.push(...extractImagesFromResult(tc.result, tc.id));
+    }
+  }
+  return images;
+}
 function historyToMessage(historyMsg) {
   return {
     id: historyMsg.uuid,
@@ -2870,7 +2962,9 @@ function useAgentChat(options) {
     // Deprecated, but still supported
     onToolCall,
     onToolResult,
-    onClarification
+    onClarification,
+    pollingInterval,
+    pollingEnabled
   } = options;
   const contextConfig = useChatConfigOptional();
   const adapter = propsAdapter ?? contextConfig?.adapter;
@@ -2902,8 +2996,14 @@ function useAgentChat(options) {
   const streamingMessageIdRef = react.useRef(null);
   const pendingToolCallsRef = react.useRef(/* @__PURE__ */ new Map());
   const lastMessageContentRef = react.useRef("");
+  const finalizedRef = react.useRef(false);
   const firedToolResultsRef = react.useRef(/* @__PURE__ */ new Set());
   const streamControllerRef = react.useRef(null);
+  const pendingDelegationsRef = react.useRef(/* @__PURE__ */ new Map());
+  const onDelegationRef = react.useRef(options.onDelegation);
+  react.useEffect(() => {
+    onDelegationRef.current = options.onDelegation;
+  }, [options.onDelegation]);
   const updateStreamingMessage = react.useCallback((content) => {
     if (!streamingMessageIdRef.current) return;
     setMessages(
@@ -2932,25 +3032,72 @@ function useAgentChat(options) {
       });
     });
   }, []);
-  const finalizeStreamingMessage = react.useCallback((terminalStatus = "completed") => {
+  const addDelegationEvent = react.useCallback((delegation) => {
+    setMessages((prev) => {
+      const targetId = streamingMessageIdRef.current ?? [...prev].reverse().find((m) => m.role === "assistant")?.id;
+      if (!targetId) return prev;
+      return prev.map((msg) => {
+        if (msg.id !== targetId) return msg;
+        const existing = msg.delegationEvents ?? [];
+        if (delegation.type === "delegation_completed" && delegation.handoffId) {
+          const updatedEvents = existing.map(
+            (de) => de.handoffId === delegation.handoffId ? { ...de, ...delegation, status: delegation.status ?? "completed" } : de
+          );
+          const hasMatch = existing.some((de) => de.handoffId === delegation.handoffId);
+          return {
+            ...msg,
+            delegationEvents: hasMatch ? updatedEvents : [...existing, delegation]
+          };
+        }
+        return { ...msg, delegationEvents: [...existing, delegation] };
+      });
+    });
+  }, []);
+  const updateMessageImages = react.useCallback(() => {
+    setMessages((prev) => {
+      const targetId = streamingMessageIdRef.current ?? [...prev].reverse().find((m) => m.role === "assistant")?.id;
+      if (!targetId) return prev;
+      return prev.map((msg) => {
+        if (msg.id !== targetId) return msg;
+        const images = deriveImagesFromToolCalls(msg.toolCalls);
+        return images.length > 0 ? { ...msg, images } : msg;
+      });
+    });
+  }, []);
+  const finalizeStreamingMessage = react.useCallback((finalOutput) => {
     if (!streamingMessageIdRef.current) return;
-    setMessages(
-      (prev) => prev.map((msg) => {
-        if (msg.id !== streamingMessageIdRef.current) return msg;
+    finalizedRef.current = true;
+    const streamMsgId = streamingMessageIdRef.current;
+    setMessages((prev) => {
+      const resolvedContent = finalOutput || streamingContentRef.current || "";
+      const duplicateExists = resolvedContent && prev.some(
+        (msg) => msg.id !== streamMsgId && msg.role === "assistant" && !msg.isStreaming && msg.content === resolvedContent
+      );
+      if (duplicateExists) {
+        return prev.filter((msg) => msg.id !== streamMsgId);
+      }
+      return prev.map((msg) => {
+        if (msg.id !== streamMsgId) return msg;
         const updatedToolCalls = msg.toolCalls?.map(
-          (tc) => tc.status === "running" || tc.status === "pending" ? { ...tc, status: terminalStatus } : tc
+          (tc) => tc.status === "running" || tc.status === "pending" ? { ...tc, status: "completed" } : tc
         );
-        return { ...msg, isStreaming: false, toolCalls: updatedToolCalls };
-      })
-    );
+        return {
+          ...msg,
+          content: resolvedContent || msg.content,
+          isStreaming: false,
+          toolCalls: updatedToolCalls
+        };
+      });
+    });
     streamingMessageIdRef.current = null;
     streamingContentRef.current = "";
     pendingToolCallsRef.current.clear();
     firedToolResultsRef.current.clear();
+    pendingDelegationsRef.current.clear();
   }, []);
   const handleExecutionLog = react.useCallback(
     (log) => {
-      console.log("[useAgentChat] handleExecutionLog:", log.type, log.metadata);
+      if (__DEV__) console.log("[useAgentChat] handleExecutionLog:", log.type, log.metadata);
       switch (log.type) {
         // Primary handlers for ai-saas-api worker log types
         case "llm_response": {
@@ -2970,11 +3117,46 @@ function useAgentChat(options) {
           }
           break;
         }
+        case "delegation": {
+          const delegationType = log.metadata?.delegationType;
+          if (delegationType === "started" || delegationType === "delegation_started") {
+            const delegation = {
+              type: "delegation_started",
+              handoffId: log.metadata?.handoffId,
+              toAgent: log.metadata?.targetAgentName || log.metadata?.targetAgentUuid,
+              targetAgentUuid: log.metadata?.targetAgentUuid,
+              taskPreview: log.metadata?.taskPreview,
+              timestamp: new Date(log.timestamp || Date.now()),
+              status: "active"
+            };
+            if (delegation.handoffId) {
+              pendingDelegationsRef.current.set(delegation.handoffId, delegation);
+            }
+            addDelegationEvent(delegation);
+            onDelegationRef.current?.(delegation);
+          } else if (delegationType === "completed" || delegationType === "delegation_completed") {
+            const delegation = {
+              type: "delegation_completed",
+              handoffId: log.metadata?.handoffId,
+              resultPreview: log.metadata?.resultPreview,
+              timestamp: new Date(log.timestamp || Date.now()),
+              status: log.metadata?.status === "failed" ? "failed" : "completed",
+              durationMs: log.durationMs
+            };
+            if (delegation.handoffId) {
+              pendingDelegationsRef.current.delete(delegation.handoffId);
+            }
+            addDelegationEvent(delegation);
+            onDelegationRef.current?.(delegation);
+          }
+          break;
+        }
         case "info":
         case "system":
-          console.log("[useAgentChat] Status:", log.type, log.title);
+          if (__DEV__) console.log("[useAgentChat] Status:", log.type, log.title);
           break;
         case "tool_call": {
+          if (finalizedRef.current) break;
           const toolName = log.metadata?.toolName;
           if (SILENT_TOOL_NAMES.has(toolName)) break;
           const toolCallId = log.metadata?.toolCallId || `tool-${Date.now()}`;
@@ -3029,17 +3211,18 @@ function useAgentChat(options) {
             firedToolResultsRef.current.add(resultToolCallId);
           }
           onToolResultRef.current?.(resultToolName, result, durationMs);
+          updateMessageImages();
           break;
         }
         default:
-          console.log("[useAgentChat] Unhandled log type:", log.type, log);
+          if (__DEV__) console.log("[useAgentChat] Unhandled log type:", log.type, log);
       }
     },
-    [updateStreamingMessage, updateToolCall]
+    [updateStreamingMessage, updateToolCall, updateMessageImages, addDelegationEvent]
   );
   const handleStreamLog = react.useCallback(
     (log) => {
-      console.log("[useAgentChat] handleStreamLog:", log.logType, log.metadata);
+      if (__DEV__) console.log("[useAgentChat] handleStreamLog:", log.logType, log.metadata);
       switch (log.logType) {
         case "llm_response": {
           const llmText = log.metadata?.text || "";
@@ -3058,9 +3241,42 @@ function useAgentChat(options) {
           }
           break;
         }
+        case "delegation_started": {
+          const delegation = {
+            type: "delegation_started",
+            handoffId: log.metadata?.handoffId,
+            toAgent: log.metadata?.targetAgentName || log.metadata?.targetAgentUuid,
+            targetAgentUuid: log.metadata?.targetAgentUuid,
+            taskPreview: log.metadata?.taskPreview,
+            timestamp: new Date(log.timestamp || Date.now()),
+            status: "active"
+          };
+          if (delegation.handoffId) {
+            pendingDelegationsRef.current.set(delegation.handoffId, delegation);
+          }
+          addDelegationEvent(delegation);
+          onDelegationRef.current?.(delegation);
+          break;
+        }
+        case "delegation_completed": {
+          const delegation = {
+            type: "delegation_completed",
+            handoffId: log.metadata?.handoffId,
+            resultPreview: log.metadata?.resultPreview,
+            timestamp: new Date(log.timestamp || Date.now()),
+            status: log.metadata?.status === "failed" ? "failed" : "completed",
+            durationMs: log.durationMs
+          };
+          if (delegation.handoffId) {
+            pendingDelegationsRef.current.delete(delegation.handoffId);
+          }
+          addDelegationEvent(delegation);
+          onDelegationRef.current?.(delegation);
+          break;
+        }
         case "info":
         case "system":
-          console.log("[useAgentChat] Status:", log.logType, log.message);
+          if (__DEV__) console.log("[useAgentChat] Status:", log.logType, log.message);
           break;
         case "response_text":
         case "text_chunk": {
@@ -3070,6 +3286,7 @@ function useAgentChat(options) {
           break;
         }
         case "tool_call": {
+          if (finalizedRef.current) break;
           const toolName = log.metadata?.toolName;
           if (SILENT_TOOL_NAMES.has(toolName)) break;
           const toolCallId = log.metadata?.toolCallId || `tool-${Date.now()}`;
@@ -3124,6 +3341,7 @@ function useAgentChat(options) {
             firedToolResultsRef.current.add(resultToolCallId);
           }
           onToolResultRef.current?.(resultToolName, result, durationMs);
+          updateMessageImages();
           break;
         }
         case "final_response": {
@@ -3135,10 +3353,10 @@ function useAgentChat(options) {
           break;
         }
         default:
-          console.log("[useAgentChat] Unknown log type:", log.logType, log);
+          if (__DEV__) console.log("[useAgentChat] Unknown log type:", log.logType, log);
       }
     },
-    [updateStreamingMessage, updateToolCall]
+    [updateStreamingMessage, updateToolCall, updateMessageImages, addDelegationEvent]
   );
   const handleClarification = react.useCallback(
     (data) => {
@@ -3147,17 +3365,23 @@ function useAgentChat(options) {
     },
     [onClarification]
   );
-  const handleComplete = react.useCallback(() => {
-    console.log("[useAgentChat] handleComplete called");
+  const completedRef = react.useRef(false);
+  const handleComplete = react.useCallback((finalOutput) => {
+    if (completedRef.current) {
+      if (__DEV__) console.log("[useAgentChat] handleComplete: skipping duplicate complete");
+      return;
+    }
+    completedRef.current = true;
+    if (__DEV__) console.log("[useAgentChat] handleComplete called");
     setIsLoading(false);
     setIsStreamControllerConnected(false);
-    finalizeStreamingMessage();
+    finalizeStreamingMessage(finalOutput);
     setCurrentExecutionId(null);
     streamControllerRef.current = null;
   }, [finalizeStreamingMessage]);
   const handleError = react.useCallback(
     (errorMsg) => {
-      console.log("[useAgentChat] handleError called:", errorMsg);
+      if (__DEV__) console.log("[useAgentChat] handleError called:", errorMsg);
       const chatError = {
         code: "EXECUTION_ERROR",
         message: errorMsg,
@@ -3166,7 +3390,7 @@ function useAgentChat(options) {
       setError(chatError);
       setIsLoading(false);
       setIsStreamControllerConnected(false);
-      finalizeStreamingMessage("failed");
+      finalizeStreamingMessage();
       setCurrentExecutionId(null);
       streamControllerRef.current = null;
       onError?.(chatError);
@@ -3196,43 +3420,39 @@ function useAgentChat(options) {
     if (pollingExecutionIdRef.current === executionId) return;
     stopPolling();
     pollingExecutionIdRef.current = executionId;
-    console.log("[useAgentChat] Starting polling fallback for:", executionId);
+    if (__DEV__) console.log("[useAgentChat] Starting polling fallback for:", executionId);
     const poll = async () => {
       if (pollingExecutionIdRef.current !== executionId) return;
       try {
         const execution = await adapter.getExecution(executionId);
         if (execution.status === "completed") {
-          console.log("[useAgentChat] Polling: execution completed");
-          if (execution.result) {
-            streamingContentRef.current = execution.result;
-            updateStreamingMessage(execution.result);
-          }
+          if (__DEV__) console.log("[useAgentChat] Polling: execution completed");
           stopPolling();
-          handleComplete();
+          handleComplete(execution.result || void 0);
         } else if (execution.status === "failed") {
-          console.log("[useAgentChat] Polling: execution failed");
+          if (__DEV__) console.log("[useAgentChat] Polling: execution failed");
           stopPolling();
           handleError(execution.error || "Execution failed");
         }
       } catch (err) {
-        console.warn("[useAgentChat] Polling error (will retry):", err);
+        if (__DEV__) console.warn("[useAgentChat] Polling error (will retry):", err);
       }
     };
     poll();
-    pollingIntervalRef.current = setInterval(poll, 2e3);
-  }, [adapter, stopPolling, updateStreamingMessage, handleComplete, handleError]);
+    pollingIntervalRef.current = setInterval(poll, pollingInterval ?? 2e3);
+  }, [adapter, stopPolling, handleComplete, handleError, pollingInterval]);
   react.useEffect(() => {
-    if (!useStreamController && isUsingFallback && currentExecutionId && isLoading) {
-      console.log("[useAgentChat] SSE fallback detected, activating polling");
+    if (!useStreamController && isUsingFallback && currentExecutionId && isLoading && pollingEnabled !== false) {
+      if (__DEV__) console.log("[useAgentChat] SSE fallback detected, activating polling");
       startPolling(currentExecutionId);
     }
-  }, [useStreamController, isUsingFallback, currentExecutionId, isLoading, startPolling]);
+  }, [useStreamController, isUsingFallback, currentExecutionId, isLoading, startPolling, pollingEnabled]);
   const sseTimeoutRef = react.useRef(null);
   react.useEffect(() => {
-    if (!useStreamController && currentExecutionId && isLoading && !legacyIsConnected && !isUsingFallback) {
+    if (!useStreamController && currentExecutionId && isLoading && !legacyIsConnected && !isUsingFallback && pollingEnabled !== false) {
       sseTimeoutRef.current = setTimeout(() => {
         if (!legacyIsConnected && currentExecutionId && isLoading) {
-          console.log("[useAgentChat] SSE connection timeout, activating polling fallback");
+          if (__DEV__) console.log("[useAgentChat] SSE connection timeout, activating polling fallback");
           startPolling(currentExecutionId);
         }
       }, 1e4);
@@ -3243,7 +3463,7 @@ function useAgentChat(options) {
         sseTimeoutRef.current = null;
       }
     };
-  }, [useStreamController, currentExecutionId, isLoading, legacyIsConnected, isUsingFallback, startPolling]);
+  }, [useStreamController, currentExecutionId, isLoading, legacyIsConnected, isUsingFallback, startPolling, pollingEnabled]);
   react.useEffect(() => {
     if (!currentExecutionId) {
       stopPolling();
@@ -3259,7 +3479,7 @@ function useAgentChat(options) {
         streamControllerRef.current.cancel();
         streamControllerRef.current = null;
       }
-      console.log("[useAgentChat] Creating stream controller for:", executionId);
+      if (__DEV__) console.log("[useAgentChat] Creating stream controller for:", executionId);
       const controller = adapter.createStream(executionId, sessionId);
       streamControllerRef.current = controller;
       controller.on("log", (log) => {
@@ -3310,6 +3530,34 @@ function useAgentChat(options) {
         }
         firedToolResultsRef.current.add(toolCallId);
         onToolResultRef.current?.(toolName, data.result, data.durationMs);
+        updateMessageImages();
+      });
+      controller.on("delegationStarted", (data) => {
+        const delegation = {
+          type: "delegation_started",
+          handoffId: data.handoffId,
+          toAgent: data.targetAgentName || data.targetAgentUuid,
+          targetAgentUuid: data.targetAgentUuid,
+          taskPreview: data.taskPreview,
+          timestamp: new Date(data.timestamp),
+          status: "active"
+        };
+        pendingDelegationsRef.current.set(data.handoffId, delegation);
+        addDelegationEvent(delegation);
+        onDelegationRef.current?.(delegation);
+      });
+      controller.on("delegationCompleted", (data) => {
+        const delegation = {
+          type: "delegation_completed",
+          handoffId: data.handoffId,
+          resultPreview: data.resultPreview,
+          timestamp: new Date(data.timestamp),
+          status: data.status === "failed" ? "failed" : "completed",
+          durationMs: data.durationMs
+        };
+        pendingDelegationsRef.current.delete(data.handoffId);
+        addDelegationEvent(delegation);
+        onDelegationRef.current?.(delegation);
       });
       controller.on("textDelta", (data) => {
         streamingContentRef.current += data.delta;
@@ -3323,11 +3571,8 @@ function useAgentChat(options) {
         });
       });
       controller.on("complete", ({ execution }) => {
-        if (execution?.output && !streamingContentRef.current) {
-          streamingContentRef.current = execution.output;
-          updateStreamingMessage(execution.output);
-        }
-        handleComplete();
+        const output = execution?.output || void 0;
+        handleComplete(output);
       });
       controller.on("error", (errorEvent) => {
         handleError(errorEvent.error);
@@ -3341,7 +3586,7 @@ function useAgentChat(options) {
       });
       setIsStreamControllerConnected(true);
     },
-    [adapter, handleExecutionLog, updateStreamingMessage, updateToolCall, handleClarification, handleComplete, handleError]
+    [adapter, handleExecutionLog, updateStreamingMessage, updateToolCall, updateMessageImages, addDelegationEvent, handleClarification, handleComplete, handleError]
   );
   const sendMessage = react.useCallback(
     async (content, options2) => {
@@ -3371,8 +3616,10 @@ function useAgentChat(options) {
       setMessages((prev) => [...prev, assistantMessage]);
       streamingMessageIdRef.current = assistantMessageId;
       streamingContentRef.current = "";
+      completedRef.current = false;
+      finalizedRef.current = false;
       try {
-        console.log("[useAgentChat] Starting execution...", { agentId, sessionId: currentSessionId });
+        if (__DEV__) console.log("[useAgentChat] Starting execution...", { agentId, sessionId: currentSessionId });
         const result = await adapter.startExecution({
           agentId,
           teamId,
@@ -3380,7 +3627,7 @@ function useAgentChat(options) {
           content: content.trim(),
           attachmentUuids
         });
-        console.log("[useAgentChat] Execution started:", result);
+        if (__DEV__) console.log("[useAgentChat] Execution started:", result);
         if (!currentSessionId && result.sessionId) {
           internallyCreatedSessionRef.current = result.sessionId;
           setCurrentSessionId(result.sessionId);
@@ -3391,7 +3638,7 @@ function useAgentChat(options) {
           connectStreamController(result.executionId, result.sessionId || currentSessionId || void 0);
           setCurrentExecutionId(result.executionId);
         } else {
-          console.log("[useAgentChat] Setting executionId:", result.executionId);
+          if (__DEV__) console.log("[useAgentChat] Setting executionId:", result.executionId);
           setCurrentExecutionId(result.executionId);
         }
       } catch (err) {
@@ -3451,6 +3698,7 @@ function useAgentChat(options) {
     setMessages([]);
     setCurrentSessionId(null);
     hasLoadedInitialSession.current = false;
+    lastLoadedSessionRef.current = null;
     internallyCreatedSessionRef.current = null;
   }, []);
   const loadSession = react.useCallback(
@@ -3546,15 +3794,20 @@ function useAgentChat(options) {
     },
     [adapter, onError]
   );
+  const lastLoadedSessionRef = react.useRef(null);
   react.useEffect(() => {
-    if (initialSessionId && !hasLoadedInitialSession.current) {
-      if (internallyCreatedSessionRef.current === initialSessionId) {
-        hasLoadedInitialSession.current = true;
-        return;
-      }
+    if (!initialSessionId) return;
+    if (internallyCreatedSessionRef.current === initialSessionId) {
+      lastLoadedSessionRef.current = initialSessionId;
       hasLoadedInitialSession.current = true;
-      loadSession(initialSessionId);
+      return;
+    }
+    if (lastLoadedSessionRef.current === initialSessionId && hasLoadedInitialSession.current) {
+      return;
     }
+    lastLoadedSessionRef.current = initialSessionId;
+    hasLoadedInitialSession.current = true;
+    loadSession(initialSessionId);
   }, [initialSessionId, loadSession]);
   react.useEffect(() => {
     return () => {
@@ -3570,6 +3823,16 @@ function useAgentChat(options) {
     }
     return !!currentExecutionId && legacyIsConnected;
   }, [useStreamController, currentExecutionId, isStreamControllerConnected, legacyIsConnected]);
+  const activeDelegation = react.useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const msg = messages[i];
+      if (msg.delegationEvents) {
+        const active = msg.delegationEvents.find((de) => de.status === "active");
+        if (active) return active;
+      }
+    }
+    return null;
+  }, [messages]);
   return {
     messages,
     isLoading,
@@ -3578,6 +3841,7 @@ function useAgentChat(options) {
     error,
     sessionId: currentSessionId,
     clarification,
+    activeDelegation,
     sendMessage,
     respondToClarification,
     cancel,
@@ -3769,6 +4033,24 @@ function useFileAttachments(options) {
     console.log("[useFileAttachments] prepareForSubmit result:", aiUuids);
     return aiUuids;
   }, [onSubmitUpload, onError]);
+  const addExternalFile = react.useCallback(
+    (opts) => {
+      const category = opts.category || (opts.mimeType.startsWith("image/") ? "image" : "document");
+      const placeholderFile = new File([], opts.filename, { type: opts.mimeType });
+      const newAttachment = {
+        uuid: opts.uuid,
+        file: placeholderFile,
+        status: "ready",
+        progress: 100,
+        category,
+        previewUrl: opts.previewUrl,
+        hasThumbnail: category === "image",
+        actualSize: opts.size
+      };
+      setFiles((prev) => [...prev, newAttachment]);
+    },
+    []
+  );
   const clear = react.useCallback(() => {
     for (const file of filesRef.current) {
       if (file.previewUrl) {
@@ -3794,6 +4076,7 @@ function useFileAttachments(options) {
     files,
     dropZoneProps,
     removeFile,
+    addExternalFile,
     getReadyUuids,
     getReadyUrls,
     prepareForSubmit,
@@ -4433,18 +4716,30 @@ function ChatContainer({
   children,
   maxHeight = "600px",
   className,
-  theme = "system"
+  theme = "system",
+  layout = "fixed"
 }) {
   const maxHeightValue = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+  const isFill = layout === "fill";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn2(
-        "flex flex-col bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden",
+        "cadra-chat-container flex flex-col overflow-hidden",
+        // Default colors use CSS custom properties with Tailwind fallbacks.
+        // Consumers can override via CSS: --chat-bg, --chat-border, --chat-border-radius
+        !isFill && "rounded-lg border",
+        isFill && "flex-1 min-h-0",
         className
       ),
-      style: { maxHeight: maxHeightValue },
+      style: {
+        ...!isFill ? { maxHeight: maxHeightValue } : void 0,
+        // CSS custom properties for theming — consumers set these to override
+        backgroundColor: "var(--chat-bg, var(--background, #fff))",
+        borderColor: !isFill ? "var(--chat-border, var(--border, #e5e7eb))" : void 0
+      },
       "data-theme": theme,
+      "data-layout": layout,
       children
     }
   );
@@ -5131,7 +5426,7 @@ var FileDropZone = react.forwardRef(
         {
           ref: dropZoneRef,
           "data-dropzone": "wrapper",
-          className: cn4("relative w-full h-full", className),
+          className: cn4("relative flex flex-col flex-1 min-h-0", className),
           style: { minHeight: "inherit" },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -5416,6 +5711,380 @@ function AskUserPrompt({
 function cn6(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+function formatDuration(ms) {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
+function DelegationProgress({
+  event,
+  className
+}) {
+  const statusIcon = react.useMemo(() => {
+    switch (event.status) {
+      case "active":
+        return /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { className: "h-4 w-4 text-blue-500" });
+      case "completed":
+        return /* @__PURE__ */ jsxRuntime.jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-500" });
+      case "failed":
+        return /* @__PURE__ */ jsxRuntime.jsx(AlertCircleIcon, { className: "h-4 w-4 text-red-500" });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { className: "h-4 w-4 text-gray-400" });
+    }
+  }, [event.status]);
+  const statusColor = react.useMemo(() => {
+    switch (event.status) {
+      case "active":
+        return "border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/20";
+      case "completed":
+        return "border-green-200 dark:border-green-800 bg-green-50/50 dark:bg-green-950/20";
+      case "failed":
+        return "border-red-200 dark:border-red-800 bg-red-50/50 dark:bg-red-950/20";
+      default:
+        return "border-gray-200 dark:border-gray-700";
+    }
+  }, [event.status]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn6(
+        "rounded-lg border text-sm px-3 py-2",
+        statusColor,
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        statusIcon,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            event.fromAgent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700 dark:text-gray-300 truncate", children: event.fromAgent }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 dark:text-gray-500 flex-shrink-0", children: "\u2192" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900 dark:text-gray-100 truncate", children: event.toAgent || event.targetAgentUuid || "Specialist" })
+          ] }),
+          event.taskPreview && event.status === "active" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5", children: event.taskPreview }),
+          event.resultPreview && event.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-green-600 dark:text-green-400 truncate mt-0.5", children: event.resultPreview })
+        ] }),
+        event.durationMs !== void 0 && event.status !== "active" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400 flex-shrink-0", children: formatDuration(event.durationMs) })
+      ] })
+    }
+  );
+}
+function DelegationProgressList({
+  events,
+  className
+}) {
+  if (!events || events.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn6("space-y-2", className), children: events.map((event, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    DelegationProgress,
+    {
+      event
+    },
+    event.handoffId || `delegation-${index}`
+  )) });
+}
+function ImageLightbox({
+  images,
+  currentIndex,
+  onClose,
+  onPrev,
+  onNext,
+  className
+}) {
+  const currentImage = images[currentIndex];
+  const hasMultiple = images.length > 1;
+  const [container, setContainer] = react.useState(null);
+  react.useEffect(() => {
+    const el = document.createElement("div");
+    el.id = "cadra-lightbox-root";
+    el.style.position = "fixed";
+    el.style.inset = "0";
+    el.style.zIndex = "999999";
+    el.style.pointerEvents = "auto";
+    document.body.appendChild(el);
+    setContainer(el);
+    return () => {
+      document.body.removeChild(el);
+    };
+  }, []);
+  const onCloseRef = react.useRef(onClose);
+  const onPrevRef = react.useRef(onPrev);
+  const onNextRef = react.useRef(onNext);
+  onCloseRef.current = onClose;
+  onPrevRef.current = onPrev;
+  onNextRef.current = onNext;
+  react.useEffect(() => {
+    function handleKeyDown(e) {
+      switch (e.key) {
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          onCloseRef.current();
+          break;
+        case "ArrowLeft":
+          if (hasMultiple) onPrevRef.current();
+          break;
+        case "ArrowRight":
+          if (hasMultiple) onNextRef.current();
+          break;
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  }, [hasMultiple]);
+  react.useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!container) return;
+    function handleClick(e) {
+      const target = e.target;
+      if (target.dataset.lightboxBackdrop === "true") {
+        e.preventDefault();
+        e.stopPropagation();
+        onCloseRef.current();
+      }
+    }
+    container.addEventListener("click", handleClick, true);
+    return () => container.removeEventListener("click", handleClick, true);
+  }, [container]);
+  const handleDownload = react.useCallback(async () => {
+    if (!currentImage) return;
+    const filename = currentImage.filename || `image-${currentIndex + 1}`;
+    try {
+      const response = await fetch(currentImage.url);
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+    } catch {
+      window.open(currentImage.url, "_blank");
+    }
+  }, [currentImage, currentIndex]);
+  const handleClose = react.useCallback(() => {
+    onCloseRef.current();
+  }, []);
+  if (!currentImage || !container) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-lightbox-backdrop": "true",
+        className: `absolute inset-0 flex items-center justify-center bg-black/90 ${className || ""}`,
+        style: { cursor: "zoom-out" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "absolute top-0 left-0 right-0 flex items-center justify-between p-4",
+              style: { zIndex: 10 },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-white text-sm", children: hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  currentIndex + 1,
+                  " / ",
+                  images.length
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDownload();
+                      },
+                      className: "p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors",
+                      style: { cursor: "pointer", pointerEvents: "auto" },
+                      "aria-label": "Download image",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, { className: "h-5 w-5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleClose();
+                      },
+                      className: "p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors",
+                      style: { cursor: "pointer", pointerEvents: "auto" },
+                      "aria-label": "Close lightbox",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { className: "h-5 w-5" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onPrev();
+              },
+              className: "absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors",
+              style: { zIndex: 10, cursor: "pointer", pointerEvents: "auto" },
+              "aria-label": "Previous image",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: currentImage.url,
+              alt: currentImage.alt || `Image ${currentIndex + 1}`,
+              className: "max-w-[90vw] max-h-[85vh] object-contain select-none",
+              style: { cursor: "default", pointerEvents: "auto" },
+              draggable: false
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onNext();
+              },
+              className: "absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors",
+              style: { zIndex: 10, cursor: "pointer", pointerEvents: "auto" },
+              "aria-label": "Next image",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "h-6 w-6" })
+            }
+          ),
+          currentImage.alt && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute bottom-0 left-0 right-0 p-4 text-center",
+              style: { zIndex: 10, pointerEvents: "none" },
+              children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm bg-black/50 inline-block px-3 py-1 rounded-full", children: currentImage.alt })
+            }
+          )
+        ]
+      }
+    ),
+    container
+  );
+}
+function cn7(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function ImageWithLoading({ src, alt, className, onClick }) {
+  const [isLoaded, setIsLoaded] = react.useState(false);
+  const [hasError, setHasError] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn7(
+        "relative overflow-hidden rounded-lg",
+        className
+      ),
+      children: [
+        !isLoaded && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg" }),
+        hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm rounded-lg bg-gray-100 dark:bg-gray-800", children: "Failed to load" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt,
+            loading: "lazy",
+            className: cn7(
+              "w-full h-auto max-h-[280px] object-cover rounded-lg shadow-sm transition-opacity duration-200",
+              isLoaded ? "opacity-100" : "opacity-0"
+            ),
+            onLoad: () => setIsLoaded(true),
+            onError: () => setHasError(true),
+            onClick,
+            style: onClick ? { cursor: "pointer" } : void 0
+          }
+        )
+      ]
+    }
+  );
+}
+function ImageGallery({
+  images,
+  onImageClick,
+  className
+}) {
+  const [lightboxIndex, setLightboxIndex] = react.useState(null);
+  const handleImageClick = react.useCallback(
+    (image, index) => {
+      if (onImageClick) {
+        onImageClick(image);
+      } else {
+        setLightboxIndex(index);
+      }
+    },
+    [onImageClick]
+  );
+  const handleLightboxClose = react.useCallback(() => {
+    setLightboxIndex(null);
+  }, []);
+  const handleLightboxPrev = react.useCallback(() => {
+    setLightboxIndex(
+      (prev) => prev !== null ? (prev - 1 + images.length) % images.length : null
+    );
+  }, [images.length]);
+  const handleLightboxNext = react.useCallback(() => {
+    setLightboxIndex(
+      (prev) => prev !== null ? (prev + 1) % images.length : null
+    );
+  }, [images.length]);
+  if (!images || images.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn7(
+          "grid gap-2",
+          images.length === 1 ? "grid-cols-1" : images.length === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3",
+          className
+        ),
+        children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleImageClick(image, index),
+            className: "block rounded-lg overflow-hidden transition-transform hover:scale-[1.02] text-left",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ImageWithLoading,
+              {
+                src: image.url,
+                alt: image.alt || `Image ${index + 1}`
+              }
+            )
+          },
+          `${image.url}-${index}`
+        ))
+      }
+    ),
+    lightboxIndex !== null && !onImageClick && /* @__PURE__ */ jsxRuntime.jsx(
+      ImageLightbox,
+      {
+        images,
+        currentIndex: lightboxIndex,
+        onClose: handleLightboxClose,
+        onPrev: handleLightboxPrev,
+        onNext: handleLightboxNext
+      }
+    )
+  ] });
+}
+function cn8(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
 function MarkdownContent({
   content,
   className,
@@ -5435,11 +6104,11 @@ function MarkdownContent({
       h3: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mt-3 mb-1 first:mt-0", children }),
       h4: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-semibold mt-2 mb-1 first:mt-0", children }),
       // Paragraphs
-      p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 last:mb-0 leading-relaxed", children }),
+      p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 last:mb-0", children }),
       // Lists
-      ul: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside mb-2 space-y-1", children }),
-      ol: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-decimal list-inside mb-2 space-y-1", children }),
-      li: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "leading-relaxed", children }),
+      ul: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside mb-1.5 last:mb-0", children }),
+      ol: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-decimal list-inside mb-1.5 last:mb-0", children }),
+      li: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "", children }),
       // Links
       a: ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
         "a",
@@ -5474,7 +6143,7 @@ function MarkdownContent({
         if (isCodeBlock) {
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative my-2", children: [
             language && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 px-2 py-1 text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-bl rounded-tr border-b border-l border-gray-200 dark:border-gray-700", children: language }),
-            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn6("font-mono", codeClassName), ...props, children }) })
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn8("font-mono", codeClassName), ...props, children }) })
           ] });
         }
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5521,7 +6190,7 @@ function MarkdownContent({
     () => customComponents ? { ...defaultComponents, ...customComponents } : defaultComponents,
     [defaultComponents, customComponents]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn6("prose prose-sm dark:prose-invert max-w-none", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn8("max-w-none text-sm leading-relaxed", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     ReactMarkdown__default.default,
     {
       remarkPlugins: [remarkGfm__default.default],
@@ -5531,6 +6200,58 @@ function MarkdownContent({
     }
   ) });
 }
+function cn9(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function ThinkingBlock({
+  block,
+  defaultExpanded = false,
+  className
+}) {
+  const [isExpanded, setIsExpanded] = react.useState(defaultExpanded);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn9(
+        "rounded-lg border",
+        "border-purple-200 dark:border-purple-800",
+        "bg-purple-50/50 dark:bg-purple-950/20",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsExpanded(!isExpanded),
+            className: "w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-purple-100/50 dark:hover:bg-purple-900/30 transition-colors rounded-lg",
+            children: [
+              isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "h-4 w-4 text-purple-400 flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "h-4 w-4 text-purple-400 flex-shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SparklesIcon, { className: "h-4 w-4 text-purple-500 flex-shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-purple-700 dark:text-purple-300", children: "Thinking" })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3 border-t border-purple-200 dark:border-purple-800", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-sm text-purple-800 dark:text-purple-200 whitespace-pre-wrap font-mono leading-relaxed", children: block.content }) })
+      ]
+    }
+  );
+}
+function ThinkingBlockList({
+  blocks,
+  defaultExpanded = false,
+  className
+}) {
+  if (!blocks || blocks.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn9("space-y-2", className), children: blocks.map((block) => /* @__PURE__ */ jsxRuntime.jsx(
+    ThinkingBlock,
+    {
+      block,
+      defaultExpanded
+    },
+    block.id
+  )) });
+}
 var INTERNAL_TOOL_NAMES = /* @__PURE__ */ new Set([
   "update_task_list",
   "create_task",
@@ -5547,7 +6268,8 @@ var INTERNAL_TOOL_NAMES = /* @__PURE__ */ new Set([
   "check_task_status",
   "assign_task",
   "update_plan",
-  "check_delegations"
+  "check_delegations",
+  "activate_skill"
 ]);
 function isInternalTool(toolName) {
   if (!toolName) return false;
@@ -5561,11 +6283,20 @@ function isInternalTool(toolName) {
   }
   return false;
 }
-function cn7(...classes) {
+function cn10(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function formatToolName(toolName) {
   if (!toolName) return toolName;
+  if (toolName.includes(".")) {
+    const segments = toolName.split(".");
+    const uniqueSegments = segments.filter(
+      (seg, idx) => idx === 0 || seg.toLowerCase().trim() !== segments[idx - 1]?.toLowerCase().trim()
+    );
+    const bestSegment = uniqueSegments[uniqueSegments.length - 1]?.trim() || toolName;
+    if (bestSegment.includes(" ")) return bestSegment;
+    return formatToolName(bestSegment);
+  }
   const prefixesToRemove = [
     "skills_api_",
     "tools_api_",
@@ -5610,7 +6341,7 @@ function formatToolName(toolName) {
   }
   return uniqueWords.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
-function formatDuration(ms) {
+function formatDuration2(ms) {
   if (ms < 1e3) {
     return `${ms}ms`;
   }
@@ -5631,7 +6362,7 @@ function formatJsonPreview(data, maxLength = 100) {
     return String(data);
   }
 }
-function extractImagesFromResult(result) {
+function extractImagesFromResult2(result) {
   if (!result) return [];
   let data = result;
   if (typeof result === "string") {
@@ -5670,14 +6401,23 @@ function ToolCallEntry({
   compact = false
 }) {
   const [isExpanded, setIsExpanded] = react.useState(false);
+  const [lightboxIndex, setLightboxIndex] = react.useState(null);
   const formattedName = react.useMemo(
     () => formatToolName(toolCall.name),
     [toolCall.name]
   );
   const resultImages = react.useMemo(
-    () => toolCall.status === "completed" && toolCall.result ? extractImagesFromResult(toolCall.result) : [],
+    () => toolCall.status === "completed" && toolCall.result ? extractImagesFromResult2(toolCall.result) : [],
     [toolCall.status, toolCall.result]
   );
+  const lightboxImages = react.useMemo(
+    () => resultImages.map((img) => ({
+      url: img.url,
+      alt: img.alt || img.prompt,
+      filename: img.alt || img.prompt
+    })),
+    [resultImages]
+  );
   const hasImages = resultImages.length > 0;
   const statusIcon = react.useMemo(() => {
     switch (toolCall.status) {
@@ -5711,14 +6451,14 @@ function ToolCallEntry({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn7(
+        className: cn10(
           "inline-flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400",
           className
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: statusIcon }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedName }),
-          toolCall.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 dark:text-gray-500", children: formatDuration(toolCall.durationMs) })
+          toolCall.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 dark:text-gray-500", children: formatDuration2(toolCall.durationMs) })
         ]
       }
     );
@@ -5726,7 +6466,7 @@ function ToolCallEntry({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn7(
+      className: cn10(
         "rounded-lg border text-sm",
         statusColor,
         className
@@ -5742,52 +6482,61 @@ function ToolCallEntry({
               isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-400 flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "h-4 w-4 text-gray-400 flex-shrink-0" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: statusIcon }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900 dark:text-gray-100 truncate", children: formattedName }),
-              toolCall.status === "completed" && toolCall.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-gray-500 dark:text-gray-400 flex-shrink-0", children: formatDuration(toolCall.durationMs) }),
+              toolCall.status === "completed" && toolCall.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-gray-500 dark:text-gray-400 flex-shrink-0", children: formatDuration2(toolCall.durationMs) }),
               toolCall.status === "failed" && toolCall.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-red-600 dark:text-red-400 truncate max-w-[150px]", children: toolCall.error })
             ]
           }
         ),
-        hasImages && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn7(
-          "grid gap-2",
-          resultImages.length === 1 ? "grid-cols-1" : "grid-cols-2"
-        ), children: resultImages.map((img, idx) => {
-          const altText = img.alt || img.prompt || `Generated image ${idx + 1}`;
-          const imageElement = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: img.thumbnailUrl || img.url,
-                alt: altText,
-                className: "w-full h-auto max-h-[300px] object-contain bg-gray-50 dark:bg-gray-900",
-                loading: "lazy"
-              }
-            ),
-            img.prompt && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 text-xs text-gray-500 dark:text-gray-400 truncate bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700", children: img.prompt })
-          ] });
-          if (onImageClick) {
+        hasImages && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn10(
+            "grid gap-3",
+            resultImages.length === 1 ? "grid-cols-1 max-w-sm" : resultImages.length === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3"
+          ), children: resultImages.map((img, idx) => {
+            const altText = img.alt || img.prompt || `Generated image ${idx + 1}`;
+            const imageElement = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: img.thumbnailUrl || img.url,
+                  alt: altText,
+                  className: "w-full h-auto max-h-[280px] object-cover rounded-lg shadow-sm",
+                  loading: "lazy"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg bg-black/0 group-hover:bg-black/10 dark:group-hover:bg-white/5 transition-colors" })
+            ] });
             return /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                onClick: () => onImageClick({ url: img.url, alt: altText, filename: altText }),
-                className: "block rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 transition-colors cursor-pointer text-left",
+                onClick: () => {
+                  if (onImageClick) {
+                    onImageClick({ url: img.url, alt: altText, filename: altText });
+                  } else {
+                    setLightboxIndex(idx);
+                  }
+                },
+                className: "block rounded-lg overflow-hidden cursor-pointer text-left transition-transform hover:scale-[1.02]",
                 children: imageElement
               },
               idx
             );
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
+          }) }),
+          lightboxIndex !== null && !onImageClick && /* @__PURE__ */ jsxRuntime.jsx(
+            ImageLightbox,
             {
-              href: img.url,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "block rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 transition-colors",
-              children: imageElement
-            },
-            idx
-          );
-        }) }) }),
+              images: lightboxImages,
+              currentIndex: lightboxIndex,
+              onClose: () => setLightboxIndex(null),
+              onPrev: () => setLightboxIndex(
+                (prev) => prev !== null ? (prev - 1 + lightboxImages.length) % lightboxImages.length : null
+              ),
+              onNext: () => setLightboxIndex(
+                (prev) => prev !== null ? (prev + 1) % lightboxImages.length : null
+              )
+            }
+          )
+        ] }),
         isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 px-3 py-2 space-y-2", children: [
           toolCall.args && Object.keys(toolCall.args).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 mb-1", children: "Input" }),
@@ -5806,22 +6555,185 @@ function ToolCallEntry({
     }
   );
 }
-function cn8(...classes) {
+function cn11(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+function normalizeToolNameForGrouping(name) {
+  const lastSegment = name.includes(".") ? name.split(".").pop() : name;
+  return lastSegment.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+function groupToolCalls(toolCalls) {
+  const byNormalizedName = /* @__PURE__ */ new Map();
+  const nameOrder = [];
+  for (const tc of toolCalls) {
+    const key = normalizeToolNameForGrouping(tc.name);
+    if (!byNormalizedName.has(key)) {
+      byNormalizedName.set(key, []);
+      nameOrder.push(key);
+    }
+    byNormalizedName.get(key).push(tc);
+  }
+  const groups = [];
+  for (const key of nameOrder) {
+    const calls = byNormalizedName.get(key);
+    if (calls.length === 1) {
+      groups.push({ type: "single", toolCall: calls[0] });
+    } else {
+      groups.push({ type: "group", name: calls[0].name, toolCalls: calls });
+    }
+  }
+  return groups;
+}
+function ToolCallList({ toolCalls, toolCallVerbosity, onImageClick, renderToolCall }) {
+  const visibleToolCalls = react.useMemo(() => {
+    if (toolCallVerbosity !== "compact") return toolCalls;
+    return toolCalls.filter((tc) => !isInternalTool(tc.name));
+  }, [toolCalls, toolCallVerbosity]);
+  const grouped = react.useMemo(() => groupToolCalls(visibleToolCalls), [visibleToolCalls]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: grouped.map((group) => {
+    if (group.type === "single") {
+      const toolCall = group.toolCall;
+      const defaultRender = () => /* @__PURE__ */ jsxRuntime.jsx(
+        ToolCallEntry,
+        {
+          toolCall,
+          onImageClick
+        },
+        toolCall.id
+      );
+      if (renderToolCall) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderToolCall(toolCall, defaultRender) }, toolCall.id);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultRender() }, toolCall.id);
+    }
+    const completed = group.toolCalls.filter((tc) => tc.status === "completed" || tc.status === "failed");
+    const running = group.toolCalls.filter((tc) => tc.status !== "completed" && tc.status !== "failed");
+    const allImages = completed.flatMap(
+      (tc) => tc.result ? extractImagesFromResult2(tc.result) : []
+    );
+    const hasImages = allImages.length > 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      running.length > 0 && running[0] && /* @__PURE__ */ jsxRuntime.jsx(
+        ToolCallEntry,
+        {
+          toolCall: {
+            ...running[0],
+            name: running.length > 1 ? `${running[0].name} (${running.length})` : running[0].name
+          },
+          onImageClick
+        },
+        running[0].id
+      ),
+      completed.length > 0 && hasImages && /* @__PURE__ */ jsxRuntime.jsx(
+        GroupedImageGallery,
+        {
+          images: allImages,
+          completedCount: completed.length,
+          onImageClick
+        }
+      ),
+      completed.length > 0 && !hasImages && completed.map((tc) => {
+        const defaultRender = () => /* @__PURE__ */ jsxRuntime.jsx(ToolCallEntry, { toolCall: tc, onImageClick }, tc.id);
+        if (renderToolCall) {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderToolCall(tc, defaultRender) }, tc.id);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultRender() }, tc.id);
+      })
+    ] }, `group-${group.name}-${group.toolCalls[0]?.id}`);
+  }) });
+}
+function GroupedImageGallery({
+  images,
+  completedCount,
+  onImageClick
+}) {
+  const [lightboxIndex, setLightboxIndex] = react.useState(null);
+  const lightboxImages = react.useMemo(
+    () => images.map((img) => ({
+      url: img.url,
+      alt: img.alt || img.prompt,
+      filename: img.alt || img.prompt
+    })),
+    [images]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 px-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4 text-green-500", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        completedCount,
+        " image",
+        completedCount !== 1 ? "s" : "",
+        " generated"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn11(
+      "grid gap-3",
+      images.length === 1 ? "grid-cols-1 max-w-sm" : images.length === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3"
+    ), children: images.map((img, idx) => {
+      const altText = img.alt || img.prompt || `Generated image ${idx + 1}`;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (onImageClick) {
+              onImageClick({ url: img.url, alt: altText, filename: altText });
+            } else {
+              setLightboxIndex(idx);
+            }
+          },
+          className: "block rounded-lg overflow-hidden cursor-pointer text-left transition-transform hover:scale-[1.02] group",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: img.thumbnailUrl || img.url,
+                alt: altText,
+                className: "w-full h-auto max-h-[280px] object-cover rounded-lg shadow-sm",
+                loading: "lazy"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg bg-black/0 group-hover:bg-black/10 dark:group-hover:bg-white/5 transition-colors" })
+          ] })
+        },
+        `${img.url}-${idx}`
+      );
+    }) }),
+    lightboxIndex !== null && !onImageClick && /* @__PURE__ */ jsxRuntime.jsx(
+      ImageLightbox,
+      {
+        images: lightboxImages,
+        currentIndex: lightboxIndex,
+        onClose: () => setLightboxIndex(null),
+        onPrev: () => setLightboxIndex(
+          (prev) => prev !== null ? (prev - 1 + lightboxImages.length) % lightboxImages.length : null
+        ),
+        onNext: () => setLightboxIndex(
+          (prev) => prev !== null ? (prev + 1) % lightboxImages.length : null
+        )
+      }
+    )
+  ] });
+}
 function ChatMessage({
   message,
   enableMarkdown = true,
   showToolCalls = true,
-  toolCallVerbosity,
+  toolCallVerbosity = "compact",
   className,
   markdownComponents,
   markdownUrlTransform,
   markdownContentTransform,
-  onImageClick
+  onImageClick,
+  showThinking = true,
+  showDelegation = true,
+  showImages = true,
+  renderToolCall,
+  variant = "bubble"
 }) {
   const isUser = message.role === "user";
   const isAssistant = message.role === "assistant";
+  const isFlat = variant === "flat";
   const formattedTime = react.useMemo(() => {
     const date = message.timestamp instanceof Date ? message.timestamp : new Date(message.timestamp);
     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
@@ -5829,113 +6741,119 @@ function ChatMessage({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn8(
-        "flex gap-3 p-4",
-        isUser ? "flex-row-reverse" : "flex-row",
+      className: cn11(
+        "cadra-chat-message flex gap-3",
+        isFlat ? "py-5 px-4" : "p-4",
+        // Bubble: user messages right-aligned. Flat: always left-aligned.
+        !isFlat && isUser ? "flex-row-reverse" : "flex-row",
+        // Flat variant: subtle row background for user messages
+        isFlat && isUser && "chat-message-user-row",
         className
       ),
+      style: isFlat && isUser ? {
+        backgroundColor: "var(--chat-user-row-bg, rgba(128, 128, 128, 0.08))"
+      } : void 0,
+      "data-role": message.role,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn8(
-              "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
-              isUser ? "bg-blue-500 text-white" : "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
-            ),
+            className: "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center shadow-sm",
+            style: {
+              backgroundColor: isUser ? "var(--chat-user-avatar-bg, #3b82f6)" : "var(--chat-assistant-avatar-bg, #e5e7eb)",
+              color: isUser ? "var(--chat-user-avatar-text, #fff)" : "var(--chat-assistant-avatar-text, #4b5563)"
+            },
             children: isUser ? /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn8(
-              "flex-1 min-w-0 space-y-2",
-              isUser ? "text-right" : "text-left"
+            className: cn11(
+              "flex-1 min-w-0",
+              isFlat ? "pt-0.5" : "space-y-2",
+              !isFlat && isUser ? "text-right" : "text-left"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: cn8(
-                    "flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400",
-                    isUser ? "justify-end" : "justify-start"
+                  className: cn11(
+                    "flex items-center gap-2 text-xs",
+                    isFlat ? "mb-1.5" : "",
+                    !isFlat && isUser ? "justify-end" : "justify-start"
                   ),
+                  style: { color: "var(--chat-meta-text, #6b7280)" },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: isUser ? "You" : "Assistant" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--chat-label-text, inherit)" }, children: isUser ? "You" : "Assistant" }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedTime }),
                     message.isStreaming && /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { className: "h-3 w-3" })
                   ]
                 }
               ),
-              message.thinkingBlocks && message.thinkingBlocks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: message.thinkingBlocks.map((block) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
+              showThinking && message.thinkingBlocks && message.thinkingBlocks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ThinkingBlockList, { blocks: message.thinkingBlocks }),
+              showDelegation && message.delegationEvents && message.delegationEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(DelegationProgressList, { events: message.delegationEvents }),
+              showToolCalls && toolCallVerbosity !== "hidden" && message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolCallList,
                 {
-                  className: "bg-purple-50 dark:bg-purple-950/30 border border-purple-200 dark:border-purple-800 rounded-lg p-3 text-sm text-purple-800 dark:text-purple-200",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-purple-600 dark:text-purple-400 mb-1", children: "Thinking..." }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap", children: block.content })
-                  ]
-                },
-                block.id
-              )) }),
-              showToolCalls && toolCallVerbosity !== "hidden" && message.toolCalls && message.toolCalls.length > 0 && (() => {
-                const verbosity = toolCallVerbosity ?? "verbose";
-                const filteredToolCalls = verbosity === "compact" ? message.toolCalls.filter((tc) => !isInternalTool(tc.name)) : message.toolCalls;
-                if (filteredToolCalls.length === 0) return null;
-                if (verbosity === "compact") {
-                  const runningTools = filteredToolCalls.filter((tc) => tc.status === "pending" || tc.status === "running");
-                  const doneTools = filteredToolCalls.filter((tc) => tc.status === "completed" || tc.status === "failed");
-                  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    doneTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1", children: doneTools.map((toolCall) => /* @__PURE__ */ jsxRuntime.jsx(
-                      ToolCallEntry,
-                      {
-                        toolCall,
-                        onImageClick,
-                        compact: true
-                      },
-                      toolCall.id
-                    )) }),
-                    runningTools.map((toolCall) => /* @__PURE__ */ jsxRuntime.jsx(
-                      ToolCallEntry,
-                      {
-                        toolCall,
-                        onImageClick
-                      },
-                      toolCall.id
-                    ))
-                  ] });
+                  toolCalls: message.toolCalls,
+                  toolCallVerbosity,
+                  onImageClick,
+                  renderToolCall
                 }
-                return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filteredToolCalls.map((toolCall) => /* @__PURE__ */ jsxRuntime.jsx(
-                  ToolCallEntry,
-                  {
-                    toolCall,
-                    onImageClick
-                  },
-                  toolCall.id
-                )) });
-              })(),
-              message.content && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              ),
+              showImages && !showToolCalls && message.images && message.images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                ImageGallery,
                 {
-                  className: cn8(
-                    "rounded-lg p-3",
-                    isUser ? "bg-blue-500 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                  ),
-                  children: isAssistant && enableMarkdown ? /* @__PURE__ */ jsxRuntime.jsx(
-                    MarkdownContent,
-                    {
-                      content: message.content,
-                      components: markdownComponents,
-                      urlTransform: markdownUrlTransform,
-                      contentTransform: markdownContentTransform
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap", children: message.content })
+                  images: message.images,
+                  onImageClick: onImageClick ? (img) => onImageClick({ url: img.url, alt: img.alt, filename: img.filename }) : void 0
                 }
               ),
+              message.content && (isFlat ? (
+                // Flat variant: no bubble, just text with theme-aware color
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn11("text-sm break-words", !(isAssistant && enableMarkdown) && "whitespace-pre-wrap"),
+                    style: { color: "var(--chat-content-text, inherit)" },
+                    children: isAssistant && enableMarkdown ? /* @__PURE__ */ jsxRuntime.jsx(
+                      MarkdownContent,
+                      {
+                        content: message.content,
+                        components: markdownComponents,
+                        urlTransform: markdownUrlTransform,
+                        contentTransform: markdownContentTransform
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap", children: message.content })
+                  }
+                )
+              ) : (
+                // Bubble variant: colored bubble backgrounds
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "rounded-lg p-3",
+                    style: {
+                      backgroundColor: isUser ? "var(--chat-user-bg, #3b82f6)" : "var(--chat-assistant-bg, #f3f4f6)",
+                      color: isUser ? "var(--chat-user-text, #fff)" : "var(--chat-assistant-text, #111827)"
+                    },
+                    children: isAssistant && enableMarkdown ? /* @__PURE__ */ jsxRuntime.jsx(
+                      MarkdownContent,
+                      {
+                        content: message.content,
+                        components: markdownComponents,
+                        urlTransform: markdownUrlTransform,
+                        contentTransform: markdownContentTransform
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap", children: message.content })
+                  }
+                )
+              )),
               message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: message.attachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: "flex items-center gap-2 bg-gray-100 dark:bg-gray-800 rounded-lg px-3 py-2 text-sm",
+                  className: "flex items-center gap-2 rounded-lg px-3 py-2 text-sm",
+                  style: { backgroundColor: "var(--chat-assistant-bg, #f3f4f6)" },
                   children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[150px]", children: attachment.filename })
                 },
                 attachment.uuid
@@ -5947,7 +6865,7 @@ function ChatMessage({
     }
   );
 }
-function cn9(...classes) {
+function cn12(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function MessageList({
@@ -5965,6 +6883,12 @@ function MessageList({
   markdownUrlTransform,
   markdownContentTransform,
   onImageClick,
+  showThinking = true,
+  showDelegation = true,
+  showImages = true,
+  renderMessage,
+  renderToolCall,
+  messageVariant = "bubble",
   sendMessage
 }) {
   const scrollRef = react.useRef(null);
@@ -5978,7 +6902,7 @@ function MessageList({
     "div",
     {
       ref: scrollRef,
-      className: cn9(
+      className: cn12(
         "flex-1 overflow-y-auto",
         className
       ),
@@ -5989,20 +6913,31 @@ function MessageList({
         ] }) }),
         messages.length === 0 && !isLoading && !isLoadingHistory && (renderWelcome ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeof renderWelcome === "function" ? renderWelcome({ sendMessage: sendMessage || (() => {
         }) }) : renderWelcome }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full p-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg", children: welcomeMessage }) }) })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
-          ChatMessage,
-          {
-            message,
-            enableMarkdown,
-            showToolCalls,
-            toolCallVerbosity,
-            markdownComponents,
-            markdownUrlTransform,
-            markdownContentTransform,
-            onImageClick
-          },
-          message.id
-        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: messages.map((message) => {
+          const defaultRender = () => /* @__PURE__ */ jsxRuntime.jsx(
+            ChatMessage,
+            {
+              message,
+              enableMarkdown,
+              showToolCalls,
+              toolCallVerbosity,
+              markdownComponents,
+              markdownUrlTransform,
+              markdownContentTransform,
+              onImageClick,
+              showThinking,
+              showDelegation,
+              showImages,
+              renderToolCall,
+              variant: messageVariant
+            },
+            message.id
+          );
+          if (renderMessage) {
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderMessage(message, defaultRender) }, message.id);
+          }
+          return defaultRender();
+        }) }),
         isLoading && !isStreaming && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { className: "h-4 w-4 text-gray-600 dark:text-gray-300" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Thinking..." })
@@ -6058,6 +6993,7 @@ function AgentChat({
   maxHeight = "600px",
   className,
   theme = "system",
+  layout = "fixed",
   enableAttachments = false,
   enableMarkdown = true,
   showToolCalls = true,
@@ -6065,7 +7001,21 @@ function AgentChat({
   markdownComponents,
   markdownUrlTransform,
   markdownContentTransform,
-  onImageClick
+  onImageClick,
+  // Extension props
+  hideHeader,
+  renderAboveInput,
+  renderBelowMessages,
+  renderMessage,
+  renderToolCall,
+  messageVariant = "bubble",
+  showThinking = true,
+  showDelegation = true,
+  showImages = true,
+  pollingInterval,
+  pollingEnabled,
+  onDelegation,
+  onAttachmentsReady
 }) {
   const {
     messages,
@@ -6092,7 +7042,10 @@ function AgentChat({
     onSessionStart,
     onToolCall,
     onToolResult,
-    onClarification
+    onClarification,
+    onDelegation,
+    pollingInterval,
+    pollingEnabled
   });
   const effectiveVerbosity = showToolCalls === false ? "hidden" : toolCallVerbosity ?? "compact";
   const dropZoneRef = react.useRef(null);
@@ -6109,6 +7062,11 @@ function AgentChat({
       console.error("[AgentChat] Attachment error:", msg);
     }
   });
+  react.useEffect(() => {
+    if (enableAttachments && onAttachmentsReady) {
+      onAttachmentsReady({ addExternalFile: attachments.addExternalFile });
+    }
+  }, [enableAttachments, onAttachmentsReady, attachments.addExternalFile]);
   const handleSend = react.useCallback(
     async (content) => {
       if (enableAttachments && attachments.hasReadyFiles) {
@@ -6121,51 +7079,31 @@ function AgentChat({
     },
     [enableAttachments, attachments, sendMessage]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(ChatContainer, { maxHeight, className, theme, children: [
-    enableAttachments ? /* @__PURE__ */ jsxRuntime.jsx(
-      FileDropZone,
-      {
-        ref: dropZoneRef,
-        ...attachments.dropZoneProps,
-        disabled: isLoading || !!clarification || isLoadingHistory,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          MessageList,
-          {
-            messages,
-            welcomeMessage,
-            renderWelcome,
-            isLoading,
-            isStreaming,
-            isLoadingHistory,
-            enableMarkdown,
-            showToolCalls,
-            toolCallVerbosity: effectiveVerbosity,
-            markdownComponents,
-            markdownUrlTransform,
-            markdownContentTransform,
-            onImageClick,
-            sendMessage: handleSend
-          }
-        )
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      MessageList,
-      {
-        messages,
-        welcomeMessage,
-        renderWelcome,
-        isLoading,
-        isStreaming,
-        isLoadingHistory,
-        enableMarkdown,
-        showToolCalls,
-        markdownComponents,
-        markdownUrlTransform,
-        markdownContentTransform,
-        onImageClick,
-        sendMessage: handleSend
-      }
-    ),
+  const messageListProps = {
+    messages,
+    welcomeMessage: hideHeader ? void 0 : welcomeMessage,
+    renderWelcome: hideHeader ? void 0 : renderWelcome,
+    isLoading,
+    isStreaming,
+    isLoadingHistory,
+    enableMarkdown,
+    showToolCalls,
+    toolCallVerbosity: effectiveVerbosity,
+    markdownComponents,
+    markdownUrlTransform,
+    markdownContentTransform,
+    onImageClick,
+    showThinking,
+    showDelegation,
+    showImages,
+    renderMessage,
+    renderToolCall,
+    messageVariant,
+    sendMessage: handleSend
+  };
+  const chatContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MessageList, { ...messageListProps }),
+    renderBelowMessages?.(),
     clarification && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
       AskUserPrompt,
       {
@@ -6175,6 +7113,7 @@ function AgentChat({
       }
     ) }),
     error && /* @__PURE__ */ jsxRuntime.jsx(ErrorBanner, { error, onRetry: retry, onDismiss: clearError }),
+    renderAboveInput?.(),
     /* @__PURE__ */ jsxRuntime.jsx(
       ChatInput,
       {
@@ -6191,8 +7130,17 @@ function AgentChat({
       }
     )
   ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(ChatContainer, { maxHeight, className, theme, layout, children: enableAttachments ? /* @__PURE__ */ jsxRuntime.jsx(
+    FileDropZone,
+    {
+      ref: dropZoneRef,
+      ...attachments.dropZoneProps,
+      disabled: isLoading || !!clarification || isLoadingHistory,
+      children: chatContent
+    }
+  ) : chatContent });
 }
-function cn10(...classes) {
+function cn13(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function TodoList({
@@ -6221,7 +7169,7 @@ function TodoList({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn10(
+      className: cn13(
         "rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden",
         className
       ),
@@ -6229,7 +7177,7 @@ function TodoList({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn10(
+            className: cn13(
               "flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800/50",
               collapsible && "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
             ),
@@ -6260,7 +7208,7 @@ function TodoList({
         !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-gray-100 dark:divide-gray-700", children: todos.map((todo, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           "li",
           {
-            className: cn10(
+            className: cn13(
               "px-3 py-2 flex items-start gap-2 text-sm",
               todo.status === "in_progress" && "bg-blue-50/50 dark:bg-blue-950/20",
               todo.status === "completed" && "opacity-60"
@@ -6270,7 +7218,7 @@ function TodoList({
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
-                  className: cn10(
+                  className: cn13(
                     "text-gray-700 dark:text-gray-300",
                     todo.status === "completed" && "line-through"
                   ),
@@ -6287,39 +7235,6 @@ function TodoList({
   );
 }
 
-// src/chat/index.ts
-var DEPRECATION_WARNING = `
-[@cadraos/sdk/chat] DEPRECATION WARNING
-
-This module is deprecated and will be removed in a future version.
-Please migrate to @cadraos/react for:
-- Simpler setup with CadraCopilot
-- Better security (header-based SSE auth)
-- Scoped CSS that won't conflict with your app
-
-Migration steps:
-1. npm install @cadraos/react
-2. import '@cadraos/react/styles.css'
-3. Replace <AgentChat> with <CadraCopilot> or <CadraChat>
-
-See: https://github.com/cadraos/cadra-sdk/blob/main/packages/react/MIGRATION.md
-`;
-var hasWarned = false;
-function showDeprecationWarning() {
-  if (hasWarned) return;
-  hasWarned = true;
-  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") {
-    return;
-  }
-  if (typeof window === "undefined") {
-    return;
-  }
-  console.warn(DEPRECATION_WARNING);
-}
-if (typeof window !== "undefined") {
-  setTimeout(showDeprecationWarning, 0);
-}
-
 exports.AgentChat = AgentChat;
 exports.AlertCircleIcon = AlertCircleIcon;
 exports.AskUserPrompt = AskUserPrompt;
@@ -6338,6 +7253,8 @@ exports.ClockIcon = ClockIcon;
 exports.CodeIcon = CodeIcon;
 exports.CopyIcon = CopyIcon;
 exports.DatabaseIcon = DatabaseIcon;
+exports.DelegationProgress = DelegationProgress;
+exports.DelegationProgressList = DelegationProgressList;
 exports.DownloadIcon = DownloadIcon;
 exports.ExternalLinkIcon = ExternalLinkIcon;
 exports.FileDropZone = FileDropZone;
@@ -6345,7 +7262,9 @@ exports.FileIcon = FileIcon;
 exports.FileTextIcon = FileTextIcon;
 exports.HelpCircleIcon = HelpCircleIcon;
 exports.INTERNAL_TOOL_NAMES = INTERNAL_TOOL_NAMES;
+exports.ImageGallery = ImageGallery;
 exports.ImageIcon = ImageIcon;
+exports.ImageLightbox = ImageLightbox;
 exports.ImagesIcon = ImagesIcon;
 exports.ListTodoIcon = ListTodoIcon;
 exports.LoadingSpinner = LoadingSpinner;
@@ -6358,6 +7277,8 @@ exports.PaperclipIcon = PaperclipIcon;
 exports.SendIcon = SendIcon;
 exports.SparklesIcon = SparklesIcon;
 exports.StopCircleIcon = StopCircleIcon;
+exports.ThinkingBlock = ThinkingBlock;
+exports.ThinkingBlockList = ThinkingBlockList;
 exports.TodoList = TodoList;
 exports.ToolCallEntry = ToolCallEntry;
 exports.UserIcon = UserIcon;