@ash-cloud/ash-ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { lazy, createContext, useState, useRef, useMemo, useEffect, Suspense, Fragment, useCallback, useContext } from 'react';
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { createContext, lazy, useContext, useRef, useState, useCallback, useEffect, useMemo, Suspense } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/components/ToolCallCard.tsx
+// src/components/Conversation.tsx
 
 // src/utils.ts
 function formatToolName(name) {
@@ -360,39 +360,6 @@ function truncate(str, maxLength) {
 function cn(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-function groupEntriesForCompactMode(entries, config) {
-  const result = [];
-  let currentToolGroup = [];
-  let toolGroupCounter = 0;
-  const flushToolGroup = () => {
-    if (currentToolGroup.length > 0) {
-      result.push({
-        type: "tool_group",
-        entries: [...currentToolGroup],
-        id: `tool-group-${toolGroupCounter++}`
-      });
-      currentToolGroup = [];
-    }
-  };
-  for (const entry of entries) {
-    if (entry.entryType.type === "tool_call") {
-      currentToolGroup.push(entry);
-      if (config.breakEveryNToolCalls && config.breakEveryNToolCalls > 0 && currentToolGroup.length >= config.breakEveryNToolCalls) {
-        flushToolGroup();
-      }
-    } else {
-      flushToolGroup();
-      result.push({ type: "single", entry });
-    }
-  }
-  flushToolGroup();
-  return result;
-}
-function extractToolCallsFromGroup(entries) {
-  return entries.filter(
-    (e) => e.entryType.type === "tool_call"
-  ).map((e) => e.entryType.toolCall);
-}
 function parseOptionsFromContent(content) {
   const optionPattern = /(?:\*\*)?Option\s+(\d+)(?:\*\*)?[:\-]\s*([^\n]+)(?:\n((?:(?!\n(?:\*\*)?Option\s+\d).)*?))?/gi;
   const options = [];
@@ -442,6 +409,376 @@ function parseOptionsFromContent(content) {
   }
   return null;
 }
+var ConversationContext = createContext(null);
+function useConversation() {
+  const context = useContext(ConversationContext);
+  if (!context) {
+    throw new Error("useConversation must be used within a Conversation");
+  }
+  return context;
+}
+function Conversation({
+  children,
+  className,
+  autoScroll: initialAutoScroll = true,
+  scrollThreshold = 100
+}) {
+  const containerRef = useRef(null);
+  const [isScrolledUp, setIsScrolledUp] = useState(false);
+  const [autoScroll, setAutoScroll] = useState(initialAutoScroll);
+  const scrollToBottom = useCallback((behavior = "smooth") => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        top: containerRef.current.scrollHeight,
+        behavior
+      });
+    }
+  }, []);
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    const isAtBottom = distanceFromBottom < scrollThreshold;
+    setIsScrolledUp(!isAtBottom);
+    if (isAtBottom && !autoScroll) {
+      setAutoScroll(true);
+    }
+  }, [scrollThreshold, autoScroll]);
+  useEffect(() => {
+    if (autoScroll && !isScrolledUp) {
+      scrollToBottom("instant");
+    }
+  });
+  const contextValue = {
+    containerRef,
+    scrollToBottom,
+    isScrolledUp,
+    autoScroll,
+    setAutoScroll
+  };
+  return /* @__PURE__ */ jsx(ConversationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      onScroll: handleScroll,
+      className: cn(
+        "ash-conversation flex flex-col overflow-y-auto",
+        "ash-scrollbar",
+        className
+      ),
+      role: "log",
+      "aria-live": "polite",
+      children
+    }
+  ) });
+}
+function ConversationContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-conversation-content flex flex-col",
+        "gap-[var(--ash-message-list-gap,0.25rem)]",
+        "p-[var(--ash-spacing-md,0.75rem)]",
+        className
+      ),
+      children
+    }
+  );
+}
+function ConversationEmptyState({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-conversation-empty flex flex-col items-center justify-center",
+        "flex-1 min-h-[200px] text-center",
+        "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+        className
+      ),
+      children
+    }
+  );
+}
+function ConversationScrollButton({
+  className,
+  label = "Scroll to bottom"
+}) {
+  const { isScrolledUp, scrollToBottom } = useConversation();
+  if (!isScrolledUp) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => scrollToBottom(),
+      className: cn(
+        "ash-conversation-scroll-btn",
+        "fixed bottom-20 left-1/2 -translate-x-1/2",
+        "px-4 py-2 rounded-full",
+        "bg-[var(--ash-surface-elevated,#111)] border border-[var(--ash-border,rgba(255,255,255,0.08))]",
+        "text-[var(--ash-text-secondary,rgba(255,255,255,0.7))] text-sm",
+        "hover:bg-[var(--ash-surface-card,#0c0c0c)] hover:border-[var(--ash-border-emphasis,rgba(255,255,255,0.15))]",
+        "transition-all duration-200",
+        "shadow-lg",
+        className
+      ),
+      "aria-label": label,
+      children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-4 h-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 14l-7 7m0 0l-7-7m7 7V3"
+              }
+            )
+          }
+        ),
+        label
+      ] })
+    }
+  );
+}
+var ReactMarkdown = lazy(() => import('react-markdown'));
+function LazyMarkdown({ children, fallback, components, className }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const markdownComponents = useMemo(() => {
+    if (!components) return void 0;
+    return components;
+  }, [components]);
+  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, { components: markdownComponents, children }) });
+}
+var MessageContext = createContext(null);
+function useMessage() {
+  const context = useContext(MessageContext);
+  if (!context) {
+    throw new Error("useMessage must be used within a Message");
+  }
+  return context;
+}
+function Message({
+  from,
+  children,
+  className,
+  isStreaming,
+  toolInvocations,
+  id
+}) {
+  const contextValue = {
+    from,
+    isStreaming,
+    toolInvocations
+  };
+  const roleMap = {
+    user: "user",
+    assistant: "assistant",
+    system: "system"
+  };
+  return /* @__PURE__ */ jsx(MessageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-message",
+        "flex gap-[var(--ash-message-gap,0.5rem)]",
+        from === "user" && "flex-row-reverse",
+        className
+      ),
+      "data-message-role": roleMap[from],
+      "data-message-id": id,
+      children
+    }
+  ) });
+}
+function MessageAvatar({ src, fallback, className }) {
+  const { from } = useMessage();
+  const defaultFallback = from === "user" ? "U" : from === "assistant" ? "A" : "S";
+  const displayFallback = fallback || defaultFallback;
+  const bgColorMap = {
+    user: "var(--ash-avatar-user-bg,rgba(255,255,255,0.1))",
+    assistant: "var(--ash-avatar-assistant-bg,#10a37f)",
+    system: "var(--ash-avatar-user-bg,rgba(255,255,255,0.1))"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-message-avatar flex-shrink-0",
+        "w-[var(--ash-avatar-size,1.25rem)] h-[var(--ash-avatar-size,1.25rem)]",
+        "rounded-full flex items-center justify-center",
+        "text-[var(--ash-font-size-xs,10px)] font-medium",
+        from === "assistant" ? "text-white" : "text-[var(--ash-text-secondary,rgba(255,255,255,0.7))]",
+        className
+      ),
+      style: { backgroundColor: bgColorMap[from] },
+      children: src ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: `${from} avatar`,
+          className: "w-full h-full rounded-full object-cover"
+        }
+      ) : displayFallback
+    }
+  );
+}
+function MessageContent({ children, className }) {
+  const { from } = useMessage();
+  const roleStyles = {
+    user: cn(
+      "bg-[var(--ash-user-bg,#5B6EF5)]",
+      "text-[var(--ash-user-text,#ffffff)]",
+      "border-[var(--ash-user-border,transparent)]"
+    ),
+    assistant: cn(
+      "bg-[var(--ash-assistant-bg,#1a1a1a)]",
+      "text-[var(--ash-assistant-text,rgba(255,255,255,0.9))]",
+      "border-[var(--ash-assistant-border,rgba(255,255,255,0.08))]"
+    ),
+    system: cn(
+      "bg-[var(--ash-surface-elevated,#111111)]",
+      "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+      "border-[var(--ash-border,rgba(255,255,255,0.08))]"
+    )
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-message-content",
+        "flex-1 min-w-0",
+        "rounded-[var(--ash-radius-lg,0.75rem)]",
+        "p-[var(--ash-message-padding,0.5rem_0.75rem)]",
+        "border",
+        roleStyles[from],
+        from === "user" && "rounded-tr-sm",
+        from === "assistant" && "rounded-tl-sm",
+        className
+      ),
+      children
+    }
+  );
+}
+function MessageResponse({
+  content,
+  isStreaming,
+  className,
+  components
+}) {
+  if (!content) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-message-response",
+        "font-[var(--ash-font-size-base,13px)]",
+        "leading-relaxed",
+        isStreaming && "animate-pulse",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(LazyMarkdown, { components, children: content })
+    }
+  );
+}
+function MessageActions({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-message-actions",
+        "flex items-center gap-1 mt-2",
+        "opacity-0 group-hover:opacity-100 transition-opacity",
+        className
+      ),
+      children
+    }
+  );
+}
+function MessageAction({
+  icon,
+  label,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "ash-message-action",
+        "p-1.5 rounded-md",
+        "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+        "hover:text-[var(--ash-text-secondary,rgba(255,255,255,0.7))]",
+        "hover:bg-[var(--ash-surface-elevated,#111111)]",
+        "transition-colors",
+        className
+      ),
+      title: label,
+      "aria-label": label,
+      children: icon || label
+    }
+  );
+}
+function MessageTimestamp({ timestamp, className }) {
+  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  const formatted = date.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ash-message-timestamp",
+        "text-[var(--ash-font-size-xs,10px)]",
+        "text-[var(--ash-text-faint,rgba(255,255,255,0.3))]",
+        className
+      ),
+      children: formatted
+    }
+  );
+}
+function StatusIndicator({ status, size = "sm", className }) {
+  const sizeClasses = {
+    sm: "w-2 h-2",
+    md: "w-3 h-3",
+    lg: "w-4 h-4"
+  };
+  const statusClasses = {
+    pending: "ash-status-pending",
+    success: "ash-status-success",
+    failed: "ash-status-failed"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-full flex-shrink-0",
+        sizeClasses[size],
+        statusClasses[status],
+        className
+      )
+    }
+  );
+}
 function SunIcon({ 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: "5" }),
@@ -692,57 +1029,25 @@ function ErrorIcon({ className }) {
     /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
   ] });
 }
-function StatusIndicator({ status, size = "sm", className }) {
-  const sizeClasses = {
-    sm: "w-2 h-2",
-    md: "w-3 h-3",
-    lg: "w-4 h-4"
-  };
-  const statusClasses = {
-    pending: "ash-status-pending",
-    success: "ash-status-success",
-    failed: "ash-status-failed"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "rounded-full flex-shrink-0",
-        sizeClasses[size],
-        statusClasses[status],
-        className
-      )
-    }
-  );
+function MicrophoneIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+  ] });
 }
-function ActionIcon({ actionType, className = "w-4 h-4" }) {
-  switch (actionType.action) {
-    case "command_run":
-      return /* @__PURE__ */ jsx(TerminalIcon, { className });
-    case "file_read":
-      return /* @__PURE__ */ jsx(FileIcon, { className });
-    case "file_edit":
-      return /* @__PURE__ */ jsx(EditIcon, { className });
-    case "file_write":
-      return /* @__PURE__ */ jsx(FilePlusIcon, { className });
-    case "search":
-      return /* @__PURE__ */ jsx(SearchIcon, { className });
-    case "glob":
-      return /* @__PURE__ */ jsx(FolderSearchIcon, { className });
-    case "web_fetch":
-      return /* @__PURE__ */ jsx(GlobeIcon, { className });
-    case "web_search":
-      return /* @__PURE__ */ jsx(SearchIcon, { className });
-    case "mcp_tool":
-      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 });
-  }
+function HomeIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+    /* @__PURE__ */ jsx("polyline", { points: "9 22 9 12 15 12 15 22" })
+  ] });
+}
+function ArrowUpIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+    /* @__PURE__ */ jsx("polyline", { points: "5 12 12 5 19 12" })
+  ] });
 }
 function CodeBlock({
   children,
@@ -752,14 +1057,41 @@ function CodeBlock({
   className
 }) {
   const [expanded, setExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
   const lines = children.split("\n");
   const isLong = lines.length > 10 || children.length > 500;
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(children);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  }, [children]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative rounded-lg overflow-hidden border border-white/10", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-[var(--ash-code-header-bg)] border-b border-white/10", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-white/60 font-medium", children: language || "code" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "flex items-center gap-1.5 text-xs text-white/60 hover:text-white transition-colors",
+          children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CheckIcon, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx("span", { children: "Copied!" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CopyIcon, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx("span", { children: "Copy" })
+          ] })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       "pre",
       {
         className: cn(
-          "ash-tool-code-block text-xs font-mono text-white/90 p-3 rounded-xl overflow-x-auto whitespace-pre-wrap break-words",
+          "text-xs font-mono text-white/90 p-4 bg-black/30 overflow-x-auto whitespace-pre-wrap break-words",
           !expanded && isLong && "overflow-y-hidden"
         ),
         style: !expanded && isLong ? { maxHeight } : void 0,
@@ -792,1519 +1124,1173 @@ 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,
+var ToolContext = createContext(null);
+function useTool() {
+  const context = useContext(ToolContext);
+  if (!context) {
+    throw new Error("useTool must be used within a Tool");
+  }
+  return context;
+}
+function Tool({
+  toolInvocation,
+  children,
   className,
-  depth = 0
+  defaultExpanded = false
 }) {
-  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 [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const toggleExpanded = () => setIsExpanded((prev) => !prev);
+  const contextValue = {
+    toolInvocation,
+    isExpanded,
+    toggleExpanded
+  };
+  const status = toolInvocation.state === "result" ? "success" : "pending";
+  const isErrorResult = Boolean(
+    toolInvocation.result && typeof toolInvocation.result === "object" && "error" in toolInvocation.result
+  );
+  return /* @__PURE__ */ jsx(ToolContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-tool",
+        "rounded-[var(--ash-radius-md,0.5rem)]",
+        "border border-[var(--ash-border,rgba(255,255,255,0.08))]",
+        "bg-[var(--ash-tool-bg,var(--ash-surface-dark,#0a0a0a))]",
+        "overflow-hidden",
+        status === "pending" && "ash-tool-status-pending",
+        isErrorResult && "border-red-500/30",
+        className
+      ),
+      "data-tool-name": toolInvocation.toolName,
+      "data-tool-state": toolInvocation.state,
+      children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ToolHeader, {}),
+        isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ToolInput, {}),
+          /* @__PURE__ */ jsx(ToolOutput, {})
+        ] })
+      ] })
     }
-    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("");
+  ) });
+}
+function ToolHeader({
+  className,
+  icon,
+  showToggle = true
+}) {
+  const { toolInvocation, isExpanded, toggleExpanded } = useTool();
+  const status = toolInvocation.state === "result" ? "success" : "pending";
+  const formattedName = formatToolName(toolInvocation.toolName);
+  const toolIcon = icon;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: showToggle ? toggleExpanded : void 0,
+      className: cn(
+        "ash-tool-header",
+        "w-full flex items-center gap-2",
+        "px-3 py-2",
+        "text-left",
+        showToggle && "cursor-pointer hover:bg-white/[0.03] transition-colors",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(StatusIndicator, { status, size: "sm" }),
+        toolIcon ? /* @__PURE__ */ jsx("span", { className: "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]", children: toolIcon }) : /* @__PURE__ */ jsx("span", { className: "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]", children: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
+          /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex-1 font-medium",
+              "text-[var(--ash-font-size-sm,12px)]",
+              "text-[var(--ash-text-primary,rgba(255,255,255,0.9))]"
+            ),
+            children: formattedName
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-[var(--ash-font-size-xs,10px)]",
+              "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+              "truncate max-w-[200px]"
+            ),
+            children: Object.keys(toolInvocation.args).length > 0 && `(${Object.keys(toolInvocation.args).join(", ")})`
+          }
+        ),
+        showToggle && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cn(
+              "w-4 h-4 text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+              "transition-transform",
+              isExpanded && "rotate-180"
+            ),
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 9l-7 7-7-7"
+              }
+            )
+          }
+        )
+      ]
     }
-    return void 0;
-  }, [isRunning, startedAt]);
-  if (!agentData) {
+  );
+}
+function ToolInput({ className, maxHeight = 200 }) {
+  const { toolInvocation } = useTool();
+  if (!toolInvocation.args || Object.keys(toolInvocation.args).length === 0) {
     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,
+        "ash-tool-input",
+        "border-t border-[var(--ash-border-subtle,rgba(255,255,255,0.04))]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx("div", { className: "ash-tool-section-header", children: "Input" }),
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            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: "..." })
-            ]
+            className: "p-3 overflow-auto",
+            style: { maxHeight },
+            children: /* @__PURE__ */ jsx(JsonDisplay, { value: toolInvocation.args })
           }
-        ),
-        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 });
-}
-function SectionContent({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children });
-}
-function CommandRunDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    action.command && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "COMMAND" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { children: action.command }) })
-    ] }),
-    action.result?.output && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "OUTPUT" }),
-      /* @__PURE__ */ jsxs(SectionContent, { children: [
-        /* @__PURE__ */ jsx(CodeBlock, { maxHeight: 300, children: action.result.output }),
-        action.result.exitCode !== void 0 && action.result.exitCode !== 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-red-400", children: [
-          "Exit code: ",
-          action.result.exitCode
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function FileReadDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(SectionHeader, { children: "PATH" }),
-    /* @__PURE__ */ jsxs(SectionContent, { children: [
-      /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }),
-      (action.offset !== void 0 || action.limit !== void 0) && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
-        action.offset !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-          "Offset: ",
-          action.offset
-        ] }),
-        action.offset !== void 0 && action.limit !== void 0 && /* @__PURE__ */ jsx("span", { children: " \xB7 " }),
-        action.limit !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-          "Limit: ",
-          action.limit
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function FileEditDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(SectionHeader, { children: "PATH" }),
-    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }) }),
-    action.oldString && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "OLD" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { children: action.oldString }) })
-    ] }),
-    action.newString && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "NEW" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { children: action.newString }) })
-    ] })
-  ] });
-}
-function FileWriteDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(SectionHeader, { children: "PATH" }),
-    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }) }),
-    action.content && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "CONTENT" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { maxHeight: 300, children: action.content }) })
-    ] })
-  ] });
-}
-function SearchDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(SectionHeader, { children: "PATTERN" }),
-    /* @__PURE__ */ jsxs(SectionContent, { children: [
-      /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.pattern }),
-      (action.path || action.glob || action.type) && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
-        action.path && /* @__PURE__ */ jsxs("span", { children: [
-          "Path: ",
-          action.path
-        ] }),
-        action.glob && /* @__PURE__ */ jsxs("span", { children: [
-          "Glob: ",
-          action.glob
-        ] }),
-        action.type && /* @__PURE__ */ jsxs("span", { children: [
-          "Type: ",
-          action.type
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function GlobDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(SectionHeader, { children: "PATTERN" }),
-    /* @__PURE__ */ jsxs(SectionContent, { children: [
-      /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.pattern }),
-      action.path && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
-        "Path: ",
-        action.path
-      ] })
-    ] })
-  ] });
-}
-function WebFetchDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(SectionHeader, { children: "URL" }),
-    /* @__PURE__ */ jsxs(SectionContent, { children: [
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: action.url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "text-xs text-blue-400 hover:text-blue-300 underline break-all",
-          children: action.url
-        }
-      ),
-      action.prompt && /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-white/50", children: action.prompt })
-    ] })
-  ] });
-}
-function WebSearchDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(SectionHeader, { children: "QUERY" }),
-    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-white/90", children: action.query }) })
-  ] });
-}
-function McpToolDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(SectionHeader, { children: "TOOL" }),
-    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsxs("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: [
-      action.serverName,
-      ":",
-      action.toolName
-    ] }) }),
-    action.arguments && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "ARGS" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(JsonDisplay, { value: action.arguments }) })
-    ] }),
-    action.result && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "RESULT" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) })
-    ] })
-  ] });
-}
-function GenericToolDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    action.arguments && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "ARGS" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(JsonDisplay, { value: action.arguments }) })
-    ] }),
-    action.result && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "RESULT" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) })
-    ] })
-  ] });
-}
-function TodoWriteDetails({ action }) {
-  const { todos, stats } = action;
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    stats && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "PROGRESS" }),
-      /* @__PURE__ */ jsxs(SectionContent, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-1 h-2 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "h-full bg-emerald-400 rounded-full transition-all duration-500 ease-out",
-              style: { width: `${stats.total > 0 ? stats.completed / stats.total * 100 : 0}%` }
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/60 tabular-nums", children: [
-            stats.completed,
-            "/",
-            stats.total
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-2 text-xs", children: [
-          stats.inProgress > 0 && /* @__PURE__ */ jsxs("span", { className: "text-yellow-400", children: [
-            stats.inProgress,
-            " in progress"
-          ] }),
-          stats.pending > 0 && /* @__PURE__ */ jsxs("span", { className: "text-white/40", children: [
-            stats.pending,
-            " pending"
-          ] })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(SectionHeader, { children: "TASKS" }),
-    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: todos.map((todo, index) => {
-      const displayText = todo.status === "in_progress" ? todo.activeForm : todo.content;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex items-start gap-2 py-1 transition-all duration-200",
-            todo.status === "completed" && "opacity-50",
-            todo.status === "in_progress" && "bg-yellow-500/10 -mx-2 px-2 rounded"
-          ),
-          children: [
-            todo.status === "completed" ? /* @__PURE__ */ jsx(CheckCircleIcon, { className: "w-4 h-4 text-emerald-400 shrink-0 mt-0.5" }) : todo.status === "in_progress" ? /* @__PURE__ */ jsx(LoaderIcon, { className: "w-4 h-4 text-yellow-400 animate-spin shrink-0 mt-0.5" }) : /* @__PURE__ */ jsx(CircleIcon, { className: "w-4 h-4 text-white/30 shrink-0 mt-0.5" }),
-            /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: cn(
-                  "text-sm leading-relaxed",
-                  todo.status === "completed" ? "text-white/50 line-through" : "text-white/80"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxs("span", { className: "text-white/40 mr-1.5", children: [
-                    index + 1,
-                    "."
-                  ] }),
-                  displayText
-                ]
-              }
-            )
-          ]
-        },
-        `${todo.content}-${index}`
-      );
-    }) }) })
-  ] });
-}
-function ToolDetails({ actionType }) {
-  switch (actionType.action) {
-    case "command_run":
-      return /* @__PURE__ */ jsx(CommandRunDetails, { action: actionType });
-    case "file_read":
-      return /* @__PURE__ */ jsx(FileReadDetails, { action: actionType });
-    case "file_edit":
-      return /* @__PURE__ */ jsx(FileEditDetails, { action: actionType });
-    case "file_write":
-      return /* @__PURE__ */ jsx(FileWriteDetails, { action: actionType });
-    case "search":
-      return /* @__PURE__ */ jsx(SearchDetails, { action: actionType });
-    case "glob":
-      return /* @__PURE__ */ jsx(GlobDetails, { action: actionType });
-    case "web_fetch":
-      return /* @__PURE__ */ jsx(WebFetchDetails, { action: actionType });
-    case "web_search":
-      return /* @__PURE__ */ jsx(WebSearchDetails, { action: actionType });
-    case "mcp_tool":
-      return /* @__PURE__ */ jsx(McpToolDetails, { action: actionType });
-    case "generic_tool":
-      return /* @__PURE__ */ jsx(GenericToolDetails, { action: actionType });
-    case "todo_write":
-      return /* @__PURE__ */ jsx(TodoWriteDetails, { action: actionType });
-    default:
-      return null;
-  }
-}
-function hasDetails(actionType) {
-  switch (actionType.action) {
-    case "command_run":
-      return Boolean(actionType.command || actionType.result?.output);
-    case "file_read":
-      return true;
-    case "file_edit":
-      return Boolean(actionType.oldString || actionType.newString);
-    case "file_write":
-      return Boolean(actionType.content);
-    case "search":
-      return true;
-    case "glob":
-      return true;
-    case "web_fetch":
-      return true;
-    case "web_search":
-      return true;
-    case "mcp_tool":
-      return Boolean(actionType.arguments || actionType.result);
-    case "generic_tool":
-      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;
-  }
-}
-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
-      }
-    );
+function ToolOutput({ className, maxHeight = 300 }) {
+  const { toolInvocation } = useTool();
+  if (toolInvocation.state !== "result" || !toolInvocation.result) {
+    return null;
   }
-  const canExpand = hasDetails(actionType);
-  const statusClasses = {
-    pending: "border-yellow-500/30 ash-tool-status-pending",
-    success: "border-white/10",
-    failed: "border-red-500/30"
-  };
+  const result = toolInvocation.result;
+  const isString = typeof result === "string";
+  const isError = typeof result === "object" && result !== null && "error" in result;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
-        statusClasses[status],
+        "ash-tool-output",
+        "border-t border-[var(--ash-border-subtle,rgba(255,255,255,0.04))]",
+        isError && "bg-red-500/5",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: () => canExpand && setExpanded(!expanded),
             className: cn(
-              "w-full px-4 py-3 flex items-center justify-between transition-colors",
-              canExpand ? "hover:bg-white/5 cursor-pointer" : "cursor-default"
+              "ash-tool-section-header",
+              isError && "text-red-400"
             ),
-            disabled: !canExpand,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("div", { className: cn(
-                  "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
-                  status === "pending" ? "bg-yellow-500/20" : status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
-                ), children: /* @__PURE__ */ jsx(
-                  ActionIcon,
-                  {
-                    actionType,
-                    className: cn(
-                      "w-3.5 h-3.5",
-                      status === "pending" ? "text-yellow-400" : status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
-                    )
-                  }
-                ) }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(actionType) }),
-                /* @__PURE__ */ jsx("span", { className: "font-mono text-sm truncate text-white/60 min-w-0", children: summary })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-                /* @__PURE__ */ jsx(StatusIndicator, { status, size: "sm" }),
-                canExpand && /* @__PURE__ */ jsx(
-                  ChevronDownIcon,
-                  {
-                    className: cn(
-                      "w-4 h-4 text-white/40 transition-transform duration-200",
-                      expanded && "rotate-180"
-                    )
-                  }
-                )
-              ] })
-            ]
+            children: isError ? "Error" : "Output"
           }
         ),
-        expanded && canExpand && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/5 max-h-[400px] overflow-y-auto ash-scrollbar bg-black/20", children: [
-          /* @__PURE__ */ jsx(ToolDetails, { actionType }),
-          status === "success" && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-white/5 bg-[var(--ash-accent)]/5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ash-accent)] font-medium", children: "Completed successfully" })
-          ] }) })
-        ] })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "p-3 overflow-auto",
+            style: { maxHeight },
+            children: isString ? /* @__PURE__ */ jsx(CodeBlock, { maxHeight: maxHeight - 24, children: result }) : /* @__PURE__ */ jsx(JsonDisplay, { value: result })
+          }
+        )
       ]
     }
   );
 }
-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 DefaultMentionBadge({ segment }) {
-  const bgColor = segment.color ? `${segment.color}20` : "rgba(34, 197, 94, 0.2)";
-  const textColor = segment.color || "#22c55e";
-  const borderColor = segment.color ? `${segment.color}40` : "rgba(34, 197, 94, 0.4)";
-  return /* @__PURE__ */ jsxs(
-    "span",
+function ToolList({
+  toolInvocations,
+  className,
+  defaultExpanded = false
+}) {
+  if (!toolInvocations || toolInvocations.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      className: "inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium mx-0.5",
-      style: {
-        backgroundColor: bgColor,
-        color: textColor,
-        border: `1px solid ${borderColor}`
-      },
-      title: segment.id ? `ID: ${segment.id}` : void 0,
-      children: [
-        "@",
-        segment.name
-      ]
+      className: cn(
+        "ash-tool-list",
+        "flex flex-col gap-2",
+        className
+      ),
+      children: toolInvocations.map((inv) => /* @__PURE__ */ jsx(
+        Tool,
+        {
+          toolInvocation: inv,
+          defaultExpanded
+        },
+        inv.toolCallId
+      ))
     }
   );
 }
-function RichContentRenderer({
-  content,
-  renderers,
-  className
+var ReasoningContext = createContext(null);
+function useReasoning() {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("useReasoning must be used within a Reasoning");
+  }
+  return context;
+}
+function Reasoning({
+  children,
+  isStreaming = false,
+  className,
+  autoExpand = true,
+  autoCollapse = true,
+  initialDuration = 0
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("rich-content", className), children: content.map((segment, index) => {
-    const key = `segment-${index}`;
-    switch (segment.type) {
-      case "text":
-        return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(LazyMarkdown, { children: segment.content }) }, key);
-      case "mention":
-        if (renderers?.renderMention) {
-          return /* @__PURE__ */ jsx(Fragment, { children: renderers.renderMention({ segment }) }, key);
-        }
-        return /* @__PURE__ */ jsx(DefaultMentionBadge, { segment }, key);
-      case "component":
-        if (renderers?.renderComponent) {
-          return /* @__PURE__ */ jsx(Fragment, { children: renderers.renderComponent({ segment }) }, key);
+  const [isOpen, setIsOpen] = useState(false);
+  const [duration, setDuration] = useState(initialDuration);
+  const startTimeRef = useRef(null);
+  const intervalRef = useRef(null);
+  useEffect(() => {
+    if (isStreaming && autoExpand) {
+      setIsOpen(true);
+      startTimeRef.current = Date.now();
+      intervalRef.current = setInterval(() => {
+        if (startTimeRef.current) {
+          setDuration(Math.floor((Date.now() - startTimeRef.current) / 1e3));
         }
-        return /* @__PURE__ */ jsxs("code", { className: "text-xs text-orange-400", children: [
-          "[component: ",
-          segment.componentType,
-          "]"
-        ] }, key);
-      default:
-        return null;
+      }, 1e3);
     }
-  }) });
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [isStreaming, autoExpand]);
+  useEffect(() => {
+    if (!isStreaming && autoCollapse && startTimeRef.current) {
+      const timeout = setTimeout(() => {
+        setIsOpen(false);
+      }, 500);
+      startTimeRef.current = null;
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return () => clearTimeout(timeout);
+    }
+    return void 0;
+  }, [isStreaming, autoCollapse]);
+  const contextValue = {
+    isOpen,
+    setIsOpen,
+    isStreaming,
+    duration
+  };
+  return /* @__PURE__ */ jsx(ReasoningContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-reasoning",
+        "rounded-[var(--ash-radius-md,0.5rem)]",
+        "border",
+        isStreaming ? "border-[var(--ash-thinking-border,rgba(147,51,234,0.2))] bg-[var(--ash-thinking-bg,rgba(147,51,234,0.06))]" : "border-[var(--ash-border,rgba(255,255,255,0.08))] bg-[var(--ash-surface-dark,#0a0a0a)]",
+        "overflow-hidden",
+        className
+      ),
+      "data-reasoning-streaming": isStreaming,
+      "data-reasoning-open": isOpen,
+      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))"
-  }, children: options.map((option) => /* @__PURE__ */ jsxs(
+function ReasoningTrigger({
+  className,
+  label = "Thinking",
+  showDuration = true
+}) {
+  const { isOpen, setIsOpen, isStreaming, duration } = useReasoning();
+  const formatDuration = (seconds) => {
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}m ${remainingSeconds}s`;
+  };
+  return /* @__PURE__ */ jsxs(
     "button",
     {
-      onClick: () => onSelect(option),
+      onClick: () => setIsOpen(!isOpen),
       className: cn(
-        "flex items-start gap-3 p-3 rounded-xl text-left",
-        "bg-white/5 border border-white/10",
-        "hover:bg-[var(--ash-accent)]/10 hover:border-[var(--ash-accent)]/30",
-        "focus:outline-none focus:ring-2 focus:ring-[var(--ash-accent)]/50",
-        "transition-all duration-200 cursor-pointer",
-        "group"
+        "ash-reasoning-trigger",
+        "w-full flex items-center gap-2",
+        "px-3 py-2",
+        "text-left",
+        "cursor-pointer hover:bg-white/[0.03] transition-colors",
+        className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: cn(
-          "flex-shrink-0 w-6 h-6 rounded-lg",
-          "bg-[var(--ash-accent)]/20 text-[var(--ash-accent)]",
-          "flex items-center justify-center",
-          "text-xs font-semibold",
-          "group-hover:bg-[var(--ash-accent)]/30",
-          "transition-colors duration-200"
-        ), children: option.id }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-white/90 group-hover:text-white transition-colors", children: option.label }),
-          option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/50 mt-0.5 line-clamp-2 group-hover:text-white/60 transition-colors", children: option.description })
-        ] }),
         /* @__PURE__ */ jsx(
-          "svg",
+          "span",
           {
             className: cn(
-              "w-4 h-4 text-white/30 flex-shrink-0 mt-0.5",
-              "group-hover:text-[var(--ash-accent)] group-hover:translate-x-0.5",
-              "transition-all duration-200"
+              "w-4 h-4 flex items-center justify-center",
+              isStreaming && "animate-pulse"
             ),
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            strokeWidth: 2,
-            children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+            children: isStreaming ? /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "w-4 h-4 text-purple-400 animate-spin",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      className: "opacity-25",
+                      cx: "12",
+                      cy: "12",
+                      r: "10",
+                      stroke: "currentColor",
+                      strokeWidth: "4"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      className: "opacity-75",
+                      fill: "currentColor",
+                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-4 h-4 text-purple-400",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+                  }
+                )
+              }
+            )
           }
-        )
-      ]
-    },
-    option.id
-  )) });
-}
-function parseFilesFromContent(content) {
-  const fileMarker = "[Uploaded files available at /uploads/]";
-  const markerIndex = content.indexOf(fileMarker);
-  if (markerIndex === -1) {
-    return { text: content, files: [] };
-  }
-  const text = content.substring(0, markerIndex).trim();
-  const fileSection = content.substring(markerIndex + fileMarker.length).trim();
-  const files = fileSection.split("\n").filter((line) => line.startsWith("- ")).map((line) => line.substring(2).trim());
-  return { text, files };
-}
-function UserMessage({ entry, className }) {
-  const { text, files } = parseFilesFromContent(entry.content);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 justify-end ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "max-w-[85%]", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-2xl p-4 bg-[var(--ash-accent)] text-[var(--ash-accent-foreground)]", children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: text || "(files attached)" }) }),
-      files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 pt-2 border-t border-[var(--ash-accent-foreground)]/20", children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--ash-accent-foreground)]/60 mb-1 flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(PaperclipIcon, { className: "w-3 h-3" }),
-          "Attached Files"
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: files.map((file, index) => /* @__PURE__ */ jsx(
+        ),
+        /* @__PURE__ */ jsxs(
           "span",
           {
-            className: "inline-flex items-center px-2 py-0.5 rounded-lg bg-[var(--ash-accent-foreground)]/10 text-xs",
-            title: file,
-            children: file.split(" (")[0]
-          },
-          index
-        )) })
-      ] }),
-      entry.timestamp && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(UserIcon, { className: "w-4 h-4 text-white/50" }) })
-  ] });
-}
-function AssistantMessage({
-  entry,
-  onOptionSelect,
-  richContentRenderers,
-  className
-}) {
-  const parsedOptions = !entry.richContent ? parseOptionsFromContent(entry.content) : null;
-  const handleOptionSelect = (option) => {
-    if (onOptionSelect) {
-      onOptionSelect(`Option ${option.id}: ${option.label}`);
-    }
-  };
-  const renderContent = (textContent) => {
-    if (entry.richContent && entry.richContent.length > 0) {
-      return /* @__PURE__ */ jsx(
-        RichContentRenderer,
-        {
-          content: entry.richContent,
-          renderers: richContentRenderers
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(LazyMarkdown, { children: textContent || entry.content });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), 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__ */ 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$1, { children: [
-        parsedOptions.preamble && renderContent(parsedOptions.preamble),
+            className: cn(
+              "flex-1 font-medium",
+              "text-[var(--ash-font-size-sm,12px)]",
+              isStreaming ? "text-[var(--ash-thinking-text,rgb(196,181,253))]" : "text-[var(--ash-text-secondary,rgba(255,255,255,0.7))]"
+            ),
+            children: [
+              label,
+              isStreaming && "..."
+            ]
+          }
+        ),
+        showDuration && duration > 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-[var(--ash-font-size-xs,10px)]",
+              "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]"
+            ),
+            children: formatDuration(duration)
+          }
+        ),
         /* @__PURE__ */ jsx(
-          OptionCards,
+          "svg",
           {
-            options: parsedOptions.options,
-            onSelect: handleOptionSelect
+            className: cn(
+              "w-4 h-4 text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+              "transition-transform",
+              isOpen && "rotate-180"
+            ),
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 9l-7 7-7-7"
+              }
+            )
           }
         )
-      ] }) : renderContent() }) }),
-      entry.timestamp && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
-    ] })
-  ] });
-}
-function ThinkingMessage({ entry, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(SparklesIcon, { className: "w-4 h-4 text-purple-400" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl p-4 bg-purple-500/10 border border-purple-500/30", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs text-purple-400 mb-2 font-medium", children: "Thinking" }),
-      /* @__PURE__ */ jsx("div", { className: "text-sm text-purple-300 italic opacity-80 whitespace-pre-wrap leading-relaxed", children: entry.content })
-    ] }) })
-  ] });
-}
-function ToolCallMessage({ entry, defaultExpanded = false, className }) {
-  if (entry.entryType.type !== "tool_call") return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), 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: "flex-1", children: /* @__PURE__ */ jsx(ToolCallCard, { toolCall: entry.entryType.toolCall, defaultExpanded }) })
-  ] });
-}
-function ErrorMessage({ entry, className }) {
-  if (entry.entryType.type !== "error") return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-red-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "w-4 h-4 text-red-400" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl p-4 bg-red-500/10 border border-red-500/30", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs text-red-400 mb-2 font-medium", children: "Error" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-red-300", children: entry.entryType.message }),
-      entry.entryType.code && /* @__PURE__ */ jsxs("p", { className: "text-xs text-red-400/70 mt-2 font-mono", children: [
-        "Code: ",
-        entry.entryType.code
-      ] })
-    ] }) })
-  ] });
+      ]
+    }
+  );
 }
-function MessageEntry({
-  entry,
-  onOptionSelect,
-  defaultExpanded,
-  richContentRenderers,
-  className
+function ReasoningContent({
+  children,
+  className,
+  maxHeight = 300
 }) {
-  switch (entry.entryType.type) {
-    case "user_message":
-      return /* @__PURE__ */ jsx(UserMessage, { entry, className });
-    case "assistant_message":
-      return /* @__PURE__ */ jsx(
-        AssistantMessage,
+  const { isOpen, isStreaming } = useReasoning();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-reasoning-content",
+        "border-t border-[var(--ash-border-subtle,rgba(255,255,255,0.04))]",
+        "ash-accordion-content",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
         {
-          entry,
-          onOptionSelect,
-          richContentRenderers,
-          className
+          className: cn(
+            "p-3 overflow-auto",
+            "text-[var(--ash-font-size-sm,12px)]",
+            "text-[var(--ash-text-secondary,rgba(255,255,255,0.7))]",
+            "whitespace-pre-wrap font-mono",
+            isStreaming && "animate-pulse"
+          ),
+          style: { maxHeight },
+          children
         }
-      );
-    case "thinking":
-      return /* @__PURE__ */ jsx(ThinkingMessage, { entry, className });
-    case "tool_call":
-      return /* @__PURE__ */ jsx(ToolCallMessage, { entry, defaultExpanded, className });
-    case "error":
-      return /* @__PURE__ */ jsx(ErrorMessage, { entry, className });
-    default:
-      return null;
-  }
-}
-function LoadingIndicator({ variant = "dots", size = "md", className }) {
-  if (variant === "dots") {
-    const dotSizes = {
-      sm: "w-1 h-1",
-      md: "w-1.5 h-1.5",
-      lg: "w-2 h-2"
-    };
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", className), children: [
-      /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]) }),
-      /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]), style: { animationDelay: "150ms" } }),
-      /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]), style: { animationDelay: "300ms" } })
-    ] });
-  }
-  if (variant === "pulse") {
-    const dotSizes = {
-      sm: "w-1.5 h-1.5",
-      md: "w-2 h-2",
-      lg: "w-3 h-3"
-    };
-    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), children: /* @__PURE__ */ jsx("span", { className: cn("bg-[var(--ash-accent)] rounded-full animate-pulse", dotSizes[size]) }) });
-  }
-  if (variant === "cursor") {
-    const cursorSizes = {
-      sm: "w-1 h-3",
-      md: "w-1.5 h-4",
-      lg: "w-2 h-5"
-    };
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "inline-block bg-[var(--ash-accent)]/50 ash-tool-status-pending",
-          cursorSizes[size],
-          className
-        )
-      }
-    );
-  }
-  const spinnerSizes = {
-    sm: "w-4 h-4",
-    md: "w-6 h-6",
-    lg: "w-8 h-8"
-  };
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-spin text-[var(--ash-accent)]", spinnerSizes[size], className), children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", className: "opacity-25" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })
-  ] }) });
+      )
+    }
+  );
 }
-function StreamingText({
-  content,
-  isStreaming = false,
-  renderMarkdown = true,
+function ThinkingIndicator({
+  isActive = true,
+  label = "Thinking",
   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(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 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 };
-      }
-      return null;
-    }
-    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;
+  if (!isActive) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex items-center gap-2 py-1.5 text-sm min-w-0",
+        "ash-thinking-indicator",
+        "flex items-center gap-2",
+        "px-3 py-2",
+        "text-[var(--ash-font-size-sm,12px)]",
+        "text-[var(--ash-thinking-text,rgb(196,181,253))]",
         className
       ),
       children: [
-        /* @__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 })
+        /* @__PURE__ */ jsxs("span", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-current rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
+          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-current rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
+          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-current rounded-full animate-bounce", style: { animationDelay: "300ms" } })
         ] }),
-        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 })
+        /* @__PURE__ */ jsx("span", { children: label })
       ]
     }
   );
 }
-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";
+var TaskContext = createContext(null);
+function useTask() {
+  const context = useContext(TaskContext);
+  if (!context) {
+    throw new Error("useTask must be used within a Task");
   }
+  return context;
 }
-function FileBadge({
-  path,
-  linesAdded,
-  linesRemoved,
-  showOnlyFilename = true,
+function Task({
+  children,
+  defaultOpen = false,
   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;
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const contextValue = {
+    isOpen,
+    setIsOpen
+  };
+  return /* @__PURE__ */ jsx(TaskContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-task",
+        "rounded-[var(--ash-radius-md,0.5rem)]",
+        "border border-[var(--ash-border,rgba(255,255,255,0.08))]",
+        "bg-[var(--ash-surface-dark,#0a0a0a)]",
+        "overflow-hidden",
+        className
+      ),
+      children
+    }
+  ) });
+}
+function TaskTrigger({ children, className }) {
+  const { isOpen, setIsOpen } = useTask();
   return /* @__PURE__ */ jsxs(
-    "span",
+    "button",
     {
+      onClick: () => setIsOpen(!isOpen),
       className: cn(
-        "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-xs font-mono",
-        bgColor,
+        "ash-task-trigger",
+        "w-full flex items-center gap-2",
+        "px-3 py-2",
+        "text-left",
+        "cursor-pointer hover:bg-white/[0.03] transition-colors",
         className
       ),
       children: [
-        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
-          ] })
-        ] })
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-4 h-4 text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex-1 font-medium",
+              "text-[var(--ash-font-size-sm,12px)]",
+              "text-[var(--ash-text-primary,rgba(255,255,255,0.9))]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cn(
+              "w-4 h-4 text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+              "transition-transform",
+              isOpen && "rotate-180"
+            ),
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 9l-7 7-7-7"
+              }
+            )
+          }
+        )
       ]
     }
   );
 }
-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
-        });
-      }
+function TaskContent({ children, className }) {
+  const { isOpen } = useTask();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-task-content",
+        "border-t border-[var(--ash-border-subtle,rgba(255,255,255,0.04))]",
+        "ash-accordion-content",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children })
     }
-  }
-  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,
+function TaskItem({
+  children,
+  status,
+  activeForm,
   className
 }) {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  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 (toolCalls.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
+  const statusIcons = {
+    pending: /* @__PURE__ */ jsx(
+      "svg",
       {
-        onClick: () => setExpanded(!expanded),
-        className: "w-full flex items-center gap-2 py-1 text-left group",
+        className: "w-4 h-4 text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 })
+      }
+    ),
+    in_progress: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "w-4 h-4 text-yellow-400 animate-spin",
+        fill: "none",
+        viewBox: "0 0 24 24",
         children: [
           /* @__PURE__ */ jsx(
-            ChevronRightIcon,
+            "circle",
             {
-              className: cn(
-                "w-3.5 h-3.5 text-white/40 transition-transform duration-200 shrink-0",
-                expanded && "rotate-90"
-              )
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "4"
             }
           ),
-          /* @__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"
-            ] })
-          ] })
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "opacity-75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            }
+          )
         ]
       }
     ),
-    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",
+    completed: /* @__PURE__ */ jsx(
+      "svg",
       {
-        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 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
-        });
+        className: "w-4 h-4 text-[var(--ash-accent,#ccff00)]",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M5 13l4 4L19 7"
+          }
+        )
       }
+    )
+  };
+  const statusColors = {
+    pending: "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+    in_progress: "text-[var(--ash-text-primary,rgba(255,255,255,0.9))]",
+    completed: "text-[var(--ash-text-secondary,rgba(255,255,255,0.7))] line-through"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ash-task-item",
+        "flex items-center gap-2",
+        "px-2 py-1.5 rounded-md",
+        status === "in_progress" && "bg-yellow-400/10",
+        className
+      ),
+      "data-task-status": status,
+      children: [
+        statusIcons[status],
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex-1",
+              "text-[var(--ash-font-size-sm,12px)]",
+              statusColors[status]
+            ),
+            children: status === "in_progress" && activeForm ? activeForm : children
+          }
+        )
+      ]
     }
-  }
-  return Array.from(fileMap.values());
-}
-function countActionTypes2(toolCalls) {
-  const counts = {};
-  for (const tc of toolCalls) {
-    const action = tc.actionType.action;
-    counts[action] = (counts[action] || 0) + 1;
-  }
-  return counts;
-}
-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 null;
-  }
+  );
 }
-function StepAccordion({
-  toolCalls,
-  defaultExpanded = false,
-  isExpanded: controlledExpanded,
-  onToggle,
-  className
+function TaskList({
+  items,
+  defaultOpen = true,
+  className,
+  title
 }) {
-  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
-  const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
-  const handleToggle = useCallback(() => {
-    if (onToggle) {
-      onToggle();
-    } else {
-      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 totalCount = toolCalls.length;
-  return /* @__PURE__ */ jsxs("div", { className: cn("ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
+  const completed = items.filter((t) => t.status === "completed").length;
+  const total = items.length;
+  const displayTitle = title || `Tasks (${completed}/${total})`;
+  return /* @__PURE__ */ jsxs(Task, { defaultOpen, className, children: [
+    /* @__PURE__ */ jsx(TaskTrigger, { children: displayTitle }),
+    /* @__PURE__ */ jsx(TaskContent, { children: items.map((item, index) => /* @__PURE__ */ jsx(
+      TaskItem,
       {
-        type: "button",
-        onClick: handleToggle,
-        className: "w-full flex items-center gap-2 py-1 text-left group",
-        children: [
-          /* @__PURE__ */ jsx(
-            ChevronRightIcon,
-            {
-              className: cn(
-                "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)) })
+        status: item.status,
+        activeForm: item.activeForm,
+        children: item.content
+      },
+      index
+    )) })
   ] });
 }
-
-// src/types.ts
-function isCommandRunAction(action) {
-  return action.action === "command_run";
-}
-function isFileReadAction(action) {
-  return action.action === "file_read";
-}
-function isFileEditAction(action) {
-  return action.action === "file_edit";
-}
-function isFileWriteAction(action) {
-  return action.action === "file_write";
-}
-function isSearchAction(action) {
-  return action.action === "search";
-}
-function isGlobAction(action) {
-  return action.action === "glob";
-}
-function isWebFetchAction(action) {
-  return action.action === "web_fetch";
-}
-function isWebSearchAction(action) {
-  return action.action === "web_search";
+var AttachmentContext = createContext(null);
+function useAttachment() {
+  const context = useContext(AttachmentContext);
+  if (!context) {
+    throw new Error("useAttachment must be used within an Attachment");
+  }
+  return context;
 }
-function isMcpToolAction(action) {
-  return action.action === "mcp_tool";
+function Attachments({
+  children,
+  layout = "inline",
+  className
+}) {
+  const layoutStyles = {
+    grid: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2",
+    inline: "flex flex-wrap gap-2",
+    list: "flex flex-col gap-1"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-attachments",
+        layoutStyles[layout],
+        className
+      ),
+      "data-layout": layout,
+      children
+    }
+  );
 }
-function isGenericToolAction(action) {
-  return action.action === "generic_tool";
+function Attachment({
+  file,
+  children,
+  removable = false,
+  onRemove,
+  className
+}) {
+  const contextValue = {
+    file,
+    removable,
+    onRemove
+  };
+  return /* @__PURE__ */ jsx(AttachmentContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-attachment relative group",
+        "rounded-[var(--ash-radius-sm,0.375rem)]",
+        "border border-[var(--ash-border,rgba(255,255,255,0.08))]",
+        "bg-[var(--ash-surface-elevated,#111111)]",
+        "overflow-hidden",
+        "hover:border-[var(--ash-border-emphasis,rgba(255,255,255,0.15))]",
+        "transition-colors",
+        className
+      ),
+      "data-file-type": file.type,
+      children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(AttachmentPreview, {}),
+        /* @__PURE__ */ jsx(AttachmentInfo, {}),
+        removable && /* @__PURE__ */ jsx(AttachmentRemove, {})
+      ] })
+    }
+  ) });
 }
-function isTodoWriteAction(action) {
-  return action.action === "todo_write";
+function AttachmentPreview({
+  className,
+  height = 80
+}) {
+  const { file } = useAttachment();
+  const isImage = file.type.startsWith("image/");
+  const url = "url" in file ? file.url : "base64" in file ? `data:${file.type};base64,${file.base64}` : void 0;
+  if (isImage && url) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "ash-attachment-preview",
+          "w-full bg-black/20 overflow-hidden",
+          className
+        ),
+        style: { height },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: url,
+            alt: file.name,
+            className: "w-full h-full object-cover"
+          }
+        )
+      }
+    );
+  }
+  const iconForType = () => {
+    if (file.type.includes("pdf")) {
+      return /* @__PURE__ */ jsxs("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }),
+        /* @__PURE__ */ jsx("text", { x: "7", y: "16", fontSize: "6", fill: "currentColor", stroke: "none", fontWeight: "bold", children: "PDF" })
+      ] });
+    }
+    if (file.type.includes("text") || file.type.includes("json")) {
+      return /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+    }
+    return /* @__PURE__ */ jsx("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-attachment-preview",
+        "w-full flex items-center justify-center",
+        "bg-[var(--ash-surface-dark,#0a0a0a)]",
+        "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+        className
+      ),
+      style: { height },
+      children: iconForType()
+    }
+  );
 }
-function isAgentToolAction(action) {
-  return action.action === "agent_tool";
+function AttachmentInfo({
+  className,
+  showSize = true
+}) {
+  const { file } = useAttachment();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ash-attachment-info",
+        "px-2 py-1.5",
+        "truncate",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "text-[var(--ash-font-size-xs,10px)]",
+              "text-[var(--ash-text-primary,rgba(255,255,255,0.9))]",
+              "truncate font-medium"
+            ),
+            title: file.name,
+            children: file.name
+          }
+        ),
+        showSize && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "text-[var(--ash-font-size-xs,10px)]",
+              "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]"
+            ),
+            children: formatFileSize(file.size)
+          }
+        )
+      ]
+    }
+  );
 }
-function isToolCallEntry(entry) {
-  return entry.type === "tool_call";
+function AttachmentRemove({ className }) {
+  const { onRemove, removable } = useAttachment();
+  if (!removable || !onRemove) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onRemove();
+      },
+      className: cn(
+        "ash-attachment-remove",
+        "absolute top-1 right-1",
+        "w-5 h-5 rounded-full",
+        "flex items-center justify-center",
+        "bg-black/60 text-white/80",
+        "hover:bg-black/80 hover:text-white",
+        "opacity-0 group-hover:opacity-100",
+        "transition-opacity",
+        className
+      ),
+      "aria-label": "Remove attachment",
+      children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+    }
+  );
 }
-function isErrorEntry(entry) {
-  return entry.type === "error";
+function FileBadgeCompact({
+  file,
+  removable = false,
+  onRemove,
+  className
+}) {
+  const isImage = file.type.startsWith("image/");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ash-file-badge group inline-flex items-center gap-1.5",
+        "px-2 py-1 rounded-md",
+        "bg-[var(--ash-surface-elevated,#111111)]",
+        "border border-[var(--ash-border,rgba(255,255,255,0.08))]",
+        "text-[var(--ash-font-size-xs,10px)]",
+        className
+      ),
+      children: [
+        isImage ? /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-[var(--ash-text-muted)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-[var(--ash-text-muted)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--ash-text-primary)] truncate max-w-[100px]", children: file.name }),
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--ash-text-muted)]", children: formatFileSize(file.size) }),
+        removable && onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            className: cn(
+              "ml-0.5 text-[var(--ash-text-muted)]",
+              "hover:text-red-400 transition-colors",
+              "opacity-0 group-hover:opacity-100"
+            ),
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
 }
-function isWidgetEntry(entry) {
-  return entry.type === "widget";
+function Shimmer({
+  children,
+  className,
+  isActive = true
+}) {
+  if (!isActive) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-shimmer",
+        "flex flex-col gap-2",
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading",
+      children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ShimmerLine, { width: "100%" }),
+        /* @__PURE__ */ jsx(ShimmerLine, { width: "80%" }),
+        /* @__PURE__ */ jsx(ShimmerLine, { width: "60%" })
+      ] })
+    }
+  );
 }
-var DEFAULT_DISPLAY_CONFIG = {
-  mode: "inline",
-  breakEveryNToolCalls: 0,
-  defaultExpanded: false,
-  animationDuration: 300
-};
-var DisplayModeContext = createContext(null);
-function DisplayModeProvider({ children, initialConfig }) {
-  const [config, setConfigState] = useState({
-    ...DEFAULT_DISPLAY_CONFIG,
-    ...initialConfig
-  });
-  const setMode = useCallback((mode) => {
-    setConfigState((prev) => ({ ...prev, mode }));
-  }, []);
-  const setConfig = useCallback((updates) => {
-    setConfigState((prev) => ({ ...prev, ...updates }));
-  }, []);
-  const toggleMode = useCallback(() => {
-    setConfigState((prev) => ({
-      ...prev,
-      mode: prev.mode === "inline" ? "compact" : "inline"
-    }));
-  }, []);
-  const value = useMemo(
-    () => ({ config, setMode, setConfig, toggleMode }),
-    [config, setMode, setConfig, toggleMode]
+function ShimmerLine({
+  width = "100%",
+  height = 16,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-shimmer-line",
+        "rounded-md",
+        "bg-gradient-to-r from-white/5 via-white/10 to-white/5",
+        "bg-[length:200%_100%]",
+        "animate-[shimmer_1.5s_ease-in-out_infinite]",
+        className
+      ),
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height
+      }
+    }
   );
-  return /* @__PURE__ */ jsx(DisplayModeContext.Provider, { value, children });
 }
-function useDisplayMode() {
-  const context = useContext(DisplayModeContext);
-  if (!context) {
-    return {
-      config: DEFAULT_DISPLAY_CONFIG,
-      setMode: () => {
-      },
-      setConfig: () => {
-      },
-      toggleMode: () => {
+function ShimmerBlock({
+  width = "100%",
+  height = 100,
+  rounded = "md",
+  className
+}) {
+  const roundedStyles = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ash-shimmer-block",
+        roundedStyles[rounded],
+        "bg-gradient-to-r from-white/5 via-white/10 to-white/5",
+        "bg-[length:200%_100%]",
+        "animate-[shimmer_1.5s_ease-in-out_infinite]",
+        className
+      ),
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height
       }
-    };
-  }
-  return context;
+    }
+  );
 }
-function useDisplayConfig() {
-  const { config } = useDisplayMode();
-  return config;
-}
-function MessageList({
-  entries,
-  loading,
-  streamingContent,
-  displayConfig: displayConfigProp,
-  onOptionSelect,
-  renderWidget,
-  onWidgetAction,
-  autoScroll = true,
-  richContentRenderers,
+function ShimmerText({
+  chars = 20,
   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;
-      return (action) => {
-        onWidgetAction({
-          ...action,
-          entryId,
-          widgetType
-        });
-      };
-    },
-    [onWidgetAction]
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ash-shimmer-text inline-block",
+        "rounded",
+        "bg-gradient-to-r from-white/5 via-white/10 to-white/5",
+        "bg-[length:200%_100%]",
+        "animate-[shimmer_1.5s_ease-in-out_infinite]",
+        className
+      ),
+      style: {
+        width: `${chars}ch`,
+        height: "1em",
+        verticalAlign: "middle"
+      }
+    }
   );
-  const groupedEntries = useMemo(() => {
-    if (config.mode === "inline") {
-      return entries.map((entry) => ({
-        type: "single",
-        entry,
-        id: entry.id
-      }));
+}
+function LoadingDots({
+  size = "md",
+  className
+}) {
+  const sizeStyles = {
+    sm: "w-1 h-1",
+    md: "w-1.5 h-1.5",
+    lg: "w-2 h-2"
+  };
+  const gapStyles = {
+    sm: "gap-0.5",
+    md: "gap-1",
+    lg: "gap-1.5"
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ash-loading-dots inline-flex items-center",
+        gapStyles[size],
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading",
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            sizeStyles[size],
+            "rounded-full",
+            "bg-current",
+            "animate-bounce"
+          ),
+          style: { animationDelay: `${i * 150}ms` }
+        },
+        i
+      ))
     }
-    return groupEntriesForCompactMode(entries, config);
-  }, [entries, config]);
-  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;
-        if (entry.entryType.type === "widget" && renderWidget) {
-          const widgetEntry = entry.entryType;
-          const widgetContent = renderWidget({
-            entry,
-            widgetType: widgetEntry.widgetType,
-            widgetData: widgetEntry.widgetData,
-            onAction: createWidgetActionHandler(entry.id, widgetEntry.widgetType)
-          });
-          if (widgetContent !== null) {
-            return /* @__PURE__ */ jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
-          }
-        }
-        return /* @__PURE__ */ jsx(
-          MessageEntry,
+  );
+}
+function LoadingSpinner({
+  size = "md",
+  className
+}) {
+  const sizeStyles = {
+    sm: "w-4 h-4",
+    md: "w-6 h-6",
+    lg: "w-8 h-8"
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn(
+        "ash-loading-spinner animate-spin",
+        sizeStyles[size],
+        className
+      ),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      role: "status",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
           {
-            entry,
-            onOptionSelect,
-            defaultExpanded: config.defaultExpanded,
-            richContentRenderers
-          },
-          entry.id
-        );
-      }
-      const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
-      return /* @__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: "flex-1", children: config.mode === "accordion" ? /* @__PURE__ */ jsx(
-          StepAccordion,
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
           {
-            toolCalls,
-            defaultExpanded: config.defaultExpanded
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
           }
-        ) : /* @__PURE__ */ jsx(
-          ToolExecutionGroup,
+        )
+      ]
+    }
+  );
+}
+function MessageShimmer({
+  role = "assistant",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ash-message-shimmer flex gap-2",
+        role === "user" && "flex-row-reverse",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          ShimmerBlock,
           {
-            toolCalls,
-            defaultExpanded: config.defaultExpanded,
-            animationDuration: config.animationDuration
+            width: 20,
+            height: 20,
+            rounded: "full"
           }
-        ) })
-      ] }, groupedEntry.id);
-    }),
-    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: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl p-3 bg-white/5 text-white/80", children: /* @__PURE__ */ jsx(StreamingText, { content: streamingContent, isStreaming: true }) }) })
-    ] }),
-    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 })
-  ] });
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2 max-w-[80%]", children: [
+          /* @__PURE__ */ jsx(ShimmerLine, { width: "100%", height: 14 }),
+          /* @__PURE__ */ jsx(ShimmerLine, { width: "85%", height: 14 }),
+          /* @__PURE__ */ jsx(ShimmerLine, { width: "70%", height: 14 })
+        ] })
+      ]
+    }
+  );
 }
 function getLevelIcon(level) {
   switch (level) {
@@ -2450,208 +2436,6 @@ 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":
-      return /* @__PURE__ */ jsx(CheckCircleIcon, { className: cn(className, "text-emerald-400") });
-    case "in_progress":
-      return /* @__PURE__ */ jsx(LoaderIcon, { className: cn(className, "text-yellow-400 animate-spin") });
-    case "pending":
-    default:
-      return /* @__PURE__ */ jsx(CircleIcon, { className: cn(className, "text-white/30") });
-  }
-}
-function TodoListItem({ todo, index, compact = false }) {
-  const displayText = todo.status === "in_progress" ? todo.activeForm : todo.content;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-start gap-2 transition-all duration-200",
-        compact ? "py-1" : "py-1.5",
-        todo.status === "completed" && "opacity-60",
-        todo.status === "in_progress" && "bg-yellow-500/5 -mx-2 px-2 rounded-md"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(TodoStatusIcon, { status: todo.status, className: compact ? "w-3.5 h-3.5 mt-0.5" : "w-4 h-4 mt-0.5" }),
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: cn(
-              "flex-1 text-white/80",
-              compact ? "text-xs" : "text-sm",
-              todo.status === "completed" && "line-through text-white/50"
-            ),
-            children: [
-              !compact && /* @__PURE__ */ jsxs("span", { className: "text-white/40 mr-1.5", children: [
-                index + 1,
-                "."
-              ] }),
-              displayText
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function TodoProgress({ completed, total, className }) {
-  const percentage = total > 0 ? Math.round(completed / total * 100) : 0;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-1 h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "h-full bg-emerald-400 rounded-full transition-all duration-500 ease-out",
-        style: { width: `${percentage}%` }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/50 tabular-nums min-w-[3rem] text-right", children: [
-      completed,
-      "/",
-      total
-    ] })
-  ] });
-}
-function TodoPanel({
-  todos,
-  title,
-  compact = false,
-  showProgress = true,
-  className
-}) {
-  const stats = useMemo(() => {
-    return {
-      total: todos.length,
-      completed: todos.filter((t) => t.status === "completed").length,
-      inProgress: todos.filter((t) => t.status === "in_progress").length,
-      pending: todos.filter((t) => t.status === "pending").length
-    };
-  }, [todos]);
-  if (todos.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "rounded-lg border border-white/10 bg-white/5 overflow-hidden",
-        className
-      ),
-      children: [
-        (title || showProgress) && /* @__PURE__ */ jsxs("div", { className: cn("border-b border-white/5", compact ? "px-2 py-1.5" : "px-3 py-2"), children: [
-          title && /* @__PURE__ */ jsx("div", { className: cn("font-medium text-white/90 mb-1.5", compact ? "text-xs" : "text-sm"), children: title }),
-          showProgress && /* @__PURE__ */ jsx(TodoProgress, { completed: stats.completed, total: stats.total })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn(compact ? "px-2 py-1.5" : "px-3 py-2"), children: todos.map((todo, index) => /* @__PURE__ */ jsx(
-          TodoListItem,
-          {
-            todo,
-            index,
-            compact
-          },
-          `${todo.content}-${index}`
-        )) }),
-        !compact && stats.inProgress > 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-t border-white/5 bg-yellow-500/5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-yellow-400", children: [
-          /* @__PURE__ */ jsx(LoaderIcon, { className: "w-3 h-3 animate-spin" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            stats.inProgress,
-            " task",
-            stats.inProgress !== 1 ? "s" : "",
-            " in progress"
-          ] })
-        ] }) })
-      ]
-    }
-  );
-}
 function EnvVarsPanel({
   envVars,
   onChange,
@@ -2783,236 +2567,90 @@ function EnvVarsPanel({
             onClick: handleAddEnvVar,
             disabled: !newEnvKey.trim(),
             className: "ash-env-vars-add-button",
-            children: "Add"
-          }
-        )
-      ] }),
-      helperText && /* @__PURE__ */ jsx("p", { className: "ash-env-vars-helper", children: helperText })
-    ] })
-  ] });
-}
-function DisplayModeToggle({
-  className,
-  showLabel = true,
-  labels = { inline: "Inline", compact: "Compact", accordion: "Steps" },
-  modes = ["inline", "compact", "accordion"]
-}) {
-  const { config, setMode } = useDisplayMode();
-  const currentMode = config.mode;
-  const currentIndex = modes.indexOf(currentMode);
-  const effectiveIndex = currentIndex === -1 ? 0 : currentIndex;
-  const nextIndex = (effectiveIndex + 1) % modes.length;
-  const nextMode = modes[nextIndex];
-  const handleClick = () => {
-    setMode(nextMode);
-  };
-  const getIcon = (mode) => {
-    switch (mode) {
-      case "inline":
-        return /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "ash-display-mode-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-              }
-            )
+            children: "Add"
           }
-        );
-      case "compact":
-        return /* @__PURE__ */ jsx(
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsx("p", { className: "ash-env-vars-helper", children: helperText })
+    ] })
+  ] });
+}
+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))"
+  }, children: options.map((option) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => onSelect(option),
+      className: cn(
+        "flex items-start gap-3 p-3 rounded-xl text-left",
+        "bg-white/5 border border-white/10",
+        "hover:bg-[var(--ash-accent)]/10 hover:border-[var(--ash-accent)]/30",
+        "focus:outline-none focus:ring-2 focus:ring-[var(--ash-accent)]/50",
+        "transition-all duration-200 cursor-pointer",
+        "group"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(
+          "flex-shrink-0 w-6 h-6 rounded-lg",
+          "bg-[var(--ash-accent)]/20 text-[var(--ash-accent)]",
+          "flex items-center justify-center",
+          "text-xs font-semibold",
+          "group-hover:bg-[var(--ash-accent)]/30",
+          "transition-colors duration-200"
+        ), children: option.id }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-white/90 group-hover:text-white transition-colors", children: option.label }),
+          option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/50 mt-0.5 line-clamp-2 group-hover:text-white/60 transition-colors", children: option.description })
+        ] }),
+        /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "ash-display-mode-icon",
-            viewBox: "0 0 24 24",
+            className: cn(
+              "w-4 h-4 text-white/30 flex-shrink-0 mt-0.5",
+              "group-hover:text-[var(--ash-accent)] group-hover:translate-x-0.5",
+              "transition-all duration-200"
+            ),
             fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"
-              }
-            )
-          }
-        );
-      case "accordion":
-        return /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "ash-display-mode-icon",
             viewBox: "0 0 24 24",
-            fill: "none",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M8.25 6.75h12M8.25 12h12M8.25 17.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-              }
-            )
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
           }
-        );
-    }
-  };
-  const getLabel = (mode) => {
-    return labels[mode] || mode.charAt(0).toUpperCase() + mode.slice(1);
-  };
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: handleClick,
-      className: cn("ash-display-mode-toggle", className),
-      title: `Switch to ${nextMode} mode`,
-      children: [
-        getIcon(currentMode),
-        showLabel && /* @__PURE__ */ jsx("span", { className: "ash-display-mode-label", children: getLabel(currentMode) })
-      ]
-    }
-  );
-}
-var DEFAULT_WORDS = [
-  "Thinking",
-  "Reasoning",
-  "Pondering",
-  "Analyzing",
-  "Considering",
-  "Processing",
-  "Evaluating"
-];
-function TypewriterText({
-  words = DEFAULT_WORDS,
-  typeSpeed = 50,
-  pauseBeforeErase = 800,
-  eraseSpeed = 30,
-  pauseBeforeType = 200,
-  showCursor = true,
-  className,
-  cursorClassName
-}) {
-  const [displayText, setDisplayText] = useState("");
-  const [wordIndex, setWordIndex] = useState(0);
-  const [isTyping, setIsTyping] = useState(true);
-  const timeoutRef = useRef(null);
-  useEffect(() => {
-    const currentWord = words[wordIndex] ?? "";
-    if (isTyping) {
-      if (displayText.length < currentWord.length) {
-        timeoutRef.current = setTimeout(() => {
-          setDisplayText(currentWord.slice(0, displayText.length + 1));
-        }, typeSpeed);
-      } else {
-        timeoutRef.current = setTimeout(() => {
-          setIsTyping(false);
-        }, pauseBeforeErase);
-      }
-    } else {
-      if (displayText.length > 0) {
-        timeoutRef.current = setTimeout(() => {
-          setDisplayText(displayText.slice(0, -1));
-        }, eraseSpeed);
-      } else {
-        timeoutRef.current = setTimeout(() => {
-          setWordIndex((prev) => (prev + 1) % words.length);
-          setIsTyping(true);
-        }, pauseBeforeType);
-      }
-    }
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, [displayText, wordIndex, isTyping, words, typeSpeed, pauseBeforeErase, eraseSpeed, pauseBeforeType]);
-  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ jsx("span", { children: displayText }),
-    showCursor && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "w-0.5 h-4 bg-current ml-0.5 animate-pulse",
-          cursorClassName
         )
-      }
-    )
-  ] });
-}
-var ThemeContext = createContext(void 0);
-var DEFAULT_STORAGE_KEY = "ash-ui-theme";
-function ThemeProvider({
-  children,
-  defaultTheme,
-  storageKey = DEFAULT_STORAGE_KEY,
-  listenToSystemChanges = true
-}) {
-  const [theme, setThemeState] = useState(() => {
-    if (typeof window !== "undefined") {
-      const stored = localStorage.getItem(storageKey);
-      if (stored === "dark" || stored === "light") {
-        return stored;
-      }
-      if (!defaultTheme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        return "dark";
-      }
-    }
-    return defaultTheme ?? "light";
-  });
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    if (!mounted) return;
-    const root = document.documentElement;
-    if (theme === "dark") {
-      root.classList.add("dark");
-    } else {
-      root.classList.remove("dark");
-    }
-    localStorage.setItem(storageKey, theme);
-  }, [theme, mounted, storageKey]);
-  useEffect(() => {
-    if (!listenToSystemChanges || typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (e) => {
-      const stored = localStorage.getItem(storageKey);
-      if (!stored) {
-        setThemeState(e.matches ? "dark" : "light");
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [storageKey, listenToSystemChanges]);
-  const toggleTheme = useCallback(() => {
-    setThemeState((prev) => prev === "light" ? "dark" : "light");
-  }, []);
-  const setTheme = useCallback((newTheme) => {
-    setThemeState(newTheme);
-  }, []);
-  if (!mounted) {
-    return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: defaultTheme ?? "light", toggleTheme, setTheme }, children });
-  }
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+      ]
+    },
+    option.id
+  )) });
 }
-function useTheme() {
-  const context = useContext(ThemeContext);
-  if (context === void 0) {
-    throw new Error("useTheme must be used within a ThemeProvider");
+function ActionIcon({ actionType, className = "w-4 h-4" }) {
+  switch (actionType.action) {
+    case "command_run":
+      return /* @__PURE__ */ jsx(TerminalIcon, { className });
+    case "file_read":
+      return /* @__PURE__ */ jsx(FileIcon, { className });
+    case "file_edit":
+      return /* @__PURE__ */ jsx(EditIcon, { className });
+    case "file_write":
+      return /* @__PURE__ */ jsx(FilePlusIcon, { className });
+    case "search":
+      return /* @__PURE__ */ jsx(SearchIcon, { className });
+    case "glob":
+      return /* @__PURE__ */ jsx(FolderSearchIcon, { className });
+    case "web_fetch":
+      return /* @__PURE__ */ jsx(GlobeIcon, { className });
+    case "web_search":
+      return /* @__PURE__ */ jsx(SearchIcon, { className });
+    case "mcp_tool":
+      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 });
   }
-  return context;
 }
 
 // src/design-tokens.ts
@@ -3118,6 +2756,21 @@ var typography = {
     relaxed: "1.75"
   }
 };
+var cssVars = {
+  fontSize: {
+    base: "--ash-font-size-base",
+    sm: "--ash-font-size-sm",
+    xs: "--ash-font-size-xs",
+    code: "--ash-font-size-code"
+  },
+  accent: "--ash-accent",
+  accentForeground: "--ash-accent-foreground",
+  surfaceDark: "--ash-surface-dark",
+  surfaceDarker: "--ash-surface-darker",
+  surfaceCard: "--ash-surface-card",
+  surfaceElevated: "--ash-surface-elevated",
+  surfaceBorder: "--ash-surface-border"
+};
 var keyframes = {
   slideUp: {
     from: { opacity: "0", transform: "translateY(20px)" },
@@ -3236,42 +2889,332 @@ function tokensToCssVariables(prefix = "ash") {
     if (key !== "DEFAULT") vars[`--${prefix}-border-${key}`] = value;
     else vars[`--${prefix}-border`] = value;
   });
+  vars[`--${prefix}-font-size-base`] = "14px";
+  vars[`--${prefix}-font-size-sm`] = "12px";
+  vars[`--${prefix}-font-size-xs`] = "11px";
+  vars[`--${prefix}-font-size-code`] = "13px";
   return vars;
 }
-var inlineStyles = {
-  // Glass panel effect
-  glassPanel: {
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
-    backdropFilter: "blur(24px)",
-    WebkitBackdropFilter: "blur(24px)",
-    border: `1px solid ${colors.border.DEFAULT}`
-  },
-  // Accent button
-  accentButton: {
-    backgroundColor: colors.accent.DEFAULT,
-    color: "#000000",
-    border: `1px solid ${colors.accent.DEFAULT}`,
-    boxShadow: shadows.glow.md
-  },
-  // Ghost button
-  ghostButton: {
-    backgroundColor: "transparent",
-    color: colors.text.secondary,
-    border: "1px solid transparent"
-  },
-  // User message bubble
-  userMessage: {
-    backgroundColor: colors.user.bg,
-    border: `1px solid ${colors.user.border}`,
-    borderRadius: borderRadius.lg
-  },
-  // Assistant message bubble
-  assistantMessage: {
-    backgroundColor: colors.assistant.bg,
-    border: `1px solid ${colors.assistant.border}`,
-    borderRadius: borderRadius.lg
+var inlineStyles = {
+  // Glass panel effect
+  glassPanel: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    backdropFilter: "blur(24px)",
+    WebkitBackdropFilter: "blur(24px)",
+    border: `1px solid ${colors.border.DEFAULT}`
+  },
+  // Accent button
+  accentButton: {
+    backgroundColor: colors.accent.DEFAULT,
+    color: "#000000",
+    border: `1px solid ${colors.accent.DEFAULT}`,
+    boxShadow: shadows.glow.md
+  },
+  // Ghost button
+  ghostButton: {
+    backgroundColor: "transparent",
+    color: colors.text.secondary,
+    border: "1px solid transparent"
+  },
+  // User message bubble
+  userMessage: {
+    backgroundColor: colors.user.bg,
+    border: `1px solid ${colors.user.border}`,
+    borderRadius: borderRadius.lg
+  },
+  // Assistant message bubble
+  assistantMessage: {
+    backgroundColor: colors.assistant.bg,
+    border: `1px solid ${colors.assistant.border}`,
+    borderRadius: borderRadius.lg
+  }
+};
+
+// src/types.ts
+function isCommandRunAction(action) {
+  return action.action === "command_run";
+}
+function isFileReadAction(action) {
+  return action.action === "file_read";
+}
+function isFileEditAction(action) {
+  return action.action === "file_edit";
+}
+function isFileWriteAction(action) {
+  return action.action === "file_write";
+}
+function isSearchAction(action) {
+  return action.action === "search";
+}
+function isGlobAction(action) {
+  return action.action === "glob";
+}
+function isWebFetchAction(action) {
+  return action.action === "web_fetch";
+}
+function isWebSearchAction(action) {
+  return action.action === "web_search";
+}
+function isMcpToolAction(action) {
+  return action.action === "mcp_tool";
+}
+function isGenericToolAction(action) {
+  return action.action === "generic_tool";
+}
+function isTodoWriteAction(action) {
+  return action.action === "todo_write";
+}
+function isAgentToolAction(action) {
+  return action.action === "agent_tool";
+}
+function isToolCallEntry(entry) {
+  return entry.type === "tool_call";
+}
+function isErrorEntry(entry) {
+  return entry.type === "error";
+}
+function isWidgetEntry(entry) {
+  return entry.type === "widget";
+}
+var DEFAULT_STYLE_CONFIG = {
+  userVariant: "bubble",
+  assistantVariant: "bubble",
+  scale: "compact",
+  showTimestamp: true,
+  showAvatars: true
+};
+function normalizedEntryToMessage(entry) {
+  const { id, entryType, content, timestamp } = entry;
+  const createdAt = timestamp ? new Date(timestamp) : void 0;
+  switch (entryType.type) {
+    case "user_message":
+      return {
+        id,
+        role: "user",
+        content,
+        createdAt
+      };
+    case "assistant_message":
+      return {
+        id,
+        role: "assistant",
+        content,
+        createdAt
+      };
+    case "thinking":
+      return {
+        id,
+        role: "assistant",
+        content: "",
+        reasoning: content,
+        createdAt
+      };
+    case "tool_call": {
+      const { toolCall } = entryType;
+      const toolInvocation = {
+        state: toolCall.status === "pending" ? "call" : "result",
+        toolCallId: toolCall.id,
+        toolName: toolCall.toolName,
+        args: toolCall.input || {},
+        result: toolCall.output
+      };
+      return {
+        id,
+        role: "assistant",
+        content: "",
+        toolInvocations: [toolInvocation],
+        createdAt
+      };
+    }
+    case "error":
+      return {
+        id,
+        role: "system",
+        content: `Error: ${entryType.message}${entryType.code ? ` (${entryType.code})` : ""}`,
+        createdAt
+      };
+    case "widget":
+      return {
+        id,
+        role: "data",
+        content: JSON.stringify({
+          widgetType: entryType.widgetType,
+          widgetData: entryType.widgetData
+        }),
+        createdAt
+      };
+    default:
+      return null;
+  }
+}
+function messageToNormalizedEntry(message) {
+  const { id, role, content, createdAt, toolInvocations, reasoning } = message;
+  const timestamp = createdAt?.toISOString();
+  if (toolInvocations && toolInvocations.length > 0) {
+    const inv = toolInvocations[0];
+    const toolCall = {
+      id: inv.toolCallId,
+      toolName: inv.toolName,
+      actionType: {
+        action: "generic_tool",
+        toolName: inv.toolName,
+        arguments: inv.args,
+        result: inv.result ? { type: "json", value: inv.result } : void 0
+      },
+      status: inv.state === "result" ? "success" : "pending",
+      summary: `${inv.toolName}(${Object.keys(inv.args).join(", ")})`,
+      input: inv.args,
+      output: inv.result
+    };
+    return {
+      id,
+      timestamp,
+      entryType: { type: "tool_call", toolCall },
+      content: toolCall.summary
+    };
+  }
+  if (reasoning) {
+    return {
+      id,
+      timestamp,
+      entryType: { type: "thinking" },
+      content: reasoning
+    };
+  }
+  if (role === "user") {
+    return {
+      id,
+      timestamp,
+      entryType: { type: "user_message" },
+      content
+    };
+  }
+  if (role === "assistant") {
+    return {
+      id,
+      timestamp,
+      entryType: { type: "assistant_message" },
+      content
+    };
+  }
+  if (role === "system") {
+    if (content.startsWith("Error:")) {
+      return {
+        id,
+        timestamp,
+        entryType: { type: "error", message: content.replace("Error: ", "") },
+        content
+      };
+    }
+    return {
+      id,
+      timestamp,
+      entryType: { type: "assistant_message" },
+      content
+    };
+  }
+  if (role === "data") {
+    try {
+      const data = JSON.parse(content);
+      if (data.widgetType) {
+        return {
+          id,
+          timestamp,
+          entryType: {
+            type: "widget",
+            widgetType: data.widgetType,
+            widgetData: data.widgetData
+          },
+          content: ""
+        };
+      }
+    } catch {
+    }
+    return {
+      id,
+      timestamp,
+      entryType: { type: "assistant_message" },
+      content
+    };
+  }
+  return {
+    id,
+    timestamp,
+    entryType: { type: "assistant_message" },
+    content
+  };
+}
+function normalizedEntriesToMessages(entries) {
+  const messages = [];
+  let currentAssistantMessage = null;
+  for (const entry of entries) {
+    const message = normalizedEntryToMessage(entry);
+    if (!message) continue;
+    if (message.role === "assistant") {
+      if (currentAssistantMessage) {
+        if (message.toolInvocations) {
+          currentAssistantMessage.toolInvocations = [
+            ...currentAssistantMessage.toolInvocations || [],
+            ...message.toolInvocations
+          ];
+        }
+        if (message.content) {
+          currentAssistantMessage.content = currentAssistantMessage.content ? `${currentAssistantMessage.content}
+${message.content}` : message.content;
+        }
+        if (message.reasoning) {
+          currentAssistantMessage.reasoning = currentAssistantMessage.reasoning ? `${currentAssistantMessage.reasoning}
+${message.reasoning}` : message.reasoning;
+        }
+      } else {
+        currentAssistantMessage = { ...message };
+      }
+    } else {
+      if (currentAssistantMessage) {
+        messages.push(currentAssistantMessage);
+        currentAssistantMessage = null;
+      }
+      messages.push(message);
+    }
   }
-};
+  if (currentAssistantMessage) {
+    messages.push(currentAssistantMessage);
+  }
+  return messages;
+}
+function messagesToNormalizedEntries(messages) {
+  const entries = [];
+  for (const message of messages) {
+    if (message.reasoning) {
+      entries.push({
+        id: `${message.id}-thinking`,
+        timestamp: message.createdAt?.toISOString(),
+        entryType: { type: "thinking" },
+        content: message.reasoning
+      });
+    }
+    if (message.content || !message.toolInvocations?.length) {
+      entries.push(messageToNormalizedEntry({
+        ...message,
+        toolInvocations: void 0,
+        reasoning: void 0
+      }));
+    }
+    if (message.toolInvocations) {
+      for (const inv of message.toolInvocations) {
+        const toolMessage = {
+          id: inv.toolCallId,
+          role: "assistant",
+          content: "",
+          toolInvocations: [inv],
+          createdAt: message.createdAt
+        };
+        entries.push(messageToNormalizedEntry(toolMessage));
+      }
+    }
+  }
+  return entries;
+}
 function useMessageQueue({
   onProcessMessage,
   canProcess = true
@@ -3491,19 +3434,95 @@ function useFileUpload({
     openFilePicker
   };
 }
+
+// src/hooks/middleware.ts
+async function applyRequestMiddleware(middlewares, request) {
+  let current = { ...request };
+  for (const mw of middlewares) {
+    if (mw.onRequest) {
+      try {
+        const result = await mw.onRequest(current);
+        if (result?.error) {
+          return { request: current, error: result.error };
+        }
+        if (result) {
+          current = {
+            ...current,
+            prompt: result.prompt ?? current.prompt,
+            sessionContext: result.sessionContext ?? current.sessionContext,
+            metadata: {
+              ...current.metadata,
+              ...result.metadata
+            }
+          };
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Middleware error";
+        return { request: current, error: errorMessage };
+      }
+    }
+  }
+  return { request: current };
+}
+async function applyEventMiddleware(middlewares, event) {
+  let current = event;
+  for (const mw of middlewares) {
+    if (!current) break;
+    if (mw.onEvent) {
+      try {
+        current = await mw.onEvent(current);
+      } catch (err) {
+        console.error("[middleware] onEvent error:", err);
+      }
+    }
+  }
+  return current;
+}
+async function callMiddlewareComplete(middlewares, sessionId) {
+  for (const mw of middlewares) {
+    if (mw.onComplete) {
+      try {
+        await mw.onComplete(sessionId);
+      } catch (err) {
+        console.error("[middleware] onComplete error:", err);
+      }
+    }
+  }
+}
+async function callMiddlewareError(middlewares, error) {
+  for (const mw of middlewares) {
+    if (mw.onError) {
+      try {
+        await mw.onError(error);
+      } catch (err) {
+        console.error("[middleware] onError error:", err);
+      }
+    }
+  }
+}
+
+// src/hooks/useAgentChat.ts
 function useAgentChat(options) {
   const {
     createStream,
+    subscribeToSession,
     initialSessionId,
     initialEntries = [],
     onSessionStart,
     onSessionEnd,
     onError,
-    onSandboxLog
+    onSandboxLog,
+    onReconnect,
+    maxReconnectAttempts = 3,
+    reconnectBaseDelay = 1e3,
+    onBeforeSend,
+    onEvent,
+    middleware
   } = options;
   const [historyEntries, setHistoryEntries] = useState(initialEntries);
   const [streamingEntries, setStreamingEntries] = useState([]);
   const [isStreaming, setIsStreaming] = useState(false);
+  const [isReconnecting, setIsReconnecting] = useState(false);
   const [error, setError] = useState(null);
   const [sessionId, setSessionId] = useState(initialSessionId || null);
   const abortControllerRef = useRef(null);
@@ -3511,6 +3530,16 @@ function useAgentChat(options) {
   const currentTextIdRef = useRef(null);
   const pendingToolCallsRef = useRef(/* @__PURE__ */ new Map());
   const hadToolCallSinceTextRef = useRef(false);
+  const reconnectAttemptsRef = useRef(0);
+  const eventCountRef = useRef(0);
+  const sessionIdRef = useRef(sessionId);
+  const streamingEntriesRef = useRef([]);
+  useEffect(() => {
+    sessionIdRef.current = sessionId;
+  }, [sessionId]);
+  useEffect(() => {
+    streamingEntriesRef.current = streamingEntries;
+  }, [streamingEntries]);
   const entries = [...historyEntries, ...streamingEntries];
   const emitStreamingEntries = useCallback((newEntries) => {
     setStreamingEntries([...newEntries]);
@@ -3625,7 +3654,7 @@ function useAgentChat(options) {
           setError(event.error);
           onError?.(event.error);
           newEntries.push({
-            id: `error-${Date.now()}`,
+            id: `error-${Date.now()}-${Math.random().toString(36).slice(2)}`,
             timestamp: (/* @__PURE__ */ new Date()).toISOString(),
             entryType: { type: "error", message: event.error, code: event.code },
             content: event.error
@@ -3644,12 +3673,112 @@ function useAgentChat(options) {
     }
     return newEntries;
   }, [sessionId, onSessionStart, onSessionEnd, onError, onSandboxLog, createTextEntry, resetStreamingState]);
+  const attemptReconnect = useCallback(async (targetSessionId, currentEntries) => {
+    if (!subscribeToSession) {
+      return false;
+    }
+    const attempt = reconnectAttemptsRef.current + 1;
+    if (attempt > maxReconnectAttempts) {
+      console.warn(`[useAgentChat] Max reconnection attempts (${maxReconnectAttempts}) exceeded`);
+      return false;
+    }
+    reconnectAttemptsRef.current = attempt;
+    setIsReconnecting(true);
+    onReconnect?.(attempt, targetSessionId);
+    const delay = reconnectBaseDelay * Math.pow(2, attempt - 1);
+    console.log(`[useAgentChat] Reconnection attempt ${attempt}/${maxReconnectAttempts} in ${delay}ms`);
+    await new Promise((resolve) => setTimeout(resolve, delay));
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    try {
+      const stream = subscribeToSession(targetSessionId, controller.signal);
+      let localStreamingEntries = [...currentEntries];
+      for await (const event of stream) {
+        if (controller.signal.aborted) break;
+        eventCountRef.current++;
+        localStreamingEntries = processEvent(event, localStreamingEntries);
+        emitStreamingEntries(localStreamingEntries);
+        if (event.type === "complete" || event.type === "session_end" || event.type === "error") {
+          reconnectAttemptsRef.current = 0;
+          setIsReconnecting(false);
+          if (event.type === "complete" && localStreamingEntries.length > 0) {
+            setHistoryEntries((prev) => [...prev, ...localStreamingEntries]);
+            setStreamingEntries([]);
+          }
+          return true;
+        }
+      }
+      reconnectAttemptsRef.current = 0;
+      setIsReconnecting(false);
+      if (localStreamingEntries.length > 0) {
+        setHistoryEntries((prev) => [...prev, ...localStreamingEntries]);
+        setStreamingEntries([]);
+      }
+      return true;
+    } catch (err) {
+      const isAbort = err.name === "AbortError" || err.message?.includes("aborted") || err.message?.includes("BodyStreamBuffer");
+      if (isAbort && !controller.signal.aborted) {
+        console.log(`[useAgentChat] Reconnection stream interrupted, will retry...`);
+        setIsReconnecting(false);
+        return attemptReconnect(targetSessionId, streamingEntriesRef.current);
+      }
+      setIsReconnecting(false);
+      if (!controller.signal.aborted) {
+        const errorMessage = err instanceof Error ? err.message : "Reconnection failed";
+        console.error(`[useAgentChat] Reconnection failed:`, errorMessage);
+      }
+      return false;
+    }
+  }, [subscribeToSession, maxReconnectAttempts, reconnectBaseDelay, onReconnect, processEvent, emitStreamingEntries]);
   const send = useCallback(async (prompt) => {
     if (isStreaming) return;
+    let finalPrompt = prompt;
+    let additionalMetadata = {};
+    let additionalContext;
+    if (onBeforeSend) {
+      try {
+        const result = await onBeforeSend({
+          prompt,
+          sessionId,
+          entries: [...historyEntries, ...streamingEntries]
+        });
+        if (result?.cancel) {
+          return;
+        }
+        if (result?.prompt !== void 0) finalPrompt = result.prompt;
+        if (result?.metadata) additionalMetadata = result.metadata;
+        if (result?.sessionContext) additionalContext = result.sessionContext;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Send cancelled";
+        setError(errorMessage);
+        onError?.(errorMessage);
+        return;
+      }
+    }
+    if (middleware?.length) {
+      const middlewareRequest = {
+        prompt: finalPrompt,
+        sessionId,
+        metadata: additionalMetadata,
+        sessionContext: additionalContext
+      };
+      const { request, error: middlewareError } = await applyRequestMiddleware(middleware, middlewareRequest);
+      if (middlewareError) {
+        setError(middlewareError);
+        onError?.(middlewareError);
+        await callMiddlewareError(middleware, middlewareError);
+        return;
+      }
+      finalPrompt = request.prompt;
+      additionalMetadata = request.metadata || {};
+      additionalContext = request.sessionContext;
+    }
     setIsStreaming(true);
     setError(null);
+    reconnectAttemptsRef.current = 0;
+    eventCountRef.current = 0;
     const userEntry = {
-      id: `user-${Date.now()}`,
+      id: `user-${Date.now()}-${Math.random().toString(36).slice(2)}`,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       entryType: { type: "user_message" },
       content: prompt
@@ -3659,39 +3788,91 @@ function useAgentChat(options) {
     const controller = new AbortController();
     abortControllerRef.current = controller;
     let localStreamingEntries = [];
+    let completedSessionId = null;
     try {
-      const stream = createStream(prompt, sessionId || void 0, controller.signal);
+      const stream = createStream(finalPrompt, sessionId || void 0, {
+        signal: controller.signal,
+        metadata: Object.keys(additionalMetadata).length > 0 ? additionalMetadata : void 0,
+        sessionContext: additionalContext
+      });
       for await (const event of stream) {
         if (controller.signal.aborted) break;
-        localStreamingEntries = processEvent(event, localStreamingEntries);
+        eventCountRef.current++;
+        if (event.type === "session_start" && event.sessionId) {
+          completedSessionId = event.sessionId;
+        }
+        if (onEvent) {
+          try {
+            await onEvent(event);
+          } catch (err) {
+            console.error("[useAgentChat] onEvent error:", err);
+          }
+        }
+        let processedEvent = event;
+        if (middleware?.length) {
+          processedEvent = await applyEventMiddleware(middleware, event);
+        }
+        if (!processedEvent) continue;
+        localStreamingEntries = processEvent(processedEvent, localStreamingEntries);
         emitStreamingEntries(localStreamingEntries);
       }
       if (localStreamingEntries.length > 0) {
         setHistoryEntries((prev) => [...prev, ...localStreamingEntries]);
         setStreamingEntries([]);
       }
+      reconnectAttemptsRef.current = 0;
+      if (middleware?.length && (completedSessionId || sessionIdRef.current)) {
+        await callMiddlewareComplete(middleware, completedSessionId || sessionIdRef.current || "");
+      }
     } catch (err) {
-      if (err.name !== "AbortError") {
+      const isAbort = err.name === "AbortError" || err.message?.includes("aborted") || err.message?.includes("BodyStreamBuffer");
+      if (isAbort && !controller.signal.aborted) {
+        const currentSessionId = sessionIdRef.current;
+        const hadEvents = eventCountRef.current > 0;
+        console.log(`[useAgentChat] Stream interrupted. sessionId=${currentSessionId}, events=${eventCountRef.current}`);
+        if (currentSessionId && hadEvents && subscribeToSession) {
+          console.log(`[useAgentChat] Attempting auto-reconnection...`);
+          const reconnected = await attemptReconnect(currentSessionId, streamingEntriesRef.current);
+          if (reconnected) {
+            return;
+          }
+          const errorMsg = "Connection lost. Please try again.";
+          setError(errorMsg);
+          onError?.(errorMsg);
+          if (middleware?.length) {
+            await callMiddlewareError(middleware, errorMsg);
+          }
+        }
+      } else if (!isAbort) {
         const errorMessage = err instanceof Error ? err.message : "Unknown error";
         setError(errorMessage);
         onError?.(errorMessage);
+        if (middleware?.length) {
+          await callMiddlewareError(middleware, errorMessage);
+        }
       }
     } finally {
       setIsStreaming(false);
+      setIsReconnecting(false);
       abortControllerRef.current = null;
       resetStreamingState();
     }
-  }, [isStreaming, sessionId, createStream, processEvent, emitStreamingEntries, resetStreamingState, onError]);
+  }, [isStreaming, sessionId, historyEntries, streamingEntries, createStream, subscribeToSession, processEvent, emitStreamingEntries, resetStreamingState, onError, attemptReconnect, onBeforeSend, onEvent, middleware]);
   const stop = useCallback(() => {
+    reconnectAttemptsRef.current = maxReconnectAttempts + 1;
+    setIsReconnecting(false);
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
-  }, []);
+  }, [maxReconnectAttempts]);
   const clear = useCallback(() => {
     setHistoryEntries([]);
     resetStreamingState();
     setSessionId(initialSessionId || null);
     setError(null);
+    setIsReconnecting(false);
+    reconnectAttemptsRef.current = 0;
+    eventCountRef.current = 0;
   }, [initialSessionId, resetStreamingState]);
   const setEntries = useCallback((newEntries) => {
     resetStreamingState();
@@ -3707,6 +3888,7 @@ function useAgentChat(options) {
   return {
     entries,
     isStreaming,
+    isReconnecting,
     error,
     sessionId,
     send,
@@ -3715,6 +3897,254 @@ function useAgentChat(options) {
     setEntries
   };
 }
+function generateId() {
+  return `msg-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function useChat(options) {
+  const {
+    createStream,
+    // subscribeToSession, // TODO: implement reconnection support
+    initialSessionId,
+    initialMessages = [],
+    onToolCall,
+    onFinish,
+    onError,
+    onSessionStart,
+    maxReconnectAttempts = 3,
+    // reconnectBaseDelay = 1000, // TODO: implement reconnection support
+    middleware
+  } = options;
+  const [messages, setMessages] = useState(initialMessages);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isReconnecting, setIsReconnecting] = useState(false);
+  const [error, setError] = useState(void 0);
+  const [sessionId, setSessionId] = useState(initialSessionId || null);
+  const [input, setInput] = useState("");
+  const abortControllerRef = useRef(null);
+  const currentAssistantMessageRef = useRef(null);
+  const reconnectAttemptsRef = useRef(0);
+  const sessionIdRef = useRef(sessionId);
+  useEffect(() => {
+    sessionIdRef.current = sessionId;
+  }, [sessionId]);
+  const entries = messagesToNormalizedEntries(messages);
+  const updateStreamingMessage = useCallback((updater) => {
+    if (!currentAssistantMessageRef.current) return;
+    currentAssistantMessageRef.current = updater(currentAssistantMessageRef.current);
+    const currentMsg = currentAssistantMessageRef.current;
+    setMessages((prev) => {
+      const lastIndex = prev.length - 1;
+      const lastMessage = prev[lastIndex];
+      if (lastIndex >= 0 && lastMessage && currentMsg && lastMessage.id === currentMsg.id) {
+        return [...prev.slice(0, lastIndex), currentMsg];
+      }
+      return prev;
+    });
+  }, []);
+  const processEvent = useCallback((event) => {
+    switch (event.type) {
+      case "session_start":
+        if (event.sessionId) {
+          setSessionId(event.sessionId);
+          onSessionStart?.(event.sessionId);
+        }
+        break;
+      case "text_delta":
+        if (event.delta) {
+          updateStreamingMessage((msg) => ({
+            ...msg,
+            content: msg.content + event.delta
+          }));
+        }
+        break;
+      case "tool_use":
+        if (event.toolId && event.toolName) {
+          const toolInvocation = {
+            state: "call",
+            toolCallId: event.toolId,
+            toolName: event.toolName,
+            args: event.input || {}
+          };
+          updateStreamingMessage((msg) => ({
+            ...msg,
+            toolInvocations: [...msg.toolInvocations || [], toolInvocation]
+          }));
+          onToolCall?.({ toolCall: toolInvocation });
+        }
+        break;
+      case "tool_result":
+        if (event.toolId) {
+          updateStreamingMessage((msg) => ({
+            ...msg,
+            toolInvocations: msg.toolInvocations?.map(
+              (inv) => inv.toolCallId === event.toolId ? { ...inv, state: "result", result: event.toolResult } : inv
+            )
+          }));
+        }
+        break;
+      case "text":
+        if (event.text && !currentAssistantMessageRef.current?.content) {
+          updateStreamingMessage((msg) => ({
+            ...msg,
+            content: event.text || ""
+          }));
+        }
+        break;
+      case "error":
+        if (event.error) {
+          const err = new Error(event.error);
+          setError(err);
+          onError?.(err);
+        }
+        break;
+      case "complete":
+        if (currentAssistantMessageRef.current) {
+          onFinish?.(currentAssistantMessageRef.current);
+        }
+        break;
+    }
+  }, [updateStreamingMessage, onToolCall, onFinish, onError, onSessionStart]);
+  const append = useCallback(async (messageOrContent, options2) => {
+    if (isLoading) return null;
+    const userMessage = typeof messageOrContent === "string" ? {
+      id: generateId(),
+      role: "user",
+      content: messageOrContent,
+      createdAt: /* @__PURE__ */ new Date()
+    } : {
+      id: messageOrContent.id || generateId(),
+      role: messageOrContent.role,
+      content: messageOrContent.content,
+      toolInvocations: messageOrContent.toolInvocations,
+      reasoning: messageOrContent.reasoning,
+      createdAt: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    setIsLoading(true);
+    setError(void 0);
+    reconnectAttemptsRef.current = 0;
+    const assistantMessage = {
+      id: generateId(),
+      role: "assistant",
+      content: "",
+      createdAt: /* @__PURE__ */ new Date()
+    };
+    currentAssistantMessageRef.current = assistantMessage;
+    setMessages((prev) => [...prev, assistantMessage]);
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    try {
+      let finalPrompt = userMessage.content;
+      let additionalMetadata = options2?.body || {};
+      if (middleware?.length) {
+        const middlewareRequest = {
+          prompt: finalPrompt,
+          sessionId: sessionIdRef.current,
+          metadata: additionalMetadata
+        };
+        const { request, error: middlewareError } = await applyRequestMiddleware(middleware, middlewareRequest);
+        if (middlewareError) {
+          const err = new Error(middlewareError);
+          setError(err);
+          onError?.(err);
+          setIsLoading(false);
+          return null;
+        }
+        finalPrompt = request.prompt;
+        additionalMetadata = request.metadata || {};
+      }
+      const streamOptions = {
+        signal: controller.signal,
+        metadata: Object.keys(additionalMetadata).length > 0 ? additionalMetadata : void 0
+      };
+      const stream = createStream(finalPrompt, sessionIdRef.current || void 0, streamOptions);
+      for await (const event of stream) {
+        if (controller.signal.aborted) break;
+        let processedEvent = event;
+        if (middleware?.length) {
+          processedEvent = await applyEventMiddleware(middleware, event);
+        }
+        if (processedEvent) {
+          processEvent(processedEvent);
+        }
+      }
+      if (middleware?.length && sessionIdRef.current) {
+        await callMiddlewareComplete(middleware, sessionIdRef.current);
+      }
+      return assistantMessage.id;
+    } catch (err) {
+      const isAbort = err.name === "AbortError";
+      if (!isAbort) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        onError?.(error2);
+        if (middleware?.length) {
+          await callMiddlewareError(middleware, error2.message);
+        }
+      }
+      return null;
+    } finally {
+      setIsLoading(false);
+      setIsReconnecting(false);
+      abortControllerRef.current = null;
+      currentAssistantMessageRef.current = null;
+    }
+  }, [isLoading, createStream, processEvent, middleware, onError]);
+  const stop = useCallback(() => {
+    reconnectAttemptsRef.current = maxReconnectAttempts + 1;
+    setIsReconnecting(false);
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, [maxReconnectAttempts]);
+  const reload = useCallback(async () => {
+    let lastUserMessageIndex = -1;
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i]?.role === "user") {
+        lastUserMessageIndex = i;
+        break;
+      }
+    }
+    if (lastUserMessageIndex === -1) return null;
+    const lastUserMessage = messages[lastUserMessageIndex];
+    if (!lastUserMessage) return null;
+    setMessages(messages.slice(0, lastUserMessageIndex + 1));
+    return append(lastUserMessage);
+  }, [messages, append]);
+  const handleInputChange = useCallback((e) => {
+    setInput(e.target.value);
+  }, []);
+  const handleSubmit = useCallback((e, options2) => {
+    e?.preventDefault();
+    if (!input.trim()) return;
+    const message = input;
+    setInput("");
+    append(message, options2);
+  }, [input, append]);
+  useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+  return {
+    messages,
+    isLoading,
+    error,
+    sessionId,
+    append,
+    stop,
+    setMessages,
+    reload,
+    input,
+    setInput,
+    handleInputChange,
+    handleSubmit,
+    isReconnecting,
+    entries
+  };
+}
 function textToBase64(text) {
   const encoder = new TextEncoder();
   const bytes = encoder.encode(text);
@@ -3788,6 +4218,6 @@ function useLongTextConversion({
   };
 }
 
-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, RichContentRenderer, 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 };
+export { ActionIcon, AlertCircleIcon, AlertTriangleIcon, ArrowUpIcon, Attachment, AttachmentInfo, AttachmentPreview, AttachmentRemove, Attachments, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, ClockIcon, CodeBlock, CodeIcon, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, CopyIcon, DEFAULT_STYLE_CONFIG, EditIcon, EnvVarsPanel, ErrorIcon, FileBadgeCompact, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, HomeIcon, InfoIcon, JsonDisplay, LazyMarkdown, ListChecksIcon, LoaderIcon, LoadingDots, LoadingSpinner, LogsPanel, Message, MessageAction, MessageActions, MessageAvatar, MessageContent, MessageResponse, MessageShimmer, MessageSquareIcon, MessageTimestamp, MicrophoneIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, Reasoning, ReasoningContent, ReasoningTrigger, SearchIcon, SendIcon, Shimmer, ShimmerBlock, ShimmerLine, ShimmerText, SparklesIcon, SpinnerIcon, StatusIndicator, StopCircleIcon, SunIcon, Task, TaskContent, TaskItem, TaskList, TaskTrigger, TerminalIcon, ThinkingIndicator, Tool, ToolHeader, ToolIcon, ToolInput, ToolList, ToolOutput, UserIcon, XCircleIcon, XIcon, allKeyframesCss, applyEventMiddleware, applyRequestMiddleware, borderRadius, callMiddlewareComplete, callMiddlewareError, cn, colors, createToolCall, cssVars, extractTextContent, formatElapsedTime, formatFileSize, formatFileSize2 as formatFileSizeHook, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, inlineStyles, isAgentToolAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry, keyframes, keyframesCss, mapToolToActionType, messageToNormalizedEntry, messagesToNormalizedEntries, normalizeToolResult, normalizedEntriesToMessages, normalizedEntryToMessage, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useAgentChat, useAttachment, useChat, useConversation, useFileUpload, useLongTextConversion, useMessage, useMessageQueue, useReasoning, useStopExecution, useTask, useTool, widget, zIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map