@devicai/ui 0.6.1 → 0.7.1

package/dist/esm/components/ChatDrawer/ChatMessages.js

@@ -2,15 +2,15 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useRef, useEffect, useState } from 'react';
 import Markdown from 'markdown-to-jsx';
 import { MessageActions } from '../Feedback/MessageActions.js';
+import { HandoffSubagentWidget } from './HandoffSubagentWidget.js';
 
-console.log('[devic-ui] ChatMessages: DEV-BUILD-005');
 /**
  * Format timestamp to readable time
  */
 function formatTime(timestamp) {
     return new Date(timestamp).toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit',
+        hour: "2-digit",
+        minute: "2-digit",
     });
 }
 /**
@@ -22,14 +22,18 @@ function groupMessages(messages, isLoading) {
     let currentToolGroup = [];
     const flushToolGroup = (isActive) => {
         if (currentToolGroup.length > 0) {
-            result.push({ type: 'toolGroup', toolMessages: [...currentToolGroup], isActive });
+            result.push({
+                type: "toolGroup",
+                toolMessages: [...currentToolGroup],
+                isActive,
+            });
             currentToolGroup = [];
         }
     };
     for (let i = 0; i < messages.length; i++) {
         const msg = messages[i];
         // Skip developer and tool response messages
-        if (msg.role === 'developer' || msg.role === 'tool') {
+        if (msg.role === "developer" || msg.role === "tool") {
             continue;
         }
         const hasToolCalls = msg.tool_calls && msg.tool_calls.length > 0;
@@ -39,19 +43,24 @@ function groupMessages(messages, isLoading) {
             // If message has both text and tool_calls, show text first
             if (hasText || hasFiles) {
                 // Flush any prior tool group before inserting the text message
-                const remainingMeaningful = messages.slice(i + 1).some((m) => (m.role === 'assistant' && m.content?.message) || m.role === 'user');
+                const remainingMeaningful = messages
+                    .slice(i + 1)
+                    .some((m) => (m.role === "assistant" && m.content?.message) ||
+                    m.role === "user");
                 flushToolGroup(isLoading && !remainingMeaningful);
-                result.push({ type: 'message', message: msg });
+                result.push({ type: "message", message: msg });
             }
             // Always accumulate the tool call
             currentToolGroup.push(msg);
         }
         else {
             // Regular message → flush any accumulated tool group first
-            const remainingMeaningful = messages.slice(i).some((m) => (m.role === 'assistant' && m.content?.message) || m.role === 'user');
+            const remainingMeaningful = messages
+                .slice(i)
+                .some((m) => (m.role === "assistant" && m.content?.message) || m.role === "user");
             flushToolGroup(isLoading && !remainingMeaningful);
             if (hasText || hasFiles) {
-                result.push({ type: 'message', message: msg });
+                result.push({ type: "message", message: msg });
             }
         }
     }
@@ -62,7 +71,7 @@ function groupMessages(messages, isLoading) {
 /**
  * Collapsible tool actions group
  */
-function ToolGroup({ toolMessages, isActive, allMessages, toolRenderers, toolIcons, }) {
+function ToolGroup({ toolMessages, isActive, allMessages, toolRenderers, toolIcons, handedOffSubThreadId, onHandoffCompleted, handoffWidgetRenderer, apiKey, baseUrl, }) {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const shouldCollapse = toolMessages.length > 3 && !isActive;
     // Auto-collapse when transitioning from active to completed
@@ -77,28 +86,35 @@ function ToolGroup({ toolMessages, isActive, allMessages, toolRenderers, toolIco
     const renderToolItem = (msg, opts) => {
         const toolCall = msg.tool_calls?.[0];
         const toolName = toolCall?.function?.name;
-        const summaryText = msg.summary || toolName || (opts.active ? 'Processing...' : 'Completed');
+        const summaryText = msg.summary || toolName || (opts.active ? "Processing..." : "Completed");
+        // Render HandoffSubagentWidget for hand_off_subagent tool calls
+        if (toolName === "hand_off_subagent" && toolCall && allMessages) {
+            const subThreadId = extractSubThreadId(toolCall.id, allMessages, handedOffSubThreadId);
+            if (subThreadId) {
+                return (jsx(HandoffSubagentWidget, { subThreadId: subThreadId, onCompleted: onHandoffCompleted, renderWidget: handoffWidgetRenderer, apiKey: apiKey, baseUrl: baseUrl }));
+            }
+        }
         // Custom renderer for completed tools
         if (!opts.active && toolName && toolRenderers?.[toolName] && allMessages) {
-            const toolResponse = allMessages.find((m) => m.role === 'tool' && m.tool_call_id === toolCall.id);
+            const toolResponse = allMessages.find((m) => m.role === "tool" && m.tool_call_id === toolCall.id);
             let input = {};
             try {
                 input = JSON.parse(toolCall.function.arguments);
             }
             catch { }
-            const output = toolResponse?.content?.data ?? toolResponse?.content?.message;
+            const output = toolResponse?.content?.data ||
+                toolResponse?.content?.message ||
+                toolResponse?.content;
             return toolRenderers[toolName](input, output);
         }
-        const icon = opts.showSpinner
-            ? jsx(SpinnerIcon, {})
-            : (toolName && toolIcons?.[toolName]) || jsx(ToolDoneIcon, {});
-        return (jsxs(Fragment, { children: [jsx("span", { className: "devic-tool-activity-icon", children: icon }), jsx("span", { className: `devic-tool-activity-text ${opts.active ? 'devic-glow-text' : ''}`, children: summaryText })] }));
+        const icon = opts.showSpinner ? (jsx(SpinnerIcon, {})) : ((toolName && toolIcons?.[toolName]) || jsx(ToolDoneIcon, {}));
+        return (jsxs(Fragment, { children: [jsx("span", { className: "devic-tool-activity-icon", children: icon }), jsx("span", { className: `devic-tool-activity-text ${opts.active ? "devic-glow-text" : ""}`, children: summaryText })] }));
     };
     // If active, show all items; last one gets the glow treatment
     if (isActive) {
         return (jsx("div", { className: "devic-tool-group", children: toolMessages.map((msg, idx) => {
                 const isLast = idx === lastIndex;
-                return (jsx("div", { className: `devic-tool-activity ${isLast ? 'devic-tool-activity--active' : ''}`, children: renderToolItem(msg, { active: isLast, showSpinner: isLast }) }, msg.uid));
+                return (jsx("div", { className: `devic-tool-activity ${isLast ? "devic-tool-activity--active" : ""}`, children: renderToolItem(msg, { active: isLast, showSpinner: isLast }) }, msg.uid));
             }) }));
     }
     // Completed: collapse if > 3 actions
@@ -112,10 +128,29 @@ function ToolGroup({ toolMessages, isActive, allMessages, toolRenderers, toolIco
  */
 const markdownOverrides = {
     table: {
-        component: ({ children, ...props }) => React.createElement('div', { className: 'markdown-table' }, React.createElement('table', props, children)),
+        component: ({ children, ...props }) => React.createElement("div", { className: "markdown-table" }, React.createElement("table", props, children)),
     },
 };
-function ChatMessages({ messages, allMessages, isLoading, welcomeMessage, suggestedMessages, onSuggestedClick, toolRenderers, toolIcons, loadingIndicator, showFeedback = true, feedbackMap, onFeedback, }) {
+/**
+ * Extract subthread ID from a hand_off_subagent tool call.
+ * Checks the tool response in allMessages first, then falls back to handedOffSubThreadId.
+ */
+function extractSubThreadId(toolCallId, allMessages, handedOffSubThreadId) {
+    // Look for the tool response message
+    const toolResponse = allMessages.find((m) => m.role === "tool" && m.tool_call_id === toolCallId);
+    if (toolResponse) {
+        const content = toolResponse.content?.data || toolResponse.content;
+        if (content && typeof content === "object" && "subthreadId" in content) {
+            return content.subthreadId;
+        }
+        if (content && typeof content === "object" && "subThreadId" in content) {
+            return content.subThreadId;
+        }
+    }
+    // Fall back to active handoff subthread ID
+    return handedOffSubThreadId || null;
+}
+function ChatMessages({ messages, allMessages, isLoading, welcomeMessage, suggestedMessages, onSuggestedClick, toolRenderers, toolIcons, loadingIndicator, showFeedback = true, feedbackMap, onFeedback, handedOffSubThreadId, onHandoffCompleted, handoffWidgetRenderer, apiKey, baseUrl, }) {
     const containerRef = useRef(null);
     const prevLengthRef = useRef(messages.length);
     // Auto-scroll to bottom when new messages arrive
@@ -128,18 +163,21 @@ function ChatMessages({ messages, allMessages, isLoading, welcomeMessage, sugges
     const grouped = groupMessages(messages, isLoading);
     // Show loading dots only if there's no active tool group at the end
     const lastGroup = grouped[grouped.length - 1];
-    const showLoadingDots = isLoading && !(lastGroup?.type === 'toolGroup' && lastGroup.isActive);
-    return (jsxs("div", { className: "devic-messages-container", ref: containerRef, children: [messages.length === 0 && !isLoading && (welcomeMessage || suggestedMessages?.length) && (jsxs("div", { className: "devic-welcome", children: [welcomeMessage && (jsx("p", { className: "devic-welcome-text", children: welcomeMessage })), suggestedMessages && suggestedMessages.length > 0 && (jsx("div", { className: "devic-suggested-messages", children: suggestedMessages.map((msg, idx) => (jsx("button", { className: "devic-suggested-btn", onClick: () => onSuggestedClick?.(msg), children: msg }, idx))) }))] })), grouped.map((item) => {
-                if (item.type === 'toolGroup') {
-                    return (jsx(ToolGroup, { toolMessages: item.toolMessages, isActive: item.isActive, allMessages: allMessages, toolRenderers: toolRenderers, toolIcons: toolIcons }, `tg-${item.toolMessages[0].uid}`));
+    const showLoadingDots = isLoading && !(lastGroup?.type === "toolGroup" && lastGroup.isActive);
+    return (jsxs("div", { className: "devic-messages-container", ref: containerRef, children: [messages.length === 0 &&
+                !isLoading &&
+                (welcomeMessage || suggestedMessages?.length) && (jsxs("div", { className: "devic-welcome", children: [welcomeMessage && (jsx("p", { className: "devic-welcome-text", children: welcomeMessage })), suggestedMessages && suggestedMessages.length > 0 && (jsx("div", { className: "devic-suggested-messages", children: suggestedMessages.map((msg, idx) => (jsx("button", { className: "devic-suggested-btn", onClick: () => onSuggestedClick?.(msg), children: msg }, idx))) }))] })), grouped.map((item) => {
+                if (item.type === "toolGroup") {
+                    return (jsx(ToolGroup, { toolMessages: item.toolMessages, isActive: item.isActive, allMessages: allMessages, toolRenderers: toolRenderers, toolIcons: toolIcons, handedOffSubThreadId: handedOffSubThreadId, onHandoffCompleted: onHandoffCompleted, handoffWidgetRenderer: handoffWidgetRenderer, apiKey: apiKey, baseUrl: baseUrl }, `tg-${item.toolMessages[0].uid}`));
                 }
                 const message = item.message;
                 const messageText = message.content?.message;
                 const hasFiles = message.content?.files && message.content.files.length > 0;
-                const isAssistant = message.role === 'assistant';
-                const currentFeedback = feedbackMap?.get(message.uid) || 'none';
+                const isAssistant = message.role === "assistant";
+                const currentFeedback = feedbackMap?.get(message.uid) || "none";
                 return (jsxs("div", { className: "devic-message", "data-role": message.role, children: [jsxs("div", { className: "devic-message-bubble", children: [messageText && isAssistant ? (jsx(Markdown, { options: { overrides: markdownOverrides }, children: messageText })) : (messageText), hasFiles && (jsx("div", { className: "devic-message-files", children: message.content.files.map((file, fileIdx) => (jsxs("div", { className: "devic-message-file", children: [jsx(FileIcon, {}), jsx("span", { children: file.name })] }, fileIdx))) }))] }), jsxs("div", { className: "devic-message-footer", children: [jsx("span", { className: "devic-message-time", children: formatTime(message.timestamp) }), isAssistant && showFeedback && onFeedback && (jsx(MessageActions, { messageId: message.uid, messageContent: messageText, currentFeedback: currentFeedback, onFeedback: onFeedback, showCopy: true, showFeedback: true }))] })] }, message.uid));
-            }), showLoadingDots && (loadingIndicator ? (jsx("div", { className: "devic-loading", children: loadingIndicator })) : (jsxs("div", { className: "devic-loading", children: [jsx("span", { className: "devic-loading-dot" }), jsx("span", { className: "devic-loading-dot" }), jsx("span", { className: "devic-loading-dot" })] })))] }));
+            }), showLoadingDots &&
+                (loadingIndicator ? (jsx("div", { className: "devic-loading", children: loadingIndicator })) : (jsxs("div", { className: "devic-loading", children: [jsx("span", { className: "devic-loading-dot" }), jsx("span", { className: "devic-loading-dot" }), jsx("span", { className: "devic-loading-dot" })] })))] }));
 }
 /* ── Icons ── */
 function SpinnerIcon() {

package/dist/esm/components/ChatDrawer/ChatMessages.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessages.js","sources":["../../../../src/components/ChatDrawer/ChatMessages.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport Markdown from 'markdown-to-jsx';\nimport { MessageActions } from '../Feedback';\nimport type { ChatMessagesProps } from './ChatDrawer.types';\nimport type { ChatMessage } from '../../api/types';\nimport type { FeedbackState } from '../Feedback';\nimport '../Feedback/Feedback.css';\n\nconsole.log('[devic-ui] ChatMessages: DEV-BUILD-005');\n\n/**\n * Format timestamp to readable time\n */\nfunction formatTime(timestamp: number): string {\n  return new Date(timestamp).toLocaleTimeString([], {\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n}\n\n/**\n * Groups consecutive tool-call assistant messages (no text content)\n * into { toolMessages, isActive } groups, interleaved with regular messages.\n */\nfunction groupMessages(\n  messages: ChatMessage[],\n  isLoading: boolean\n): Array<\n  | { type: 'message'; message: ChatMessage }\n  | { type: 'toolGroup'; toolMessages: ChatMessage[]; isActive: boolean }\n> {\n  const result: Array<\n    | { type: 'message'; message: ChatMessage }\n    | { type: 'toolGroup'; toolMessages: ChatMessage[]; isActive: boolean }\n  > = [];\n\n  let currentToolGroup: ChatMessage[] = [];\n\n  const flushToolGroup = (isActive: boolean) => {\n    if (currentToolGroup.length > 0) {\n      result.push({ type: 'toolGroup', toolMessages: [...currentToolGroup], isActive });\n      currentToolGroup = [];\n    }\n  };\n\n  for (let i = 0; i < messages.length; i++) {\n    const msg = messages[i];\n\n    // Skip developer and tool response messages\n    if (msg.role === 'developer' || msg.role === 'tool') {\n      continue;\n    }\n\n    const hasToolCalls = msg.tool_calls && msg.tool_calls.length > 0;\n    const hasText = !!msg.content?.message;\n    const hasFiles = msg.content?.files && msg.content.files.length > 0;\n\n    if (hasToolCalls) {\n      // If message has both text and tool_calls, show text first\n      if (hasText || hasFiles) {\n        // Flush any prior tool group before inserting the text message\n        const remainingMeaningful = messages.slice(i + 1).some(\n          (m) => (m.role === 'assistant' && m.content?.message) || m.role === 'user'\n        );\n        flushToolGroup(isLoading && !remainingMeaningful);\n        result.push({ type: 'message', message: msg });\n      }\n      // Always accumulate the tool call\n      currentToolGroup.push(msg);\n    } else {\n      // Regular message → flush any accumulated tool group first\n      const remainingMeaningful = messages.slice(i).some(\n        (m) => (m.role === 'assistant' && m.content?.message) || m.role === 'user'\n      );\n      flushToolGroup(isLoading && !remainingMeaningful);\n\n      if (hasText || hasFiles) {\n        result.push({ type: 'message', message: msg });\n      }\n    }\n  }\n\n  // Flush remaining tool group (is active if still loading)\n  flushToolGroup(isLoading);\n\n  return result;\n}\n\n/**\n * Collapsible tool actions group\n */\nfunction ToolGroup({\n  toolMessages,\n  isActive,\n  allMessages,\n  toolRenderers,\n  toolIcons,\n}: {\n  toolMessages: ChatMessage[];\n  isActive: boolean;\n  allMessages?: ChatMessage[];\n  toolRenderers?: Record<string, (input: any, output: any) => React.ReactNode>;\n  toolIcons?: Record<string, React.ReactNode>;\n}): JSX.Element {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const shouldCollapse = toolMessages.length > 3 && !isActive;\n\n  // Auto-collapse when transitioning from active to completed\n  const wasActiveRef = useRef(isActive);\n  useEffect(() => {\n    if (wasActiveRef.current && !isActive && toolMessages.length > 3) {\n      setIsCollapsed(true);\n    }\n    wasActiveRef.current = isActive;\n  }, [isActive, toolMessages.length]);\n\n  const lastIndex = toolMessages.length - 1;\n\n  const renderToolItem = (msg: ChatMessage, opts: { active?: boolean; showSpinner?: boolean }) => {\n    const toolCall = msg.tool_calls?.[0];\n    const toolName = toolCall?.function?.name;\n    const summaryText = msg.summary || toolName || (opts.active ? 'Processing...' : 'Completed');\n\n    // Custom renderer for completed tools\n    if (!opts.active && toolName && toolRenderers?.[toolName] && allMessages) {\n      const toolResponse = allMessages.find(\n        (m) => m.role === 'tool' && m.tool_call_id === toolCall!.id\n      );\n      let input: any = {};\n      try { input = JSON.parse(toolCall!.function.arguments); } catch {}\n      const output = toolResponse?.content?.data ?? toolResponse?.content?.message;\n      return toolRenderers[toolName](input, output);\n    }\n\n    const icon = opts.showSpinner\n      ? <SpinnerIcon />\n      : (toolName && toolIcons?.[toolName]) || <ToolDoneIcon />;\n\n    return (\n      <>\n        <span className=\"devic-tool-activity-icon\">{icon}</span>\n        <span className={`devic-tool-activity-text ${opts.active ? 'devic-glow-text' : ''}`}>\n          {summaryText}\n        </span>\n      </>\n    );\n  };\n\n  // If active, show all items; last one gets the glow treatment\n  if (isActive) {\n    return (\n      <div className=\"devic-tool-group\">\n        {toolMessages.map((msg, idx) => {\n          const isLast = idx === lastIndex;\n          return (\n            <div\n              key={msg.uid}\n              className={`devic-tool-activity ${isLast ? 'devic-tool-activity--active' : ''}`}\n            >\n              {renderToolItem(msg, { active: isLast, showSpinner: isLast })}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  // Completed: collapse if > 3 actions\n  if (shouldCollapse && isCollapsed) {\n    return (\n      <div className=\"devic-tool-group\">\n        <button\n          className=\"devic-tool-collapse-btn\"\n          onClick={() => setIsCollapsed(false)}\n          type=\"button\"\n        >\n          <ToolDoneIcon />\n          <span>{toolMessages.length} actions</span>\n          <ChevronDownIcon />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"devic-tool-group\">\n      {shouldCollapse && (\n        <button\n          className=\"devic-tool-collapse-btn\"\n          onClick={() => setIsCollapsed(true)}\n          type=\"button\"\n        >\n          <span>{toolMessages.length} actions</span>\n          <ChevronUpIcon />\n        </button>\n      )}\n      <div className=\"devic-tool-group-items\" data-expanded=\"true\">\n        {toolMessages.map((msg) => (\n          <div key={msg.uid} className=\"devic-tool-activity\">\n            {renderToolItem(msg, {})}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Messages list component\n */\nconst markdownOverrides = {\n  table: {\n    component: ({ children, ...props }: any) =>\n      React.createElement('div', { className: 'markdown-table' },\n        React.createElement('table', props, children)\n      ),\n  },\n};\n\nexport function ChatMessages({\n  messages,\n  allMessages,\n  isLoading,\n  welcomeMessage,\n  suggestedMessages,\n  onSuggestedClick,\n  toolRenderers,\n  toolIcons,\n  loadingIndicator,\n  showFeedback = true,\n  feedbackMap,\n  onFeedback,\n}: ChatMessagesProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const prevLengthRef = useRef(messages.length);\n\n  // Auto-scroll to bottom when new messages arrive\n  useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.scrollTop = containerRef.current.scrollHeight;\n    }\n    prevLengthRef.current = messages.length;\n  }, [messages.length, isLoading]);\n\n  const grouped = groupMessages(messages, isLoading);\n\n  // Show loading dots only if there's no active tool group at the end\n  const lastGroup = grouped[grouped.length - 1];\n  const showLoadingDots = isLoading && !(lastGroup?.type === 'toolGroup' && lastGroup.isActive);\n\n  return (\n    <div className=\"devic-messages-container\" ref={containerRef}>\n      {messages.length === 0 && !isLoading && (welcomeMessage || suggestedMessages?.length) && (\n        <div className=\"devic-welcome\">\n          {welcomeMessage && (\n            <p className=\"devic-welcome-text\">{welcomeMessage}</p>\n          )}\n          {suggestedMessages && suggestedMessages.length > 0 && (\n            <div className=\"devic-suggested-messages\">\n              {suggestedMessages.map((msg, idx) => (\n                <button\n                  key={idx}\n                  className=\"devic-suggested-btn\"\n                  onClick={() => onSuggestedClick?.(msg)}\n                >\n                  {msg}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {grouped.map((item) => {\n        if (item.type === 'toolGroup') {\n          return (\n            <ToolGroup\n              key={`tg-${item.toolMessages[0].uid}`}\n              toolMessages={item.toolMessages}\n              isActive={item.isActive}\n              allMessages={allMessages}\n              toolRenderers={toolRenderers}\n              toolIcons={toolIcons}\n            />\n          );\n        }\n\n        const message = item.message;\n        const messageText = message.content?.message;\n        const hasFiles = message.content?.files && message.content.files.length > 0;\n        const isAssistant = message.role === 'assistant';\n        const currentFeedback = feedbackMap?.get(message.uid) || 'none';\n\n        return (\n          <div\n            key={message.uid}\n            className=\"devic-message\"\n            data-role={message.role}\n          >\n            <div className=\"devic-message-bubble\">\n              {messageText && isAssistant ? (\n                <Markdown options={{ overrides: markdownOverrides }}>{messageText}</Markdown>\n              ) : (\n                messageText\n              )}\n              {hasFiles && (\n                <div className=\"devic-message-files\">\n                  {message.content!.files!.map((file, fileIdx) => (\n                    <div key={fileIdx} className=\"devic-message-file\">\n                      <FileIcon />\n                      <span>{file.name}</span>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n            <div className=\"devic-message-footer\">\n              <span className=\"devic-message-time\">\n                {formatTime(message.timestamp)}\n              </span>\n              {isAssistant && showFeedback && onFeedback && (\n                <MessageActions\n                  messageId={message.uid}\n                  messageContent={messageText}\n                  currentFeedback={currentFeedback as FeedbackState}\n                  onFeedback={onFeedback}\n                  showCopy={true}\n                  showFeedback={true}\n                />\n              )}\n            </div>\n          </div>\n        );\n      })}\n\n      {showLoadingDots && (\n        loadingIndicator ? (\n          <div className=\"devic-loading\">{loadingIndicator}</div>\n        ) : (\n          <div className=\"devic-loading\">\n            <span className=\"devic-loading-dot\"></span>\n            <span className=\"devic-loading-dot\"></span>\n            <span className=\"devic-loading-dot\"></span>\n          </div>\n        )\n      )}\n    </div>\n  );\n}\n\n/* ── Icons ── */\n\nfunction SpinnerIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      className=\"devic-spinner\"\n    >\n      <path d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\" />\n    </svg>\n  );\n}\n\nfunction ToolDoneIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"20,6 9,17 4,12\" />\n    </svg>\n  );\n}\n\nfunction ChevronDownIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <polyline points=\"6,9 12,15 18,9\" />\n    </svg>\n  );\n}\n\nfunction ChevronUpIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <polyline points=\"6,15 12,9 18,15\" />\n    </svg>\n  );\n}\n\nfunction FileIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n      <polyline points=\"14,2 14,8 20,8\" />\n    </svg>\n  );\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"ChatMessages.js","sources":["../../../../src/components/ChatDrawer/ChatMessages.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport Markdown from \"markdown-to-jsx\";\nimport { MessageActions } from \"../Feedback\";\nimport { HandoffSubagentWidget } from \"./HandoffSubagentWidget\";\nimport type { ChatMessagesProps } from \"./ChatDrawer.types\";\nimport type { ChatMessage } from \"../../api/types\";\nimport type { FeedbackState } from \"../Feedback\";\nimport \"../Feedback/Feedback.css\";\n\n/**\n * Format timestamp to readable time\n */\nfunction formatTime(timestamp: number): string {\n  return new Date(timestamp).toLocaleTimeString([], {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  });\n}\n\n/**\n * Groups consecutive tool-call assistant messages (no text content)\n * into { toolMessages, isActive } groups, interleaved with regular messages.\n */\nfunction groupMessages(\n  messages: ChatMessage[],\n  isLoading: boolean,\n): Array<\n  | { type: \"message\"; message: ChatMessage }\n  | { type: \"toolGroup\"; toolMessages: ChatMessage[]; isActive: boolean }\n> {\n  const result: Array<\n    | { type: \"message\"; message: ChatMessage }\n    | { type: \"toolGroup\"; toolMessages: ChatMessage[]; isActive: boolean }\n  > = [];\n\n  let currentToolGroup: ChatMessage[] = [];\n\n  const flushToolGroup = (isActive: boolean) => {\n    if (currentToolGroup.length > 0) {\n      result.push({\n        type: \"toolGroup\",\n        toolMessages: [...currentToolGroup],\n        isActive,\n      });\n      currentToolGroup = [];\n    }\n  };\n\n  for (let i = 0; i < messages.length; i++) {\n    const msg = messages[i];\n\n    // Skip developer and tool response messages\n    if (msg.role === \"developer\" || msg.role === \"tool\") {\n      continue;\n    }\n\n    const hasToolCalls = msg.tool_calls && msg.tool_calls.length > 0;\n    const hasText = !!msg.content?.message;\n    const hasFiles = msg.content?.files && msg.content.files.length > 0;\n\n    if (hasToolCalls) {\n      // If message has both text and tool_calls, show text first\n      if (hasText || hasFiles) {\n        // Flush any prior tool group before inserting the text message\n        const remainingMeaningful = messages\n          .slice(i + 1)\n          .some(\n            (m) =>\n              (m.role === \"assistant\" && m.content?.message) ||\n              m.role === \"user\",\n          );\n        flushToolGroup(isLoading && !remainingMeaningful);\n        result.push({ type: \"message\", message: msg });\n      }\n      // Always accumulate the tool call\n      currentToolGroup.push(msg);\n    } else {\n      // Regular message → flush any accumulated tool group first\n      const remainingMeaningful = messages\n        .slice(i)\n        .some(\n          (m) =>\n            (m.role === \"assistant\" && m.content?.message) || m.role === \"user\",\n        );\n      flushToolGroup(isLoading && !remainingMeaningful);\n\n      if (hasText || hasFiles) {\n        result.push({ type: \"message\", message: msg });\n      }\n    }\n  }\n\n  // Flush remaining tool group (is active if still loading)\n  flushToolGroup(isLoading);\n\n  return result;\n}\n\n/**\n * Collapsible tool actions group\n */\nfunction ToolGroup({\n  toolMessages,\n  isActive,\n  allMessages,\n  toolRenderers,\n  toolIcons,\n  handedOffSubThreadId,\n  onHandoffCompleted,\n  handoffWidgetRenderer,\n  apiKey,\n  baseUrl,\n}: {\n  toolMessages: ChatMessage[];\n  isActive: boolean;\n  allMessages?: ChatMessage[];\n  toolRenderers?: Record<string, (input: any, output: any) => React.ReactNode>;\n  toolIcons?: Record<string, React.ReactNode>;\n  handedOffSubThreadId?: string;\n  onHandoffCompleted?: () => void;\n  handoffWidgetRenderer?: ChatMessagesProps[\"handoffWidgetRenderer\"];\n  apiKey?: string;\n  baseUrl?: string;\n}): JSX.Element {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const shouldCollapse = toolMessages.length > 3 && !isActive;\n\n  // Auto-collapse when transitioning from active to completed\n  const wasActiveRef = useRef(isActive);\n  useEffect(() => {\n    if (wasActiveRef.current && !isActive && toolMessages.length > 3) {\n      setIsCollapsed(true);\n    }\n    wasActiveRef.current = isActive;\n  }, [isActive, toolMessages.length]);\n\n  const lastIndex = toolMessages.length - 1;\n\n  const renderToolItem = (\n    msg: ChatMessage,\n    opts: { active?: boolean; showSpinner?: boolean },\n  ) => {\n    const toolCall = msg.tool_calls?.[0];\n    const toolName = toolCall?.function?.name;\n    const summaryText =\n      msg.summary || toolName || (opts.active ? \"Processing...\" : \"Completed\");\n\n    // Render HandoffSubagentWidget for hand_off_subagent tool calls\n    if (toolName === \"hand_off_subagent\" && toolCall && allMessages) {\n      const subThreadId = extractSubThreadId(\n        toolCall.id,\n        allMessages,\n        handedOffSubThreadId,\n      );\n      if (subThreadId) {\n        return (\n          <HandoffSubagentWidget\n            subThreadId={subThreadId}\n            onCompleted={onHandoffCompleted}\n            renderWidget={handoffWidgetRenderer}\n            apiKey={apiKey}\n            baseUrl={baseUrl}\n          />\n        );\n      }\n    }\n\n    // Custom renderer for completed tools\n    if (!opts.active && toolName && toolRenderers?.[toolName] && allMessages) {\n      const toolResponse = allMessages.find(\n        (m) => m.role === \"tool\" && m.tool_call_id === toolCall!.id,\n      );\n      let input: any = {};\n      try {\n        input = JSON.parse(toolCall!.function.arguments);\n      } catch {}\n      const output =\n        toolResponse?.content?.data ||\n        toolResponse?.content?.message ||\n        toolResponse?.content;\n      return toolRenderers[toolName](input, output);\n    }\n\n    const icon = opts.showSpinner ? (\n      <SpinnerIcon />\n    ) : (\n      (toolName && toolIcons?.[toolName]) || <ToolDoneIcon />\n    );\n\n    return (\n      <>\n        <span className=\"devic-tool-activity-icon\">{icon}</span>\n        <span\n          className={`devic-tool-activity-text ${opts.active ? \"devic-glow-text\" : \"\"}`}\n        >\n          {summaryText}\n        </span>\n      </>\n    );\n  };\n\n  // If active, show all items; last one gets the glow treatment\n  if (isActive) {\n    return (\n      <div className=\"devic-tool-group\">\n        {toolMessages.map((msg, idx) => {\n          const isLast = idx === lastIndex;\n          return (\n            <div\n              key={msg.uid}\n              className={`devic-tool-activity ${isLast ? \"devic-tool-activity--active\" : \"\"}`}\n            >\n              {renderToolItem(msg, { active: isLast, showSpinner: isLast })}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  // Completed: collapse if > 3 actions\n  if (shouldCollapse && isCollapsed) {\n    return (\n      <div className=\"devic-tool-group\">\n        <button\n          className=\"devic-tool-collapse-btn\"\n          onClick={() => setIsCollapsed(false)}\n          type=\"button\"\n        >\n          <ToolDoneIcon />\n          <span>{toolMessages.length} actions</span>\n          <ChevronDownIcon />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"devic-tool-group\">\n      {shouldCollapse && (\n        <button\n          className=\"devic-tool-collapse-btn\"\n          onClick={() => setIsCollapsed(true)}\n          type=\"button\"\n        >\n          <span>{toolMessages.length} actions</span>\n          <ChevronUpIcon />\n        </button>\n      )}\n      <div className=\"devic-tool-group-items\" data-expanded=\"true\">\n        {toolMessages.map((msg) => (\n          <div key={msg.uid} className=\"devic-tool-activity\">\n            {renderToolItem(msg, {})}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Messages list component\n */\nconst markdownOverrides = {\n  table: {\n    component: ({ children, ...props }: any) =>\n      React.createElement(\n        \"div\",\n        { className: \"markdown-table\" },\n        React.createElement(\"table\", props, children),\n      ),\n  },\n};\n\n/**\n * Extract subthread ID from a hand_off_subagent tool call.\n * Checks the tool response in allMessages first, then falls back to handedOffSubThreadId.\n */\nfunction extractSubThreadId(\n  toolCallId: string,\n  allMessages: ChatMessage[],\n  handedOffSubThreadId?: string,\n): string | null {\n  // Look for the tool response message\n  const toolResponse = allMessages.find(\n    (m) => m.role === \"tool\" && m.tool_call_id === toolCallId,\n  );\n  if (toolResponse) {\n    const content = toolResponse.content?.data || toolResponse.content;\n    if (content && typeof content === \"object\" && \"subthreadId\" in content) {\n      return (content as any).subthreadId;\n    }\n    if (content && typeof content === \"object\" && \"subThreadId\" in content) {\n      return (content as any).subThreadId;\n    }\n  }\n  // Fall back to active handoff subthread ID\n  return handedOffSubThreadId || null;\n}\n\nexport function ChatMessages({\n  messages,\n  allMessages,\n  isLoading,\n  welcomeMessage,\n  suggestedMessages,\n  onSuggestedClick,\n  toolRenderers,\n  toolIcons,\n  loadingIndicator,\n  showFeedback = true,\n  feedbackMap,\n  onFeedback,\n  handedOffSubThreadId,\n  onHandoffCompleted,\n  handoffWidgetRenderer,\n  apiKey,\n  baseUrl,\n}: ChatMessagesProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const prevLengthRef = useRef(messages.length);\n\n  // Auto-scroll to bottom when new messages arrive\n  useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.scrollTop = containerRef.current.scrollHeight;\n    }\n    prevLengthRef.current = messages.length;\n  }, [messages.length, isLoading]);\n\n  const grouped = groupMessages(messages, isLoading);\n\n  // Show loading dots only if there's no active tool group at the end\n  const lastGroup = grouped[grouped.length - 1];\n  const showLoadingDots =\n    isLoading && !(lastGroup?.type === \"toolGroup\" && lastGroup.isActive);\n\n  return (\n    <div className=\"devic-messages-container\" ref={containerRef}>\n      {messages.length === 0 &&\n        !isLoading &&\n        (welcomeMessage || suggestedMessages?.length) && (\n          <div className=\"devic-welcome\">\n            {welcomeMessage && (\n              <p className=\"devic-welcome-text\">{welcomeMessage}</p>\n            )}\n            {suggestedMessages && suggestedMessages.length > 0 && (\n              <div className=\"devic-suggested-messages\">\n                {suggestedMessages.map((msg, idx) => (\n                  <button\n                    key={idx}\n                    className=\"devic-suggested-btn\"\n                    onClick={() => onSuggestedClick?.(msg)}\n                  >\n                    {msg}\n                  </button>\n                ))}\n              </div>\n            )}\n          </div>\n        )}\n\n      {grouped.map((item) => {\n        if (item.type === \"toolGroup\") {\n          return (\n            <ToolGroup\n              key={`tg-${item.toolMessages[0].uid}`}\n              toolMessages={item.toolMessages}\n              isActive={item.isActive}\n              allMessages={allMessages}\n              toolRenderers={toolRenderers}\n              toolIcons={toolIcons}\n              handedOffSubThreadId={handedOffSubThreadId}\n              onHandoffCompleted={onHandoffCompleted}\n              handoffWidgetRenderer={handoffWidgetRenderer}\n              apiKey={apiKey}\n              baseUrl={baseUrl}\n            />\n          );\n        }\n\n        const message = item.message;\n        const messageText = message.content?.message;\n        const hasFiles =\n          message.content?.files && message.content.files.length > 0;\n        const isAssistant = message.role === \"assistant\";\n        const currentFeedback = feedbackMap?.get(message.uid) || \"none\";\n\n        return (\n          <div\n            key={message.uid}\n            className=\"devic-message\"\n            data-role={message.role}\n          >\n            <div className=\"devic-message-bubble\">\n              {messageText && isAssistant ? (\n                <Markdown options={{ overrides: markdownOverrides }}>\n                  {messageText}\n                </Markdown>\n              ) : (\n                messageText\n              )}\n              {hasFiles && (\n                <div className=\"devic-message-files\">\n                  {message.content!.files!.map((file, fileIdx) => (\n                    <div key={fileIdx} className=\"devic-message-file\">\n                      <FileIcon />\n                      <span>{file.name}</span>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n            <div className=\"devic-message-footer\">\n              <span className=\"devic-message-time\">\n                {formatTime(message.timestamp)}\n              </span>\n              {isAssistant && showFeedback && onFeedback && (\n                <MessageActions\n                  messageId={message.uid}\n                  messageContent={messageText}\n                  currentFeedback={currentFeedback as FeedbackState}\n                  onFeedback={onFeedback}\n                  showCopy={true}\n                  showFeedback={true}\n                />\n              )}\n            </div>\n          </div>\n        );\n      })}\n\n      {showLoadingDots &&\n        (loadingIndicator ? (\n          <div className=\"devic-loading\">{loadingIndicator}</div>\n        ) : (\n          <div className=\"devic-loading\">\n            <span className=\"devic-loading-dot\"></span>\n            <span className=\"devic-loading-dot\"></span>\n            <span className=\"devic-loading-dot\"></span>\n          </div>\n        ))}\n    </div>\n  );\n}\n\n/* ── Icons ── */\n\nfunction SpinnerIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      className=\"devic-spinner\"\n    >\n      <path d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\" />\n    </svg>\n  );\n}\n\nfunction ToolDoneIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"20,6 9,17 4,12\" />\n    </svg>\n  );\n}\n\nfunction ChevronDownIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"6,9 12,15 18,9\" />\n    </svg>\n  );\n}\n\nfunction ChevronUpIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"6,15 12,9 18,15\" />\n    </svg>\n  );\n}\n\nfunction FileIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n      <polyline points=\"14,2 14,8 20,8\" />\n    </svg>\n  );\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/components/ChatDrawer/HandoffSubagentWidget.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { AgentThreadDto, AgentDto } from '../../api/types';
+export interface HandoffSubagentWidgetProps {
+    /**
+     * The subthread ID to monitor
+     */
+    subThreadId: string;
+    /**
+     * Called when the subthread reaches a terminal state
+     */
+    onCompleted?: () => void;
+    /**
+     * API key (overrides provider context)
+     */
+    apiKey?: string;
+    /**
+     * Base URL (overrides provider context)
+     */
+    baseUrl?: string;
+    /**
+     * Custom renderer to replace the entire widget content.
+     * Receives the thread and agent data.
+     */
+    renderWidget?: (props: {
+        thread: AgentThreadDto | null;
+        agent: AgentDto | null;
+        elapsedSeconds: number;
+        isTerminal: boolean;
+    }) => React.ReactNode;
+}
+export declare function HandoffSubagentWidget({ subThreadId, onCompleted, apiKey, baseUrl, renderWidget, }: HandoffSubagentWidgetProps): JSX.Element;

package/dist/esm/components/ChatDrawer/HandoffSubagentWidget.js

@@ -0,0 +1,139 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useOptionalDevicContext } from '../../provider/DevicContext.js';
+import { DevicApiClient } from '../../api/client.js';
+import { AgentThreadState } from '../../api/types.js';
+import { ThreadStateTag } from '../ThreadStateTag/ThreadStateTag.js';
+
+const TERMINAL_STATES = [
+    AgentThreadState.COMPLETED,
+    AgentThreadState.FAILED,
+    AgentThreadState.TERMINATED,
+];
+const POLL_INTERVAL_MS = 5000;
+function formatElapsed(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return m > 0 ? `${m}m ${s}s` : `${s}s`;
+}
+function HandoffSubagentWidget({ subThreadId, onCompleted, apiKey, baseUrl, renderWidget, }) {
+    const context = useOptionalDevicContext();
+    const resolvedApiKey = apiKey || context?.apiKey;
+    const resolvedBaseUrl = baseUrl || context?.baseUrl || 'https://api.devic.ai';
+    const [thread, setThread] = useState(null);
+    const [agent, setAgent] = useState(null);
+    const [elapsedSeconds, setElapsedSeconds] = useState(0);
+    const pollRef = useRef(null);
+    const timerRef = useRef(null);
+    const hasCalledCompleted = useRef(false);
+    const startTimeRef = useRef(Date.now());
+    const getClient = useCallback(() => {
+        if (!resolvedApiKey)
+            return null;
+        return new DevicApiClient({ apiKey: resolvedApiKey, baseUrl: resolvedBaseUrl });
+    }, [resolvedApiKey, resolvedBaseUrl]);
+    const fetchThread = useCallback(async () => {
+        const client = getClient();
+        if (!client)
+            return;
+        try {
+            const data = await client.getThreadById(subThreadId, true);
+            console.log('[HandoffSubagentWidget] Thread loaded:', {
+                id: data._id,
+                agentId: data.agentId,
+                parentAgentId: data.parentAgentId,
+                name: data.name,
+                state: data.state,
+            });
+            setThread(data);
+            if (data.state &&
+                TERMINAL_STATES.includes(data.state) &&
+                !hasCalledCompleted.current) {
+                hasCalledCompleted.current = true;
+                onCompleted?.();
+            }
+        }
+        catch (err) {
+            console.error('[HandoffSubagentWidget] Error fetching thread:', err);
+        }
+    }, [subThreadId, getClient, onCompleted]);
+    // Initial fetch + polling
+    useEffect(() => {
+        fetchThread();
+        pollRef.current = setInterval(fetchThread, POLL_INTERVAL_MS);
+        return () => {
+            if (pollRef.current)
+                clearInterval(pollRef.current);
+        };
+    }, [fetchThread]);
+    // Fetch agent details once we have a thread with an agent ID
+    const agentIdToFetch = thread?.agentId || thread?.parentAgentId;
+    useEffect(() => {
+        if (!agentIdToFetch || agent)
+            return;
+        const client = getClient();
+        if (!client) {
+            console.warn('[HandoffSubagentWidget] No API client available (missing apiKey?)');
+            return;
+        }
+        console.log('[HandoffSubagentWidget] Fetching agent details for:', agentIdToFetch);
+        client.getAgentDetails(agentIdToFetch).then((data) => {
+            console.log('[HandoffSubagentWidget] Agent details loaded:', data?.name);
+            setAgent(data);
+        }).catch((err) => {
+            console.warn('[HandoffSubagentWidget] Could not fetch agent details:', err);
+        });
+    }, [agentIdToFetch, agent, getClient]);
+    // Stop polling on terminal state
+    useEffect(() => {
+        if (thread?.state && TERMINAL_STATES.includes(thread.state)) {
+            if (pollRef.current) {
+                clearInterval(pollRef.current);
+                pollRef.current = null;
+            }
+        }
+    }, [thread?.state]);
+    // Elapsed timer
+    useEffect(() => {
+        startTimeRef.current = Date.now();
+        timerRef.current = setInterval(() => {
+            setElapsedSeconds(Math.floor((Date.now() - startTimeRef.current) / 1000));
+        }, 1000);
+        return () => {
+            if (timerRef.current)
+                clearInterval(timerRef.current);
+        };
+    }, []);
+    // Stop timer on terminal
+    useEffect(() => {
+        if (thread?.state && TERMINAL_STATES.includes(thread.state)) {
+            if (timerRef.current) {
+                clearInterval(timerRef.current);
+                timerRef.current = null;
+            }
+        }
+    }, [thread?.state]);
+    // Computed
+    const isTerminal = !!(thread?.state && TERMINAL_STATES.includes(thread.state));
+    const isProcessing = thread?.state === AgentThreadState.PROCESSING || thread?.state === AgentThreadState.HANDED_OFF;
+    const totalTasks = thread?.tasks?.length || 0;
+    const completedTasks = thread?.tasks?.filter((t) => t.completed).length || 0;
+    const taskPercentage = totalTasks ? Math.round((completedTasks / totalTasks) * 100) : 0;
+    const lastMessage = thread?.threadContent?.[thread.threadContent.length - 1];
+    const lastSummary = lastMessage?.summary;
+    // Custom renderer
+    if (renderWidget) {
+        return jsx(Fragment, { children: renderWidget({ thread, agent, elapsedSeconds, isTerminal }) });
+    }
+    return (jsxs("div", { className: "devic-handoff-widget", children: [jsxs("div", { className: "devic-handoff-header", children: [jsx("div", { className: "devic-handoff-agent-avatar", children: agent?.imgUrl ? (jsx("img", { src: agent.imgUrl, alt: "", className: "devic-handoff-avatar-img" })) : (jsx(RobotFallbackIcon, {})) }), jsx("span", { className: "devic-handoff-agent-name", children: agent?.name || thread?.name || 'Subagent' })] }), thread?.state && (jsx("div", { className: "devic-handoff-state-row", children: jsx(ThreadStateTag, { state: thread.state, threadId: thread._id || subThreadId, agentName: agent?.name || thread?.name || 'Subagent', pausedReason: thread.pausedReason, finishReason: thread.finishReason, pauseUntil: thread.pauseUntil, interactive: true, apiKey: resolvedApiKey, baseUrl: resolvedBaseUrl }) })), totalTasks > 0 && (jsxs("div", { className: "devic-handoff-progress", children: [jsx("div", { className: "devic-handoff-progress-bar", children: jsx("div", { className: "devic-handoff-progress-fill", "data-status": thread?.state === AgentThreadState.FAILED ? 'error' : isTerminal ? 'success' : 'active', style: { width: `${taskPercentage}%` } }) }), jsxs("span", { className: "devic-handoff-progress-text", children: [completedTasks, "/", totalTasks] })] })), totalTasks === 0 && isProcessing && (jsx("div", { className: "devic-handoff-progress", children: jsx("div", { className: "devic-handoff-progress-bar", children: jsx("div", { className: "devic-handoff-progress-indeterminate" }) }) })), lastSummary && (jsx("div", { className: `devic-handoff-summary ${isProcessing ? 'devic-handoff-summary-active' : ''}`, children: lastSummary })), isProcessing && (jsxs("div", { className: "devic-handoff-elapsed", children: [jsx(ClockSmallIcon, {}), jsx("span", { children: formatElapsed(elapsedSeconds) })] }))] }));
+}
+/* ── Icons ── */
+function RobotFallbackIcon() {
+    return (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "#999", children: [jsx("rect", { x: "4", y: "8", width: "16", height: "12", rx: "2" }), jsx("circle", { cx: "9", cy: "14", r: "2", fill: "#fff" }), jsx("circle", { cx: "15", cy: "14", r: "2", fill: "#fff" }), jsx("line", { x1: "12", y1: "2", x2: "12", y2: "8", stroke: "#999", strokeWidth: "2" }), jsx("circle", { cx: "12", cy: "2", r: "1.5" })] }));
+}
+function ClockSmallIcon() {
+    return (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("polyline", { points: "12,6 12,12 16,14" })] }));
+}
+
+export { HandoffSubagentWidget };
+//# sourceMappingURL=HandoffSubagentWidget.js.map

package/dist/esm/components/ChatDrawer/HandoffSubagentWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandoffSubagentWidget.js","sources":["../../../../src/components/ChatDrawer/HandoffSubagentWidget.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { useOptionalDevicContext } from '../../provider';\nimport { DevicApiClient } from '../../api/client';\nimport { AgentThreadState } from '../../api/types';\nimport type { AgentThreadDto, AgentDto } from '../../api/types';\nimport { ThreadStateTag } from '../ThreadStateTag';\n\nconst TERMINAL_STATES: AgentThreadState[] = [\n  AgentThreadState.COMPLETED,\n  AgentThreadState.FAILED,\n  AgentThreadState.TERMINATED,\n];\n\nconst POLL_INTERVAL_MS = 5000;\n\nexport interface HandoffSubagentWidgetProps {\n  /**\n   * The subthread ID to monitor\n   */\n  subThreadId: string;\n\n  /**\n   * Called when the subthread reaches a terminal state\n   */\n  onCompleted?: () => void;\n\n  /**\n   * API key (overrides provider context)\n   */\n  apiKey?: string;\n\n  /**\n   * Base URL (overrides provider context)\n   */\n  baseUrl?: string;\n\n  /**\n   * Custom renderer to replace the entire widget content.\n   * Receives the thread and agent data.\n   */\n  renderWidget?: (props: {\n    thread: AgentThreadDto | null;\n    agent: AgentDto | null;\n    elapsedSeconds: number;\n    isTerminal: boolean;\n  }) => React.ReactNode;\n}\n\nfunction formatElapsed(seconds: number): string {\n  const m = Math.floor(seconds / 60);\n  const s = seconds % 60;\n  return m > 0 ? `${m}m ${s}s` : `${s}s`;\n}\n\nexport function HandoffSubagentWidget({\n  subThreadId,\n  onCompleted,\n  apiKey,\n  baseUrl,\n  renderWidget,\n}: HandoffSubagentWidgetProps): JSX.Element {\n  const context = useOptionalDevicContext();\n  const resolvedApiKey = apiKey || context?.apiKey;\n  const resolvedBaseUrl = baseUrl || context?.baseUrl || 'https://api.devic.ai';\n\n  const [thread, setThread] = useState<AgentThreadDto | null>(null);\n  const [agent, setAgent] = useState<AgentDto | null>(null);\n  const [elapsedSeconds, setElapsedSeconds] = useState(0);\n\n  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);\n  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);\n  const hasCalledCompleted = useRef(false);\n  const startTimeRef = useRef(Date.now());\n\n  const getClient = useCallback((): DevicApiClient | null => {\n    if (!resolvedApiKey) return null;\n    return new DevicApiClient({ apiKey: resolvedApiKey, baseUrl: resolvedBaseUrl });\n  }, [resolvedApiKey, resolvedBaseUrl]);\n\n  const fetchThread = useCallback(async () => {\n    const client = getClient();\n    if (!client) return;\n\n    try {\n      const data = await client.getThreadById(subThreadId, true);\n      console.log('[HandoffSubagentWidget] Thread loaded:', {\n        id: data._id,\n        agentId: data.agentId,\n        parentAgentId: data.parentAgentId,\n        name: data.name,\n        state: data.state,\n      });\n      setThread(data);\n\n      if (\n        data.state &&\n        TERMINAL_STATES.includes(data.state) &&\n        !hasCalledCompleted.current\n      ) {\n        hasCalledCompleted.current = true;\n        onCompleted?.();\n      }\n    } catch (err) {\n      console.error('[HandoffSubagentWidget] Error fetching thread:', err);\n    }\n  }, [subThreadId, getClient, onCompleted]);\n\n  // Initial fetch + polling\n  useEffect(() => {\n    fetchThread();\n    pollRef.current = setInterval(fetchThread, POLL_INTERVAL_MS);\n    return () => {\n      if (pollRef.current) clearInterval(pollRef.current);\n    };\n  }, [fetchThread]);\n\n  // Fetch agent details once we have a thread with an agent ID\n  const agentIdToFetch = thread?.agentId || thread?.parentAgentId;\n  useEffect(() => {\n    if (!agentIdToFetch || agent) return;\n    const client = getClient();\n    if (!client) {\n      console.warn('[HandoffSubagentWidget] No API client available (missing apiKey?)');\n      return;\n    }\n\n    console.log('[HandoffSubagentWidget] Fetching agent details for:', agentIdToFetch);\n    client.getAgentDetails(agentIdToFetch).then((data) => {\n      console.log('[HandoffSubagentWidget] Agent details loaded:', data?.name);\n      setAgent(data);\n    }).catch((err) => {\n      console.warn('[HandoffSubagentWidget] Could not fetch agent details:', err);\n    });\n  }, [agentIdToFetch, agent, getClient]);\n\n  // Stop polling on terminal state\n  useEffect(() => {\n    if (thread?.state && TERMINAL_STATES.includes(thread.state)) {\n      if (pollRef.current) {\n        clearInterval(pollRef.current);\n        pollRef.current = null;\n      }\n    }\n  }, [thread?.state]);\n\n  // Elapsed timer\n  useEffect(() => {\n    startTimeRef.current = Date.now();\n    timerRef.current = setInterval(() => {\n      setElapsedSeconds(Math.floor((Date.now() - startTimeRef.current) / 1000));\n    }, 1000);\n    return () => {\n      if (timerRef.current) clearInterval(timerRef.current);\n    };\n  }, []);\n\n  // Stop timer on terminal\n  useEffect(() => {\n    if (thread?.state && TERMINAL_STATES.includes(thread.state)) {\n      if (timerRef.current) {\n        clearInterval(timerRef.current);\n        timerRef.current = null;\n      }\n    }\n  }, [thread?.state]);\n\n  // Computed\n  const isTerminal = !!(thread?.state && TERMINAL_STATES.includes(thread.state));\n  const isProcessing = thread?.state === AgentThreadState.PROCESSING || thread?.state === AgentThreadState.HANDED_OFF;\n  const totalTasks = thread?.tasks?.length || 0;\n  const completedTasks = thread?.tasks?.filter((t) => t.completed).length || 0;\n  const taskPercentage = totalTasks ? Math.round((completedTasks / totalTasks) * 100) : 0;\n\n  const lastMessage = thread?.threadContent?.[thread.threadContent.length - 1];\n  const lastSummary = lastMessage?.summary;\n\n  // Custom renderer\n  if (renderWidget) {\n    return <>{renderWidget({ thread, agent, elapsedSeconds, isTerminal })}</>;\n  }\n\n  return (\n    <div className=\"devic-handoff-widget\">\n      {/* Header: Agent avatar + name */}\n      <div className=\"devic-handoff-header\">\n        <div className=\"devic-handoff-agent-avatar\">\n          {agent?.imgUrl ? (\n            <img src={agent.imgUrl} alt=\"\" className=\"devic-handoff-avatar-img\" />\n          ) : (\n            <RobotFallbackIcon />\n          )}\n        </div>\n        <span className=\"devic-handoff-agent-name\">\n          {agent?.name || thread?.name || 'Subagent'}\n        </span>\n      </div>\n\n      {/* State tag */}\n      {thread?.state && (\n        <div className=\"devic-handoff-state-row\">\n          <ThreadStateTag\n            state={thread.state}\n            threadId={thread._id || subThreadId}\n            agentName={agent?.name || thread?.name || 'Subagent'}\n            pausedReason={thread.pausedReason}\n            finishReason={thread.finishReason}\n            pauseUntil={thread.pauseUntil}\n            interactive={true}\n            apiKey={resolvedApiKey}\n            baseUrl={resolvedBaseUrl}\n          />\n        </div>\n      )}\n\n      {/* Progress bar */}\n      {totalTasks > 0 && (\n        <div className=\"devic-handoff-progress\">\n          <div className=\"devic-handoff-progress-bar\">\n            <div\n              className=\"devic-handoff-progress-fill\"\n              data-status={thread?.state === AgentThreadState.FAILED ? 'error' : isTerminal ? 'success' : 'active'}\n              style={{ width: `${taskPercentage}%` }}\n            />\n          </div>\n          <span className=\"devic-handoff-progress-text\">\n            {completedTasks}/{totalTasks}\n          </span>\n        </div>\n      )}\n\n      {/* Indeterminate progress when no tasks */}\n      {totalTasks === 0 && isProcessing && (\n        <div className=\"devic-handoff-progress\">\n          <div className=\"devic-handoff-progress-bar\">\n            <div className=\"devic-handoff-progress-indeterminate\" />\n          </div>\n        </div>\n      )}\n\n      {/* Last message summary */}\n      {lastSummary && (\n        <div className={`devic-handoff-summary ${isProcessing ? 'devic-handoff-summary-active' : ''}`}>\n          {lastSummary}\n        </div>\n      )}\n\n      {/* Elapsed time */}\n      {isProcessing && (\n        <div className=\"devic-handoff-elapsed\">\n          <ClockSmallIcon />\n          <span>{formatElapsed(elapsedSeconds)}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ── Icons ── */\n\nfunction RobotFallbackIcon(): JSX.Element {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"#999\">\n      <rect x=\"4\" y=\"8\" width=\"16\" height=\"12\" rx=\"2\" />\n      <circle cx=\"9\" cy=\"14\" r=\"2\" fill=\"#fff\" />\n      <circle cx=\"15\" cy=\"14\" r=\"2\" fill=\"#fff\" />\n      <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"8\" stroke=\"#999\" strokeWidth=\"2\" />\n      <circle cx=\"12\" cy=\"2\" r=\"1.5\" />\n    </svg>\n  );\n}\n\nfunction ClockSmallIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <polyline points=\"12,6 12,12 16,14\" />\n    </svg>\n  );\n}\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/dist/esm/components/ChatDrawer/index.d.ts

@@ -3,4 +3,6 @@ export { ChatMessages } from './ChatMessages';
 export { ChatInput } from './ChatInput';
 export { ToolTimeline } from './ToolTimeline';
 export { ConversationSelector } from './ConversationSelector';
+export { HandoffSubagentWidget } from './HandoffSubagentWidget';
 export type { ChatDrawerProps, ChatDrawerOptions, ChatDrawerHandle, ChatMessagesProps, ChatInputProps, ToolTimelineProps, AllowedFileTypes, ConversationSelectorProps, } from './ChatDrawer.types';
+export type { HandoffSubagentWidgetProps } from './HandoffSubagentWidget';

package/dist/esm/components/ThreadStateTag/ThreadStateTag.d.ts

@@ -0,0 +1,3 @@
+import type { ThreadStateTagProps } from './ThreadStateTag.types';
+import './ThreadStateTag.css';
+export declare function ThreadStateTag({ state, threadId, agentName, showIcon, customIcon, pausedReason, approvalRejectedMessage, finishReason, onActionComplete, pauseUntil, subthreadCount, showAdminActions, apiKey, baseUrl, interactive, }: ThreadStateTagProps): JSX.Element;