@cadraos/sdk 0.1.10 → 0.1.12

package/dist/chat/index.cjs

@@ -65,7 +65,7 @@ var BaseResourceAPI = class {
 };
 
 // src/errors/sdk-errors.ts
-var AISaaSError = class extends Error {
+var CadraError = class extends Error {
   /** Error code */
   code;
   /** HTTP status code */
@@ -76,7 +76,7 @@ var AISaaSError = class extends Error {
   requestId;
   constructor(message, code, status, details, requestId) {
     super(message);
-    this.name = "AISaaSError";
+    this.name = "CadraError";
     this.code = code;
     this.status = status;
     this.details = details;
@@ -86,25 +86,25 @@ var AISaaSError = class extends Error {
     }
   }
 };
-var AuthenticationError = class extends AISaaSError {
+var AuthenticationError = class extends CadraError {
   constructor(message = "Authentication failed", code = "authentication_error", details, requestId) {
     super(message, code, 401, details, requestId);
     this.name = "AuthenticationError";
   }
 };
-var AuthorizationError = class extends AISaaSError {
+var AuthorizationError = class extends CadraError {
   constructor(message = "Access denied", code = "authorization_error", details, requestId) {
     super(message, code, 403, details, requestId);
     this.name = "AuthorizationError";
   }
 };
-var NotFoundError = class extends AISaaSError {
+var NotFoundError = class extends CadraError {
   constructor(message = "Resource not found", code = "not_found", details, requestId) {
     super(message, code, 404, details, requestId);
     this.name = "NotFoundError";
   }
 };
-var ValidationError = class extends AISaaSError {
+var ValidationError = class extends CadraError {
   /** Field-level validation errors */
   errors;
   constructor(message = "Validation failed", errors = [], details, requestId) {
@@ -113,7 +113,7 @@ var ValidationError = class extends AISaaSError {
     this.errors = errors;
   }
 };
-var RateLimitError = class extends AISaaSError {
+var RateLimitError = class extends CadraError {
   /** Seconds until rate limit resets */
   retryAfter;
   constructor(message = "Rate limit exceeded", retryAfter, details, requestId) {
@@ -122,25 +122,25 @@ var RateLimitError = class extends AISaaSError {
     this.retryAfter = retryAfter;
   }
 };
-var ServerError = class extends AISaaSError {
+var ServerError = class extends CadraError {
   constructor(message = "Server error", status = 500, details, requestId) {
     super(message, "server_error", status, details, requestId);
     this.name = "ServerError";
   }
 };
-var ConflictError = class extends AISaaSError {
+var ConflictError = class extends CadraError {
   constructor(message = "Resource conflict", details, requestId) {
     super(message, "conflict", 409, details, requestId);
     this.name = "ConflictError";
   }
 };
-var TimeoutError = class extends AISaaSError {
+var TimeoutError = class extends CadraError {
   constructor(message = "Request timed out", details, requestId) {
     super(message, "timeout", 408, details, requestId);
     this.name = "TimeoutError";
   }
 };
-var NetworkError = class extends AISaaSError {
+var NetworkError = class extends CadraError {
   constructor(message = "Network error", details) {
     super(message, "network_error", 0, details);
     this.name = "NetworkError";
@@ -182,7 +182,7 @@ function parseApiError(status, body, requestId) {
       if (status >= 500) {
         return new ServerError(message, status, details, requestId);
       }
-      return new AISaaSError(message, code, status, details, requestId);
+      return new CadraError(message, code, status, details, requestId);
   }
 }
 
@@ -270,15 +270,21 @@ var HttpClient = class {
    * Build full URL with query parameters
    */
   buildUrl(path, query) {
-    const url = new URL(path, this.config.baseUrl);
+    const base = this.config.baseUrl.replace(/\/+$/, "");
+    let url = `${base}${path}`;
     if (query) {
+      const params = new URLSearchParams();
       for (const [key, value] of Object.entries(query)) {
         if (value !== void 0) {
-          url.searchParams.set(key, String(value));
+          params.set(key, String(value));
         }
       }
+      const qs = params.toString();
+      if (qs) {
+        url += `?${qs}`;
+      }
     }
-    return url.toString();
+    return url;
   }
   /**
    * Make an HTTP request
@@ -582,9 +588,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;
@@ -618,6 +626,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)
@@ -678,7 +687,7 @@ var ExecutionStreamControllerImpl = class {
       return Promise.resolve(this.finalExecution);
     }
     if (this.finalError) {
-      return Promise.reject(new AISaaSError(
+      return Promise.reject(new CadraError(
         this.finalError.error,
         this.finalError.errorCode ?? "execution_error",
         500
@@ -697,7 +706,8 @@ var ExecutionStreamControllerImpl = class {
    * Connect to SSE endpoint
    */
   async connectSSE() {
-    const url = `${this.options.baseUrl}/agents/runs/${this.options.executionId}/stream`;
+    const base = this.options.baseUrl.replace(/\/+$/, "");
+    const url = `${base}/api/v1/agents/runs/${this.options.executionId}/stream`;
     let authToken = this.options.apiKey;
     if (!authToken && this.options.tokenProvider) {
       authToken = await this.options.tokenProvider();
@@ -932,7 +942,7 @@ var ExecutionStreamControllerImpl = class {
     this.finalError = error;
     this.emit("error", error);
     if (this.waitReject) {
-      this.waitReject(new AISaaSError(
+      this.waitReject(new CadraError(
         error.error,
         error.errorCode ?? "execution_error",
         500
@@ -957,15 +967,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);
     }
   }
   /**
@@ -1050,7 +1106,7 @@ function createExecutionStreamController(options) {
 // src/resources/agents.ts
 var AgentsAPI = class extends BaseResourceAPI {
   constructor(http, getStreamConfig) {
-    super(http, "/agents");
+    super(http, "/api/v1/agents");
     this.getStreamConfig = getStreamConfig;
   }
   // ===== LIST Operations =====
@@ -1326,7 +1382,7 @@ var AgentsAPI = class extends BaseResourceAPI {
 // src/resources/skills.ts
 var SkillsAPI = class extends BaseResourceAPI {
   constructor(http) {
-    super(http, "/skills");
+    super(http, "/api/v1/skills");
   }
   // ===== LIST Operations =====
   /**
@@ -1470,7 +1526,7 @@ var SkillsAPI = class extends BaseResourceAPI {
 // src/resources/tools.ts
 var ToolsAPI = class extends BaseResourceAPI {
   constructor(http) {
-    super(http, "/tools");
+    super(http, "/api/v1/tools");
   }
   // ===== LIST Operations =====
   /**
@@ -1633,7 +1689,7 @@ var ToolsAPI = class extends BaseResourceAPI {
 // src/resources/artifacts.ts
 var ArtifactsAPI = class extends BaseResourceAPI {
   constructor(http) {
-    super(http, "/artifacts");
+    super(http, "/api/v1/artifacts");
   }
   // ===== LIST Operations =====
   /**
@@ -1829,7 +1885,7 @@ var ArtifactsAPI = class extends BaseResourceAPI {
 // src/resources/sessions.ts
 var SessionsAPI = class extends BaseResourceAPI {
   constructor(http, getStreamConfig) {
-    super(http, "/sessions");
+    super(http, "/api/v1/sessions");
     this.getStreamConfig = getStreamConfig;
   }
   // ===== LIST Operations =====
@@ -2060,9 +2116,9 @@ var SessionsAPI = class extends BaseResourceAPI {
 };
 
 // src/client.ts
-var DEFAULT_BASE_URL = "https://api.aisaas.com/v1";
+var DEFAULT_BASE_URL = "https://api.cadraos.com";
 var DEFAULT_TIMEOUT = 3e4;
-var AISaaSClient = class {
+var CadraClient = class {
   httpClient;
   config;
   /**
@@ -2093,19 +2149,19 @@ var AISaaSClient = class {
    * @example
    * ```typescript
    * // API key authentication
-   * const client = new AISaaSClient({
+   * const client = new CadraClient({
    *   apiKey: 'sk_...',
    *   orgId: 123,
    * });
    *
    * // OAuth token authentication
-   * const client = new AISaaSClient({
+   * const client = new CadraClient({
    *   token: 'eyJ...',
    *   orgId: 123,
    * });
    *
    * // Token provider (for automatic refresh)
-   * const client = new AISaaSClient({
+   * const client = new CadraClient({
    *   tokenProvider: async () => myAuth.getAccessToken(),
    *   orgId: 123,
    * });
@@ -2113,6 +2169,19 @@ var AISaaSClient = class {
    */
   constructor(options) {
     this.validateOptions(options);
+    if (options.baseUrl) {
+      try {
+        const parsed = new URL(options.baseUrl);
+        if (/\/(api|v\d)/.test(parsed.pathname)) {
+          if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+            console.warn(
+              `[CadraOS SDK] baseUrl should be the origin only (e.g., "https://api.cadraos.com" or "http://localhost:3000"). The SDK automatically prepends "/api/v1/" to all requests. Received: "${options.baseUrl}"`
+            );
+          }
+        }
+      } catch {
+      }
+    }
     this.config = {
       baseUrl: options.baseUrl ?? DEFAULT_BASE_URL,
       orgId: options.orgId,
@@ -2185,21 +2254,21 @@ function resolveClient(config) {
     throw new Error("DefaultAdapterConfig requires 'orgId' when 'client' is not provided");
   }
   if (config.apiKey) {
-    return new AISaaSClient({
+    return new CadraClient({
       apiKey: config.apiKey,
       orgId: config.orgId,
       baseUrl: config.baseUrl
     });
   }
   if (config.token) {
-    return new AISaaSClient({
+    return new CadraClient({
       token: config.token,
       orgId: config.orgId,
       baseUrl: config.baseUrl
     });
   }
   if (config.tokenProvider) {
-    return new AISaaSClient({
+    return new CadraClient({
       tokenProvider: config.tokenProvider,
       orgId: config.orgId,
       baseUrl: config.baseUrl
@@ -2211,7 +2280,7 @@ function resolveClient(config) {
 }
 function resolveBaseUrl(config) {
   if (config.baseUrl) return config.baseUrl;
-  return "https://api.cadra.io/v1";
+  return "https://api.cadraos.com";
 }
 async function getAuthHeaders(config) {
   const headers = {
@@ -2320,7 +2389,7 @@ function createDefaultAdapter(config) {
     // Attachment Methods (raw fetch — CadraClient has no AttachmentsAPI yet)
     // -------------------------------------------------------------------------
     async getUploadUrl(input) {
-      return rawRequest(config, "POST", "/attachments/upload-url", {
+      return rawRequest(config, "POST", "/api/v1/attachments/upload-url", {
         sessionId: input.sessionId,
         filename: input.filename,
         mimeType: input.mimeType,
@@ -2328,10 +2397,10 @@ function createDefaultAdapter(config) {
       });
     },
     async confirmUpload(uuid) {
-      await rawRequest(config, "POST", `/attachments/${uuid}/confirm`);
+      await rawRequest(config, "POST", `/api/v1/attachments/${uuid}/confirm`);
     },
     async getDownloadUrl(uuid) {
-      const result = await rawRequest(config, "GET", `/attachments/${uuid}/download-url`);
+      const result = await rawRequest(config, "GET", `/api/v1/attachments/${uuid}/download-url`);
       return result.url;
     },
     // -------------------------------------------------------------------------
@@ -2412,7 +2481,7 @@ function createDefaultAdapter(config) {
           );
         }
       }
-      return `${baseUrl}/agents/runs/${executionId}/stream`;
+      return `${baseUrl}/api/v1/agents/runs/${executionId}/stream`;
     },
     // -------------------------------------------------------------------------
     // Secure SSE Streaming (Recommended)
@@ -2804,12 +2873,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,
@@ -2850,7 +2961,9 @@ function useAgentChat(options) {
     // Deprecated, but still supported
     onToolCall,
     onToolResult,
-    onClarification
+    onClarification,
+    pollingInterval,
+    pollingEnabled
   } = options;
   const contextConfig = useChatConfigOptional();
   const adapter = propsAdapter ?? contextConfig?.adapter;
@@ -2882,8 +2995,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(
@@ -2912,21 +3031,72 @@ function useAgentChat(options) {
       });
     });
   }, []);
-  const finalizeStreamingMessage = react.useCallback(() => {
+  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) => msg.id === streamingMessageIdRef.current ? { ...msg, isStreaming: false } : 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: "completed" } : tc
+        );
+        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": {
@@ -2946,11 +3116,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()}`;
@@ -3005,17 +3210,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 || "";
@@ -3034,9 +3240,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": {
@@ -3046,6 +3285,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()}`;
@@ -3100,6 +3340,7 @@ function useAgentChat(options) {
             firedToolResultsRef.current.add(resultToolCallId);
           }
           onToolResultRef.current?.(resultToolName, result, durationMs);
+          updateMessageImages();
           break;
         }
         case "final_response": {
@@ -3111,10 +3352,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) => {
@@ -3123,17 +3364,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,
@@ -3172,43 +3419,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);
@@ -3219,7 +3462,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();
@@ -3235,7 +3478,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) => {
@@ -3286,6 +3529,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;
@@ -3299,11 +3570,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);
@@ -3317,7 +3585,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) => {
@@ -3347,8 +3615,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,
@@ -3356,7 +3626,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);
@@ -3367,7 +3637,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) {
@@ -3427,6 +3697,7 @@ function useAgentChat(options) {
     setMessages([]);
     setCurrentSessionId(null);
     hasLoadedInitialSession.current = false;
+    lastLoadedSessionRef.current = null;
     internallyCreatedSessionRef.current = null;
   }, []);
   const loadSession = react.useCallback(
@@ -3522,15 +3793,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 () => {
@@ -3546,6 +3822,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,
@@ -3554,6 +3840,7 @@ function useAgentChat(options) {
     error,
     sessionId: currentSessionId,
     clarification,
+    activeDelegation,
     sendMessage,
     respondToClarification,
     cancel,
@@ -4409,18 +4696,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
     }
   );
@@ -5107,7 +5406,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(
@@ -5392,6 +5691,312 @@ 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;
+  react.useEffect(() => {
+    function handleKeyDown(e) {
+      switch (e.key) {
+        case "Escape":
+          onClose();
+          break;
+        case "ArrowLeft":
+          if (hasMultiple) onPrev();
+          break;
+        case "ArrowRight":
+          if (hasMultiple) onNext();
+          break;
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose, onPrev, onNext, hasMultiple]);
+  react.useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+  const handleDownload = react.useCallback(() => {
+    if (!currentImage) return;
+    const link = document.createElement("a");
+    link.href = currentImage.url;
+    link.download = currentImage.filename || `image-${currentIndex + 1}`;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, [currentImage, currentIndex]);
+  if (!currentImage) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `fixed inset-0 z-50 flex items-center justify-center bg-black/80 ${className || ""}`,
+      onClick: onClose,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 right-0 flex items-center justify-between p-4 z-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-black/50 hover:bg-black/70 text-white transition-colors",
+                "aria-label": "Download image",
+                children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onClose();
+                },
+                className: "p-2 rounded-full bg-black/50 hover:bg-black/70 text-white transition-colors",
+                "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-black/50 hover:bg-black/70 text-white transition-colors z-10",
+            "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",
+            onClick: (e) => e.stopPropagation()
+          }
+        ),
+        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-black/50 hover:bg-black/70 text-white transition-colors z-10",
+            "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 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm bg-black/50 inline-block px-3 py-1 rounded-full", children: currentImage.alt }) })
+      ]
+    }
+  );
+}
+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 bg-gray-100 dark:bg-gray-800",
+        className
+      ),
+      children: [
+        !isLoaded && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 animate-pulse bg-gray-200 dark:bg-gray-700" }),
+        hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm", children: "Failed to load" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt,
+            loading: "lazy",
+            className: cn7(
+              "w-full h-auto max-h-[300px] object-contain 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 border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 transition-colors 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,
@@ -5411,11 +6016,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",
@@ -5450,7 +6055,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(
@@ -5497,7 +6102,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],
@@ -5507,7 +6112,89 @@ function MarkdownContent({
     }
   ) });
 }
-function cn7(...classes) {
+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",
+  "mark_task_complete",
+  "handoff_to_agent",
+  "delegate_to_agent",
+  "delegate_task",
+  "get_tool_info",
+  "get_tools",
+  "list_tools",
+  "call_tool",
+  "invoke_tool",
+  "execute_tool",
+  "check_task_status",
+  "assign_task",
+  "update_plan",
+  "check_delegations"
+]);
+function isInternalTool(toolName) {
+  if (!toolName) return false;
+  const lower = toolName.toLowerCase();
+  if (INTERNAL_TOOL_NAMES.has(lower)) return true;
+  for (const internal of INTERNAL_TOOL_NAMES) {
+    if (lower.endsWith(internal) && lower.length > internal.length) {
+      const charBefore = lower[lower.length - internal.length - 1];
+      if (charBefore === "_" || charBefore === ".") return true;
+    }
+  }
+  return false;
+}
+function cn10(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function formatToolName(toolName) {
@@ -5556,7 +6243,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`;
   }
@@ -5577,7 +6264,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") {
@@ -5612,7 +6299,8 @@ function ToolCallEntry({
   toolCall,
   className,
   showFullJson = true,
-  onImageClick
+  onImageClick,
+  compact = false
 }) {
   const [isExpanded, setIsExpanded] = react.useState(false);
   const formattedName = react.useMemo(
@@ -5620,7 +6308,7 @@ function ToolCallEntry({
     [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 hasImages = resultImages.length > 0;
@@ -5652,10 +6340,26 @@ function ToolCallEntry({
         return "border-gray-200 dark:border-gray-700";
     }
   }, [toolCall.status]);
+  if (compact && (toolCall.status === "completed" || toolCall.status === "failed")) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        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: formatDuration2(toolCall.durationMs) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn7(
+      className: cn10(
         "rounded-lg border text-sm",
         statusColor,
         className
@@ -5671,12 +6375,12 @@ 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(
+        hasImages && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn10(
           "grid gap-2",
           resultImages.length === 1 ? "grid-cols-1" : "grid-cols-2"
         ), children: resultImages.map((img, idx) => {
@@ -5735,21 +6439,28 @@ function ToolCallEntry({
     }
   );
 }
-function cn8(...classes) {
+function cn11(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function ChatMessage({
   message,
   enableMarkdown = true,
   showToolCalls = true,
+  toolCallVerbosity: _toolCallVerbosity,
   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" });
@@ -5757,85 +6468,124 @@ 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",
-                {
-                  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 && message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: message.toolCalls.map((toolCall) => /* @__PURE__ */ jsxRuntime.jsx(
-                ToolCallEntry,
-                {
-                  toolCall,
-                  onImageClick
-                },
-                toolCall.id
-              )) }),
-              message.content && /* @__PURE__ */ jsxRuntime.jsx(
-                "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 && message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: message.toolCalls.map((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 defaultRender();
+              }) }),
+              showImages && 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
@@ -5847,7 +6597,7 @@ function ChatMessage({
     }
   );
 }
-function cn9(...classes) {
+function cn12(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function MessageList({
@@ -5859,11 +6609,18 @@ function MessageList({
   isLoadingHistory = false,
   enableMarkdown = true,
   showToolCalls = true,
+  toolCallVerbosity,
   className,
   markdownComponents,
   markdownUrlTransform,
   markdownContentTransform,
   onImageClick,
+  showThinking = true,
+  showDelegation = true,
+  showImages = true,
+  renderMessage,
+  renderToolCall,
+  messageVariant = "bubble",
   sendMessage
 }) {
   const scrollRef = react.useRef(null);
@@ -5877,7 +6634,7 @@ function MessageList({
     "div",
     {
       ref: scrollRef,
-      className: cn9(
+      className: cn12(
         "flex-1 overflow-y-auto",
         className
       ),
@@ -5888,19 +6645,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,
-            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..." })
@@ -5956,13 +6725,28 @@ function AgentChat({
   maxHeight = "600px",
   className,
   theme = "system",
+  layout = "fixed",
   enableAttachments = false,
   enableMarkdown = true,
   showToolCalls = true,
+  toolCallVerbosity,
   markdownComponents,
   markdownUrlTransform,
   markdownContentTransform,
-  onImageClick
+  onImageClick,
+  // Extension props
+  hideHeader,
+  renderAboveInput,
+  renderBelowMessages,
+  renderMessage,
+  renderToolCall,
+  messageVariant = "bubble",
+  showThinking = true,
+  showDelegation = true,
+  showImages = true,
+  pollingInterval,
+  pollingEnabled,
+  onDelegation
 }) {
   const {
     messages,
@@ -5989,8 +6773,12 @@ function AgentChat({
     onSessionStart,
     onToolCall,
     onToolResult,
-    onClarification
+    onClarification,
+    onDelegation,
+    pollingInterval,
+    pollingEnabled
   });
+  const effectiveVerbosity = showToolCalls === false ? "hidden" : toolCallVerbosity ?? "compact";
   const dropZoneRef = react.useRef(null);
   const attachments = useFileAttachments({
     onUpload: enableAttachments && adapter ? async (_file, meta) => {
@@ -6017,50 +6805,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,
-            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,
       {
@@ -6070,6 +6839,7 @@ function AgentChat({
       }
     ) }),
     error && /* @__PURE__ */ jsxRuntime.jsx(ErrorBanner, { error, onRetry: retry, onDismiss: clearError }),
+    renderAboveInput?.(),
     /* @__PURE__ */ jsxRuntime.jsx(
       ChatInput,
       {
@@ -6086,8 +6856,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({
@@ -6116,7 +6895,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
       ),
@@ -6124,7 +6903,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"
             ),
@@ -6155,7 +6934,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"
@@ -6165,7 +6944,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"
                   ),
@@ -6182,39 +6961,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;
@@ -6233,13 +6979,18 @@ 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;
 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;
@@ -6252,6 +7003,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;
@@ -6260,6 +7013,7 @@ exports.ZoomInIcon = ZoomInIcon;
 exports.ZoomOutIcon = ZoomOutIcon;
 exports.compressImage = compressImage;
 exports.createDefaultAdapter = createDefaultAdapter;
+exports.isInternalTool = isInternalTool;
 exports.useAgentChat = useAgentChat;
 exports.useChatConfig = useChatConfig;
 exports.useChatConfigOptional = useChatConfigOptional;