@ash-cloud/ash-ui 0.0.7 → 0.0.8

package/dist/index.cjs

@@ -2,11 +2,6 @@
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var ReactMarkdown = require('react-markdown');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 
 // src/components/ToolCallCard.tsx
 
@@ -115,6 +110,16 @@ function mapToolToActionType(toolName, input) {
         stats
       };
     }
+    case "Task": {
+      return {
+        action: "agent_tool",
+        agentType: inputObj.subagent_type || "general-purpose",
+        description: inputObj.description || "",
+        prompt: inputObj.prompt,
+        startedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        toolCallCount: 0
+      };
+    }
     default: {
       const mcpParts = parseMcpToolName(toolName);
       if (mcpParts) {
@@ -164,6 +169,8 @@ function generateToolSummary(_toolName, _input, actionType) {
       }
       return `${actionType.todos.length} tasks`;
     }
+    case "agent_tool":
+      return actionType.description;
     default:
       return "Unknown tool";
   }
@@ -231,6 +238,7 @@ function createToolCall(toolUse) {
     actionType,
     status: "pending",
     summary,
+    input: toolUse.input,
     startedAt: (/* @__PURE__ */ new Date()).toISOString()
   };
 }
@@ -240,6 +248,7 @@ function updateToolCallWithResult(toolCall, content, isError) {
   updatedToolCall.status = isError ? "failed" : "success";
   updatedToolCall.completedAt = (/* @__PURE__ */ new Date()).toISOString();
   updatedToolCall.isError = isError;
+  updatedToolCall.output = content;
   if (actionType.action === "command_run") {
     const result = parseCommandResult(content);
     actionType.result = result;
@@ -277,6 +286,8 @@ function getActionIcon(actionType) {
       return "tool";
     case "todo_write":
       return "list-checks";
+    case "agent_tool":
+      return "bot";
     default:
       return "tool";
   }
@@ -305,6 +316,8 @@ function getActionLabel(actionType) {
       return "Tool";
     case "todo_write":
       return "Tasks";
+    case "agent_tool":
+      return actionType.agentType;
     default:
       return "Tool";
   }
@@ -327,6 +340,21 @@ function formatTimestamp(timestamp) {
     return timestamp;
   }
 }
+function formatElapsedTime(startTime, endTime) {
+  const start = typeof startTime === "string" ? new Date(startTime) : startTime;
+  const end = endTime ? typeof endTime === "string" ? new Date(endTime) : endTime : /* @__PURE__ */ new Date();
+  const elapsedMs = end.getTime() - start.getTime();
+  const elapsedSeconds = Math.floor(elapsedMs / 1e3);
+  if (elapsedSeconds < 60) {
+    return `${elapsedSeconds}s`;
+  }
+  const minutes = Math.floor(elapsedSeconds / 60);
+  const seconds = elapsedSeconds % 60;
+  if (seconds === 0) {
+    return `${minutes}m`;
+  }
+  return `${minutes}m ${seconds}s`;
+}
 function truncate(str, maxLength) {
   if (str.length <= maxLength) return str;
   return str.substring(0, maxLength - 3) + "...";
@@ -650,6 +678,12 @@ function ClipboardListIcon({ className }) {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16h.01" })
   ] });
 }
+function ClockIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
+  ] });
+}
 function SpinnerIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
 }
@@ -705,6 +739,8 @@ function ActionIcon({ actionType, className = "w-4 h-4" }) {
       return /* @__PURE__ */ jsxRuntime.jsx(PlugIcon, { className });
     case "todo_write":
       return /* @__PURE__ */ jsxRuntime.jsx(ListChecksIcon, { className });
+    case "agent_tool":
+      return /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className });
     case "generic_tool":
     default:
       return /* @__PURE__ */ jsxRuntime.jsx(ToolIcon, { className });
@@ -758,6 +794,153 @@ function JsonDisplay({ value, maxHeight, className }) {
   const formatted = JSON.stringify(value, null, 2);
   return /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { maxHeight, className, children: formatted });
 }
+function AgentToolCard({
+  toolCall,
+  defaultExpanded = false,
+  className,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = react.useState(defaultExpanded);
+  const [elapsedTime, setElapsedTime] = react.useState("");
+  const intervalRef = react.useRef(null);
+  const { actionType, status, summary, nestedToolCalls, nestedToolCallCount, startedAt } = toolCall;
+  const agentData = react.useMemo(() => {
+    if (actionType.action !== "agent_tool") {
+      return null;
+    }
+    const agentAction = actionType;
+    return {
+      agentType: agentAction.agentType,
+      description: agentAction.description,
+      prompt: agentAction.prompt
+    };
+  }, [actionType]);
+  const toolCount = nestedToolCallCount ?? nestedToolCalls?.length ?? 0;
+  const isRunning = status === "pending";
+  react.useEffect(() => {
+    if (isRunning && startedAt) {
+      setElapsedTime(formatElapsedTime(startedAt));
+      intervalRef.current = setInterval(() => {
+        setElapsedTime(formatElapsedTime(startedAt));
+      }, 1e3);
+      return () => {
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+      };
+    } else if (!isRunning) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      setElapsedTime("");
+    }
+    return void 0;
+  }, [isRunning, startedAt]);
+  if (!agentData) {
+    return null;
+  }
+  const { agentType, description, prompt } = agentData;
+  const indentClass = depth > 0 ? "ml-4" : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
+        isRunning ? "border-yellow-500/30" : status === "failed" ? "border-red-500/30" : "border-white/10",
+        indentClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "w-full px-4 py-3 flex items-center gap-3 hover:bg-white/5 cursor-pointer transition-colors",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ChevronRightIcon,
+                {
+                  className: cn(
+                    "w-4 h-4 text-white/40 transition-transform duration-200 shrink-0",
+                    expanded && "rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
+                    isRunning ? "bg-yellow-500/20" : status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
+                  ),
+                  children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(
+                    SpinnerIcon,
+                    {
+                      className: "w-3.5 h-3.5 text-yellow-400 animate-spin"
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    BotIcon,
+                    {
+                      className: cn(
+                        "w-3.5 h-3.5",
+                        status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "px-2 py-0.5 rounded text-xs font-medium shrink-0",
+                    isRunning ? "bg-yellow-500/20 text-yellow-400" : status === "failed" ? "bg-red-500/20 text-red-400" : "bg-white/10 text-white/70"
+                  ),
+                  children: agentType
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/80 truncate flex-1 text-left", children: description || summary }),
+              toolCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/50 shrink-0", children: [
+                toolCount,
+                " tool call",
+                toolCount !== 1 ? "s" : ""
+              ] }),
+              isRunning && elapsedTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-white/40 shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { className: "w-3 h-3" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: elapsedTime })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/30 shrink-0", children: "..." })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 bg-black/20", children: [
+          prompt && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-white/5", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70 whitespace-pre-wrap", children: prompt.length > 500 ? prompt.substring(0, 500) + "..." : prompt }) }),
+          nestedToolCalls && nestedToolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 space-y-2", children: nestedToolCalls.map((nestedCall) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: nestedCall.actionType.action === "agent_tool" ? /* @__PURE__ */ jsxRuntime.jsx(
+            AgentToolCard,
+            {
+              toolCall: nestedCall,
+              defaultExpanded: false,
+              depth: depth + 1
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            ToolCallCard,
+            {
+              toolCall: nestedCall,
+              defaultExpanded: false
+            }
+          ) }, nestedCall.id)) }),
+          (!nestedToolCalls || nestedToolCalls.length === 0) && isRunning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-6 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-white/40", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Agent is working..." })
+          ] }) }),
+          (!nestedToolCalls || nestedToolCalls.length === 0) && !isRunning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-4 text-sm text-white/40 text-center", children: "No tool calls recorded" })
+        ] })
+      ]
+    }
+  );
+}
 function SectionHeader({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-tool-section-header", children });
 }
@@ -1033,6 +1216,9 @@ function hasDetails(actionType) {
       return Boolean(actionType.arguments || actionType.result);
     case "todo_write":
       return actionType.todos.length > 0;
+    case "agent_tool":
+      return true;
+    // Always expandable (handled by AgentToolCard)
     default:
       return false;
   }
@@ -1040,6 +1226,16 @@ function hasDetails(actionType) {
 function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
   const [expanded, setExpanded] = react.useState(defaultExpanded);
   const { actionType, status, summary } = toolCall;
+  if (actionType.action === "agent_tool") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AgentToolCard,
+      {
+        toolCall,
+        defaultExpanded,
+        className
+      }
+    );
+  }
   const canExpand = hasDetails(actionType);
   const statusClasses = {
     pending: "border-yellow-500/30 ash-tool-status-pending",
@@ -1108,6 +1304,17 @@ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
     }
   );
 }
+var ReactMarkdown = react.lazy(() => import('react-markdown'));
+function LazyMarkdown({ children, fallback, className }) {
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown, { children }) });
+}
 function OptionCards({ options, onSelect, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-2 mt-3", className), style: {
     gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))"
@@ -1203,7 +1410,7 @@ function AssistantMessage({ entry, onOptionSelect, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 max-w-[85%]", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        parsedOptions.preamble && /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { children: parsedOptions.preamble }),
+        parsedOptions.preamble && /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: parsedOptions.preamble }),
         /* @__PURE__ */ jsxRuntime.jsx(
           OptionCards,
           {
@@ -1211,7 +1418,7 @@ function AssistantMessage({ entry, onOptionSelect, className }) {
             onSelect: handleOptionSelect
           }
         )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { children: entry.content }) }) }),
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: entry.content }) }) }),
       entry.timestamp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
     ] })
   ] });
@@ -1246,7 +1453,7 @@ function ErrorMessage({ entry, className }) {
     ] }) })
   ] });
 }
-function MessageEntry({ entry, onOptionSelect, className }) {
+function MessageEntry({ entry, onOptionSelect, defaultExpanded, className }) {
   switch (entry.entryType.type) {
     case "user_message":
       return /* @__PURE__ */ jsxRuntime.jsx(UserMessage, { entry, className });
@@ -1255,7 +1462,7 @@ function MessageEntry({ entry, onOptionSelect, className }) {
     case "thinking":
       return /* @__PURE__ */ jsxRuntime.jsx(ThinkingMessage, { entry, className });
     case "tool_call":
-      return /* @__PURE__ */ jsxRuntime.jsx(ToolCallMessage, { entry, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(ToolCallMessage, { entry, defaultExpanded, className });
     case "error":
       return /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { entry, className });
     default:
@@ -1317,7 +1524,7 @@ function StreamingText({
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", className), children: renderMarkdown ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { children: content }),
+    /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: content }),
     isStreaming && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { variant: "cursor", size: "sm", className: "inline-block ml-0.5" })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: [
     content,
@@ -1858,6 +2065,9 @@ function isGenericToolAction(action) {
 function isTodoWriteAction(action) {
   return action.action === "todo_write";
 }
+function isAgentToolAction(action) {
+  return action.action === "agent_tool";
+}
 function isToolCallEntry(entry) {
   return entry.type === "tool_call";
 }
@@ -1975,7 +2185,7 @@ function MessageList({
             return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
           }
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(MessageEntry, { entry, onOptionSelect }, entry.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(MessageEntry, { entry, onOptionSelect, defaultExpanded: config.defaultExpanded }, entry.id);
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
@@ -3298,6 +3508,24 @@ function useAgentChat(options) {
           }
         }
         break;
+      case "text":
+        if (event.text && !currentTextRef.current) {
+          currentTextIdRef.current = `text-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+          currentTextRef.current = event.text;
+          newEntries.push(createTextEntry(currentTextIdRef.current, currentTextRef.current));
+        }
+        break;
+      case "message":
+        if (event.content && !currentTextRef.current) {
+          const messageContent = event.content;
+          const textBlock = messageContent?.find((c) => c.type === "text");
+          if (textBlock?.text) {
+            currentTextIdRef.current = `text-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            currentTextRef.current = textBlock.text;
+            newEntries.push(createTextEntry(currentTextIdRef.current, currentTextRef.current));
+          }
+        }
+        break;
       case "sandbox_log":
         if (event.entry) {
           onSandboxLog?.(event.entry);
@@ -3343,7 +3571,7 @@ function useAgentChat(options) {
     abortControllerRef.current = controller;
     let localStreamingEntries = [];
     try {
-      const stream = createStream(prompt, sessionId || void 0);
+      const stream = createStream(prompt, sessionId || void 0, controller.signal);
       for await (const event of stream) {
         if (controller.signal.aborted) break;
         localStreamingEntries = processEvent(event, localStreamingEntries);
@@ -3472,6 +3700,7 @@ function useLongTextConversion({
 }
 
 exports.ActionIcon = ActionIcon;
+exports.AgentToolCard = AgentToolCard;
 exports.AlertCircleIcon = AlertCircleIcon;
 exports.AlertTriangleIcon = AlertTriangleIcon;
 exports.AssistantMessage = AssistantMessage;
@@ -3486,6 +3715,7 @@ exports.ChevronRightIcon = ChevronRightIcon;
 exports.ChevronUpIcon = ChevronUpIcon;
 exports.CircleIcon = CircleIcon;
 exports.ClipboardListIcon = ClipboardListIcon;
+exports.ClockIcon = ClockIcon;
 exports.CodeBlock = CodeBlock;
 exports.CodeIcon = CodeIcon;
 exports.CompactToolRow = CompactToolRow;
@@ -3505,6 +3735,7 @@ exports.FolderSearchIcon = FolderSearchIcon;
 exports.GlobeIcon = GlobeIcon;
 exports.InfoIcon = InfoIcon;
 exports.JsonDisplay = JsonDisplay;
+exports.LazyMarkdown = LazyMarkdown;
 exports.ListChecksIcon = ListChecksIcon;
 exports.LoaderIcon = LoaderIcon;
 exports.LoadingIndicator = LoadingIndicator;
@@ -3545,6 +3776,7 @@ exports.colors = colors;
 exports.createToolCall = createToolCall;
 exports.extractTextContent = extractTextContent;
 exports.extractToolCallsFromGroup = extractToolCallsFromGroup;
+exports.formatElapsedTime = formatElapsedTime;
 exports.formatFileSize = formatFileSize;
 exports.formatTimestamp = formatTimestamp;
 exports.formatToolName = formatToolName;
@@ -3553,6 +3785,7 @@ exports.getActionIcon = getActionIcon;
 exports.getActionLabel = getActionLabel;
 exports.groupEntriesForCompactMode = groupEntriesForCompactMode;
 exports.inlineStyles = inlineStyles;
+exports.isAgentToolAction = isAgentToolAction;
 exports.isCommandRunAction = isCommandRunAction;
 exports.isErrorEntry = isErrorEntry;
 exports.isFileEditAction = isFileEditAction;