@ash-cloud/ash-ui 0.0.3 → 0.0.5

package/dist/index.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.cjs';
-export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISPLAY_CONFIG, ErrorEntry, FileAttachment, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, NormalizedEntryType, SearchAction, ThinkingEntry, TodoStatus, TodoWriteAction, ToolCallEntry, ToolExecutionGroup as ToolExecutionGroupType, ToolResult, UserMessageEntry, WebFetchAction, WebSearchAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction } from './types.cjs';
+import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.cjs';
+export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISPLAY_CONFIG, ErrorEntry, FileAttachment, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, NormalizedEntryType, SearchAction, ThinkingEntry, TodoStatus, TodoWriteAction, ToolCallEntry, ToolExecutionGroup as ToolExecutionGroupType, ToolResult, UserMessageEntry, WebFetchAction, WebSearchAction, WidgetEntry, WidgetRenderProps, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry } from './types.cjs';
 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 {
@@ -41,6 +41,29 @@ interface MessageListProps {
     displayConfig?: ToolDisplayConfig;
     /** Callback when user selects an option from assistant message */
     onOptionSelect?: (optionText: string) => void;
+    /**
+     * Custom render function for widget entries.
+     * When provided, widget entries will be rendered using this function.
+     *
+     * @example
+     * ```tsx
+     * <MessageList
+     *   entries={entries}
+     *   renderWidget={({ widgetType, widgetData, onAction }) => {
+     *     if (widgetType === 'image-grid') {
+     *       return <ImageGrid data={widgetData} onSelect={onAction} />;
+     *     }
+     *     return null;
+     *   }}
+     * />
+     * ```
+     */
+    renderWidget?: WidgetRenderFunction;
+    /**
+     * Callback for widget interactions (e.g., selection, submit).
+     * Called when widgets dispatch actions via their onAction callback.
+     */
+    onWidgetAction?: (action: WidgetAction) => void;
     /** Additional class names */
     className?: string;
 }
@@ -64,7 +87,7 @@ interface MessageListProps {
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
  * ```
  */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
 
 interface UserMessageProps {
     entry: NormalizedEntry;
@@ -382,12 +405,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 +437,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 +898,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, WidgetAction, WidgetRenderFunction, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.js';
-export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISPLAY_CONFIG, ErrorEntry, FileAttachment, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, NormalizedEntryType, SearchAction, ThinkingEntry, TodoStatus, TodoWriteAction, ToolCallEntry, ToolExecutionGroup as ToolExecutionGroupType, ToolResult, UserMessageEntry, WebFetchAction, WebSearchAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction } from './types.js';
+import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.js';
+export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISPLAY_CONFIG, ErrorEntry, FileAttachment, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, NormalizedEntryType, SearchAction, ThinkingEntry, TodoStatus, TodoWriteAction, ToolCallEntry, ToolExecutionGroup as ToolExecutionGroupType, ToolResult, UserMessageEntry, WebFetchAction, WebSearchAction, WidgetEntry, WidgetRenderProps, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry } from './types.js';
 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 {
@@ -41,6 +41,29 @@ interface MessageListProps {
     displayConfig?: ToolDisplayConfig;
     /** Callback when user selects an option from assistant message */
     onOptionSelect?: (optionText: string) => void;
+    /**
+     * Custom render function for widget entries.
+     * When provided, widget entries will be rendered using this function.
+     *
+     * @example
+     * ```tsx
+     * <MessageList
+     *   entries={entries}
+     *   renderWidget={({ widgetType, widgetData, onAction }) => {
+     *     if (widgetType === 'image-grid') {
+     *       return <ImageGrid data={widgetData} onSelect={onAction} />;
+     *     }
+     *     return null;
+     *   }}
+     * />
+     * ```
+     */
+    renderWidget?: WidgetRenderFunction;
+    /**
+     * Callback for widget interactions (e.g., selection, submit).
+     * Called when widgets dispatch actions via their onAction callback.
+     */
+    onWidgetAction?: (action: WidgetAction) => void;
     /** Additional class names */
     className?: string;
 }
@@ -64,7 +87,7 @@ interface MessageListProps {
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
  * ```
  */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
 
 interface UserMessageProps {
     entry: NormalizedEntry;
@@ -382,12 +405,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 +437,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 +898,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, WidgetAction, WidgetRenderFunction, 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) {
@@ -1569,6 +1736,9 @@ function isToolCallEntry(entry) {
 function isErrorEntry(entry) {
   return entry.type === "error";
 }
+function isWidgetEntry(entry) {
+  return entry.type === "widget";
+}
 var DEFAULT_DISPLAY_CONFIG = {
   mode: "inline",
   breakEveryNToolCalls: 0,
@@ -1624,10 +1794,25 @@ function MessageList({
   streamingContent,
   displayConfig: displayConfigProp,
   onOptionSelect,
+  renderWidget,
+  onWidgetAction,
   className
 }) {
   const contextConfig = useDisplayConfig();
   const config = displayConfigProp || contextConfig;
+  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) => ({
@@ -1641,12 +1826,31 @@ function MessageList({
   return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto p-4 space-y-4 ash-scrollbar", className), children: [
     groupedEntries.map((groupedEntry) => {
       if (groupedEntry.type === "single") {
-        return /* @__PURE__ */ jsx(MessageEntry, { entry: groupedEntry.entry, onOptionSelect }, groupedEntry.entry.id);
+        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, { entry, onOptionSelect }, entry.id);
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
         /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__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 +2270,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 +2302,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 +2321,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 +2968,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, isWidgetEntry, 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