@ash-cloud/ash-ui 0.0.6 → 0.0.8

package/dist/index.js

@@ -1,6 +1,5 @@
-import { createContext, useState, useRef, useEffect, useMemo, useCallback, useContext } from 'react';
+import { lazy, createContext, useState, useRef, useMemo, useEffect, Suspense, useCallback, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import ReactMarkdown from 'react-markdown';
 
 // src/components/ToolCallCard.tsx
 
@@ -35,27 +34,41 @@ function mapToolToActionType(toolName, input) {
         command: inputObj.command || "",
         description: inputObj.description
       };
-    case "Read":
+    case "Read": {
+      const limit = inputObj.limit;
       return {
         action: "file_read",
         path: inputObj.file_path || "",
         offset: inputObj.offset,
-        limit: inputObj.limit
+        limit,
+        linesRead: limit
+        // Use limit as approximate lines read if specified
       };
-    case "Edit":
+    }
+    case "Edit": {
+      const oldStr = inputObj.old_string;
+      const newStr = inputObj.new_string;
+      const oldLines = oldStr ? oldStr.split("\n").length : 0;
+      const newLines = newStr ? newStr.split("\n").length : 0;
       return {
         action: "file_edit",
         path: inputObj.file_path || "",
-        oldString: inputObj.old_string,
-        newString: inputObj.new_string,
-        replaceAll: inputObj.replace_all
+        oldString: oldStr,
+        newString: newStr,
+        replaceAll: inputObj.replace_all,
+        linesAdded: newLines,
+        linesRemoved: oldLines
       };
-    case "Write":
+    }
+    case "Write": {
+      const content = inputObj.content;
       return {
         action: "file_write",
         path: inputObj.file_path || "",
-        content: inputObj.content
+        content,
+        linesWritten: content ? content.split("\n").length : void 0
       };
+    }
     case "Grep":
       return {
         action: "search",
@@ -95,6 +108,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) {
@@ -144,6 +167,8 @@ function generateToolSummary(_toolName, _input, actionType) {
       }
       return `${actionType.todos.length} tasks`;
     }
+    case "agent_tool":
+      return actionType.description;
     default:
       return "Unknown tool";
   }
@@ -211,6 +236,7 @@ function createToolCall(toolUse) {
     actionType,
     status: "pending",
     summary,
+    input: toolUse.input,
     startedAt: (/* @__PURE__ */ new Date()).toISOString()
   };
 }
@@ -220,6 +246,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;
@@ -257,6 +284,8 @@ function getActionIcon(actionType) {
       return "tool";
     case "todo_write":
       return "list-checks";
+    case "agent_tool":
+      return "bot";
     default:
       return "tool";
   }
@@ -285,6 +314,8 @@ function getActionLabel(actionType) {
       return "Tool";
     case "todo_write":
       return "Tasks";
+    case "agent_tool":
+      return actionType.agentType;
     default:
       return "Tool";
   }
@@ -307,6 +338,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) + "...";
@@ -630,6 +676,12 @@ function ClipboardListIcon({ className }) {
     /* @__PURE__ */ jsx("path", { d: "M8 16h.01" })
   ] });
 }
+function ClockIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+  ] });
+}
 function SpinnerIcon({ className }) {
   return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
 }
@@ -685,6 +737,8 @@ function ActionIcon({ actionType, className = "w-4 h-4" }) {
       return /* @__PURE__ */ jsx(PlugIcon, { className });
     case "todo_write":
       return /* @__PURE__ */ jsx(ListChecksIcon, { className });
+    case "agent_tool":
+      return /* @__PURE__ */ jsx(BotIcon, { className });
     case "generic_tool":
     default:
       return /* @__PURE__ */ jsx(ToolIcon, { className });
@@ -738,6 +792,153 @@ function JsonDisplay({ value, maxHeight, className }) {
   const formatted = JSON.stringify(value, null, 2);
   return /* @__PURE__ */ jsx(CodeBlock, { maxHeight, className, children: formatted });
 }
+function AgentToolCard({
+  toolCall,
+  defaultExpanded = false,
+  className,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const [elapsedTime, setElapsedTime] = useState("");
+  const intervalRef = useRef(null);
+  const { actionType, status, summary, nestedToolCalls, nestedToolCallCount, startedAt } = toolCall;
+  const agentData = 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";
+  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__ */ 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__ */ 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__ */ jsx(
+                ChevronRightIcon,
+                {
+                  className: cn(
+                    "w-4 h-4 text-white/40 transition-transform duration-200 shrink-0",
+                    expanded && "rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ 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__ */ jsx(
+                    SpinnerIcon,
+                    {
+                      className: "w-3.5 h-3.5 text-yellow-400 animate-spin"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    BotIcon,
+                    {
+                      className: cn(
+                        "w-3.5 h-3.5",
+                        status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ 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__ */ jsx("span", { className: "text-sm text-white/80 truncate flex-1 text-left", children: description || summary }),
+              toolCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/50 shrink-0", children: [
+                toolCount,
+                " tool call",
+                toolCount !== 1 ? "s" : ""
+              ] }),
+              isRunning && elapsedTime && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-white/40 shrink-0", children: [
+                /* @__PURE__ */ jsx(ClockIcon, { className: "w-3 h-3" }),
+                /* @__PURE__ */ jsx("span", { children: elapsedTime })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-white/30 shrink-0", children: "..." })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/5 bg-black/20", children: [
+          prompt && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-white/5", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "p-3 space-y-2", children: nestedToolCalls.map((nestedCall) => /* @__PURE__ */ jsx("div", { children: nestedCall.actionType.action === "agent_tool" ? /* @__PURE__ */ jsx(
+            AgentToolCard,
+            {
+              toolCall: nestedCall,
+              defaultExpanded: false,
+              depth: depth + 1
+            }
+          ) : /* @__PURE__ */ jsx(
+            ToolCallCard,
+            {
+              toolCall: nestedCall,
+              defaultExpanded: false
+            }
+          ) }, nestedCall.id)) }),
+          (!nestedToolCalls || nestedToolCalls.length === 0) && isRunning && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-white/40", children: [
+            /* @__PURE__ */ jsx(SpinnerIcon, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsx("span", { children: "Agent is working..." })
+          ] }) }),
+          (!nestedToolCalls || nestedToolCalls.length === 0) && !isRunning && /* @__PURE__ */ jsx("div", { className: "px-4 py-4 text-sm text-white/40 text-center", children: "No tool calls recorded" })
+        ] })
+      ]
+    }
+  );
+}
 function SectionHeader({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "ash-tool-section-header", children });
 }
@@ -1013,6 +1214,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;
   }
@@ -1020,6 +1224,16 @@ function hasDetails(actionType) {
 function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
   const [expanded, setExpanded] = useState(defaultExpanded);
   const { actionType, status, summary } = toolCall;
+  if (actionType.action === "agent_tool") {
+    return /* @__PURE__ */ jsx(
+      AgentToolCard,
+      {
+        toolCall,
+        defaultExpanded,
+        className
+      }
+    );
+  }
   const canExpand = hasDetails(actionType);
   const statusClasses = {
     pending: "border-yellow-500/30 ash-tool-status-pending",
@@ -1088,6 +1302,17 @@ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
     }
   );
 }
+var ReactMarkdown = lazy(() => import('react-markdown'));
+function LazyMarkdown({ children, fallback, className }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx("span", { className, children: fallback ?? children });
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsx(ReactMarkdown, { children }) });
+}
 function OptionCards({ options, onSelect, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 mt-3", className), style: {
     gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))"
@@ -1183,7 +1408,7 @@ function AssistantMessage({ entry, onOptionSelect, className }) {
     /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 max-w-[85%]", children: [
       /* @__PURE__ */ jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        parsedOptions.preamble && /* @__PURE__ */ jsx(ReactMarkdown, { children: parsedOptions.preamble }),
+        parsedOptions.preamble && /* @__PURE__ */ jsx(LazyMarkdown, { children: parsedOptions.preamble }),
         /* @__PURE__ */ jsx(
           OptionCards,
           {
@@ -1191,7 +1416,7 @@ function AssistantMessage({ entry, onOptionSelect, className }) {
             onSelect: handleOptionSelect
           }
         )
-      ] }) : /* @__PURE__ */ jsx(ReactMarkdown, { children: entry.content }) }) }),
+      ] }) : /* @__PURE__ */ jsx(LazyMarkdown, { children: entry.content }) }) }),
       entry.timestamp && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
     ] })
   ] });
@@ -1226,7 +1451,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__ */ jsx(UserMessage, { entry, className });
@@ -1235,7 +1460,7 @@ function MessageEntry({ entry, onOptionSelect, className }) {
     case "thinking":
       return /* @__PURE__ */ jsx(ThinkingMessage, { entry, className });
     case "tool_call":
-      return /* @__PURE__ */ jsx(ToolCallMessage, { entry, className });
+      return /* @__PURE__ */ jsx(ToolCallMessage, { entry, defaultExpanded, className });
     case "error":
       return /* @__PURE__ */ jsx(ErrorMessage, { entry, className });
     default:
@@ -1297,282 +1522,429 @@ function StreamingText({
   className
 }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: renderMarkdown ? /* @__PURE__ */ jsxs("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: [
-    /* @__PURE__ */ jsx(ReactMarkdown, { children: content }),
+    /* @__PURE__ */ jsx(LazyMarkdown, { children: content }),
     isStreaming && /* @__PURE__ */ jsx(LoadingIndicator, { variant: "cursor", size: "sm", className: "inline-block ml-0.5" })
   ] }) : /* @__PURE__ */ jsxs("p", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: [
     content,
     isStreaming && /* @__PURE__ */ jsx(LoadingIndicator, { variant: "cursor", size: "sm", className: "inline-block ml-0.5" })
   ] }) });
 }
-function CompactToolStatusLine({
-  toolCall,
-  previousToolCall,
-  animationDuration = 300,
-  className
-}) {
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [displayedToolCall, setDisplayedToolCall] = useState(toolCall);
-  const [exitingToolCall, setExitingToolCall] = useState(null);
-  const prevToolCallRef = useRef(null);
-  useEffect(() => {
-    if (toolCall.id !== prevToolCallRef.current) {
-      if (prevToolCallRef.current !== null && previousToolCall) {
-        setExitingToolCall(previousToolCall);
-        setIsAnimating(true);
-        const timer = setTimeout(() => {
-          setDisplayedToolCall(toolCall);
-          setExitingToolCall(null);
-          setIsAnimating(false);
-        }, animationDuration);
-        prevToolCallRef.current = toolCall.id;
-        return () => clearTimeout(timer);
-      } else {
-        setDisplayedToolCall(toolCall);
-        prevToolCallRef.current = toolCall.id;
+function getFilePath(actionType) {
+  switch (actionType.action) {
+    case "file_read":
+    case "file_edit":
+    case "file_write":
+      return actionType.path;
+    default:
+      return null;
+  }
+}
+function getFileName(path) {
+  const parts = path.split("/");
+  return parts[parts.length - 1] || path;
+}
+function getFileExtension(path) {
+  const fileName = getFileName(path);
+  const dotIndex = fileName.lastIndexOf(".");
+  if (dotIndex === -1) return null;
+  return fileName.slice(dotIndex + 1).toLowerCase();
+}
+function getDiffStats(actionType) {
+  switch (actionType.action) {
+    case "file_edit": {
+      const edit = actionType;
+      if (edit.linesAdded !== void 0 || edit.linesRemoved !== void 0) {
+        return { added: edit.linesAdded, removed: edit.linesRemoved };
       }
-    } else {
-      setDisplayedToolCall(toolCall);
+      return null;
     }
-    return void 0;
-  }, [toolCall, previousToolCall, animationDuration]);
-  const statusClasses = {
-    pending: "border-yellow-500/30",
-    success: "border-[var(--ash-accent)]/30",
-    failed: "border-red-500/30"
-  };
-  const renderToolCallContent = (tc, isExiting) => /* @__PURE__ */ jsxs(
+    case "file_read": {
+      const read = actionType;
+      if (read.linesRead !== void 0) {
+        return { read: read.linesRead };
+      }
+      return null;
+    }
+    case "file_write": {
+      const write = actionType;
+      if (write.linesWritten !== void 0) {
+        return { written: write.linesWritten };
+      }
+      return null;
+    }
+    default:
+      return null;
+  }
+}
+function getFileTypeColor(ext) {
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "text-blue-400";
+    case "js":
+    case "jsx":
+      return "text-yellow-400";
+    case "md":
+      return "text-white/60";
+    case "json":
+      return "text-orange-400";
+    case "sh":
+      return "text-green-400";
+    case "css":
+    case "scss":
+      return "text-pink-400";
+    case "py":
+      return "text-blue-300";
+    default:
+      return "text-white/70";
+  }
+}
+function CompactToolRow({ toolCall, showFullPath = false, className }) {
+  const { actionType, status, summary } = toolCall;
+  const label = getActionLabel(actionType);
+  const filePath = getFilePath(actionType);
+  const diffStats = getDiffStats(actionType);
+  const displayPath = filePath ? showFullPath ? filePath : getFileName(filePath) : null;
+  const ext = filePath ? getFileExtension(filePath) : null;
+  const fileColor = getFileTypeColor(ext);
+  const showSummary = !filePath && summary;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex items-center gap-3 px-4 py-2.5",
-        isExiting ? "ash-status-line-exit" : isAnimating ? "ash-status-line-enter" : ""
+        "flex items-center gap-2 py-1.5 text-sm min-w-0",
+        className
       ),
-      style: {
-        animationDuration: `${animationDuration}ms`
-      },
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
-              tc.status === "pending" ? "bg-yellow-500/20" : tc.status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
-            ),
-            children: /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                actionType: tc.actionType,
-                className: cn(
-                  "w-3.5 h-3.5",
-                  tc.status === "pending" ? "text-yellow-400" : tc.status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(tc.actionType) }),
-        /* @__PURE__ */ jsx("span", { className: "font-mono text-sm truncate text-white/60 flex-1 min-w-0", children: tc.summary }),
-        /* @__PURE__ */ jsx(StatusIndicator, { status: tc.status, size: "sm" })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              actionType,
+              className: cn(
+                "w-3.5 h-3.5",
+                status === "pending" ? "text-yellow-400" : status === "failed" ? "text-red-400" : "text-white/50"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cn(
+            "font-medium",
+            status === "pending" ? "text-white/90" : status === "failed" ? "text-red-400" : "text-white/60"
+          ), children: label })
+        ] }),
+        displayPath && /* @__PURE__ */ jsx("code", { className: cn(
+          "px-1.5 py-0.5 rounded bg-white/5 font-mono text-xs truncate max-w-[200px]",
+          fileColor
+        ), children: displayPath }),
+        diffStats && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0 font-mono", children: [
+          diffStats.added !== void 0 && diffStats.added > 0 && /* @__PURE__ */ jsxs("span", { className: "text-emerald-400", children: [
+            "+",
+            diffStats.added
+          ] }),
+          diffStats.removed !== void 0 && diffStats.removed > 0 && /* @__PURE__ */ jsxs("span", { className: "text-red-400", children: [
+            "-",
+            diffStats.removed
+          ] }),
+          diffStats.read !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-white/40", children: [
+            diffStats.read,
+            " lines"
+          ] }),
+          diffStats.written !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-emerald-400", children: [
+            "+",
+            diffStats.written
+          ] })
+        ] }),
+        showSummary && /* @__PURE__ */ jsx("span", { className: "text-white/40 truncate min-w-0 text-xs", children: summary })
       ]
     }
   );
+}
+function getFileExtension2(path) {
+  const fileName = path.split("/").pop() || path;
+  const dotIndex = fileName.lastIndexOf(".");
+  if (dotIndex === -1) return null;
+  return fileName.slice(dotIndex + 1).toLowerCase();
+}
+function getFileIcon(ext) {
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "TS";
+    case "js":
+    case "jsx":
+      return "JS";
+    case "md":
+      return "MD";
+    case "json":
+      return "{}";
+    case "sh":
+      return "$";
+    case "css":
+    case "scss":
+      return "#";
+    case "py":
+      return "PY";
+    default:
+      return "";
+  }
+}
+function getFileBgColor(ext) {
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "bg-blue-500/20";
+    case "js":
+    case "jsx":
+      return "bg-yellow-500/20";
+    case "md":
+      return "bg-white/10";
+    case "json":
+      return "bg-orange-500/20";
+    case "sh":
+      return "bg-green-500/20";
+    case "css":
+    case "scss":
+      return "bg-pink-500/20";
+    case "py":
+      return "bg-blue-400/20";
+    default:
+      return "bg-white/10";
+  }
+}
+function FileBadge({
+  path,
+  linesAdded,
+  linesRemoved,
+  showOnlyFilename = true,
+  className
+}) {
+  const fileName = showOnlyFilename ? path.split("/").pop() || path : path;
+  const ext = getFileExtension2(path);
+  const icon = getFileIcon(ext);
+  const bgColor = getFileBgColor(ext);
+  const hasDiff = linesAdded !== void 0 && linesAdded > 0 || linesRemoved !== void 0 && linesRemoved > 0;
   return /* @__PURE__ */ jsxs(
-    "div",
+    "span",
     {
       className: cn(
-        "relative rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
-        statusClasses[displayedToolCall.status],
-        displayedToolCall.status === "pending" && "ash-tool-status-pending",
+        "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-xs font-mono",
+        bgColor,
         className
       ),
       children: [
-        exitingToolCall && /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: renderToolCallContent(exitingToolCall, true) }),
-        renderToolCallContent(displayedToolCall, false)
+        icon && /* @__PURE__ */ jsx("span", { className: "text-[10px] opacity-60 font-semibold", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/80 truncate max-w-[120px]", children: fileName }),
+        hasDiff && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
+          linesAdded !== void 0 && linesAdded > 0 && /* @__PURE__ */ jsxs("span", { className: "text-emerald-400", children: [
+            "+",
+            linesAdded
+          ] }),
+          linesRemoved !== void 0 && linesRemoved > 0 && /* @__PURE__ */ jsxs("span", { className: "text-red-400", children: [
+            "-",
+            linesRemoved
+          ] })
+        ] })
       ]
     }
   );
 }
-function calculateGroupStatus(toolCalls) {
-  const hasPending = toolCalls.some((tc) => tc.status === "pending");
-  const hasFailed = toolCalls.some((tc) => tc.status === "failed");
-  const allSuccess = toolCalls.every((tc) => tc.status === "success");
-  if (hasPending) return "pending";
-  if (allSuccess) return "success";
-  if (hasFailed && !hasPending) return toolCalls.some((tc) => tc.status === "success") ? "partial_failure" : "failed";
-  return "pending";
+function extractFileChanges(toolCalls) {
+  const fileMap = /* @__PURE__ */ new Map();
+  for (const tc of toolCalls) {
+    const { actionType } = tc;
+    if (actionType.action === "file_edit") {
+      const edit = actionType;
+      const existing = fileMap.get(edit.path);
+      if (existing) {
+        existing.linesAdded = (existing.linesAdded || 0) + (edit.linesAdded || 0);
+        existing.linesRemoved = (existing.linesRemoved || 0) + (edit.linesRemoved || 0);
+      } else {
+        fileMap.set(edit.path, {
+          path: edit.path,
+          linesAdded: edit.linesAdded,
+          linesRemoved: edit.linesRemoved
+        });
+      }
+    } else if (actionType.action === "file_write") {
+      const write = actionType;
+      if (!fileMap.has(write.path)) {
+        fileMap.set(write.path, {
+          path: write.path,
+          linesAdded: write.linesWritten
+        });
+      }
+    }
+  }
+  return Array.from(fileMap.values());
+}
+function countActionTypes(toolCalls) {
+  const counts = {};
+  for (const tc of toolCalls) {
+    const action = tc.actionType.action;
+    counts[action] = (counts[action] || 0) + 1;
+  }
+  return counts;
+}
+function getActionIconComponent(action) {
+  switch (action) {
+    case "file_read":
+      return FileIcon;
+    case "file_edit":
+    case "file_write":
+      return EditIcon;
+    case "command_run":
+      return TerminalIcon;
+    case "search":
+    case "glob":
+      return SearchIcon;
+    default:
+      return null;
+  }
 }
 function ToolExecutionGroup({
   toolCalls,
   defaultExpanded = false,
-  animationDuration = 300,
   className
 }) {
   const [expanded, setExpanded] = useState(defaultExpanded);
-  const activeToolCall = toolCalls[toolCalls.length - 1];
-  const previousToolCall = toolCalls.length > 1 ? toolCalls[toolCalls.length - 2] : null;
-  const groupStatus = useMemo(() => calculateGroupStatus(toolCalls), [toolCalls]);
-  const completedCount = toolCalls.filter((tc) => tc.status === "success").length;
-  const failedCount = toolCalls.filter((tc) => tc.status === "failed").length;
+  const [expandedCardId, setExpandedCardId] = useState(null);
+  const fileChanges = useMemo(() => extractFileChanges(toolCalls), [toolCalls]);
+  const actionCounts = useMemo(() => countActionTypes(toolCalls), [toolCalls]);
+  const displayActions = useMemo(() => {
+    return Object.entries(actionCounts).sort((a, b) => b[1] - a[1]).slice(0, 3).map(([action]) => action);
+  }, [actionCounts]);
   const totalCount = toolCalls.length;
-  if (!activeToolCall) {
+  if (toolCalls.length === 0) {
     return null;
   }
-  const borderClasses = {
-    pending: "border-yellow-500/30",
-    success: "border-[var(--ash-accent)]/30",
-    partial_failure: "border-orange-500/30",
-    failed: "border-red-500/30"
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden ash-animate-fade-in",
-        borderClasses[groupStatus],
-        groupStatus === "pending" && "ash-tool-status-pending",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setExpanded(!expanded),
-            className: cn(
-              "w-full transition-colors hover:bg-white/5 cursor-pointer"
-            ),
-            children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(
-                CompactToolStatusLine,
-                {
-                  toolCall: activeToolCall,
-                  previousToolCall,
-                  animationDuration,
-                  className: "border-0 rounded-none"
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [
-                totalCount > 1 && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium",
-                      groupStatus === "pending" ? "bg-yellow-500/20 text-yellow-400" : groupStatus === "success" ? "bg-[var(--ash-accent)]/20 text-[var(--ash-accent)]" : groupStatus === "failed" ? "bg-red-500/20 text-red-400" : "bg-orange-500/20 text-orange-400"
-                    ),
-                    children: groupStatus === "pending" ? /* @__PURE__ */ jsxs("span", { children: [
-                      completedCount,
-                      "/",
-                      totalCount
-                    ] }) : failedCount > 0 ? /* @__PURE__ */ jsxs("span", { children: [
-                      completedCount,
-                      " ok, ",
-                      failedCount,
-                      " failed"
-                    ] }) : /* @__PURE__ */ jsxs("span", { children: [
-                      totalCount,
-                      " tools"
-                    ] })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  ChevronDownIcon,
-                  {
-                    className: cn(
-                      "w-4 h-4 text-white/40 transition-transform duration-200",
-                      expanded && "rotate-180"
-                    )
-                  }
-                )
-              ] })
-            ] })
-          }
-        ),
-        expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/5 bg-black/20", children: [
-          /* @__PURE__ */ jsx("div", { className: "p-3 space-y-2", children: toolCalls.map((toolCall, index) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            index < toolCalls.length - 1 && /* @__PURE__ */ jsx("div", { className: "absolute left-[19px] top-10 bottom-0 w-px bg-white/10" }),
-            /* @__PURE__ */ jsx(
-              ToolCallCard,
-              {
-                toolCall,
-                defaultExpanded: false,
-                className: "relative z-10"
-              }
-            )
-          ] }, toolCall.id)) }),
-          groupStatus !== "pending" && /* @__PURE__ */ jsx(
-            "div",
+  return /* @__PURE__ */ jsxs("div", { className: cn("ash-animate-fade-in", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "w-full flex items-center gap-2 py-1 text-left group",
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronRightIcon,
             {
               className: cn(
-                "px-4 py-3 border-t border-white/5 flex items-center gap-2",
-                groupStatus === "success" ? "bg-[var(--ash-accent)]/5" : groupStatus === "failed" ? "bg-red-500/5" : "bg-orange-500/5"
-              ),
-              children: groupStatus === "success" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }),
-                /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--ash-accent)] font-medium", children: [
-                  "All ",
-                  totalCount,
-                  " tool",
-                  totalCount !== 1 ? "s" : "",
-                  " completed successfully"
-                ] })
-              ] }) : groupStatus === "failed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(StatusIndicator, { status: "failed", size: "sm" }),
-                /* @__PURE__ */ jsxs("span", { className: "text-sm text-red-400 font-medium", children: [
-                  failedCount,
-                  " tool",
-                  failedCount !== 1 ? "s" : "",
-                  " failed"
-                ] })
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(StatusIndicator, { status: "failed", size: "sm" }),
-                /* @__PURE__ */ jsxs("span", { className: "text-sm text-orange-400 font-medium", children: [
-                  completedCount,
-                  " succeeded, ",
-                  failedCount,
-                  " failed"
-                ] })
-              ] })
+                "w-3.5 h-3.5 text-white/40 transition-transform duration-200 shrink-0",
+                expanded && "rotate-90"
+              )
             }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function formatDuration(startMs, endMs) {
-  const duration = endMs - startMs;
-  if (duration < 1e3) return `${duration}ms`;
-  return `${(duration / 1e3).toFixed(1)}s`;
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm text-white/60", children: [
+            totalCount,
+            " tool call",
+            totalCount !== 1 ? "s" : ""
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: displayActions.map((action) => {
+            const IconComponent = getActionIconComponent(action);
+            if (!IconComponent) return null;
+            return /* @__PURE__ */ jsx(
+              IconComponent,
+              {
+                className: "w-3.5 h-3.5 text-white/30"
+              },
+              action
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          !expanded && fileChanges.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-wrap justify-end", children: [
+            fileChanges.slice(0, 4).map((fc) => /* @__PURE__ */ jsx(
+              FileBadge,
+              {
+                path: fc.path,
+                linesAdded: fc.linesAdded,
+                linesRemoved: fc.linesRemoved
+              },
+              fc.path
+            )),
+            fileChanges.length > 4 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/40", children: [
+              "+",
+              fileChanges.length - 4,
+              " more"
+            ] })
+          ] })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { className: "pl-5 border-l border-white/10 ml-1.5 mt-1 space-y-0.5", children: toolCalls.map((toolCall) => /* @__PURE__ */ jsx("div", { children: expandedCardId === toolCall.id ? /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+      /* @__PURE__ */ jsx(
+        ToolCallCard,
+        {
+          toolCall,
+          defaultExpanded: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setExpandedCardId(null),
+          className: "text-xs text-white/40 hover:text-white/60 mt-1 pl-1",
+          children: "Collapse"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setExpandedCardId(toolCall.id),
+        className: "w-full text-left hover:bg-white/5 rounded px-1 -mx-1 transition-colors",
+        children: /* @__PURE__ */ jsx(CompactToolRow, { toolCall })
+      }
+    ) }, toolCall.id)) })
+  ] });
 }
-function getToolLabel(toolName, summary) {
-  if (summary && summary.length > 0 && summary.length < 50) {
-    return summary;
+function extractFileChanges2(toolCalls) {
+  const fileMap = /* @__PURE__ */ new Map();
+  for (const tc of toolCalls) {
+    const { actionType } = tc;
+    if (actionType.action === "file_edit") {
+      const edit = actionType;
+      const existing = fileMap.get(edit.path);
+      if (existing) {
+        existing.linesAdded = (existing.linesAdded || 0) + (edit.linesAdded || 0);
+        existing.linesRemoved = (existing.linesRemoved || 0) + (edit.linesRemoved || 0);
+      } else {
+        fileMap.set(edit.path, {
+          path: edit.path,
+          linesAdded: edit.linesAdded,
+          linesRemoved: edit.linesRemoved
+        });
+      }
+    } else if (actionType.action === "file_write") {
+      if (!fileMap.has(actionType.path)) {
+        fileMap.set(actionType.path, {
+          path: actionType.path,
+          linesAdded: actionType.linesWritten
+        });
+      }
+    }
   }
-  const cleaned = toolName.replace(/^mcp__[^_]+__/, "").replace(/Tool$/, "").replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2");
-  return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+  return Array.from(fileMap.values());
 }
-function toStepStatus(status) {
-  switch (status) {
-    case "pending":
-      return "running";
-    case "success":
-      return "success";
-    case "failed":
-      return "error";
-    default:
-      return "pending";
+function countActionTypes2(toolCalls) {
+  const counts = {};
+  for (const tc of toolCalls) {
+    const action = tc.actionType.action;
+    counts[action] = (counts[action] || 0) + 1;
   }
+  return counts;
 }
-function StepIcon({ status }) {
-  const iconClass = "w-3.5 h-3.5";
-  switch (status) {
-    case "running":
-      return /* @__PURE__ */ jsx(SpinnerIcon, { className: cn(iconClass, "animate-spin text-[var(--ash-accent)]") });
-    case "success":
-      return /* @__PURE__ */ jsx(CheckIcon, { className: cn(iconClass, "text-[var(--ash-accent)]") });
-    case "error":
-      return /* @__PURE__ */ jsx(ErrorIcon, { className: cn(iconClass, "text-red-500") });
+function getActionIconComponent2(action) {
+  switch (action) {
+    case "file_read":
+      return FileIcon;
+    case "file_edit":
+    case "file_write":
+      return EditIcon;
+    case "command_run":
+      return TerminalIcon;
+    case "search":
+    case "glob":
+      return SearchIcon;
     default:
-      return /* @__PURE__ */ jsx(ToolIcon, { className: cn(iconClass, "text-white/40") });
+      return null;
   }
 }
 function StepAccordion({
@@ -1591,109 +1963,70 @@ function StepAccordion({
       setInternalExpanded((prev) => !prev);
     }
   }, [onToggle]);
+  const fileChanges = useMemo(() => extractFileChanges2(toolCalls), [toolCalls]);
+  const actionCounts = useMemo(() => countActionTypes2(toolCalls), [toolCalls]);
+  const displayActions = useMemo(() => {
+    return Object.entries(actionCounts).sort((a, b) => b[1] - a[1]).slice(0, 3).map(([action]) => action);
+  }, [actionCounts]);
   if (toolCalls.length === 0) {
     return null;
   }
-  const completedSteps = toolCalls.filter((tc) => tc.status === "success" || tc.status === "failed").length;
-  const runningStep = toolCalls.find((tc) => tc.status === "pending");
-  const hasError = toolCalls.some((tc) => tc.status === "failed");
-  const allComplete = completedSteps === toolCalls.length;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "rounded-xl border overflow-hidden",
-        hasError ? "border-red-500/30" : allComplete ? "border-[var(--ash-accent)]/30" : "border-yellow-500/30",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: handleToggle,
-            className: "w-full flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 transition-colors text-left cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsx(
-                ChevronDownIcon,
-                {
-                  className: cn(
-                    "w-4 h-4 text-white/40 transition-transform duration-200 flex-shrink-0",
-                    !isExpanded && "-rotate-90"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 flex items-center gap-2", children: runningStep ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(SpinnerIcon, { className: "w-3.5 h-3.5 animate-spin text-[var(--ash-accent)] flex-shrink-0" }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm text-white/80 truncate", children: getToolLabel(runningStep.toolName, runningStep.summary) })
-              ] }) : hasError ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(ErrorIcon, { className: "w-3.5 h-3.5 text-red-500 flex-shrink-0" }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm text-red-400 truncate", children: "Completed with errors" })
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(CheckIcon, { className: "w-3.5 h-3.5 text-[var(--ash-accent)] flex-shrink-0" }),
-                /* @__PURE__ */ jsxs("span", { className: "text-sm text-white/70 truncate", children: [
-                  completedSteps,
-                  " step",
-                  completedSteps !== 1 ? "s" : "",
-                  " completed"
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsxs("span", { className: "text-xs px-1.5 py-0.5 rounded-full bg-white/10 text-white/50 flex-shrink-0", children: [
-                completedSteps,
-                "/",
-                toolCalls.length
-              ] })
-            ]
-          }
-        ),
-        isExpanded && /* @__PURE__ */ jsx("div", { className: "border-t border-white/10 ash-accordion-content", children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: toolCalls.map((toolCall, index) => {
-          const stepStatus = toStepStatus(toolCall.status);
-          const startTime = toolCall.startedAt ? new Date(toolCall.startedAt).getTime() : 0;
-          const endTime = toolCall.completedAt ? new Date(toolCall.completedAt).getTime() : 0;
-          const hasDuration = startTime > 0 && endTime > 0;
-          return /* @__PURE__ */ jsxs(
-            "div",
+  const totalCount = toolCalls.length;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ash-animate-fade-in", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleToggle,
+        className: "w-full flex items-center gap-2 py-1 text-left group",
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronRightIcon,
             {
               className: cn(
-                "px-3 py-2 flex items-start gap-2",
-                stepStatus === "running" && "bg-[var(--ash-accent)]/5",
-                stepStatus === "error" && "bg-red-500/5"
-              ),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0 pt-0.5", children: [
-                  /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/40 w-4 text-right", children: [
-                    index + 1,
-                    "."
-                  ] }),
-                  /* @__PURE__ */ jsx(StepIcon, { status: stepStatus })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "text-sm",
-                          stepStatus === "running" && "text-[var(--ash-accent)]",
-                          stepStatus === "success" && "text-white/70",
-                          stepStatus === "error" && "text-red-400",
-                          stepStatus === "pending" && "text-white/40"
-                        ),
-                        children: getToolLabel(toolCall.toolName, toolCall.summary)
-                      }
-                    ),
-                    hasDuration && (stepStatus === "success" || stepStatus === "error") && /* @__PURE__ */ jsx("span", { className: "text-xs text-white/40", children: formatDuration(startTime, endTime) })
-                  ] }),
-                  toolCall.isError && toolCall.actionType && "result" in toolCall.actionType && /* @__PURE__ */ jsx("p", { className: "text-xs mt-1 text-red-400/80 truncate", children: String(toolCall.actionType.result?.value || "Error") })
-                ] })
-              ]
-            },
-            toolCall.id
-          );
-        }) }) })
-      ]
-    }
-  );
+                "w-3.5 h-3.5 text-white/40 transition-transform duration-200 shrink-0",
+                isExpanded && "rotate-90"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm text-white/60", children: [
+            totalCount,
+            " tool call",
+            totalCount !== 1 ? "s" : ""
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: displayActions.map((action) => {
+            const IconComponent = getActionIconComponent2(action);
+            if (!IconComponent) return null;
+            return /* @__PURE__ */ jsx(
+              IconComponent,
+              {
+                className: "w-3.5 h-3.5 text-white/30"
+              },
+              action
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          !isExpanded && fileChanges.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-wrap justify-end", children: [
+            fileChanges.slice(0, 4).map((fc) => /* @__PURE__ */ jsx(
+              FileBadge,
+              {
+                path: fc.path,
+                linesAdded: fc.linesAdded,
+                linesRemoved: fc.linesRemoved
+              },
+              fc.path
+            )),
+            fileChanges.length > 4 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/40", children: [
+              "+",
+              fileChanges.length - 4,
+              " more"
+            ] })
+          ] })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("div", { className: "pl-5 border-l border-white/10 ml-1.5 mt-1 space-y-0.5", children: toolCalls.map((toolCall) => /* @__PURE__ */ jsx(CompactToolRow, { toolCall }, toolCall.id)) })
+  ] });
 }
 
 // src/types.ts
@@ -1730,6 +2063,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";
 }
@@ -1796,10 +2132,18 @@ function MessageList({
   onOptionSelect,
   renderWidget,
   onWidgetAction,
+  autoScroll = true,
   className
 }) {
   const contextConfig = useDisplayConfig();
   const config = displayConfigProp || contextConfig;
+  const containerRef = useRef(null);
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    if (autoScroll && messagesEndRef.current && containerRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
+    }
+  }, [entries, streamingContent, loading, autoScroll]);
   const createWidgetActionHandler = useCallback(
     (entryId, widgetType) => {
       if (!onWidgetAction) return void 0;
@@ -1823,7 +2167,7 @@ function MessageList({
     }
     return groupEntriesForCompactMode(entries, config);
   }, [entries, config]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto p-4 space-y-4 ash-scrollbar", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("flex-1 overflow-y-auto p-4 space-y-4 ash-scrollbar", className), children: [
     groupedEntries.map((groupedEntry) => {
       if (groupedEntry.type === "single") {
         const entry = groupedEntry.entry;
@@ -1839,7 +2183,7 @@ function MessageList({
             return /* @__PURE__ */ jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
           }
         }
-        return /* @__PURE__ */ jsx(MessageEntry, { entry, onOptionSelect }, entry.id);
+        return /* @__PURE__ */ jsx(MessageEntry, { entry, onOptionSelect, defaultExpanded: config.defaultExpanded }, entry.id);
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
@@ -1867,7 +2211,8 @@ function MessageList({
     loading && !streamingContent && /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
       /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
       /* @__PURE__ */ jsx("div", { className: "rounded-xl p-3 bg-white/5", children: /* @__PURE__ */ jsx(LoadingIndicator, { variant: "dots" }) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
   ] });
 }
 function getLevelIcon(level) {
@@ -2014,6 +2359,94 @@ function LogsPanel({
     }
   );
 }
+function CompactToolStatusLine({
+  toolCall,
+  previousToolCall,
+  animationDuration = 300,
+  className
+}) {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [displayedToolCall, setDisplayedToolCall] = useState(toolCall);
+  const [exitingToolCall, setExitingToolCall] = useState(null);
+  const prevToolCallRef = useRef(null);
+  useEffect(() => {
+    if (toolCall.id !== prevToolCallRef.current) {
+      if (prevToolCallRef.current !== null && previousToolCall) {
+        setExitingToolCall(previousToolCall);
+        setIsAnimating(true);
+        const timer = setTimeout(() => {
+          setDisplayedToolCall(toolCall);
+          setExitingToolCall(null);
+          setIsAnimating(false);
+        }, animationDuration);
+        prevToolCallRef.current = toolCall.id;
+        return () => clearTimeout(timer);
+      } else {
+        setDisplayedToolCall(toolCall);
+        prevToolCallRef.current = toolCall.id;
+      }
+    } else {
+      setDisplayedToolCall(toolCall);
+    }
+    return void 0;
+  }, [toolCall, previousToolCall, animationDuration]);
+  const statusClasses = {
+    pending: "border-yellow-500/30",
+    success: "border-[var(--ash-accent)]/30",
+    failed: "border-red-500/30"
+  };
+  const renderToolCallContent = (tc, isExiting) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 px-4 py-2.5",
+        isExiting ? "ash-status-line-exit" : isAnimating ? "ash-status-line-enter" : ""
+      ),
+      style: {
+        animationDuration: `${animationDuration}ms`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
+              tc.status === "pending" ? "bg-yellow-500/20" : tc.status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
+            ),
+            children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                actionType: tc.actionType,
+                className: cn(
+                  "w-3.5 h-3.5",
+                  tc.status === "pending" ? "text-yellow-400" : tc.status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(tc.actionType) }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-sm truncate text-white/60 flex-1 min-w-0", children: tc.summary }),
+        /* @__PURE__ */ jsx(StatusIndicator, { status: tc.status, size: "sm" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
+        statusClasses[displayedToolCall.status],
+        displayedToolCall.status === "pending" && "ash-tool-status-pending",
+        className
+      ),
+      children: [
+        exitingToolCall && /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: renderToolCallContent(exitingToolCall, true) }),
+        renderToolCallContent(displayedToolCall, false)
+      ]
+    }
+  );
+}
 function TodoStatusIcon({ status, className = "w-4 h-4" }) {
   switch (status) {
     case "completed":
@@ -3073,6 +3506,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);
@@ -3118,7 +3569,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);
@@ -3173,7 +3624,79 @@ function useAgentChat(options) {
     setEntries
   };
 }
+function textToBase64(text) {
+  const encoder = new TextEncoder();
+  const bytes = encoder.encode(text);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    const byte = bytes[i];
+    if (byte !== void 0) {
+      binary += String.fromCharCode(byte);
+    }
+  }
+  return btoa(binary);
+}
+function generateFilename(template) {
+  const timestamp = Date.now();
+  const date = new Date(timestamp);
+  const dateStr = date.toISOString().split("T")[0] ?? "unknown-date";
+  const timeStr = (date.toTimeString().split(" ")[0] ?? "00-00-00").replace(/:/g, "-");
+  return template.replace("{timestamp}", String(timestamp)).replace("{date}", dateStr).replace("{time}", timeStr);
+}
+function useLongTextConversion({
+  threshold = 5e3,
+  filenameTemplate = "pasted-text-{timestamp}.txt",
+  onConversion
+} = {}) {
+  const [lastConversion, setLastConversion] = useState(null);
+  const processText = useCallback((text) => {
+    if (text.length <= threshold) {
+      return { text };
+    }
+    const filename = generateFilename(filenameTemplate);
+    const content = textToBase64(text);
+    const encoder = new TextEncoder();
+    const size = encoder.encode(text).length;
+    const lineCount = text.split("\n").length;
+    const attachment = {
+      filename,
+      content,
+      mimeType: "text/plain",
+      size
+    };
+    const preview = text.slice(0, 100) + (text.length > 100 ? "..." : "");
+    const conversionInfo = {
+      originalLength: text.length,
+      filename,
+      preview,
+      lineCount
+    };
+    setLastConversion(conversionInfo);
+    onConversion?.(conversionInfo);
+    return { text: "", attachment };
+  }, [threshold, filenameTemplate, onConversion]);
+  const handlePaste = useCallback((event, _currentValue, _setValue, addAttachment) => {
+    const pastedText = event.clipboardData.getData("text/plain");
+    if (pastedText.length > threshold) {
+      event.preventDefault();
+      const result = processText(pastedText);
+      if (result.attachment) {
+        addAttachment(result.attachment);
+      }
+    }
+  }, [threshold, processText]);
+  const clearLastConversion = useCallback(() => {
+    setLastConversion(null);
+  }, []);
+  return {
+    processText,
+    handlePaste,
+    lastConversion,
+    clearLastConversion,
+    threshold
+  };
+}
 
-export { ActionIcon, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeBlock, CodeIcon, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StatusIndicator, StepAccordion, StopCircleIcon, StreamingText, SunIcon, TerminalIcon, ThemeProvider, ThinkingMessage, TodoPanel, ToolCallCard, ToolCallMessage, ToolExecutionGroup, ToolIcon, TypewriterText, UserIcon, UserMessage, XCircleIcon, XIcon, allKeyframesCss, borderRadius, cn, colors, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry, keyframes, keyframesCss, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
+export { ActionIcon, AgentToolCard, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, ClockIcon, CodeBlock, CodeIcon, CompactToolRow, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileBadge, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, LazyMarkdown, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StatusIndicator, StepAccordion, StopCircleIcon, StreamingText, SunIcon, TerminalIcon, ThemeProvider, ThinkingMessage, TodoPanel, ToolCallCard, ToolCallMessage, ToolExecutionGroup, ToolIcon, TypewriterText, UserIcon, UserMessage, XCircleIcon, XIcon, allKeyframesCss, borderRadius, cn, colors, createToolCall, extractTextContent, extractToolCallsFromGroup, formatElapsedTime, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isAgentToolAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry, keyframes, keyframesCss, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useLongTextConversion, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map