@ash-cloud/ash-ui 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -3,7 +3,7 @@
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/ToolCallCard.tsx
+// src/components/Conversation.tsx
 
 // src/utils.ts
 function formatToolName(name) {
@@ -362,39 +362,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 = [];
@@ -444,6 +411,376 @@ function parseOptionsFromContent(content) {
   }
   return null;
 }
+var ConversationContext = react.createContext(null);
+function useConversation() {
+  const context = react.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 = react.useRef(null);
+  const [isScrolledUp, setIsScrolledUp] = react.useState(false);
+  const [autoScroll, setAutoScroll] = react.useState(initialAutoScroll);
+  const scrollToBottom = react.useCallback((behavior = "smooth") => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        top: containerRef.current.scrollHeight,
+        behavior
+      });
+    }
+  }, []);
+  const handleScroll = react.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]);
+  react.useEffect(() => {
+    if (autoScroll && !isScrolledUp) {
+      scrollToBottom("instant");
+    }
+  });
+  const contextValue = {
+    containerRef,
+    scrollToBottom,
+    isScrolledUp,
+    autoScroll,
+    setAutoScroll
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ConversationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "w-4 h-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 14l-7 7m0 0l-7-7m7 7V3"
+              }
+            )
+          }
+        ),
+        label
+      ] })
+    }
+  );
+}
+var ReactMarkdown = react.lazy(() => import('react-markdown'));
+function LazyMarkdown({ children, fallback, components, className }) {
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const markdownComponents = react.useMemo(() => {
+    if (!components) return void 0;
+    return components;
+  }, [components]);
+  if (!mounted) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown, { components: markdownComponents, children }) });
+}
+var MessageContext = react.createContext(null);
+function useMessage() {
+  const context = react.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__ */ jsxRuntime.jsx(MessageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "ash-message-response",
+        "font-[var(--ash-font-size-base,13px)]",
+        "leading-relaxed",
+        isStreaming && "animate-pulse",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { components, children: content })
+    }
+  );
+}
+function MessageActions({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-full flex-shrink-0",
+        sizeClasses[size],
+        statusClasses[status],
+        className
+      )
+    }
+  );
+}
 function SunIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }),
@@ -694,57 +1031,25 @@ function ErrorIcon({ className }) {
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "rounded-full flex-shrink-0",
-        sizeClasses[size],
-        statusClasses[status],
-        className
-      )
-    }
-  );
+function MicrophoneIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TerminalIcon, { className });
-    case "file_read":
-      return /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { className });
-    case "file_edit":
-      return /* @__PURE__ */ jsxRuntime.jsx(EditIcon, { className });
-    case "file_write":
-      return /* @__PURE__ */ jsxRuntime.jsx(FilePlusIcon, { className });
-    case "search":
-      return /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className });
-    case "glob":
-      return /* @__PURE__ */ jsxRuntime.jsx(FolderSearchIcon, { className });
-    case "web_fetch":
-      return /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { className });
-    case "web_search":
-      return /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className });
-    case "mcp_tool":
-      return /* @__PURE__ */ jsxRuntime.jsx(PlugIcon, { className });
-    case "todo_write":
-      return /* @__PURE__ */ jsxRuntime.jsx(ListChecksIcon, { className });
-    case "agent_tool":
-      return /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className });
-    case "generic_tool":
-    default:
-      return /* @__PURE__ */ jsxRuntime.jsx(ToolIcon, { className });
-  }
+function HomeIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 22 9 12 15 12 15 22" })
+  ] });
+}
+function ArrowUpIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "5 12 12 5 19 12" })
+  ] });
 }
 function CodeBlock({
   children,
@@ -754,14 +1059,41 @@ function CodeBlock({
   className
 }) {
   const [expanded, setExpanded] = react.useState(false);
+  const [copied, setCopied] = react.useState(false);
   const lines = children.split("\n");
   const isLong = lines.length > 10 || children.length > 500;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
+  const handleCopy = react.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__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-lg overflow-hidden border border-white/10", className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/60 font-medium", children: language || "code" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "flex items-center gap-1.5 text-xs text-white/60 hover:text-white transition-colors",
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Copied!" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Copy" })
+          ] })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.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,
@@ -794,1519 +1126,1173 @@ function JsonDisplay({ value, maxHeight, className }) {
   const formatted = JSON.stringify(value, null, 2);
   return /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { maxHeight, className, children: formatted });
 }
-function AgentToolCard({
-  toolCall,
-  defaultExpanded = false,
+var ToolContext = react.createContext(null);
+function useTool() {
+  const context = react.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] = react.useState(defaultExpanded);
-  const [elapsedTime, setElapsedTime] = react.useState("");
-  const intervalRef = react.useRef(null);
-  const { actionType, status, summary, nestedToolCalls, nestedToolCallCount, startedAt } = toolCall;
-  const agentData = react.useMemo(() => {
-    if (actionType.action !== "agent_tool") {
-      return null;
+  const [isExpanded, setIsExpanded] = react.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__ */ jsxRuntime.jsx(ToolContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ToolHeader, {}),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToolInput, {}),
+          /* @__PURE__ */ jsxRuntime.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";
-  react.useEffect(() => {
-    if (isRunning && startedAt) {
-      setElapsedTime(formatElapsedTime(startedAt));
-      intervalRef.current = setInterval(() => {
-        setElapsedTime(formatElapsedTime(startedAt));
-      }, 1e3);
-      return () => {
-        if (intervalRef.current) {
-          clearInterval(intervalRef.current);
-          intervalRef.current = null;
-        }
-      };
-    } else if (!isRunning) {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-      setElapsedTime("");
+  ) });
+}
+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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StatusIndicator, { status, size: "sm" }),
+        toolIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]", children: toolIcon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
-        isRunning ? "border-yellow-500/30" : status === "failed" ? "border-red-500/30" : "border-white/10",
-        indentClass,
+        "ash-tool-input",
+        "border-t border-[var(--ash-border-subtle,rgba(255,255,255,0.04))]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-tool-section-header", children: "Input" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                ChevronRightIcon,
-                {
-                  className: cn(
-                    "w-4 h-4 text-white/40 transition-transform duration-200 shrink-0",
-                    expanded && "rotate-90"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
-                    isRunning ? "bg-yellow-500/20" : status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
-                  ),
-                  children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(
-                    SpinnerIcon,
-                    {
-                      className: "w-3.5 h-3.5 text-yellow-400 animate-spin"
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(
-                    BotIcon,
-                    {
-                      className: cn(
-                        "w-3.5 h-3.5",
-                        status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
-                      )
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: cn(
-                    "px-2 py-0.5 rounded text-xs font-medium shrink-0",
-                    isRunning ? "bg-yellow-500/20 text-yellow-400" : status === "failed" ? "bg-red-500/20 text-red-400" : "bg-white/10 text-white/70"
-                  ),
-                  children: agentType
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/80 truncate flex-1 text-left", children: description || summary }),
-              toolCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/50 shrink-0", children: [
-                toolCount,
-                " tool call",
-                toolCount !== 1 ? "s" : ""
-              ] }),
-              isRunning && elapsedTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-white/40 shrink-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { className: "w-3 h-3" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: elapsedTime })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/30 shrink-0", children: "..." })
-            ]
+            className: "p-3 overflow-auto",
+            style: { maxHeight },
+            children: /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: toolInvocation.args })
           }
-        ),
-        expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 bg-black/20", children: [
-          prompt && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-white/5", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70 whitespace-pre-wrap", children: prompt.length > 500 ? prompt.substring(0, 500) + "..." : prompt }) }),
-          nestedToolCalls && nestedToolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 space-y-2", children: nestedToolCalls.map((nestedCall) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: nestedCall.actionType.action === "agent_tool" ? /* @__PURE__ */ jsxRuntime.jsx(
-            AgentToolCard,
-            {
-              toolCall: nestedCall,
-              defaultExpanded: false,
-              depth: depth + 1
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            ToolCallCard,
-            {
-              toolCall: nestedCall,
-              defaultExpanded: false
-            }
-          ) }, nestedCall.id)) }),
-          (!nestedToolCalls || nestedToolCalls.length === 0) && isRunning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-6 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-white/40", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "w-4 h-4 animate-spin" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Agent is working..." })
-          ] }) }),
-          (!nestedToolCalls || nestedToolCalls.length === 0) && !isRunning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-4 text-sm text-white/40 text-center", children: "No tool calls recorded" })
-        ] })
+        )
       ]
     }
   );
 }
-function SectionHeader({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-tool-section-header", children });
-}
-function SectionContent({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2", children });
-}
-function CommandRunDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    action.command && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "COMMAND" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: action.command }) })
-    ] }),
-    action.result?.output && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "OUTPUT" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { maxHeight: 300, children: action.result.output }),
-        action.result.exitCode !== void 0 && action.result.exitCode !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-xs text-red-400", children: [
-          "Exit code: ",
-          action.result.exitCode
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function FileReadDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATH" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
-        action.offset !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Offset: ",
-          action.offset
-        ] }),
-        action.offset !== void 0 && action.limit !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: " \xB7 " }),
-        action.limit !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Limit: ",
-          action.limit
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function FileEditDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATH" }),
-    /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "OLD" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: action.oldString }) })
-    ] }),
-    action.newString && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "NEW" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: action.newString }) })
-    ] })
-  ] });
-}
-function FileWriteDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATH" }),
-    /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "CONTENT" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { maxHeight: 300, children: action.content }) })
-    ] })
-  ] });
-}
-function SearchDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATTERN" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
-        action.path && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Path: ",
-          action.path
-        ] }),
-        action.glob && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Glob: ",
-          action.glob
-        ] }),
-        action.type && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Type: ",
-          action.type
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function GlobDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATTERN" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
-        "Path: ",
-        action.path
-      ] })
-    ] })
-  ] });
-}
-function WebFetchDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "URL" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-2 text-xs text-white/50", children: action.prompt })
-    ] })
-  ] });
-}
-function WebSearchDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "QUERY" }),
-    /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/90", children: action.query }) })
-  ] });
-}
-function McpToolDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "TOOL" }),
-    /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "ARGS" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.arguments }) })
-    ] }),
-    action.result && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "RESULT" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.result.value }) })
-    ] })
-  ] });
-}
-function GenericToolDetails({ action }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    action.arguments && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "ARGS" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.arguments }) })
-    ] }),
-    action.result && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "RESULT" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.result.value }) })
-    ] })
-  ] });
-}
-function TodoWriteDetails({ action }) {
-  const { todos, stats } = action;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    stats && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PROGRESS" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-2 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/60 tabular-nums", children: [
-            stats.completed,
-            "/",
-            stats.total
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 mt-2 text-xs", children: [
-          stats.inProgress > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-yellow-400", children: [
-            stats.inProgress,
-            " in progress"
-          ] }),
-          stats.pending > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/40", children: [
-            stats.pending,
-            " pending"
-          ] })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "TASKS" }),
-    /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: todos.map((todo, index) => {
-      const displayText = todo.status === "in_progress" ? todo.activeForm : todo.content;
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CheckCircleIcon, { className: "w-4 h-4 text-emerald-400 shrink-0 mt-0.5" }) : todo.status === "in_progress" ? /* @__PURE__ */ jsxRuntime.jsx(LoaderIcon, { className: "w-4 h-4 text-yellow-400 animate-spin shrink-0 mt-0.5" }) : /* @__PURE__ */ jsxRuntime.jsx(CircleIcon, { className: "w-4 h-4 text-white/30 shrink-0 mt-0.5" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: cn(
-                  "text-sm leading-relaxed",
-                  todo.status === "completed" ? "text-white/50 line-through" : "text-white/80"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CommandRunDetails, { action: actionType });
-    case "file_read":
-      return /* @__PURE__ */ jsxRuntime.jsx(FileReadDetails, { action: actionType });
-    case "file_edit":
-      return /* @__PURE__ */ jsxRuntime.jsx(FileEditDetails, { action: actionType });
-    case "file_write":
-      return /* @__PURE__ */ jsxRuntime.jsx(FileWriteDetails, { action: actionType });
-    case "search":
-      return /* @__PURE__ */ jsxRuntime.jsx(SearchDetails, { action: actionType });
-    case "glob":
-      return /* @__PURE__ */ jsxRuntime.jsx(GlobDetails, { action: actionType });
-    case "web_fetch":
-      return /* @__PURE__ */ jsxRuntime.jsx(WebFetchDetails, { action: actionType });
-    case "web_search":
-      return /* @__PURE__ */ jsxRuntime.jsx(WebSearchDetails, { action: actionType });
-    case "mcp_tool":
-      return /* @__PURE__ */ jsxRuntime.jsx(McpToolDetails, { action: actionType });
-    case "generic_tool":
-      return /* @__PURE__ */ jsxRuntime.jsx(GenericToolDetails, { action: actionType });
-    case "todo_write":
-      return /* @__PURE__ */ jsxRuntime.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] = react.useState(defaultExpanded);
-  const { actionType, status, summary } = toolCall;
-  if (actionType.action === "agent_tool") {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(actionType) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm truncate text-white/60 min-w-0", children: summary })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status, size: "sm" }),
-                canExpand && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 max-h-[400px] overflow-y-auto ash-scrollbar bg-black/20", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToolDetails, { actionType }),
-          status === "success" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-t border-white/5 bg-[var(--ash-accent)]/5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--ash-accent)] font-medium", children: "Completed successfully" })
-          ] }) })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "p-3 overflow-auto",
+            style: { maxHeight },
+            children: isString ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { maxHeight: maxHeight - 24, children: result }) : /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: result })
+          }
+        )
       ]
     }
   );
 }
-var ReactMarkdown = react.lazy(() => import('react-markdown'));
-function LazyMarkdown({ children, fallback, className }) {
-  const [mounted, setMounted] = react.useState(false);
-  react.useEffect(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown, { children }) });
-}
-function 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__ */ jsxRuntime.jsxs(
-    "span",
+function ToolList({
+  toolInvocations,
+  className,
+  defaultExpanded = false
+}) {
+  if (!toolInvocations || toolInvocations.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        Tool,
+        {
+          toolInvocation: inv,
+          defaultExpanded
+        },
+        inv.toolCallId
+      ))
     }
   );
 }
-function RichContentRenderer({
-  content,
-  renderers,
-  className
+var ReasoningContext = react.createContext(null);
+function useReasoning() {
+  const context = react.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__ */ jsxRuntime.jsx("div", { className: cn("rich-content", className), children: content.map((segment, index) => {
-    const key = `segment-${index}`;
-    switch (segment.type) {
-      case "text":
-        return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: segment.content }) }, key);
-      case "mention":
-        if (renderers?.renderMention) {
-          return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderers.renderMention({ segment }) }, key);
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(DefaultMentionBadge, { segment }, key);
-      case "component":
-        if (renderers?.renderComponent) {
-          return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderers.renderComponent({ segment }) }, key);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [duration, setDuration] = react.useState(initialDuration);
+  const startTimeRef = react.useRef(null);
+  const intervalRef = react.useRef(null);
+  react.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__ */ jsxRuntime.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]);
+  react.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__ */ jsxRuntime.jsx(ReasoningContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("grid gap-2 mt-3", className), style: {
-    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))"
-  }, children: options.map((option) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-white/90 group-hover:text-white transition-colors", children: option.label }),
-          option.description && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+            children: isStreaming ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                className: "w-4 h-4 text-purple-400 animate-spin",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      className: "opacity-25",
+                      cx: "12",
+                      cy: "12",
+                      r: "10",
+                      stroke: "currentColor",
+                      strokeWidth: "4"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "w-4 h-4 text-purple-400",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 justify-end ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[85%]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl p-4 bg-[var(--ash-accent)] text-[var(--ash-accent-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: text || "(files attached)" }) }),
-      files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 pt-2 border-t border-[var(--ash-accent-foreground)]/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-[var(--ash-accent-foreground)]/60 mb-1 flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PaperclipIcon, { className: "w-3 h-3" }),
-          "Attached Files"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        RichContentRenderer,
-        {
-          content: entry.richContent,
-          renderers: richContentRenderers
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: textContent || entry.content });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 max-w-[85%]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        parsedOptions.preamble && 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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 9l-7 7-7-7"
+              }
+            )
           }
         )
-      ] }) : renderContent() }) }),
-      entry.timestamp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
-    ] })
-  ] });
-}
-function ThinkingMessage({ entry, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SparklesIcon, { className: "w-4 h-4 text-purple-400" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl p-4 bg-purple-500/10 border border-purple-500/30", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-purple-400 mb-2 font-medium", children: "Thinking" }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ToolCallCard, { toolCall: entry.entryType.toolCall, defaultExpanded }) })
-  ] });
-}
-function ErrorMessage({ entry, className }) {
-  if (entry.entryType.type !== "error") return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-red-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "w-4 h-4 text-red-400" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl p-4 bg-red-500/10 border border-red-500/30", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-red-400 mb-2 font-medium", children: "Error" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-300", children: entry.entryType.message }),
-      entry.entryType.code && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(UserMessage, { entry, className });
-    case "assistant_message":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        AssistantMessage,
+  const { isOpen, isStreaming } = useReasoning();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ThinkingMessage, { entry, className });
-    case "tool_call":
-      return /* @__PURE__ */ jsxRuntime.jsx(ToolCallMessage, { entry, defaultExpanded, className });
-    case "error":
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]), style: { animationDelay: "150ms" } }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-1", className), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("animate-spin text-[var(--ash-accent)]", spinnerSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", className: "opacity-25" }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("relative", className), children: renderMarkdown ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: content }),
-    isStreaming && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { variant: "cursor", size: "sm", className: "inline-block ml-0.5" })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: [
-    content,
-    isStreaming && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cn(
-            "font-medium",
-            status === "pending" ? "text-white/90" : status === "failed" ? "text-red-400" : "text-white/60"
-          ), children: label })
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 bg-current rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 bg-current rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 bg-current rounded-full animate-bounce", style: { animationDelay: "300ms" } })
         ] }),
-        displayPath && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0 font-mono", children: [
-          diffStats.added !== void 0 && diffStats.added > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-emerald-400", children: [
-            "+",
-            diffStats.added
-          ] }),
-          diffStats.removed !== void 0 && diffStats.removed > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-red-400", children: [
-            "-",
-            diffStats.removed
-          ] }),
-          diffStats.read !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/40", children: [
-            diffStats.read,
-            " lines"
-          ] }),
-          diffStats.written !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-emerald-400", children: [
-            "+",
-            diffStats.written
-          ] })
-        ] }),
-        showSummary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/40 truncate min-w-0 text-xs", children: summary })
+        /* @__PURE__ */ jsxRuntime.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 = react.createContext(null);
+function useTask() {
+  const context = react.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] = react.useState(defaultOpen);
+  const contextValue = {
+    isOpen,
+    setIsOpen
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TaskContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[10px] opacity-60 font-semibold", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/80 truncate max-w-[120px]", children: fileName }),
-        hasDiff && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5", children: [
-          linesAdded !== void 0 && linesAdded > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-emerald-400", children: [
-            "+",
-            linesAdded
-          ] }),
-          linesRemoved !== void 0 && linesRemoved > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-red-400", children: [
-            "-",
-            linesRemoved
-          ] })
-        ] })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(defaultExpanded);
-  const [expandedCardId, setExpandedCardId] = react.useState(null);
-  const fileChanges = react.useMemo(() => extractFileChanges(toolCalls), [toolCalls]);
-  const actionCounts = react.useMemo(() => countActionTypes(toolCalls), [toolCalls]);
-  const displayActions = react.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__ */ jsxRuntime.jsxs("div", { className: cn("ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+  const statusIcons = {
+    pending: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 })
+      }
+    ),
+    in_progress: /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: "w-4 h-4 text-yellow-400 animate-spin",
+        fill: "none",
+        viewBox: "0 0 24 24",
         children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-sm text-white/60", children: [
-            totalCount,
-            " tool call",
-            totalCount !== 1 ? "s" : ""
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: displayActions.map((action) => {
-            const IconComponent = getActionIconComponent(action);
-            if (!IconComponent) return null;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              IconComponent,
-              {
-                className: "w-3.5 h-3.5 text-white/30"
-              },
-              action
-            );
-          }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-          !expanded && fileChanges.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-wrap justify-end", children: [
-            fileChanges.slice(0, 4).map((fc) => /* @__PURE__ */ jsxRuntime.jsx(
-              FileBadge,
-              {
-                path: fc.path,
-                linesAdded: fc.linesAdded,
-                linesRemoved: fc.linesRemoved
-              },
-              fc.path
-            )),
-            fileChanges.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/40", children: [
-              "+",
-              fileChanges.length - 4,
-              " more"
-            ] })
-          ] })
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "pl-5 border-l border-white/10 ml-1.5 mt-1 space-y-0.5", children: toolCalls.map((toolCall) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: expandedCardId === toolCall.id ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ToolCallCard,
-        {
-          toolCall,
-          defaultExpanded: true
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => setExpandedCardId(null),
-          className: "text-xs text-white/40 hover:text-white/60 mt-1 pl-1",
-          children: "Collapse"
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+    completed: /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
       {
-        onClick: () => setExpandedCardId(toolCall.id),
-        className: "w-full text-left hover:bg-white/5 rounded px-1 -mx-1 transition-colors",
-        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(defaultExpanded);
-  const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
-  const handleToggle = react.useCallback(() => {
-    if (onToggle) {
-      onToggle();
-    } else {
-      setInternalExpanded((prev) => !prev);
-    }
-  }, [onToggle]);
-  const fileChanges = react.useMemo(() => extractFileChanges2(toolCalls), [toolCalls]);
-  const actionCounts = react.useMemo(() => countActionTypes2(toolCalls), [toolCalls]);
-  const displayActions = react.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__ */ jsxRuntime.jsxs("div", { className: cn("ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+  const completed = items.filter((t) => t.status === "completed").length;
+  const total = items.length;
+  const displayTitle = title || `Tasks (${completed}/${total})`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Task, { defaultOpen, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TaskTrigger, { children: displayTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx(TaskContent, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      TaskItem,
       {
-        type: "button",
-        onClick: handleToggle,
-        className: "w-full flex items-center gap-2 py-1 text-left group",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ChevronRightIcon,
-            {
-              className: cn(
-                "w-3.5 h-3.5 text-white/40 transition-transform duration-200 shrink-0",
-                isExpanded && "rotate-90"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-white/60", children: [
-            totalCount,
-            " tool call",
-            totalCount !== 1 ? "s" : ""
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: displayActions.map((action) => {
-            const IconComponent = getActionIconComponent2(action);
-            if (!IconComponent) return null;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              IconComponent,
-              {
-                className: "w-3.5 h-3.5 text-white/30"
-              },
-              action
-            );
-          }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-          !isExpanded && fileChanges.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-wrap justify-end", children: [
-            fileChanges.slice(0, 4).map((fc) => /* @__PURE__ */ jsxRuntime.jsx(
-              FileBadge,
-              {
-                path: fc.path,
-                linesAdded: fc.linesAdded,
-                linesRemoved: fc.linesRemoved
-              },
-              fc.path
-            )),
-            fileChanges.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/40", children: [
-              "+",
-              fileChanges.length - 4,
-              " more"
-            ] })
-          ] })
-        ]
-      }
-    ),
-    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-5 border-l border-white/10 ml-1.5 mt-1 space-y-0.5", children: toolCalls.map((toolCall) => /* @__PURE__ */ jsxRuntime.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 = react.createContext(null);
+function useAttachment() {
+  const context = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AttachmentContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(AttachmentInfo, {}),
+        removable && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "ash-attachment-preview",
+          "w-full bg-black/20 overflow-hidden",
+          className
+        ),
+        style: { height },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: url,
+            alt: file.name,
+            className: "w-full h-full object-cover"
+          }
+        )
+      }
+    );
+  }
+  const iconForType = () => {
+    if (file.type.includes("pdf")) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "ash-attachment-info",
+        "px-2 py-1.5",
+        "truncate",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 text-[var(--ash-text-muted)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 text-[var(--ash-text-muted)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[var(--ash-text-primary)] truncate max-w-[100px]", children: file.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ash-text-muted)]", children: formatFileSize(file.size) }),
+        removable && onRemove && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "ash-shimmer",
+        "flex flex-col gap-2",
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading",
+      children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ShimmerLine, { width: "100%" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ShimmerLine, { width: "80%" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ShimmerLine, { width: "60%" })
+      ] })
+    }
+  );
 }
-var DEFAULT_DISPLAY_CONFIG = {
-  mode: "inline",
-  breakEveryNToolCalls: 0,
-  defaultExpanded: false,
-  animationDuration: 300
-};
-var DisplayModeContext = react.createContext(null);
-function DisplayModeProvider({ children, initialConfig }) {
-  const [config, setConfigState] = react.useState({
-    ...DEFAULT_DISPLAY_CONFIG,
-    ...initialConfig
-  });
-  const setMode = react.useCallback((mode) => {
-    setConfigState((prev) => ({ ...prev, mode }));
-  }, []);
-  const setConfig = react.useCallback((updates) => {
-    setConfigState((prev) => ({ ...prev, ...updates }));
-  }, []);
-  const toggleMode = react.useCallback(() => {
-    setConfigState((prev) => ({
-      ...prev,
-      mode: prev.mode === "inline" ? "compact" : "inline"
-    }));
-  }, []);
-  const value = react.useMemo(
-    () => ({ config, setMode, setConfig, toggleMode }),
-    [config, setMode, setConfig, toggleMode]
+function ShimmerLine({
+  width = "100%",
+  height = 16,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DisplayModeContext.Provider, { value, children });
 }
-function useDisplayMode() {
-  const context = react.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__ */ jsxRuntime.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 = react.useRef(null);
-  const messagesEndRef = react.useRef(null);
-  react.useEffect(() => {
-    if (autoScroll && messagesEndRef.current && containerRef.current) {
-      messagesEndRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
-    }
-  }, [entries, streamingContent, loading, autoScroll]);
-  const createWidgetActionHandler = react.useCallback(
-    (entryId, widgetType) => {
-      if (!onWidgetAction) return void 0;
-      return (action) => {
-        onWidgetAction({
-          ...action,
-          entryId,
-          widgetType
-        });
-      };
-    },
-    [onWidgetAction]
+  return /* @__PURE__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
-          }
-        }
-        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "circle",
           {
-            entry,
-            onOptionSelect,
-            defaultExpanded: config.defaultExpanded,
-            richContentRenderers
-          },
-          entry.id
-        );
-      }
-      const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: config.mode === "accordion" ? /* @__PURE__ */ jsxRuntime.jsx(
-          StepAccordion,
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          ToolExecutionGroup,
+        )
+      ]
+    }
+  );
+}
+function MessageShimmer({
+  role = "assistant",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "ash-message-shimmer flex gap-2",
+        role === "user" && "flex-row-reverse",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ShimmerBlock,
           {
-            toolCalls,
-            defaultExpanded: config.defaultExpanded,
-            animationDuration: config.animationDuration
+            width: 20,
+            height: 20,
+            rounded: "full"
           }
-        ) })
-      ] }, groupedEntry.id);
-    }),
-    streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl p-3 bg-white/5 text-white/80", children: /* @__PURE__ */ jsxRuntime.jsx(StreamingText, { content: streamingContent, isStreaming: true }) }) })
-    ] }),
-    loading && !streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl p-3 bg-white/5", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { variant: "dots" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
-  ] });
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2 max-w-[80%]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ShimmerLine, { width: "100%", height: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsx(ShimmerLine, { width: "85%", height: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsx(ShimmerLine, { width: "70%", height: 14 })
+        ] })
+      ]
+    }
+  );
 }
 function getLevelIcon(level) {
   switch (level) {
@@ -2452,208 +2438,6 @@ function LogsPanel({
     }
   );
 }
-function CompactToolStatusLine({
-  toolCall,
-  previousToolCall,
-  animationDuration = 300,
-  className
-}) {
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [displayedToolCall, setDisplayedToolCall] = react.useState(toolCall);
-  const [exitingToolCall, setExitingToolCall] = react.useState(null);
-  const prevToolCallRef = react.useRef(null);
-  react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(tc.actionType) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm truncate text-white/60 flex-1 min-w-0", children: tc.summary }),
-        /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status: tc.status, size: "sm" })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CheckCircleIcon, { className: cn(className, "text-emerald-400") });
-    case "in_progress":
-      return /* @__PURE__ */ jsxRuntime.jsx(LoaderIcon, { className: cn(className, "text-yellow-400 animate-spin") });
-    case "pending":
-    default:
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TodoStatusIcon, { status: todo.status, className: compact ? "w-3.5 h-3.5 mt-0.5" : "w-4 h-4 mt-0.5" }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "h-full bg-emerald-400 rounded-full transition-all duration-500 ease-out",
-        style: { width: `${percentage}%` }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "rounded-lg border border-white/10 bg-white/5 overflow-hidden",
-        className
-      ),
-      children: [
-        (title || showProgress) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("border-b border-white/5", compact ? "px-2 py-1.5" : "px-3 py-2"), children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium text-white/90 mb-1.5", compact ? "text-xs" : "text-sm"), children: title }),
-          showProgress && /* @__PURE__ */ jsxRuntime.jsx(TodoProgress, { completed: stats.completed, total: stats.total })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(compact ? "px-2 py-1.5" : "px-3 py-2"), children: todos.map((todo, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          TodoListItem,
-          {
-            todo,
-            index,
-            compact
-          },
-          `${todo.content}-${index}`
-        )) }),
-        !compact && stats.inProgress > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-t border-white/5 bg-yellow-500/5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-yellow-400", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LoaderIcon, { className: "w-3 h-3 animate-spin" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            stats.inProgress,
-            " task",
-            stats.inProgress !== 1 ? "s" : "",
-            " in progress"
-          ] })
-        ] }) })
-      ]
-    }
-  );
-}
 function EnvVarsPanel({
   envVars,
   onChange,
@@ -2785,236 +2569,90 @@ function EnvVarsPanel({
             onClick: handleAddEnvVar,
             disabled: !newEnvKey.trim(),
             className: "ash-env-vars-add-button",
-            children: "Add"
-          }
-        )
-      ] }),
-      helperText && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            className: "ash-display-mode-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ash-env-vars-helper", children: helperText })
+    ] })
+  ] });
+}
+function OptionCards({ options, onSelect, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-2 mt-3", className), style: {
+    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))"
+  }, children: options.map((option) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-white/90 group-hover:text-white transition-colors", children: option.label }),
+          option.description && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"
-              }
-            )
-          }
-        );
-      case "accordion":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            className: "ash-display-mode-icon",
             viewBox: "0 0 24 24",
-            fill: "none",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: handleClick,
-      className: cn("ash-display-mode-toggle", className),
-      title: `Switch to ${nextMode} mode`,
-      children: [
-        getIcon(currentMode),
-        showLabel && /* @__PURE__ */ jsxRuntime.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] = react.useState("");
-  const [wordIndex, setWordIndex] = react.useState(0);
-  const [isTyping, setIsTyping] = react.useState(true);
-  const timeoutRef = react.useRef(null);
-  react.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__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayText }),
-    showCursor && /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn(
-          "w-0.5 h-4 bg-current ml-0.5 animate-pulse",
-          cursorClassName
         )
-      }
-    )
-  ] });
-}
-var ThemeContext = react.createContext(void 0);
-var DEFAULT_STORAGE_KEY = "ash-ui-theme";
-function ThemeProvider({
-  children,
-  defaultTheme,
-  storageKey = DEFAULT_STORAGE_KEY,
-  listenToSystemChanges = true
-}) {
-  const [theme, setThemeState] = react.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] = react.useState(false);
-  react.useEffect(() => {
-    setMounted(true);
-  }, []);
-  react.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]);
-  react.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 = react.useCallback(() => {
-    setThemeState((prev) => prev === "light" ? "dark" : "light");
-  }, []);
-  const setTheme = react.useCallback((newTheme) => {
-    setThemeState(newTheme);
-  }, []);
-  if (!mounted) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme: defaultTheme ?? "light", toggleTheme, setTheme }, children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+      ]
+    },
+    option.id
+  )) });
 }
-function useTheme() {
-  const context = react.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__ */ jsxRuntime.jsx(TerminalIcon, { className });
+    case "file_read":
+      return /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { className });
+    case "file_edit":
+      return /* @__PURE__ */ jsxRuntime.jsx(EditIcon, { className });
+    case "file_write":
+      return /* @__PURE__ */ jsxRuntime.jsx(FilePlusIcon, { className });
+    case "search":
+      return /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className });
+    case "glob":
+      return /* @__PURE__ */ jsxRuntime.jsx(FolderSearchIcon, { className });
+    case "web_fetch":
+      return /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { className });
+    case "web_search":
+      return /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className });
+    case "mcp_tool":
+      return /* @__PURE__ */ jsxRuntime.jsx(PlugIcon, { className });
+    case "todo_write":
+      return /* @__PURE__ */ jsxRuntime.jsx(ListChecksIcon, { className });
+    case "agent_tool":
+      return /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className });
+    case "generic_tool":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(ToolIcon, { className });
   }
-  return context;
 }
 
 // src/design-tokens.ts
@@ -3120,6 +2758,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)" },
@@ -3238,42 +2891,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
@@ -3493,19 +3436,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] = react.useState(initialEntries);
   const [streamingEntries, setStreamingEntries] = react.useState([]);
   const [isStreaming, setIsStreaming] = react.useState(false);
+  const [isReconnecting, setIsReconnecting] = react.useState(false);
   const [error, setError] = react.useState(null);
   const [sessionId, setSessionId] = react.useState(initialSessionId || null);
   const abortControllerRef = react.useRef(null);
@@ -3513,6 +3532,16 @@ function useAgentChat(options) {
   const currentTextIdRef = react.useRef(null);
   const pendingToolCallsRef = react.useRef(/* @__PURE__ */ new Map());
   const hadToolCallSinceTextRef = react.useRef(false);
+  const reconnectAttemptsRef = react.useRef(0);
+  const eventCountRef = react.useRef(0);
+  const sessionIdRef = react.useRef(sessionId);
+  const streamingEntriesRef = react.useRef([]);
+  react.useEffect(() => {
+    sessionIdRef.current = sessionId;
+  }, [sessionId]);
+  react.useEffect(() => {
+    streamingEntriesRef.current = streamingEntries;
+  }, [streamingEntries]);
   const entries = [...historyEntries, ...streamingEntries];
   const emitStreamingEntries = react.useCallback((newEntries) => {
     setStreamingEntries([...newEntries]);
@@ -3627,7 +3656,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
@@ -3646,12 +3675,112 @@ function useAgentChat(options) {
     }
     return newEntries;
   }, [sessionId, onSessionStart, onSessionEnd, onError, onSandboxLog, createTextEntry, resetStreamingState]);
+  const attemptReconnect = react.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 = react.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
@@ -3661,39 +3790,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 = react.useCallback(() => {
+    reconnectAttemptsRef.current = maxReconnectAttempts + 1;
+    setIsReconnecting(false);
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
-  }, []);
+  }, [maxReconnectAttempts]);
   const clear = react.useCallback(() => {
     setHistoryEntries([]);
     resetStreamingState();
     setSessionId(initialSessionId || null);
     setError(null);
+    setIsReconnecting(false);
+    reconnectAttemptsRef.current = 0;
+    eventCountRef.current = 0;
   }, [initialSessionId, resetStreamingState]);
   const setEntries = react.useCallback((newEntries) => {
     resetStreamingState();
@@ -3709,6 +3890,7 @@ function useAgentChat(options) {
   return {
     entries,
     isStreaming,
+    isReconnecting,
     error,
     sessionId,
     send,
@@ -3717,6 +3899,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] = react.useState(initialMessages);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [isReconnecting, setIsReconnecting] = react.useState(false);
+  const [error, setError] = react.useState(void 0);
+  const [sessionId, setSessionId] = react.useState(initialSessionId || null);
+  const [input, setInput] = react.useState("");
+  const abortControllerRef = react.useRef(null);
+  const currentAssistantMessageRef = react.useRef(null);
+  const reconnectAttemptsRef = react.useRef(0);
+  const sessionIdRef = react.useRef(sessionId);
+  react.useEffect(() => {
+    sessionIdRef.current = sessionId;
+  }, [sessionId]);
+  const entries = messagesToNormalizedEntries(messages);
+  const updateStreamingMessage = react.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 = react.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 = react.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 = react.useCallback(() => {
+    reconnectAttemptsRef.current = maxReconnectAttempts + 1;
+    setIsReconnecting(false);
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, [maxReconnectAttempts]);
+  const reload = react.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 = react.useCallback((e) => {
+    setInput(e.target.value);
+  }, []);
+  const handleSubmit = react.useCallback((e, options2) => {
+    e?.preventDefault();
+    if (!input.trim()) return;
+    const message = input;
+    setInput("");
+    append(message, options2);
+  }, [input, append]);
+  react.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);
@@ -3791,10 +4221,14 @@ function useLongTextConversion({
 }
 
 exports.ActionIcon = ActionIcon;
-exports.AgentToolCard = AgentToolCard;
 exports.AlertCircleIcon = AlertCircleIcon;
 exports.AlertTriangleIcon = AlertTriangleIcon;
-exports.AssistantMessage = AssistantMessage;
+exports.ArrowUpIcon = ArrowUpIcon;
+exports.Attachment = Attachment;
+exports.AttachmentInfo = AttachmentInfo;
+exports.AttachmentPreview = AttachmentPreview;
+exports.AttachmentRemove = AttachmentRemove;
+exports.Attachments = Attachments;
 exports.BotIcon = BotIcon;
 exports.BrainIcon = BrainIcon;
 exports.BugIcon = BugIcon;
@@ -3809,73 +4243,92 @@ exports.ClipboardListIcon = ClipboardListIcon;
 exports.ClockIcon = ClockIcon;
 exports.CodeBlock = CodeBlock;
 exports.CodeIcon = CodeIcon;
-exports.CompactToolRow = CompactToolRow;
-exports.CompactToolStatusLine = CompactToolStatusLine;
+exports.Conversation = Conversation;
+exports.ConversationContent = ConversationContent;
+exports.ConversationEmptyState = ConversationEmptyState;
+exports.ConversationScrollButton = ConversationScrollButton;
 exports.CopyIcon = CopyIcon;
-exports.DEFAULT_DISPLAY_CONFIG = DEFAULT_DISPLAY_CONFIG;
-exports.DisplayModeProvider = DisplayModeProvider;
-exports.DisplayModeToggle = DisplayModeToggle;
+exports.DEFAULT_STYLE_CONFIG = DEFAULT_STYLE_CONFIG;
 exports.EditIcon = EditIcon;
 exports.EnvVarsPanel = EnvVarsPanel;
 exports.ErrorIcon = ErrorIcon;
-exports.ErrorMessage = ErrorMessage;
-exports.FileBadge = FileBadge;
+exports.FileBadgeCompact = FileBadgeCompact;
 exports.FileIcon = FileIcon;
 exports.FilePlusIcon = FilePlusIcon;
 exports.FolderSearchIcon = FolderSearchIcon;
 exports.GlobeIcon = GlobeIcon;
+exports.HomeIcon = HomeIcon;
 exports.InfoIcon = InfoIcon;
 exports.JsonDisplay = JsonDisplay;
 exports.LazyMarkdown = LazyMarkdown;
 exports.ListChecksIcon = ListChecksIcon;
 exports.LoaderIcon = LoaderIcon;
-exports.LoadingIndicator = LoadingIndicator;
+exports.LoadingDots = LoadingDots;
+exports.LoadingSpinner = LoadingSpinner;
 exports.LogsPanel = LogsPanel;
-exports.MessageEntry = MessageEntry;
-exports.MessageList = MessageList;
+exports.Message = Message;
+exports.MessageAction = MessageAction;
+exports.MessageActions = MessageActions;
+exports.MessageAvatar = MessageAvatar;
+exports.MessageContent = MessageContent;
+exports.MessageResponse = MessageResponse;
+exports.MessageShimmer = MessageShimmer;
 exports.MessageSquareIcon = MessageSquareIcon;
+exports.MessageTimestamp = MessageTimestamp;
+exports.MicrophoneIcon = MicrophoneIcon;
 exports.MoonIcon = MoonIcon;
 exports.OptionCards = OptionCards;
 exports.PaperclipIcon = PaperclipIcon;
 exports.PlugIcon = PlugIcon;
-exports.RichContentRenderer = RichContentRenderer;
+exports.Reasoning = Reasoning;
+exports.ReasoningContent = ReasoningContent;
+exports.ReasoningTrigger = ReasoningTrigger;
 exports.SearchIcon = SearchIcon;
 exports.SendIcon = SendIcon;
+exports.Shimmer = Shimmer;
+exports.ShimmerBlock = ShimmerBlock;
+exports.ShimmerLine = ShimmerLine;
+exports.ShimmerText = ShimmerText;
 exports.SparklesIcon = SparklesIcon;
 exports.SpinnerIcon = SpinnerIcon;
 exports.StatusIndicator = StatusIndicator;
-exports.StepAccordion = StepAccordion;
 exports.StopCircleIcon = StopCircleIcon;
-exports.StreamingText = StreamingText;
 exports.SunIcon = SunIcon;
+exports.Task = Task;
+exports.TaskContent = TaskContent;
+exports.TaskItem = TaskItem;
+exports.TaskList = TaskList;
+exports.TaskTrigger = TaskTrigger;
 exports.TerminalIcon = TerminalIcon;
-exports.ThemeProvider = ThemeProvider;
-exports.ThinkingMessage = ThinkingMessage;
-exports.TodoPanel = TodoPanel;
-exports.ToolCallCard = ToolCallCard;
-exports.ToolCallMessage = ToolCallMessage;
-exports.ToolExecutionGroup = ToolExecutionGroup;
+exports.ThinkingIndicator = ThinkingIndicator;
+exports.Tool = Tool;
+exports.ToolHeader = ToolHeader;
 exports.ToolIcon = ToolIcon;
-exports.TypewriterText = TypewriterText;
+exports.ToolInput = ToolInput;
+exports.ToolList = ToolList;
+exports.ToolOutput = ToolOutput;
 exports.UserIcon = UserIcon;
-exports.UserMessage = UserMessage;
 exports.XCircleIcon = XCircleIcon;
 exports.XIcon = XIcon;
 exports.allKeyframesCss = allKeyframesCss;
+exports.applyEventMiddleware = applyEventMiddleware;
+exports.applyRequestMiddleware = applyRequestMiddleware;
 exports.borderRadius = borderRadius;
+exports.callMiddlewareComplete = callMiddlewareComplete;
+exports.callMiddlewareError = callMiddlewareError;
 exports.cn = cn;
 exports.colors = colors;
 exports.createToolCall = createToolCall;
+exports.cssVars = cssVars;
 exports.extractTextContent = extractTextContent;
-exports.extractToolCallsFromGroup = extractToolCallsFromGroup;
 exports.formatElapsedTime = formatElapsedTime;
 exports.formatFileSize = formatFileSize;
+exports.formatFileSizeHook = formatFileSize2;
 exports.formatTimestamp = formatTimestamp;
 exports.formatToolName = formatToolName;
 exports.generateToolSummary = generateToolSummary;
 exports.getActionIcon = getActionIcon;
 exports.getActionLabel = getActionLabel;
-exports.groupEntriesForCompactMode = groupEntriesForCompactMode;
 exports.inlineStyles = inlineStyles;
 exports.isAgentToolAction = isAgentToolAction;
 exports.isCommandRunAction = isCommandRunAction;
@@ -3895,7 +4348,11 @@ exports.isWidgetEntry = isWidgetEntry;
 exports.keyframes = keyframes;
 exports.keyframesCss = keyframesCss;
 exports.mapToolToActionType = mapToolToActionType;
+exports.messageToNormalizedEntry = messageToNormalizedEntry;
+exports.messagesToNormalizedEntries = messagesToNormalizedEntries;
 exports.normalizeToolResult = normalizeToolResult;
+exports.normalizedEntriesToMessages = normalizedEntriesToMessages;
+exports.normalizedEntryToMessage = normalizedEntryToMessage;
 exports.parseCommandResult = parseCommandResult;
 exports.parseMcpToolName = parseMcpToolName;
 exports.parseOptionsFromContent = parseOptionsFromContent;
@@ -3907,13 +4364,17 @@ exports.truncate = truncate;
 exports.typography = typography;
 exports.updateToolCallWithResult = updateToolCallWithResult;
 exports.useAgentChat = useAgentChat;
-exports.useDisplayConfig = useDisplayConfig;
-exports.useDisplayMode = useDisplayMode;
+exports.useAttachment = useAttachment;
+exports.useChat = useChat;
+exports.useConversation = useConversation;
 exports.useFileUpload = useFileUpload;
 exports.useLongTextConversion = useLongTextConversion;
+exports.useMessage = useMessage;
 exports.useMessageQueue = useMessageQueue;
+exports.useReasoning = useReasoning;
 exports.useStopExecution = useStopExecution;
-exports.useTheme = useTheme;
+exports.useTask = useTask;
+exports.useTool = useTool;
 exports.widget = widget;
 exports.zIndex = zIndex;
 //# sourceMappingURL=index.cjs.map