@ash-cloud/ash-ui 0.1.1 → 0.2.0

package/dist/index.js

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