@ash-cloud/ash-ui 0.0.6 → 0.0.7

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useState, useRef, useEffect, useMemo, useCallback, useContext } from 'react';
+import { createContext, useState, useMemo, useCallback, useContext, useRef, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 
@@ -35,27 +35,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",
@@ -1304,275 +1318,422 @@ function StreamingText({
     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 +1752,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
@@ -1796,10 +1918,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 +1953,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;
@@ -1867,7 +1997,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 +2145,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":
@@ -3173,7 +3392,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, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeBlock, CodeIcon, CompactToolRow, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileBadge, 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, useLongTextConversion, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map