@ash-cloud/ash-ui 0.0.3 → 0.0.4

package/dist/index.d.cts

@@ -4,7 +4,7 @@ export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISP
 import { ReactNode, DragEvent, ChangeEvent } from 'react';
 import { ParsedOption } from './utils.cjs';
 export { GroupedEntry, ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, truncate, updateToolCallWithResult } from './utils.cjs';
-export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.cjs';
+export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, ErrorIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.cjs';
 export { BorderRadius, Colors, Keyframes, Shadows, Spacing, Transitions, Typography, Widget, ZIndex, allKeyframesCss, borderRadius, colors, inlineStyles, keyframes, keyframesCss, shadows, spacing, tokensToCssVariables, transitions, typography, widget, zIndex } from './design-tokens.cjs';
 
 interface ToolCallCardProps {
@@ -382,12 +382,15 @@ interface DisplayModeToggleProps {
     labels?: {
         inline?: string;
         compact?: string;
+        accordion?: string;
     };
+    /** Which modes to cycle through (default: all three) */
+    modes?: ToolDisplayMode[];
 }
 /**
- * DisplayModeToggle - Button to toggle between inline and compact display modes
+ * DisplayModeToggle - Button to cycle through display modes
  *
- * Uses the DisplayModeContext to toggle between 'inline' and 'compact' modes.
+ * Uses the DisplayModeContext to cycle through 'inline', 'compact', and 'accordion' modes.
  * Must be used within a DisplayModeProvider.
  *
  * @example
@@ -411,7 +414,39 @@ interface DisplayModeToggleProps {
  * }
  * ```
  */
-declare function DisplayModeToggle({ className, showLabel, labels, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
+declare function DisplayModeToggle({ className, showLabel, labels, modes, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
+
+type StepStatus = 'pending' | 'running' | 'success' | 'error';
+interface StepAccordionProps {
+    /** Tool calls to display as steps */
+    toolCalls: NormalizedToolCall[];
+    /** Whether the accordion starts expanded */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state */
+    isExpanded?: boolean;
+    /** Callback when expanded state changes */
+    onToggle?: () => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * StepAccordion - Simpler accordion that shows tool calls as numbered steps
+ *
+ * Features:
+ * - Collapsed header shows current running step or completion status
+ * - Expanded view shows all steps as a numbered list
+ * - Shows step duration for completed steps
+ * - Compact design suitable for embedding in chat
+ *
+ * @example
+ * ```tsx
+ * <StepAccordion
+ *   toolCalls={normalizedToolCalls}
+ *   defaultExpanded={false}
+ * />
+ * ```
+ */
+declare function StepAccordion({ toolCalls, defaultExpanded, isExpanded: controlledExpanded, onToggle, className, }: StepAccordionProps): react_jsx_runtime.JSX.Element | null;
 
 interface StatusIndicatorProps {
     status: ToolStatus;
@@ -840,4 +875,4 @@ interface UseFileUploadReturn {
 declare function useFileUpload({ maxFileSize, // 100MB
 maxFiles, onValidationError, }?: UseFileUploadOptions): UseFileUploadReturn;
 
-export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };
+export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StepAccordion, type StepAccordionProps, type StepStatus, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISP
 import { ReactNode, DragEvent, ChangeEvent } from 'react';
 import { ParsedOption } from './utils.js';
 export { GroupedEntry, ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, truncate, updateToolCallWithResult } from './utils.js';
-export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.js';
+export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, ErrorIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.js';
 export { BorderRadius, Colors, Keyframes, Shadows, Spacing, Transitions, Typography, Widget, ZIndex, allKeyframesCss, borderRadius, colors, inlineStyles, keyframes, keyframesCss, shadows, spacing, tokensToCssVariables, transitions, typography, widget, zIndex } from './design-tokens.js';
 
 interface ToolCallCardProps {
@@ -382,12 +382,15 @@ interface DisplayModeToggleProps {
     labels?: {
         inline?: string;
         compact?: string;
+        accordion?: string;
     };
+    /** Which modes to cycle through (default: all three) */
+    modes?: ToolDisplayMode[];
 }
 /**
- * DisplayModeToggle - Button to toggle between inline and compact display modes
+ * DisplayModeToggle - Button to cycle through display modes
  *
- * Uses the DisplayModeContext to toggle between 'inline' and 'compact' modes.
+ * Uses the DisplayModeContext to cycle through 'inline', 'compact', and 'accordion' modes.
  * Must be used within a DisplayModeProvider.
  *
  * @example
@@ -411,7 +414,39 @@ interface DisplayModeToggleProps {
  * }
  * ```
  */
-declare function DisplayModeToggle({ className, showLabel, labels, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
+declare function DisplayModeToggle({ className, showLabel, labels, modes, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
+
+type StepStatus = 'pending' | 'running' | 'success' | 'error';
+interface StepAccordionProps {
+    /** Tool calls to display as steps */
+    toolCalls: NormalizedToolCall[];
+    /** Whether the accordion starts expanded */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state */
+    isExpanded?: boolean;
+    /** Callback when expanded state changes */
+    onToggle?: () => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * StepAccordion - Simpler accordion that shows tool calls as numbered steps
+ *
+ * Features:
+ * - Collapsed header shows current running step or completion status
+ * - Expanded view shows all steps as a numbered list
+ * - Shows step duration for completed steps
+ * - Compact design suitable for embedding in chat
+ *
+ * @example
+ * ```tsx
+ * <StepAccordion
+ *   toolCalls={normalizedToolCalls}
+ *   defaultExpanded={false}
+ * />
+ * ```
+ */
+declare function StepAccordion({ toolCalls, defaultExpanded, isExpanded: controlledExpanded, onToggle, className, }: StepAccordionProps): react_jsx_runtime.JSX.Element | null;
 
 interface StatusIndicatorProps {
     status: ToolStatus;
@@ -840,4 +875,4 @@ interface UseFileUploadReturn {
 declare function useFileUpload({ maxFileSize, // 100MB
 maxFiles, onValidationError, }?: UseFileUploadOptions): UseFileUploadReturn;
 
-export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };
+export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StepAccordion, type StepAccordionProps, type StepStatus, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };

package/dist/index.js

@@ -630,6 +630,16 @@ function ClipboardListIcon({ className }) {
     /* @__PURE__ */ jsx("path", { d: "M8 16h.01" })
   ] });
 }
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] });
+}
 function StatusIndicator({ status, size = "sm", className }) {
   const sizeClasses = {
     sm: "w-2 h-2",
@@ -1528,6 +1538,163 @@ function ToolExecutionGroup({
     }
   );
 }
+function formatDuration(startMs, endMs) {
+  const duration = endMs - startMs;
+  if (duration < 1e3) return `${duration}ms`;
+  return `${(duration / 1e3).toFixed(1)}s`;
+}
+function getToolLabel(toolName, summary) {
+  if (summary && summary.length > 0 && summary.length < 50) {
+    return summary;
+  }
+  const cleaned = toolName.replace(/^mcp__[^_]+__/, "").replace(/Tool$/, "").replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2");
+  return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+}
+function toStepStatus(status) {
+  switch (status) {
+    case "pending":
+      return "running";
+    case "success":
+      return "success";
+    case "failed":
+      return "error";
+    default:
+      return "pending";
+  }
+}
+function StepIcon({ status }) {
+  const iconClass = "w-3.5 h-3.5";
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsx(SpinnerIcon, { className: cn(iconClass, "animate-spin text-[var(--ash-accent)]") });
+    case "success":
+      return /* @__PURE__ */ jsx(CheckIcon, { className: cn(iconClass, "text-[var(--ash-accent)]") });
+    case "error":
+      return /* @__PURE__ */ jsx(ErrorIcon, { className: cn(iconClass, "text-red-500") });
+    default:
+      return /* @__PURE__ */ jsx(ToolIcon, { className: cn(iconClass, "text-white/40") });
+  }
+}
+function StepAccordion({
+  toolCalls,
+  defaultExpanded = false,
+  isExpanded: controlledExpanded,
+  onToggle,
+  className
+}) {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
+  const handleToggle = useCallback(() => {
+    if (onToggle) {
+      onToggle();
+    } else {
+      setInternalExpanded((prev) => !prev);
+    }
+  }, [onToggle]);
+  if (toolCalls.length === 0) {
+    return null;
+  }
+  const completedSteps = toolCalls.filter((tc) => tc.status === "success" || tc.status === "failed").length;
+  const runningStep = toolCalls.find((tc) => tc.status === "pending");
+  const hasError = toolCalls.some((tc) => tc.status === "failed");
+  const allComplete = completedSteps === toolCalls.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border overflow-hidden",
+        hasError ? "border-red-500/30" : allComplete ? "border-[var(--ash-accent)]/30" : "border-yellow-500/30",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleToggle,
+            className: "w-full flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 transition-colors text-left cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx(
+                ChevronDownIcon,
+                {
+                  className: cn(
+                    "w-4 h-4 text-white/40 transition-transform duration-200 flex-shrink-0",
+                    !isExpanded && "-rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 flex items-center gap-2", children: runningStep ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(SpinnerIcon, { className: "w-3.5 h-3.5 animate-spin text-[var(--ash-accent)] flex-shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-white/80 truncate", children: getToolLabel(runningStep.toolName, runningStep.summary) })
+              ] }) : hasError ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ErrorIcon, { className: "w-3.5 h-3.5 text-red-500 flex-shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-red-400 truncate", children: "Completed with errors" })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CheckIcon, { className: "w-3.5 h-3.5 text-[var(--ash-accent)] flex-shrink-0" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-sm text-white/70 truncate", children: [
+                  completedSteps,
+                  " step",
+                  completedSteps !== 1 ? "s" : "",
+                  " completed"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs px-1.5 py-0.5 rounded-full bg-white/10 text-white/50 flex-shrink-0", children: [
+                completedSteps,
+                "/",
+                toolCalls.length
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsx("div", { className: "border-t border-white/10 ash-accordion-content", children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: toolCalls.map((toolCall, index) => {
+          const stepStatus = toStepStatus(toolCall.status);
+          const startTime = toolCall.startedAt ? new Date(toolCall.startedAt).getTime() : 0;
+          const endTime = toolCall.completedAt ? new Date(toolCall.completedAt).getTime() : 0;
+          const hasDuration = startTime > 0 && endTime > 0;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "px-3 py-2 flex items-start gap-2",
+                stepStatus === "running" && "bg-[var(--ash-accent)]/5",
+                stepStatus === "error" && "bg-red-500/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0 pt-0.5", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/40 w-4 text-right", children: [
+                    index + 1,
+                    "."
+                  ] }),
+                  /* @__PURE__ */ jsx(StepIcon, { status: stepStatus })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-sm",
+                          stepStatus === "running" && "text-[var(--ash-accent)]",
+                          stepStatus === "success" && "text-white/70",
+                          stepStatus === "error" && "text-red-400",
+                          stepStatus === "pending" && "text-white/40"
+                        ),
+                        children: getToolLabel(toolCall.toolName, toolCall.summary)
+                      }
+                    ),
+                    hasDuration && (stepStatus === "success" || stepStatus === "error") && /* @__PURE__ */ jsx("span", { className: "text-xs text-white/40", children: formatDuration(startTime, endTime) })
+                  ] }),
+                  toolCall.isError && toolCall.actionType && "result" in toolCall.actionType && /* @__PURE__ */ jsx("p", { className: "text-xs mt-1 text-red-400/80 truncate", children: String(toolCall.actionType.result?.value || "Error") })
+                ] })
+              ]
+            },
+            toolCall.id
+          );
+        }) }) })
+      ]
+    }
+  );
+}
 
 // src/types.ts
 function isCommandRunAction(action) {
@@ -1646,7 +1813,13 @@ function MessageList({
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
         /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: config.mode === "accordion" ? /* @__PURE__ */ jsx(
+          StepAccordion,
+          {
+            toolCalls,
+            defaultExpanded: config.defaultExpanded
+          }
+        ) : /* @__PURE__ */ jsx(
           ToolExecutionGroup,
           {
             toolCalls,
@@ -2066,19 +2239,22 @@ function EnvVarsPanel({
 function DisplayModeToggle({
   className,
   showLabel = true,
-  labels = { inline: "Inline", compact: "Compact" }
+  labels = { inline: "Inline", compact: "Compact", accordion: "Steps" },
+  modes = ["inline", "compact", "accordion"]
 }) {
-  const { config, toggleMode } = useDisplayMode();
-  const isInline = config.mode === "inline";
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: toggleMode,
-      className: cn("ash-display-mode-toggle", className),
-      title: isInline ? "Switch to compact mode" : "Switch to inline mode",
-      children: isInline ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
+  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",
@@ -2095,10 +2271,9 @@ function DisplayModeToggle({
               }
             )
           }
-        ),
-        showLabel && /* @__PURE__ */ jsx("span", { className: "ash-display-mode-label", children: labels.inline })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
+        );
+      case "compact":
+        return /* @__PURE__ */ jsx(
           "svg",
           {
             className: "ash-display-mode-icon",
@@ -2115,9 +2290,42 @@ function DisplayModeToggle({
               }
             )
           }
-        ),
-        showLabel && /* @__PURE__ */ jsx("span", { className: "ash-display-mode-label", children: labels.compact })
-      ] })
+        );
+      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"
+              }
+            )
+          }
+        );
+    }
+  };
+  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) })
+      ]
     }
   );
 }
@@ -2729,6 +2937,6 @@ function useFileUpload({
   };
 }
 
-export { ActionIcon, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeBlock, CodeIcon, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorMessage, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StatusIndicator, StopCircleIcon, StreamingText, SunIcon, TerminalIcon, ThemeProvider, ThinkingMessage, TodoPanel, ToolCallCard, ToolCallMessage, ToolExecutionGroup, ToolIcon, TypewriterText, UserIcon, UserMessage, XCircleIcon, XIcon, allKeyframesCss, borderRadius, cn, colors, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, keyframes, keyframesCss, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
+export { ActionIcon, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeBlock, CodeIcon, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StatusIndicator, StepAccordion, StopCircleIcon, StreamingText, SunIcon, TerminalIcon, ThemeProvider, ThinkingMessage, TodoPanel, ToolCallCard, ToolCallMessage, ToolExecutionGroup, ToolIcon, TypewriterText, UserIcon, UserMessage, XCircleIcon, XIcon, allKeyframesCss, borderRadius, cn, colors, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, keyframes, keyframesCss, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map