@ash-cloud/ash-ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,466 +1,454 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, RichContentRenderers, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType, RichContent } from './types.js';
-export { AgentToolAction, AssistantMessageEntry, CommandRunAction, CommandRunResult, ComponentRenderProps, DEFAULT_DISPLAY_CONFIG, ErrorEntry, FileAttachment, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, MentionRenderProps, NormalizedEntryType, RichComponentSegment, RichContentSegment, RichMentionSegment, RichTextSegment, SearchAction, ThinkingEntry, TodoStatus, TodoWriteAction, ToolCallEntry, ToolExecutionGroup as ToolExecutionGroupType, ToolResult, UserMessageEntry, WebFetchAction, WebSearchAction, WidgetEntry, WidgetRenderProps, isAgentToolAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry } from './types.js';
-import { ReactNode, DragEvent, ChangeEvent, ClipboardEvent } from 'react';
+import React$1, { ReactNode, ComponentType, DragEvent, ChangeEvent, ClipboardEvent } from 'react';
+import { ToolInvocation, TodoStatus, TodoItem, FileAttachment as FileAttachment$2, LogEntry, ToolStatus, ActionType, MarkdownComponents, NormalizedEntry, Message as Message$1 } from './types.js';
+export { MessageAttachment as AIMessageAttachment, AIMessageRole, AgentToolAction, AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_STYLE_CONFIG, ErrorEntry, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, MessageMetadata, MessageStyleConfig, MessageVariant, NormalizedEntryType, NormalizedToolCall, RenderMetadataFunction, SearchAction, ThinkingEntry, TodoWriteAction, ToolCallEntry, ToolInvocationState, ToolResult, TypographyScale, UserMessageEntry, WebFetchAction, WebSearchAction, WidgetAction, WidgetEntry, WidgetRenderFunction, WidgetRenderProps, isAgentToolAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry, messageToNormalizedEntry, messagesToNormalizedEntries, normalizedEntriesToMessages, normalizedEntryToMessage } from './types.js';
 import { ParsedOption } from './utils.js';
-export { GroupedEntry, ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, extractToolCallsFromGroup, formatElapsedTime, 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, ClockIcon, 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';
+export { ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, formatElapsedTime, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, truncate, updateToolCallWithResult } from './utils.js';
+export { AlertCircleIcon, AlertTriangleIcon, ArrowUpIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, ClockIcon, CodeIcon, CopyIcon, EditIcon, ErrorIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, HomeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MicrophoneIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.js';
+export { BorderRadius, Colors, CssVars, Keyframes, Shadows, Spacing, Transitions, Typography, Widget, ZIndex, allKeyframesCss, borderRadius, colors, cssVars, inlineStyles, keyframes, keyframesCss, shadows, spacing, tokensToCssVariables, transitions, typography, widget, zIndex } from './design-tokens.js';
 
-interface ToolCallCardProps {
-    toolCall: NormalizedToolCall;
-    defaultExpanded?: boolean;
+interface ConversationContextValue {
+    /** Reference to the scroll container */
+    containerRef: React$1.RefObject<HTMLDivElement>;
+    /** Scroll to the bottom of the conversation */
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+    /** Whether the user has scrolled up from the bottom */
+    isScrolledUp: boolean;
+    /** Whether auto-scroll is enabled */
+    autoScroll: boolean;
+    /** Set auto-scroll state */
+    setAutoScroll: (value: boolean) => void;
+}
+declare function useConversation(): ConversationContextValue;
+interface ConversationProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
+    /** Whether to auto-scroll on new messages */
+    autoScroll?: boolean;
+    /** Threshold in pixels to consider "at bottom" */
+    scrollThreshold?: number;
 }
-/**
- * ToolCallCard - Display a tool call with its status, arguments, and results
- *
- * Features:
- * - Status indicator (pending/success/failed) with animated styling
- * - Action-specific icon in accent-colored badge
- * - Expandable details section with smooth animation
- * - Glassmorphism dark theme styling
- * - Execution duration display
- *
- * @example
- * ```tsx
- * <ToolCallCard toolCall={normalizedToolCall} />
- * <ToolCallCard toolCall={toolCall} defaultExpanded />
- * ```
- */
-declare function ToolCallCard({ toolCall, defaultExpanded, className }: ToolCallCardProps): react_jsx_runtime.JSX.Element;
-
-interface AgentToolCardProps {
-    /** The tool call with agent_tool action type */
-    toolCall: NormalizedToolCall;
-    /** Whether the card starts expanded */
-    defaultExpanded?: boolean;
-    /** Additional class names */
+declare function Conversation({ children, className, autoScroll: initialAutoScroll, scrollThreshold, }: ConversationProps): react_jsx_runtime.JSX.Element;
+interface ConversationContentProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
-    /** Depth level for nested rendering (0 = top level) */
-    depth?: number;
 }
-/**
- * AgentToolCard - Display a sub-agent/Task tool call with nested tool calls
- *
- * Features:
- * - Agent type badge (e.g., "Explore", "Plan", "Bash")
- * - Description of what the agent is doing
- * - Tool call count that updates during streaming
- * - Loading indicator while running (spinner)
- * - Elapsed time display while running
- * - Expandable to show nested tool calls
- * - Supports deep nesting (agents within agents)
- *
- * @example
- * ```tsx
- * <AgentToolCard
- *   toolCall={agentToolCall}
- *   defaultExpanded={false}
- * />
- * ```
- */
-declare function AgentToolCard({ toolCall, defaultExpanded, className, depth, }: AgentToolCardProps): react_jsx_runtime.JSX.Element | null;
-
-interface MessageListProps {
-    /** Normalized conversation entries to display */
-    entries: NormalizedEntry[];
-    /** Whether a response is currently loading */
-    loading?: boolean;
-    /** Streaming text content (displayed during real-time streaming) */
-    streamingContent?: string;
-    /** Display configuration override (uses context if not provided) */
-    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;
-    /**
-     * Enable auto-scroll to bottom when new entries are added.
-     * Scrolls within the message list container (not the page).
-     * Default: true
-     */
-    autoScroll?: boolean;
-    /**
-     * Custom renderers for rich content segments.
-     * Used when entries have `richContent` defined.
-     *
-     * @example
-     * ```tsx
-     * <MessageList
-     *   entries={entriesWithRichContent}
-     *   richContentRenderers={{
-     *     renderMention: ({ segment }) => (
-     *       <MentionBadge
-     *         name={segment.name}
-     *         color={segment.color}
-     *         onClick={() => scrollToEntity(segment.id)}
-     *       />
-     *     ),
-     *   }}
-     * />
-     * ```
-     */
-    richContentRenderers?: RichContentRenderers;
-    /** Additional class names */
+declare function ConversationContent({ children, className, }: ConversationContentProps): react_jsx_runtime.JSX.Element;
+interface ConversationEmptyStateProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
 }
-/**
- * MessageList - Display a list of normalized message entries
- *
- * Handles various entry types including user messages, assistant messages,
- * tool calls, thinking, and errors. Also supports streaming content display.
- *
- * Supports two display modes:
- * - 'inline': Each tool call rendered as individual expandable cards (default)
- * - 'compact': Consecutive tool calls grouped into a single accordion with
- *   an animated status line showing the current tool
- *
- * Uses glassmorphism dark theme styling with animated entries.
- *
- * @example
- * ```tsx
- * <MessageList entries={normalizedEntries} />
- * <MessageList entries={entries} loading streamingContent={text} />
- * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
- * ```
- */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, richContentRenderers, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+declare function ConversationEmptyState({ children, className, }: ConversationEmptyStateProps): react_jsx_runtime.JSX.Element;
+interface ConversationScrollButtonProps {
+    /** Additional class name */
+    className?: string;
+    /** Custom label */
+    label?: string;
+}
+declare function ConversationScrollButton({ className, label, }: ConversationScrollButtonProps): react_jsx_runtime.JSX.Element | null;
 
-interface UserMessageProps {
-    entry: NormalizedEntry;
+interface MessageContextValue {
+    /** Message role */
+    from: 'user' | 'assistant' | 'system';
+    /** Whether this message is streaming */
+    isStreaming?: boolean;
+    /** Tool invocations in this message */
+    toolInvocations?: ToolInvocation[];
+}
+declare function useMessage(): MessageContextValue;
+interface MessageProps {
+    /** Message role */
+    from: 'user' | 'assistant' | 'system';
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
+    /** Whether this message is streaming */
+    isStreaming?: boolean;
+    /** Tool invocations (for assistant messages) */
+    toolInvocations?: ToolInvocation[];
+    /** Message ID for data attribute */
+    id?: string;
 }
-/**
- * UserMessage - Display a user message with optional file attachments
- *
- * Uses glassmorphism styling with animated entry.
- */
-declare function UserMessage({ entry, className }: UserMessageProps): react_jsx_runtime.JSX.Element;
-interface AssistantMessageProps {
-    entry: NormalizedEntry;
-    /** Callback when user selects an option */
-    onOptionSelect?: (optionText: string) => void;
-    /** Custom renderers for rich content segments */
-    richContentRenderers?: RichContentRenderers;
+declare function Message({ from, children, className, isStreaming, toolInvocations, id, }: MessageProps): react_jsx_runtime.JSX.Element;
+interface MessageAvatarProps {
+    /** Avatar image URL */
+    src?: string;
+    /** Fallback text (initials) */
+    fallback?: string;
+    /** Additional class name */
     className?: string;
 }
-/**
- * AssistantMessage - Display an assistant message with markdown rendering
- *
- * Uses glassmorphism styling with bot avatar and animated entry.
- * Automatically detects and renders interactive options when present.
- * Supports rich content segments for inline rendering of mentions and custom components.
- */
-declare function AssistantMessage({ entry, onOptionSelect, richContentRenderers, className, }: AssistantMessageProps): react_jsx_runtime.JSX.Element;
-interface ThinkingMessageProps {
-    entry: NormalizedEntry;
+declare function MessageAvatar({ src, fallback, className }: MessageAvatarProps): react_jsx_runtime.JSX.Element;
+interface MessageContentProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
 }
-/**
- * ThinkingMessage - Display thinking/reasoning content (extended thinking)
- *
- * Uses glassmorphism styling with purple accent for thinking mode.
- */
-declare function ThinkingMessage({ entry, className }: ThinkingMessageProps): react_jsx_runtime.JSX.Element;
-interface ToolCallMessageProps {
-    entry: NormalizedEntry;
-    defaultExpanded?: boolean;
+declare function MessageContent({ children, className }: MessageContentProps): react_jsx_runtime.JSX.Element;
+interface MessageResponseProps {
+    /** Text content to render as markdown */
+    content: string;
+    /** Whether content is still streaming */
+    isStreaming?: boolean;
+    /** Additional class name */
     className?: string;
+    /** Custom markdown components */
+    components?: Record<string, ComponentType<{
+        children?: ReactNode;
+        [key: string]: unknown;
+    }>>;
 }
-/**
- * ToolCallMessage - Display a tool call entry using ToolCallCard
- *
- * Uses glassmorphism styling with animated entry.
- */
-declare function ToolCallMessage({ entry, defaultExpanded, className }: ToolCallMessageProps): react_jsx_runtime.JSX.Element | null;
-interface ErrorMessageProps {
-    entry: NormalizedEntry;
+declare function MessageResponse({ content, isStreaming, className, components, }: MessageResponseProps): react_jsx_runtime.JSX.Element | null;
+interface MessageActionsProps {
+    /** Child elements (action buttons) */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
 }
-/**
- * ErrorMessage - Display an error entry
- *
- * Uses glassmorphism styling with red accent for errors.
- */
-declare function ErrorMessage({ entry, className }: ErrorMessageProps): react_jsx_runtime.JSX.Element | null;
-interface MessageEntryProps {
-    entry: NormalizedEntry;
-    /** Callback when user selects an option from assistant message */
-    onOptionSelect?: (optionText: string) => void;
-    /** Whether tool calls should be expanded by default */
-    defaultExpanded?: boolean;
-    /** Custom renderers for rich content segments */
-    richContentRenderers?: RichContentRenderers;
+declare function MessageActions({ children, className }: MessageActionsProps): react_jsx_runtime.JSX.Element;
+interface MessageActionProps {
+    /** Action icon */
+    icon?: ReactNode;
+    /** Action label */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional class name */
     className?: string;
 }
-/**
- * MessageEntry - Render a normalized entry based on its type
- *
- * This is a convenience component that routes to the appropriate
- * entry type component.
- *
- * @example
- * ```tsx
- * {entries.map(entry => (
- *   <MessageEntry key={entry.id} entry={entry} onOptionSelect={handleSelect} />
- * ))}
- * ```
- */
-declare function MessageEntry({ entry, onOptionSelect, defaultExpanded, richContentRenderers, className, }: MessageEntryProps): react_jsx_runtime.JSX.Element | null;
-
-interface LogsPanelProps {
-    logs: LogEntry[];
-    title?: string;
-    isLoading?: boolean;
-    defaultCollapsed?: boolean;
-    maxHeight?: number;
+declare function MessageAction({ icon, label, onClick, className, }: MessageActionProps): react_jsx_runtime.JSX.Element;
+interface MessageTimestampProps {
+    /** Timestamp to display */
+    timestamp: Date | string;
+    /** Additional class name */
     className?: string;
 }
-/**
- * LogsPanel - Collapsible panel for displaying log entries
- *
- * Features:
- * - Collapsible header with log count
- * - Error/warning count badges
- * - Level-based coloring and icons
- * - Expandable entries with JSON data
- *
- * @example
- * ```tsx
- * <LogsPanel logs={logEntries} />
- * <LogsPanel logs={logs} title="Execution Logs" defaultCollapsed={false} />
- * ```
- */
-declare function LogsPanel({ logs, title, isLoading, defaultCollapsed, maxHeight, className, }: LogsPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function MessageTimestamp({ timestamp, className }: MessageTimestampProps): react_jsx_runtime.JSX.Element;
 
-interface ToolExecutionGroupProps {
-    /** Tool calls in this group */
-    toolCalls: NormalizedToolCall[];
-    /** Whether the group starts expanded */
+interface ToolContextValue {
+    /** The tool invocation data */
+    toolInvocation: ToolInvocation;
+    /** Whether the tool details are expanded */
+    isExpanded: boolean;
+    /** Toggle expansion state */
+    toggleExpanded: () => void;
+}
+declare function useTool(): ToolContextValue;
+interface ToolProps {
+    /** Tool invocation data */
+    toolInvocation: ToolInvocation;
+    /** Child elements */
+    children?: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Whether to start expanded */
     defaultExpanded?: boolean;
-    /** Animation duration for status line transitions (ms) */
-    animationDuration?: number;
-    /** Additional class names */
+}
+declare function Tool({ toolInvocation, children, className, defaultExpanded, }: ToolProps): react_jsx_runtime.JSX.Element;
+interface ToolHeaderProps {
+    /** Additional class name */
     className?: string;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Show expand/collapse button */
+    showToggle?: boolean;
 }
-/**
- * ToolExecutionGroup - Displays multiple tool calls in a compact accordion format.
- *
- * In collapsed state, shows a summary with tool count, action type icons,
- * and file change badges. When expanded, shows compact tool rows that can
- * be further expanded into full detail cards.
- *
- * @example
- * ```tsx
- * <ToolExecutionGroup
- *   toolCalls={consecutiveToolCalls}
- *   defaultExpanded={false}
- * />
- * ```
- */
-declare function ToolExecutionGroup({ toolCalls, defaultExpanded, className, }: ToolExecutionGroupProps): react_jsx_runtime.JSX.Element | null;
-
-interface CompactToolStatusLineProps {
-    /** The current tool call to display */
-    toolCall: NormalizedToolCall;
-    /** Previous tool call (for exit animation) */
-    previousToolCall?: NormalizedToolCall | null;
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Additional class names */
+declare function ToolHeader({ className, icon, showToggle, }: ToolHeaderProps): react_jsx_runtime.JSX.Element;
+interface ToolInputProps {
+    /** Additional class name */
     className?: string;
+    /** Maximum height before scroll */
+    maxHeight?: number;
 }
-/**
- * Compact status line for displaying the current tool execution.
- *
- * Features a smooth replace animation where the previous tool call
- * slides out while the new one slides in. Similar to the homepage
- * status line animation.
- *
- * @example
- * ```tsx
- * <CompactToolStatusLine
- *   toolCall={currentToolCall}
- *   previousToolCall={lastToolCall}
- * />
- * ```
- */
-declare function CompactToolStatusLine({ toolCall, previousToolCall, animationDuration, className, }: CompactToolStatusLineProps): react_jsx_runtime.JSX.Element;
+declare function ToolInput({ className, maxHeight }: ToolInputProps): react_jsx_runtime.JSX.Element | null;
+interface ToolOutputProps {
+    /** Additional class name */
+    className?: string;
+    /** Maximum height before scroll */
+    maxHeight?: number;
+}
+declare function ToolOutput({ className, maxHeight }: ToolOutputProps): react_jsx_runtime.JSX.Element | null;
+interface ToolListProps {
+    /** Tool invocations to render */
+    toolInvocations: ToolInvocation[];
+    /** Additional class name */
+    className?: string;
+    /** Whether to show tools expanded by default */
+    defaultExpanded?: boolean;
+}
+declare function ToolList({ toolInvocations, className, defaultExpanded, }: ToolListProps): react_jsx_runtime.JSX.Element | null;
 
-interface CompactToolRowProps {
-    toolCall: NormalizedToolCall;
-    /** Whether to show the full path or just filename */
-    showFullPath?: boolean;
+interface ReasoningContextValue {
+    /** Whether the reasoning panel is open */
+    isOpen: boolean;
+    /** Toggle open state */
+    setIsOpen: (value: boolean) => void;
+    /** Whether reasoning is currently streaming */
+    isStreaming: boolean;
+    /** Duration of thinking in seconds */
+    duration: number;
+}
+declare function useReasoning(): ReasoningContextValue;
+interface ReasoningProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Whether reasoning is currently streaming */
+    isStreaming?: boolean;
+    /** Additional class name */
     className?: string;
+    /** Whether to auto-expand during streaming */
+    autoExpand?: boolean;
+    /** Whether to auto-collapse when streaming completes */
+    autoCollapse?: boolean;
+    /** Initial duration in seconds (for loaded content) */
+    initialDuration?: number;
 }
-/**
- * CompactToolRow - A single-line compact display of a tool call
- *
- * Shows: Icon | Label | File Badge | Diff Stats | Description
- *
- * @example
- * ```tsx
- * <CompactToolRow toolCall={normalizedToolCall} />
- * ```
- */
-declare function CompactToolRow({ toolCall, showFullPath, className }: CompactToolRowProps): react_jsx_runtime.JSX.Element;
+declare function Reasoning({ children, isStreaming, className, autoExpand, autoCollapse, initialDuration, }: ReasoningProps): react_jsx_runtime.JSX.Element;
+interface ReasoningTriggerProps {
+    /** Additional class name */
+    className?: string;
+    /** Custom label */
+    label?: string;
+    /** Show duration */
+    showDuration?: boolean;
+}
+declare function ReasoningTrigger({ className, label, showDuration, }: ReasoningTriggerProps): react_jsx_runtime.JSX.Element;
+interface ReasoningContentProps {
+    /** Content to display (thinking text) */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Maximum height before scroll */
+    maxHeight?: number;
+}
+declare function ReasoningContent({ children, className, maxHeight, }: ReasoningContentProps): react_jsx_runtime.JSX.Element | null;
+interface ThinkingIndicatorProps {
+    /** Whether thinking is active */
+    isActive?: boolean;
+    /** Label to display */
+    label?: string;
+    /** Additional class name */
+    className?: string;
+}
+declare function ThinkingIndicator({ isActive, label, className, }: ThinkingIndicatorProps): react_jsx_runtime.JSX.Element | null;
 
-interface FileBadgeProps {
-    /** Full file path or filename */
-    path: string;
-    /** Number of lines added */
-    linesAdded?: number;
-    /** Number of lines removed */
-    linesRemoved?: number;
-    /** Show only filename instead of full path */
-    showOnlyFilename?: boolean;
+interface TaskContextValue {
+    /** Whether the task list is open */
+    isOpen: boolean;
+    /** Toggle open state */
+    setIsOpen: (value: boolean) => void;
+}
+declare function useTask(): TaskContextValue;
+interface TaskProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Whether to start open */
+    defaultOpen?: boolean;
+    /** Additional class name */
     className?: string;
 }
-/**
- * FileBadge - A compact pill showing filename with diff stats
- *
- * Used in the collapsed accordion view to show modified files.
- *
- * @example
- * ```tsx
- * <FileBadge path="src/utils.ts" linesAdded={5} linesRemoved={2} />
- * <FileBadge path="SKILL.md" linesAdded={0} linesRemoved={22} />
- * ```
- */
-declare function FileBadge({ path, linesAdded, linesRemoved, showOnlyFilename, className, }: FileBadgeProps): react_jsx_runtime.JSX.Element;
+declare function Task({ children, defaultOpen, className, }: TaskProps): react_jsx_runtime.JSX.Element;
+interface TaskTriggerProps {
+    /** Trigger content (usually task count/label) */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+declare function TaskTrigger({ children, className }: TaskTriggerProps): react_jsx_runtime.JSX.Element;
+interface TaskContentProps {
+    /** Child elements (TaskItem components) */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+declare function TaskContent({ children, className }: TaskContentProps): react_jsx_runtime.JSX.Element | null;
+interface TaskItemProps {
+    /** Task content */
+    children: ReactNode;
+    /** Task status */
+    status: TodoStatus;
+    /** Active form (shown when in_progress) */
+    activeForm?: string;
+    /** Additional class name */
+    className?: string;
+}
+declare function TaskItem({ children, status, activeForm, className, }: TaskItemProps): react_jsx_runtime.JSX.Element;
+interface TaskListProps {
+    /** Todo items to display */
+    items: TodoItem[];
+    /** Whether to start open */
+    defaultOpen?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Custom title */
+    title?: string;
+}
+declare function TaskList({ items, defaultOpen, className, title, }: TaskListProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Context type for display mode configuration
- */
-interface DisplayModeContextType {
-    /** Current display configuration */
-    config: ToolDisplayConfig;
-    /** Update the display mode */
-    setMode: (mode: ToolDisplayMode) => void;
-    /** Update the full configuration */
-    setConfig: (config: Partial<ToolDisplayConfig>) => void;
-    /** Toggle between 'inline' and 'compact' modes */
-    toggleMode: () => void;
-}
-interface DisplayModeProviderProps {
+interface AttachmentContextValue {
+    /** The file attachment data */
+    file: FileAttachment$2 | AttachmentFile;
+    /** Whether the attachment can be removed */
+    removable?: boolean;
+    /** Remove callback */
+    onRemove?: () => void;
+}
+declare function useAttachment(): AttachmentContextValue;
+interface AttachmentFile {
+    /** File name */
+    name: string;
+    /** MIME type */
+    type: string;
+    /** File size in bytes */
+    size: number;
+    /** URL or data URL for preview */
+    url?: string;
+    /** Base64 data (for upload) */
+    base64?: string;
+}
+interface AttachmentsProps {
+    /** Child elements (Attachment components) */
     children: ReactNode;
-    /** Initial display configuration */
-    initialConfig?: Partial<ToolDisplayConfig>;
+    /** Layout style */
+    layout?: 'grid' | 'inline' | 'list';
+    /** Additional class name */
+    className?: string;
 }
-/**
- * Provider for display mode configuration.
- *
- * Wrap your chat component with this provider to enable
- * configurable tool call display modes.
- *
- * @example
- * ```tsx
- * <DisplayModeProvider initialConfig={{ mode: 'compact' }}>
- *   <MessageList entries={entries} />
- * </DisplayModeProvider>
- * ```
- */
-declare function DisplayModeProvider({ children, initialConfig }: DisplayModeProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Hook to access display mode configuration.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { config, toggleMode } = useDisplayMode();
- *
- *   return (
- *     <button onClick={toggleMode}>
- *       Mode: {config.mode}
- *     </button>
- *   );
- * }
- * ```
- */
-declare function useDisplayMode(): DisplayModeContextType;
-/**
- * Hook to get just the current config (for components that only read)
- */
-declare function useDisplayConfig(): ToolDisplayConfig;
+declare function Attachments({ children, layout, className, }: AttachmentsProps): react_jsx_runtime.JSX.Element;
+interface AttachmentProps {
+    /** File data */
+    file: FileAttachment$2 | AttachmentFile;
+    /** Child elements (AttachmentPreview, etc.) */
+    children?: ReactNode;
+    /** Whether the attachment can be removed */
+    removable?: boolean;
+    /** Remove callback */
+    onRemove?: () => void;
+    /** Additional class name */
+    className?: string;
+}
+declare function Attachment({ file, children, removable, onRemove, className, }: AttachmentProps): react_jsx_runtime.JSX.Element;
+interface AttachmentPreviewProps {
+    /** Additional class name */
+    className?: string;
+    /** Preview height */
+    height?: number;
+}
+declare function AttachmentPreview({ className, height, }: AttachmentPreviewProps): react_jsx_runtime.JSX.Element;
+interface AttachmentInfoProps {
+    /** Additional class name */
+    className?: string;
+    /** Show file size */
+    showSize?: boolean;
+}
+declare function AttachmentInfo({ className, showSize, }: AttachmentInfoProps): react_jsx_runtime.JSX.Element;
+interface AttachmentRemoveProps {
+    /** Additional class name */
+    className?: string;
+}
+declare function AttachmentRemove({ className }: AttachmentRemoveProps): react_jsx_runtime.JSX.Element | null;
+interface FileBadgeProps {
+    /** File data */
+    file: FileAttachment$2 | AttachmentFile;
+    /** Whether the file can be removed */
+    removable?: boolean;
+    /** Remove callback */
+    onRemove?: () => void;
+    /** Additional class name */
+    className?: string;
+}
+declare function FileBadgeCompact({ file, removable, onRemove, className, }: FileBadgeProps): react_jsx_runtime.JSX.Element;
 
-interface OptionCardsProps {
-    /** Parsed options to display */
-    options: ParsedOption[];
-    /** Callback when an option is selected */
-    onSelect: (option: ParsedOption) => void;
-    /** Additional class names */
+interface ShimmerProps {
+    /** Child elements */
+    children?: ReactNode;
+    /** Additional class name */
     className?: string;
+    /** Whether shimmer is active */
+    isActive?: boolean;
 }
-/**
- * OptionCards - Display clickable option cards for interactive selection
- *
- * Renders a grid of glassmorphic cards that users can click to select an option.
- * Used when assistant messages contain structured options for the user to choose from.
- *
- * @example
- * ```tsx
- * <OptionCards
- *   options={[
- *     { id: '1', label: 'Add Product', description: 'Upload a new product' },
- *     { id: '2', label: 'Browse Existing', description: 'View your products' },
- *   ]}
- *   onSelect={(opt) => sendMessage(opt.label)}
- * />
- * ```
- */
-declare function OptionCards({ options, onSelect, className }: OptionCardsProps): react_jsx_runtime.JSX.Element;
+declare function Shimmer({ children, className, isActive, }: ShimmerProps): react_jsx_runtime.JSX.Element | null;
+interface ShimmerLineProps {
+    /** Width (CSS value or percentage) */
+    width?: string | number;
+    /** Height in pixels */
+    height?: number;
+    /** Additional class name */
+    className?: string;
+}
+declare function ShimmerLine({ width, height, className, }: ShimmerLineProps): react_jsx_runtime.JSX.Element;
+interface ShimmerBlockProps {
+    /** Width (CSS value or percentage) */
+    width?: string | number;
+    /** Height in pixels */
+    height?: number;
+    /** Border radius */
+    rounded?: 'sm' | 'md' | 'lg' | 'full' | 'none';
+    /** Additional class name */
+    className?: string;
+}
+declare function ShimmerBlock({ width, height, rounded, className, }: ShimmerBlockProps): react_jsx_runtime.JSX.Element;
+interface ShimmerTextProps {
+    /** Number of characters to approximate width */
+    chars?: number;
+    /** Additional class name */
+    className?: string;
+}
+declare function ShimmerText({ chars, className, }: ShimmerTextProps): react_jsx_runtime.JSX.Element;
+interface LoadingDotsProps {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional class name */
+    className?: string;
+}
+declare function LoadingDots({ size, className, }: LoadingDotsProps): react_jsx_runtime.JSX.Element;
+interface LoadingSpinnerProps {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional class name */
+    className?: string;
+}
+declare function LoadingSpinner({ size, className, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+interface MessageShimmerProps {
+    /** Message role to style appropriately */
+    role?: 'user' | 'assistant';
+    /** Additional class name */
+    className?: string;
+}
+declare function MessageShimmer({ role, className, }: MessageShimmerProps): react_jsx_runtime.JSX.Element;
 
-interface TodoPanelProps {
-    /** List of todo items */
-    todos: TodoItem[];
-    /** Optional title for the panel */
+interface LogsPanelProps {
+    logs: LogEntry[];
     title?: string;
-    /** Show in compact mode (less padding, smaller text) */
-    compact?: boolean;
-    /** Show progress bar */
-    showProgress?: boolean;
-    /** Additional class names */
+    isLoading?: boolean;
+    defaultCollapsed?: boolean;
+    maxHeight?: number;
     className?: string;
 }
 /**
- * TodoPanel - Display a list of todos with status indicators
+ * LogsPanel - Collapsible panel for displaying log entries
  *
  * Features:
- * - Status icons (pending/in_progress/completed)
- * - Progress bar showing completion
- * - Compact mode for inline display
- * - Animated transitions
+ * - Collapsible header with log count
+ * - Error/warning count badges
+ * - Level-based coloring and icons
+ * - Expandable entries with JSON data
  *
  * @example
  * ```tsx
- * <TodoPanel todos={todos} />
- * <TodoPanel todos={todos} title="Task Progress" showProgress />
- * <TodoPanel todos={todos} compact />
+ * <LogsPanel logs={logEntries} />
+ * <LogsPanel logs={logs} title="Execution Logs" defaultCollapsed={false} />
  * ```
  */
-declare function TodoPanel({ todos, title, compact, showProgress, className, }: TodoPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function LogsPanel({ logs, title, isLoading, defaultCollapsed, maxHeight, className, }: LogsPanelProps): react_jsx_runtime.JSX.Element | null;
 
 interface EnvVarsPanelProps {
     /** Current environment variables */
@@ -479,99 +467,52 @@ interface EnvVarsPanelProps {
 /**
  * EnvVarsPanel - Collapsible panel for managing environment variables
  *
- * Provides a UI for adding, viewing, and removing environment variables.
- * Commonly used to set environment variables for sandbox/agent execution.
- *
- * @example
- * ```tsx
- * function ChatSettings() {
- *   const [envVars, setEnvVars] = useState<Record<string, string>>({});
- *
- *   return (
- *     <EnvVarsPanel
- *       envVars={envVars}
- *       onChange={setEnvVars}
- *       helperText="These variables will be available in the sandbox."
- *     />
- *   );
- * }
- * ```
- */
-declare function EnvVarsPanel({ envVars, onChange, defaultCollapsed, className, label, helperText, }: EnvVarsPanelProps): react_jsx_runtime.JSX.Element;
-
-interface DisplayModeToggleProps {
-    /** Additional class name */
-    className?: string;
-    /** Show label text (default: true) */
-    showLabel?: boolean;
-    /** Custom labels for modes */
-    labels?: {
-        inline?: string;
-        compact?: string;
-        accordion?: string;
-    };
-    /** Which modes to cycle through (default: all three) */
-    modes?: ToolDisplayMode[];
-}
-/**
- * DisplayModeToggle - Button to cycle through display modes
- *
- * Uses the DisplayModeContext to cycle through 'inline', 'compact', and 'accordion' modes.
- * Must be used within a DisplayModeProvider.
+ * Provides a UI for adding, viewing, and removing environment variables.
+ * Commonly used to set environment variables for sandbox/agent execution.
  *
  * @example
  * ```tsx
- * function ChatHeader() {
- *   return (
- *     <header>
- *       <h1>Chat</h1>
- *       <DisplayModeToggle />
- *     </header>
- *   );
- * }
+ * function ChatSettings() {
+ *   const [envVars, setEnvVars] = useState<Record<string, string>>({});
  *
- * function App() {
  *   return (
- *     <DisplayModeProvider>
- *       <ChatHeader />
- *       <MessageList entries={entries} />
- *     </DisplayModeProvider>
+ *     <EnvVarsPanel
+ *       envVars={envVars}
+ *       onChange={setEnvVars}
+ *       helperText="These variables will be available in the sandbox."
+ *     />
  *   );
  * }
  * ```
  */
-declare function DisplayModeToggle({ className, showLabel, labels, modes, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
+declare function EnvVarsPanel({ envVars, onChange, defaultCollapsed, className, label, helperText, }: EnvVarsPanelProps): 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;
+interface OptionCardsProps {
+    /** Parsed options to display */
+    options: ParsedOption[];
+    /** Callback when an option is selected */
+    onSelect: (option: ParsedOption) => void;
     /** Additional class names */
     className?: string;
 }
 /**
- * StepAccordion - Compact accordion that shows tool calls with file badges
+ * OptionCards - Display clickable option cards for interactive selection
  *
- * Features:
- * - Collapsed header shows tool count, action icons, and file change badges
- * - Expanded view shows CompactToolRow for each tool call
- * - Clean, minimal design matching the compact UI style
+ * Renders a grid of glassmorphic cards that users can click to select an option.
+ * Used when assistant messages contain structured options for the user to choose from.
  *
  * @example
  * ```tsx
- * <StepAccordion
- *   toolCalls={normalizedToolCalls}
- *   defaultExpanded={false}
+ * <OptionCards
+ *   options={[
+ *     { id: '1', label: 'Add Product', description: 'Upload a new product' },
+ *     { id: '2', label: 'Browse Existing', description: 'View your products' },
+ *   ]}
+ *   onSelect={(opt) => sendMessage(opt.label)}
  * />
  * ```
  */
-declare function StepAccordion({ toolCalls, defaultExpanded, isExpanded: controlledExpanded, onToggle, className, }: StepAccordionProps): react_jsx_runtime.JSX.Element | null;
+declare function OptionCards({ options, onSelect, className }: OptionCardsProps): react_jsx_runtime.JSX.Element;
 
 interface StatusIndicatorProps {
     status: ToolStatus;
@@ -620,7 +561,8 @@ interface CodeBlockProps {
 /**
  * CodeBlock - Display code with syntax-aware styling and expand/collapse
  *
- * Uses glassmorphism dark theme styling with accent-colored expand button.
+ * Uses glassmorphism dark theme styling with ChatGPT-style header containing
+ * language label and copy button.
  *
  * @example
  * ```tsx
@@ -647,55 +589,12 @@ interface JsonDisplayProps {
  */
 declare function JsonDisplay({ value, maxHeight, className }: JsonDisplayProps): react_jsx_runtime.JSX.Element;
 
-interface StreamingTextProps {
-    content: string;
-    isStreaming?: boolean;
-    renderMarkdown?: boolean;
-    className?: string;
-}
-/**
- * StreamingText - Display text that may be streaming, with optional markdown
- *
- * Shows a blinking cursor indicator when streaming is active.
- * Uses glassmorphism theme styling.
- *
- * @example
- * ```tsx
- * <StreamingText content={text} isStreaming />
- * <StreamingText content={markdown} renderMarkdown />
- * ```
- */
-declare function StreamingText({ content, isStreaming, renderMarkdown, className, }: StreamingTextProps): react_jsx_runtime.JSX.Element;
-
-interface LoadingIndicatorProps {
-    variant?: 'dots' | 'pulse' | 'spinner' | 'cursor';
-    size?: 'sm' | 'md' | 'lg';
-    className?: string;
-}
-/**
- * LoadingIndicator - Display various loading states
- *
- * Uses the glassmorphism theme with accent-colored animations.
- *
- * Variants:
- * - dots: Three animated dots
- * - pulse: Single pulsing dot
- * - spinner: Rotating spinner
- * - cursor: Blinking cursor (like in the demo)
- *
- * @example
- * ```tsx
- * <LoadingIndicator />
- * <LoadingIndicator variant="spinner" size="lg" />
- * <LoadingIndicator variant="cursor" />
- * ```
- */
-declare function LoadingIndicator({ variant, size, className }: LoadingIndicatorProps): react_jsx_runtime.JSX.Element;
-
 interface LazyMarkdownProps {
     children: string;
     /** Fallback content to show while loading */
     fallback?: ReactNode;
+    /** Custom component overrides for markdown elements */
+    components?: MarkdownComponents;
     className?: string;
 }
 /**
@@ -707,121 +606,19 @@ interface LazyMarkdownProps {
  * @example
  * ```tsx
  * <LazyMarkdown>{markdownContent}</LazyMarkdown>
- * ```
- */
-declare function LazyMarkdown({ children, fallback, className }: LazyMarkdownProps): react_jsx_runtime.JSX.Element;
-
-interface RichContentRendererProps {
-    /** Rich content segments to render */
-    content: RichContent;
-    /** Custom renderers for segments */
-    renderers?: RichContentRenderers;
-    /** Additional class name */
-    className?: string;
-}
-/**
- * RichContentRenderer - Renders structured rich content segments
- *
- * This is the preferred approach for rendering rich content within messages.
- * Each segment type can have custom rendering via the `renderers` prop.
  *
- * @example
- * ```tsx
- * <RichContentRenderer
- *   content={[
- *     { type: 'text', content: 'Looking at ' },
- *     { type: 'mention', name: 'Scene1', color: '#ff0' },
- *     { type: 'text', content: ' timeline.' },
- *   ]}
- *   renderers={{
- *     renderMention: ({ segment }) => (
- *       <MentionBadge
- *         name={segment.name}
- *         onClick={() => scrollTo(segment.id)}
- *       />
- *     ),
+ * // With custom components
+ * <LazyMarkdown
+ *   components={{
+ *     h2: ({ children }) => <h2 className="custom-h2">{children}</h2>,
+ *     code: ({ children, className }) => <CustomCode className={className}>{children}</CustomCode>,
  *   }}
- * />
- * ```
- */
-declare function RichContentRenderer({ content, renderers, className, }: RichContentRendererProps): react_jsx_runtime.JSX.Element;
-
-interface TypewriterTextProps {
-    /** Words to cycle through */
-    words?: string[];
-    /** Typing speed in ms per character */
-    typeSpeed?: number;
-    /** Pause before erasing in ms */
-    pauseBeforeErase?: number;
-    /** Erasing speed in ms per character */
-    eraseSpeed?: number;
-    /** Pause before typing next word in ms */
-    pauseBeforeType?: number;
-    /** Whether to show a blinking cursor */
-    showCursor?: boolean;
-    /** Additional class names */
-    className?: string;
-    /** Cursor class names */
-    cursorClassName?: string;
-}
-/**
- * TypewriterText - Animated typing component that cycles through words
- *
- * Creates a typewriter effect that types out words character by character,
- * pauses, then erases them before moving to the next word.
- *
- * @example
- * ```tsx
- * // Default thinking words
- * <TypewriterText />
- *
- * // Custom words
- * <TypewriterText words={['Loading', 'Processing', 'Almost done']} />
- *
- * // Custom speeds
- * <TypewriterText typeSpeed={30} pauseBeforeErase={1000} />
+ * >
+ *   {markdownContent}
+ * </LazyMarkdown>
  * ```
  */
-declare function TypewriterText({ words, typeSpeed, pauseBeforeErase, eraseSpeed, pauseBeforeType, showCursor, className, cursorClassName, }: TypewriterTextProps): react_jsx_runtime.JSX.Element;
-
-type Theme = 'light' | 'dark';
-interface ThemeContextType {
-    theme: Theme;
-    toggleTheme: () => void;
-    setTheme: (theme: Theme) => void;
-}
-interface ThemeProviderProps {
-    children: ReactNode;
-    /** Default theme to use when no stored preference exists. Defaults to system preference, then 'light'. */
-    defaultTheme?: Theme;
-    /** localStorage key for persisting theme. Defaults to 'ash-ui-theme'. */
-    storageKey?: string;
-    /** Whether to listen for system theme changes. Defaults to true. */
-    listenToSystemChanges?: boolean;
-}
-/**
- * ThemeProvider - Unified theme management for agentic UIs.
- *
- * Features:
- * - Persists theme choice to localStorage
- * - Respects system preference when no stored preference exists
- * - Listens for system theme changes (configurable)
- * - Adds/removes 'dark' class on document root for Tailwind CSS
- *
- * @example
- * ```tsx
- * <ThemeProvider>
- *   <App />
- * </ThemeProvider>
- *
- * // With custom defaults
- * <ThemeProvider defaultTheme="dark" storageKey="my-theme">
- *   <App />
- * </ThemeProvider>
- * ```
- */
-declare function ThemeProvider({ children, defaultTheme, storageKey, listenToSystemChanges, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-declare function useTheme(): ThemeContextType;
+declare function LazyMarkdown({ children, fallback, components, className }: LazyMarkdownProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A queued message waiting to be sent
@@ -1009,6 +806,10 @@ interface UseFileUploadReturn {
     /** Click handler to trigger file input */
     openFilePicker: () => void;
 }
+/**
+ * Format file size for display
+ */
+declare function formatFileSize(bytes: number): string;
 /**
  * Hook for managing file uploads with drag & drop support.
  *
@@ -1054,6 +855,113 @@ interface UseFileUploadReturn {
 declare function useFileUpload({ maxFileSize, // 100MB
 maxFiles, onValidationError, }?: UseFileUploadOptions): UseFileUploadReturn;
 
+/**
+ * Middleware utilities for useAgentChat
+ *
+ * Provides composable request and event transformation capabilities.
+ * Middleware functions are called in order, and each can transform or filter
+ * the request/event before passing it to the next middleware.
+ *
+ * @example
+ * ```tsx
+ * const loggingMiddleware: ChatMiddleware = {
+ *   onRequest: (request) => {
+ *     console.log('Sending:', request.prompt);
+ *     return request;
+ *   },
+ *   onEvent: (event) => {
+ *     console.log('Received:', event.type);
+ *     return event;
+ *   },
+ * };
+ *
+ * const { send } = useAgentChat({
+ *   middleware: [loggingMiddleware],
+ *   // ...
+ * });
+ * ```
+ */
+
+/**
+ * Request object passed through middleware chain
+ */
+interface MiddlewareRequest {
+    /** The user's prompt */
+    prompt: string;
+    /** Current session ID (if resuming a conversation) */
+    sessionId: string | null;
+    /** Additional metadata to send with the request */
+    metadata?: Record<string, unknown>;
+    /** Additional context to prepend to the session */
+    sessionContext?: string;
+}
+/**
+ * Result returned from request middleware
+ * Return void or omit fields to keep original values
+ */
+interface MiddlewareRequestResult {
+    /** Modified prompt */
+    prompt?: string;
+    /** Modified metadata (merged with existing) */
+    metadata?: Record<string, unknown>;
+    /** Modified session context */
+    sessionContext?: string;
+    /** If set, cancels the request and shows this error */
+    error?: string;
+}
+/**
+ * Middleware interface for composable request/event transforms
+ */
+interface ChatMiddleware {
+    /** Called before the request is sent. Can modify request or return error to cancel. */
+    onRequest?: (request: MiddlewareRequest) => Promise<MiddlewareRequestResult | void> | MiddlewareRequestResult | void;
+    /** Called for each event. Return null to filter out the event. */
+    onEvent?: (event: StreamEvent) => Promise<StreamEvent | null> | StreamEvent | null;
+    /** Called when the stream completes successfully */
+    onComplete?: (sessionId: string) => void | Promise<void>;
+    /** Called when an error occurs */
+    onError?: (error: string) => void | Promise<void>;
+}
+/**
+ * Apply request middleware chain
+ *
+ * Executes each middleware's onRequest handler in order.
+ * Each middleware can modify the request or return an error to cancel.
+ *
+ * @param middlewares - Array of middleware to apply
+ * @param request - Initial request object
+ * @returns Modified request and optional error
+ */
+declare function applyRequestMiddleware(middlewares: ChatMiddleware[], request: MiddlewareRequest): Promise<{
+    request: MiddlewareRequest;
+    error?: string;
+}>;
+/**
+ * Apply event middleware chain
+ *
+ * Executes each middleware's onEvent handler in order.
+ * If any middleware returns null, the event is filtered out.
+ *
+ * @param middlewares - Array of middleware to apply
+ * @param event - Stream event to process
+ * @returns Processed event or null if filtered
+ */
+declare function applyEventMiddleware(middlewares: ChatMiddleware[], event: StreamEvent): Promise<StreamEvent | null>;
+/**
+ * Call completion handlers on all middleware
+ *
+ * @param middlewares - Array of middleware
+ * @param sessionId - Completed session ID
+ */
+declare function callMiddlewareComplete(middlewares: ChatMiddleware[], sessionId: string): Promise<void>;
+/**
+ * Call error handlers on all middleware
+ *
+ * @param middlewares - Array of middleware
+ * @param error - Error message
+ */
+declare function callMiddlewareError(middlewares: ChatMiddleware[], error: string): Promise<void>;
+
 /**
  * useAgentChat - A React hook for streaming agent conversations
  *
@@ -1128,12 +1036,70 @@ interface StreamEvent {
  * Async generator that yields StreamEvent objects
  */
 type StreamGenerator = AsyncGenerator<StreamEvent, void, unknown>;
+/**
+ * Options passed to CreateStreamFn
+ */
+interface CreateStreamOptions {
+    /** AbortSignal to cancel the request */
+    signal?: AbortSignal;
+    /** Additional metadata from onBeforeSend/middleware */
+    metadata?: Record<string, unknown>;
+    /** Session context from onBeforeSend/middleware */
+    sessionContext?: string;
+}
 /**
  * Function that creates a stream of events
  * This matches the signature of client.agents.run() and client.sessions.send()
- * The optional signal parameter allows cancellation via AbortController
+ *
+ * @example
+ * ```tsx
+ * createStream: (prompt, sessionId, options) => {
+ *   if (sessionId) {
+ *     return client.sessions.send(sessionId, prompt, {
+ *       signal: options?.signal,
+ *       sessionContext: options?.sessionContext,
+ *       metadata: options?.metadata,
+ *     });
+ *   }
+ *   return client.agents.run(agentId, prompt, {
+ *     signal: options?.signal,
+ *     sessionContext: options?.sessionContext,
+ *     metadata: options?.metadata,
+ *   });
+ * }
+ * ```
+ */
+type CreateStreamFn = (prompt: string, sessionId?: string, options?: CreateStreamOptions) => StreamGenerator;
+/**
+ * Function that subscribes to an existing session's events
+ * This is used for auto-reconnection when the primary stream is interrupted
+ */
+type SubscribeToSessionFn = (sessionId: string, signal?: AbortSignal) => StreamGenerator;
+/**
+ * Context passed to onBeforeSend hook
  */
-type CreateStreamFn = (prompt: string, sessionId?: string, signal?: AbortSignal) => StreamGenerator;
+interface BeforeSendContext {
+    /** The user's prompt */
+    prompt: string;
+    /** Current session ID (null for new conversations) */
+    sessionId: string | null;
+    /** Current entries in the conversation */
+    entries: NormalizedEntry[];
+}
+/**
+ * Result returned from onBeforeSend hook
+ * Return void or omit fields to keep original values
+ */
+interface BeforeSendResult {
+    /** Modified prompt to send */
+    prompt?: string;
+    /** Additional metadata to include with the request */
+    metadata?: Record<string, unknown>;
+    /** Additional context to prepend to the session */
+    sessionContext?: string;
+    /** If true, cancels the send operation */
+    cancel?: boolean;
+}
 /**
  * Options for useAgentChat
  */
@@ -1153,6 +1119,18 @@ interface UseAgentChatOptions {
      * ```
      */
     createStream: CreateStreamFn;
+    /**
+     * Function to subscribe to an existing session for reconnection.
+     * If provided, enables auto-reconnection when the stream is interrupted.
+     *
+     * @example
+     * ```tsx
+     * subscribeToSession: (sessionId, signal) => {
+     *   return client.sessions.subscribe(sessionId, { signal });
+     * }
+     * ```
+     */
+    subscribeToSession?: SubscribeToSessionFn;
     /**
      * Initial session ID (for resuming a conversation)
      */
@@ -1177,6 +1155,71 @@ interface UseAgentChatOptions {
      * Callback for sandbox log events
      */
     onSandboxLog?: (entry: NonNullable<StreamEvent['entry']>) => void;
+    /**
+     * Callback when reconnection is attempted
+     */
+    onReconnect?: (attempt: number, sessionId: string) => void;
+    /**
+     * Maximum number of reconnection attempts (default: 3)
+     */
+    maxReconnectAttempts?: number;
+    /**
+     * Base delay for exponential backoff in ms (default: 1000)
+     */
+    reconnectBaseDelay?: number;
+    /**
+     * Called before each message is sent.
+     * Use for pre-flight work like file synchronization, validation, or adding context.
+     * Return { cancel: true } to prevent the message from being sent.
+     *
+     * @example
+     * ```tsx
+     * onBeforeSend: async ({ prompt, sessionId }) => {
+     *   await syncFilesToSandbox(sessionId);
+     *   return {
+     *     sessionContext: `Current file: ${currentFile}`,
+     *     metadata: { version: '1.0' },
+     *   };
+     * }
+     * ```
+     */
+    onBeforeSend?: (context: BeforeSendContext) => Promise<BeforeSendResult | void> | BeforeSendResult | void;
+    /**
+     * Called for every raw stream event before internal processing.
+     * Use for logging, analytics, or detecting specific events.
+     *
+     * @example
+     * ```tsx
+     * onEvent: (event) => {
+     *   if (event.type === 'tool_result' && event.toolName === 'browser_navigate') {
+     *     updatePreview(event.toolResult?.url);
+     *   }
+     * }
+     * ```
+     */
+    onEvent?: (event: StreamEvent) => void | Promise<void>;
+    /**
+     * Array of middleware for composable request/event transforms.
+     * Middleware are executed in order. Each can modify requests,
+     * transform events, or filter events by returning null.
+     *
+     * @example
+     * ```tsx
+     * middleware: [
+     *   {
+     *     onRequest: async (req) => ({
+     *       metadata: { ...req.metadata, timestamp: Date.now() },
+     *     }),
+     *     onEvent: (event) => {
+     *       // Filter out sandbox_log events
+     *       if (event.type === 'sandbox_log') return null;
+     *       return event;
+     *     },
+     *   },
+     * ]
+     * ```
+     */
+    middleware?: ChatMiddleware[];
 }
 /**
  * Return type for useAgentChat
@@ -1191,6 +1234,10 @@ interface UseAgentChatReturn {
      * Whether a message is currently being streamed
      */
     isStreaming: boolean;
+    /**
+     * Whether the hook is attempting to reconnect after a stream interruption
+     */
+    isReconnecting: boolean;
     /**
      * Current error message (if any)
      */
@@ -1219,6 +1266,158 @@ interface UseAgentChatReturn {
 }
 declare function useAgentChat(options: UseAgentChatOptions): UseAgentChatReturn;
 
+/**
+ * useChat - AI SDK compatible chat hook for ash-cloud
+ *
+ * This hook provides an interface compatible with AI SDK's useChat hook
+ * while using ash-cloud's streaming infrastructure under the hood.
+ *
+ * @example
+ * ```tsx
+ * import { useChat } from '@ash-cloud/ash-ui';
+ *
+ * function Chat() {
+ *   const {
+ *     messages,
+ *     isLoading,
+ *     append,
+ *     stop,
+ *     setMessages,
+ *   } = useChat({
+ *     createStream: (prompt, sessionId) => client.agents.run(agentId, prompt),
+ *     onToolCall: ({ toolCall }) => console.log('Tool called:', toolCall.toolName),
+ *   });
+ *
+ *   return (
+ *     <Conversation>
+ *       {messages.map((m) => (
+ *         <Message key={m.id} from={m.role}>{m.content}</Message>
+ *       ))}
+ *     </Conversation>
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * Message to append to the conversation
+ */
+interface CreateMessage {
+    /** Message ID (auto-generated if not provided) */
+    id?: string;
+    /** Message role */
+    role: 'user' | 'assistant' | 'system' | 'data';
+    /** Message content */
+    content: string;
+    /** Tool invocations */
+    toolInvocations?: ToolInvocation[];
+    /** Reasoning content */
+    reasoning?: string;
+}
+/**
+ * Options for appending a message
+ */
+interface ChatRequestOptions {
+    /** Additional data to include with the request */
+    data?: Record<string, unknown>;
+    /** Additional body parameters */
+    body?: Record<string, unknown>;
+}
+/**
+ * Tool call handler callback
+ */
+interface ToolCallHandler {
+    /** The tool invocation */
+    toolCall: ToolInvocation;
+}
+/**
+ * Options for useChat hook
+ */
+interface UseChatOptions {
+    /**
+     * Function to create a stream of events.
+     * Can wrap client.agents.run() or client.sessions.send()
+     */
+    createStream: CreateStreamFn;
+    /**
+     * Function to subscribe to an existing session for reconnection.
+     */
+    subscribeToSession?: (sessionId: string, signal?: AbortSignal) => StreamGenerator;
+    /**
+     * Initial session ID (for resuming a conversation)
+     */
+    initialSessionId?: string;
+    /**
+     * Initial messages to display
+     */
+    initialMessages?: Message$1[];
+    /**
+     * Callback when a tool is called
+     */
+    onToolCall?: (handler: ToolCallHandler) => void;
+    /**
+     * Callback when streaming finishes
+     */
+    onFinish?: (message: Message$1) => void;
+    /**
+     * Callback when an error occurs
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Callback when session starts
+     */
+    onSessionStart?: (sessionId: string) => void;
+    /**
+     * Maximum number of reconnection attempts
+     */
+    maxReconnectAttempts?: number;
+    /**
+     * Base delay for exponential backoff in ms
+     */
+    reconnectBaseDelay?: number;
+    /**
+     * Middleware for composable request/event transforms
+     */
+    middleware?: ChatMiddleware[];
+}
+/**
+ * Return type for useChat
+ */
+interface UseChatReturn {
+    /** All messages in the conversation */
+    messages: Message$1[];
+    /** Whether a message is currently being streamed */
+    isLoading: boolean;
+    /** Current error (if any) */
+    error: Error | undefined;
+    /** Current session ID */
+    sessionId: string | null;
+    /** Append a message to the conversation and stream response */
+    append: (message: CreateMessage | string, options?: ChatRequestOptions) => Promise<string | null | undefined>;
+    /** Stop the current streaming request */
+    stop: () => void;
+    /** Set messages (replace all) */
+    setMessages: (messages: Message$1[]) => void;
+    /** Reload the last assistant message */
+    reload: () => Promise<string | null | undefined>;
+    /** The current input value (for controlled input) */
+    input: string;
+    /** Set the input value */
+    setInput: (input: string) => void;
+    /** Handle input change (for form inputs) */
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Handle form submission */
+    handleSubmit: (e?: React.FormEvent<HTMLFormElement>, options?: ChatRequestOptions) => void;
+    /** Whether currently reconnecting after stream interruption */
+    isReconnecting: boolean;
+    /**
+     * Legacy: Get entries in NormalizedEntry format
+     * For backwards compatibility during migration
+     */
+    entries: NormalizedEntry[];
+}
+declare function useChat(options: UseChatOptions): UseChatReturn;
+
 /**
  * Configuration for long text auto-conversion
  */
@@ -1328,4 +1527,4 @@ interface UseLongTextConversionReturn {
  */
 declare function useLongTextConversion({ threshold, filenameTemplate, onConversion, }?: LongTextConversionOptions): UseLongTextConversionReturn;
 
-export { ActionIcon, type ActionIconProps, ActionType, type StreamEvent as AgentStreamEvent, AgentToolCard, type AgentToolCardProps, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolRow, type CompactToolRowProps, CompactToolStatusLine, type CompactToolStatusLineProps, type ConversionInfo, type CreateStreamFn, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, FileBadge, type FileBadgeProps, JsonDisplay, type JsonDisplayProps, LazyMarkdown, type LazyMarkdownProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, type LongTextConversionOptions, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, RichContent, RichContentRenderer, type RichContentRendererProps, RichContentRenderers, StatusIndicator, type StatusIndicatorProps, StepAccordion, type StepAccordionProps, type StepStatus, type StreamGenerator, StreamingText, type StreamingTextProps, type TextAttachment, 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 UseAgentChatOptions, type UseAgentChatReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseLongTextConversionReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, WidgetAction, WidgetRenderFunction, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useLongTextConversion, useMessageQueue, useStopExecution, useTheme };
+export { Message$1 as AIMessage, ActionIcon, type ActionIconProps, ActionType, type StreamEvent as AgentStreamEvent, Attachment, type AttachmentFile, AttachmentInfo, type AttachmentInfoProps, AttachmentPreview, type AttachmentPreviewProps, type AttachmentProps, AttachmentRemove, type AttachmentRemoveProps, Attachments, type AttachmentsProps, type BeforeSendContext, type BeforeSendResult, type FileAttachment as ChatFileAttachment, type ChatMiddleware, type ChatRequestOptions, CodeBlock, type CodeBlockProps, Conversation, ConversationContent, type ConversationContentProps, ConversationEmptyState, type ConversationEmptyStateProps, type ConversationProps, ConversationScrollButton, type ConversationScrollButtonProps, type ConversionInfo, type CreateMessage, type CreateStreamFn, type CreateStreamOptions, EnvVarsPanel, type EnvVarsPanelProps, FileAttachment$2 as FileAttachment, FileBadgeCompact, type FileBadgeProps, type FileAttachment as HookFileAttachment, JsonDisplay, type JsonDisplayProps, LazyMarkdown, type LazyMarkdownProps, LoadingDots, type LoadingDotsProps, LoadingSpinner, type LoadingSpinnerProps, LogEntry, LogsPanel, type LogsPanelProps, type LongTextConversionOptions, MarkdownComponents, Message, MessageAction, type MessageActionProps, MessageActions, type MessageActionsProps, MessageAvatar, type MessageAvatarProps, MessageContent, type MessageContentProps, type MessageProps, MessageResponse, type MessageResponseProps, MessageShimmer, type MessageShimmerProps, MessageTimestamp, type MessageTimestampProps, type MiddlewareRequest, type MiddlewareRequestResult, NormalizedEntry, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, Shimmer, ShimmerBlock, type ShimmerBlockProps, ShimmerLine, type ShimmerLineProps, type ShimmerProps, ShimmerText, type ShimmerTextProps, StatusIndicator, type StatusIndicatorProps, type StreamGenerator, Task, TaskContent, type TaskContentProps, TaskItem, type TaskItemProps, TaskList, type TaskListProps, type TaskProps, TaskTrigger, type TaskTriggerProps, type TextAttachment, ThinkingIndicator, type ThinkingIndicatorProps, TodoItem, TodoStatus, Tool, type ToolCallHandler, ToolHeader, type ToolHeaderProps, ToolInput, type ToolInputProps, ToolInvocation, ToolList, type ToolListProps, ToolOutput, type ToolOutputProps, type ToolProps, ToolStatus, type UseAgentChatOptions, type UseAgentChatReturn, type UseChatOptions, type UseChatReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseLongTextConversionReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, applyEventMiddleware, applyRequestMiddleware, callMiddlewareComplete, callMiddlewareError, formatFileSize as formatFileSizeHook, useAgentChat, useAttachment, useChat, useConversation, useFileUpload, useLongTextConversion, useMessage, useMessageQueue, useReasoning, useStopExecution, useTask, useTool };