@moldable-ai/ui 0.2.2 → 0.2.3

package/dist/components/chat/chat-message.d.ts

@@ -11,6 +11,10 @@ export type ChatMessagePart = {
     state: string;
     args?: unknown;
     output?: unknown;
+    approval?: {
+        id: string;
+        approved?: boolean;
+    };
 };
 export type ChatMessage = {
     id: string;

package/dist/components/chat/chat-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,eAAe,GACvB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACnC;IACE,IAAI,EAAE,iBAAiB,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAEL,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;CAC1B,CAAA;AAED,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,WAAW,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAcD,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,MAAc,EACd,WAAmB,GACpB,EAAE,YAAY,2CA2Xd;AAED,eAAO,MAAM,OAAO,yDAAoB,CAAA;AAExC,wBAAgB,eAAe,4CAiB9B"}
+{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message.tsx"],"names":[],"mappings":"AAgCA,MAAM,MAAM,eAAe,GACvB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACnC;IACE,IAAI,EAAE,iBAAiB,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,QAAQ,CAAC,EAAE;QACT,EAAE,EAAE,MAAM,CAAA;QACV,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,CAAA;CACF,CAAA;AAEL,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;CAC1B,CAAA;AAED,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,WAAW,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAcD,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,MAAc,EACd,WAAmB,GACpB,EAAE,YAAY,2CA8bd;AAED,eAAO,MAAM,OAAO,yDAAoB,CAAA;AAExC,wBAAgB,eAAe,4CAiB9B"}

package/dist/components/chat/chat-message.js

@@ -6,10 +6,19 @@ import { cn } from '../../lib/utils';
 import { Markdown } from '../markdown';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../ui/collapsible';
 import { ThinkingTimeline, ThinkingTimelineMarker, } from './thinking-timeline';
+import { ToolApproval, ToolApprovalHeader, ToolApprovalRejected, } from './tool-approval';
+import { useToolApprovalResponse } from './tool-approval-context';
 import { getToolHandler } from './tool-handlers';
+import { useToolProgress } from './tool-progress-context';
 import { AnimatePresence, motion } from 'framer-motion';
 const DEFAULT_ACTIONS_LABEL = 'Thinking';
+// OpenRouter sends these for encrypted reasoning msgs
+const stripRedacted = (text) => text.replace(/\[REDACTED\]/g, '').trim();
 function PureMessage({ message, isLast = false, isStreaming = false, }) {
+    // Get tool progress for streaming stdout/stderr
+    const toolProgress = useToolProgress();
+    // Get approval response handler
+    const onApprovalResponse = useToolApprovalResponse();
     // Track open state for each thinking group independently
     const [thinkingGroupStates, setThinkingGroupStates] = useState(new Map());
     // Process parts chronologically, grouping only reasoning into thinking groups
@@ -69,13 +78,51 @@ function PureMessage({ message, isLast = false, isStreaming = false, }) {
                 if (toolHandler.inline) {
                     // Close any open thinking group first
                     closeThinkingGroup();
+                    // Check for approval states
+                    const isApprovalRequested = part.state === 'approval-requested';
+                    const isApprovalResponded = part.state === 'approval-responded' ||
+                        part.state === 'output-denied';
+                    const wasRejected = part.approval?.approved === false;
+                    const wasApproved = part.approval?.approved === true;
                     // Render inline tool
+                    // Also treat approval-responded (when approved) as loading until output arrives
                     const isToolLoading = part.state === 'partial-call' ||
                         part.state === 'call' ||
-                        part.state === 'pending';
-                    const toolContent = isToolLoading
-                        ? toolHandler.renderLoading?.(part.args) || (_jsx("div", { className: "text-muted-foreground text-xs", children: toolHandler.loadingLabel }))
-                        : toolHandler.renderOutput(part.output, part.toolCallId || key);
+                        part.state === 'pending' ||
+                        (isApprovalResponded && wasApproved && part.output === undefined);
+                    // Check for streaming progress (stdout/stderr from command execution)
+                    const progress = part.toolCallId
+                        ? toolProgress[part.toolCallId]
+                        : undefined;
+                    const hasStreamingOutput = progress && (progress.stdout || progress.stderr);
+                    let toolContent;
+                    // Handle approval request state
+                    if (isApprovalRequested &&
+                        toolHandler.renderApproval &&
+                        part.approval?.id &&
+                        onApprovalResponse) {
+                        toolContent = toolHandler.renderApproval({
+                            approvalId: part.approval.id,
+                            toolCallId: part.toolCallId || key,
+                            args: part.args,
+                        }, onApprovalResponse);
+                    }
+                    else if (isApprovalResponded && wasRejected) {
+                        // Show rejection message
+                        toolContent = (_jsx(ToolApproval, { state: "output-denied", approved: false, children: _jsx(ToolApprovalHeader, { children: _jsx(ToolApprovalRejected, { children: "Command execution was rejected" }) }) }));
+                    }
+                    else if (hasStreamingOutput && toolHandler.renderStreaming) {
+                        // Show streaming output (live stdout/stderr)
+                        toolContent = toolHandler.renderStreaming(part.args, progress);
+                    }
+                    else if (isToolLoading) {
+                        // Show loading state (arguments streaming or waiting)
+                        toolContent = toolHandler.renderLoading?.(part.args) || (_jsx("div", { className: "text-muted-foreground text-xs", children: toolHandler.loadingLabel }));
+                    }
+                    else {
+                        // Show final output
+                        toolContent = toolHandler.renderOutput(part.output, part.toolCallId || key);
+                    }
                     items.push({
                         type: 'inline-tool',
                         id: key,
@@ -110,15 +157,15 @@ function PureMessage({ message, isLast = false, isStreaming = false, }) {
             }
             if (part.type === 'reasoning') {
                 const full = part.text ?? '';
-                const trimmedFull = full.trim();
-                if (trimmedFull.length === 0) {
+                const cleaned = stripRedacted(full);
+                if (cleaned.length === 0) {
                     continue;
                 }
                 const group = ensureThinkingGroup();
                 // Extract title from markdown **title** or use first line
-                const markdownTitleMatch = full.match(/\*\*([^*]+)\*\*/);
+                const markdownTitleMatch = cleaned.match(/\*\*([^*]+)\*\*/);
                 const candidateTitle = markdownTitleMatch?.[1];
-                const trimmed = trimmedFull;
+                const trimmed = cleaned;
                 const firstLine = trimmed.split(/\n+/)[0];
                 const extractedTitle = candidateTitle || firstLine?.slice(0, 50) || DEFAULT_ACTIONS_LABEL;
                 group.title = extractedTitle;
@@ -148,7 +195,13 @@ function PureMessage({ message, isLast = false, isStreaming = false, }) {
             contentItems: items,
             hasFinalAssistantText: state.hasText,
         };
-    }, [message.id, message.parts, message.content]);
+    }, [
+        message.id,
+        message.parts,
+        message.content,
+        toolProgress,
+        onApprovalResponse,
+    ]);
     // Determine if last thinking group is streaming
     const lastThinkingGroup = contentItems
         .filter((item) => item.type === 'thinking')
@@ -236,8 +289,9 @@ function PureMessage({ message, isLast = false, isStreaming = false, }) {
                             return (_jsx("div", { className: "w-full min-w-0", children: item.content }, item.id));
                         }
                         if (item.type === 'text' && item.textPart) {
-                            return (_jsx("div", { className: cn('flex flex-col gap-4', {
+                            return (_jsx("div", { className: cn('flex min-w-0 flex-col gap-4', {
                                     'bg-secondary text-secondary-foreground w-fit rounded-2xl px-4 py-2.5': message.role === 'user',
+                                    'w-full': message.role === 'assistant',
                                 }), children: _jsx(Markdown, { markdown: item.textPart.text, proseSize: "sm", className: cn('[&_.prose]:leading-relaxed [&_.prose]:text-current', '[&_.prose_pre]:bg-background/80 [&_.prose_code]:text-current', '[&_.prose_p:last-child]:mb-0 [&_.prose_p]:mb-2', message.role === 'user' &&
                                         '[&_.prose_pre]:bg-secondary-foreground/20') }) }, item.id));
                         }

package/dist/components/chat/chat-panel.d.ts

@@ -3,7 +3,18 @@ import type { ChatMessage } from './chat-message';
 import { type ConversationMeta } from './conversation-history';
 import { type ModelOption } from './model-selector';
 import { type ReasoningEffortOption } from './reasoning-effort-selector';
+import { type ApprovalResponseHandler } from './tool-approval-context';
 type ChatStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+/**
+ * Progress data for a running tool (command execution with streaming stdout/stderr)
+ */
+export interface ToolProgressData {
+    toolCallId: string;
+    command: string;
+    stdout: string;
+    stderr: string;
+    status: 'running' | 'complete';
+}
 export interface ChatPanelProps {
     /** Chat messages */
     messages: ChatMessage[];
@@ -47,6 +58,10 @@ export interface ChatPanelProps {
     isExpanded: boolean;
     /** Toggle expanded state */
     onExpandedChange: (expanded: boolean) => void;
+    /** Whether the panel is minimized (hidden below fold with only flap visible) */
+    isMinimized?: boolean;
+    /** Toggle minimized state */
+    onMinimizedChange?: (minimized: boolean) => void;
     /** Custom class name */
     className?: string;
     /** Error from chat request */
@@ -55,10 +70,14 @@ export interface ChatPanelProps {
     missingApiKey?: boolean;
     /** Callback to trigger API key setup */
     onAddApiKey?: () => void;
+    /** Progress data for running tools (streaming stdout/stderr) */
+    toolProgress?: Record<string, ToolProgressData>;
+    /** Callback for tool approval responses */
+    onApprovalResponse?: ApprovalResponseHandler;
 }
 /**
  * Floating chat panel with model selector
  */
-export declare function ChatPanel({ messages, status, input, onInputChange, onSubmit, onStop, onNewChat, models, selectedModel, onModelChange, reasoningEffortOptions, selectedReasoningEffort, onReasoningEffortChange, conversations, currentConversationId, onSelectConversation, onDeleteConversation, placeholder, welcomeMessage, isExpanded, onExpandedChange, className, error, missingApiKey, onAddApiKey, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPanel({ messages, status, input, onInputChange, onSubmit, onStop, onNewChat, models, selectedModel, onModelChange, reasoningEffortOptions, selectedReasoningEffort, onReasoningEffortChange, conversations, currentConversationId, onSelectConversation, onDeleteConversation, placeholder, welcomeMessage, isExpanded, onExpandedChange, isMinimized, onMinimizedChange, className, error, missingApiKey, onAddApiKey, toolProgress, onApprovalResponse, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=chat-panel.d.ts.map

package/dist/components/chat/chat-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-panel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-panel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"chat-panel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-panel.tsx"],"names":[],"mappings":"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"}

package/dist/components/chat/chat-panel.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AlertCircle, Minimize2, Plus } from 'lucide-react';
+import { AlertCircle, ChevronDown, MessageCircle, Plus } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
@@ -11,11 +11,13 @@ import { Messages } from './chat-messages';
 import { ConversationHistory, } from './conversation-history';
 import { ModelSelector } from './model-selector';
 import { ReasoningEffortSelector, } from './reasoning-effort-selector';
+import { ToolApprovalProvider, } from './tool-approval-context';
+import { ToolProgressProvider } from './tool-progress-context';
 import { AnimatePresence, motion } from 'framer-motion';
 /**
  * Floating chat panel with model selector
  */
-export function ChatPanel({ messages, status, input, onInputChange, onSubmit, onStop, onNewChat, models, selectedModel, onModelChange, reasoningEffortOptions, selectedReasoningEffort, onReasoningEffortChange, conversations, currentConversationId, onSelectConversation, onDeleteConversation, placeholder = 'Ask anything...', welcomeMessage, isExpanded, onExpandedChange, className, error, missingApiKey, onAddApiKey, }) {
+export function ChatPanel({ messages, status, input, onInputChange, onSubmit, onStop, onNewChat, models, selectedModel, onModelChange, reasoningEffortOptions, selectedReasoningEffort, onReasoningEffortChange, conversations, currentConversationId, onSelectConversation, onDeleteConversation, placeholder = 'Ask anything...', welcomeMessage, isExpanded, onExpandedChange, isMinimized = false, onMinimizedChange, className, error, missingApiKey, onAddApiKey, toolProgress = {}, onApprovalResponse, }) {
     const inputRef = useRef(null);
     const messagesEndRef = useRef(null);
     const scrollAreaRef = useRef(null);
@@ -87,9 +89,22 @@ export function ChatPanel({ messages, status, input, onInputChange, onSubmit, on
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, [isResponding, isExpanded, handleNewChat]);
-    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isExpanded && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: "fixed inset-0 z-40 bg-black/20", onClick: () => onExpandedChange(false) })) }), _jsx(motion.div, { initial: false, animate: {
+    // Handle clicking the minimized flap
+    const handleFlapClick = useCallback(() => {
+        onMinimizedChange?.(false);
+    }, [onMinimizedChange]);
+    // Handle minimize button - now goes to minimized state
+    const handleMinimize = useCallback(() => {
+        if (isExpanded) {
+            onExpandedChange(false);
+        }
+        onMinimizedChange?.(true);
+    }, [isExpanded, onExpandedChange, onMinimizedChange]);
+    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isExpanded && !isMinimized && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: "fixed inset-0 z-40 bg-black/20", onClick: () => onExpandedChange(false) })) }), _jsx(AnimatePresence, { children: isMinimized && (_jsx(motion.div, { initial: { y: 20, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: 20, opacity: 0 }, transition: { type: 'tween', duration: 0.2, ease: 'easeOut' }, className: "fixed bottom-0 left-[calc(50%+var(--sidebar-width,0px)/2)] z-50 -translate-x-1/2", children: _jsxs("button", { onClick: handleFlapClick, className: cn('bg-background/95 hover:bg-background group flex cursor-pointer items-center gap-2 rounded-t-xl border border-b-0 px-4 py-2 shadow-lg backdrop-blur transition-colors', 'text-muted-foreground hover:text-foreground'), children: [_jsx(MessageCircle, { className: "size-4" }), _jsx("span", { className: "text-sm font-medium", children: "Chat" }), _jsx("span", { className: "bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary rounded px-1.5 py-0.5 text-xs transition-colors", children: "\u2318M" })] }) })) }), _jsx(motion.div, { initial: false, animate: {
                     width: isExpanded ? 'min(90vw, 640px)' : '400px',
-                }, transition: { type: 'tween', duration: 0.2, ease: 'easeOut' }, className: cn('pointer-events-none fixed bottom-6 left-[calc(50%+var(--sidebar-width,0px)/2)] z-50 flex -translate-x-1/2 justify-center', className), children: _jsxs("div", { className: cn('bg-background pointer-events-auto relative w-full border shadow-lg', 'supports-[backdrop-filter]:bg-background/95 backdrop-blur', 'rounded-4xl', isExpanded ? 'overflow-hidden' : 'overflow-visible'), children: [!isExpanded && (_jsx(motion.div, { className: "rounded-4xl pointer-events-none absolute inset-0 z-0", animate: {
+                    y: isMinimized ? 'calc(100% + 24px)' : 0,
+                    opacity: isMinimized ? 0 : 1,
+                }, transition: { type: 'tween', duration: 0.25, ease: 'easeOut' }, className: cn('pointer-events-none fixed bottom-6 left-[calc(50%+var(--sidebar-width,0px)/2)] z-50 flex -translate-x-1/2 justify-center', isMinimized && 'pointer-events-none', className), children: _jsxs("div", { className: cn('bg-background pointer-events-auto relative w-full border shadow-lg', 'supports-[backdrop-filter]:bg-background/95 backdrop-blur', 'rounded-4xl', isExpanded ? 'overflow-hidden' : 'overflow-visible'), children: [!isExpanded && (_jsx(motion.div, { className: "rounded-4xl pointer-events-none absolute inset-0 z-0", animate: {
                                 boxShadow: [
                                     '0 0 0px 0px color-mix(in oklch, var(--primary) 0%, #ff8800 00%)',
                                     '0 0 20px 0px color-mix(in oklch, var(--primary) 20%, #ff8800 30%)',
@@ -107,7 +122,7 @@ export function ChatPanel({ messages, status, input, onInputChange, onSubmit, on
                                                     selectedReasoningEffort &&
                                                     onReasoningEffortChange && (_jsx(ReasoningEffortSelector, { options: reasoningEffortOptions, selectedEffort: selectedReasoningEffort, onEffortChange: onReasoningEffortChange, disabled: isResponding }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [conversations &&
                                                     conversations.length > 0 &&
-                                                    onSelectConversation && (_jsx(ConversationHistory, { conversations: conversations, currentConversationId: currentConversationId, onSelect: onSelectConversation, onDelete: onDeleteConversation, disabled: isResponding })), _jsxs(TooltipProvider, { children: [messages.length > 0 && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleNewChat, disabled: isResponding, className: "text-muted-foreground hover:text-foreground", children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "New chat" }) })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => onExpandedChange(false), className: "text-muted-foreground hover:text-foreground", children: _jsx(Minimize2, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "Minimize" }) })] })] })] })] }), _jsx(ScrollArea, { ref: scrollAreaRef, className: "min-w-0 flex-1 px-2", children: _jsxs("div", { className: "min-w-0 space-y-4 py-4", children: [messages.length === 0 && welcomeMessage && (_jsx("div", { className: "bg-muted/50 text-muted-foreground mx-2 rounded-2xl p-4 text-sm", children: welcomeMessage })), _jsx(Messages, { messages: messages, status: status }), (missingApiKey ||
+                                                    onSelectConversation && (_jsx(ConversationHistory, { conversations: conversations, currentConversationId: currentConversationId, onSelect: onSelectConversation, onDelete: onDeleteConversation, disabled: isResponding })), _jsxs(TooltipProvider, { children: [messages.length > 0 && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleNewChat, disabled: isResponding, className: "text-muted-foreground hover:text-foreground", children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "New chat" }) })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleMinimize, className: "text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "Minimize" }) })] })] })] })] }), _jsx(ScrollArea, { ref: scrollAreaRef, className: "min-w-0 flex-1 px-2", children: _jsxs("div", { className: "min-w-0 max-w-full space-y-4 overflow-hidden py-4", children: [messages.length === 0 && welcomeMessage && (_jsx("div", { className: "bg-muted/50 text-muted-foreground mx-2 rounded-2xl p-4 text-sm", children: welcomeMessage })), _jsx(ToolProgressProvider, { value: toolProgress, children: _jsx(ToolApprovalProvider, { onApprovalResponse: onApprovalResponse ?? null, children: _jsx(Messages, { messages: messages, status: status }) }) }), (missingApiKey ||
                                                 (error &&
                                                     error.message?.includes('API_KEY not configured'))) && (_jsxs("div", { className: "border-primary/30 bg-primary/5 mx-2 flex flex-col items-center gap-3 rounded-lg border p-4 text-center", children: [_jsx("div", { className: "bg-primary/10 flex size-10 items-center justify-center rounded-full", children: _jsx(AlertCircle, { className: "text-primary size-5" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-foreground font-medium", children: "API key required" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Add an API key to start chatting with AI" })] }), onAddApiKey && (_jsx(Button, { onClick: onAddApiKey, size: "sm", className: "cursor-pointer", children: "Add API key" }))] })), error &&
                                                 status === 'error' &&

package/dist/components/chat/index.d.ts

@@ -4,7 +4,10 @@ export { Messages } from './chat-messages';
 export { ModelSelector, type ModelOption } from './model-selector';
 export { ReasoningEffortSelector, type ReasoningEffortOption, } from './reasoning-effort-selector';
 export { ConversationHistory, type ConversationMeta, } from './conversation-history';
-export { ChatPanel, type ChatPanelProps } from './chat-panel';
+export { ChatPanel, type ChatPanelProps, type ToolProgressData, } from './chat-panel';
 export { ThinkingTimeline, ThinkingTimelineMarker, type ThinkingTimelineItem, type ThinkingTimelineProps, } from './thinking-timeline';
 export { getToolHandler, DEFAULT_TOOL_HANDLERS, type ToolHandler, } from './tool-handlers';
+export { ToolProgressProvider, useToolProgress, useToolCallProgress, } from './tool-progress-context';
+export { ToolApprovalProvider, useToolApprovalResponse, type ApprovalResponseHandler, } from './tool-approval-context';
+export { ToolApproval, ToolApprovalHeader, ToolApprovalRequest, ToolApprovalAccepted, ToolApprovalRejected, ToolApprovalActions, ToolApprovalAction, type ToolApprovalState, } from './tool-approval';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/chat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EACL,OAAO,EACP,eAAe,EACf,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EACL,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,mBAAmB,EACnB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,KAAK,WAAW,GACjB,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EACL,OAAO,EACP,eAAe,EACf,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EACL,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,mBAAmB,EACnB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,gBAAgB,GACtB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,KAAK,WAAW,GACjB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAA"}

package/dist/components/chat/index.js

@@ -4,6 +4,9 @@ export { Messages } from './chat-messages';
 export { ModelSelector } from './model-selector';
 export { ReasoningEffortSelector, } from './reasoning-effort-selector';
 export { ConversationHistory, } from './conversation-history';
-export { ChatPanel } from './chat-panel';
+export { ChatPanel, } from './chat-panel';
 export { ThinkingTimeline, ThinkingTimelineMarker, } from './thinking-timeline';
 export { getToolHandler, DEFAULT_TOOL_HANDLERS, } from './tool-handlers';
+export { ToolProgressProvider, useToolProgress, useToolCallProgress, } from './tool-progress-context';
+export { ToolApprovalProvider, useToolApprovalResponse, } from './tool-approval-context';
+export { ToolApproval, ToolApprovalHeader, ToolApprovalRequest, ToolApprovalAccepted, ToolApprovalRejected, ToolApprovalActions, ToolApprovalAction, } from './tool-approval';

package/dist/components/chat/tool-approval-context.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+/**
+ * Callback type for responding to tool approval requests
+ */
+export type ApprovalResponseHandler = (params: {
+    approvalId: string;
+    approved: boolean;
+    reason?: string;
+}) => void;
+/**
+ * Provider for tool approval handling
+ */
+export declare function ToolApprovalProvider({ onApprovalResponse, children, }: {
+    onApprovalResponse: ApprovalResponseHandler | null;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to get the approval response handler
+ */
+export declare function useToolApprovalResponse(): ApprovalResponseHandler | null;
+//# sourceMappingURL=tool-approval-context.d.ts.map

package/dist/components/chat/tool-approval-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-approval-context.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-approval-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA6B,MAAM,OAAO,CAAA;AAEjE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,CAAC,MAAM,EAAE;IAC7C,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,KAAK,IAAI,CAAA;AAOV;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,kBAAkB,EAClB,QAAQ,GACT,EAAE;IACD,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAA;IAClD,QAAQ,EAAE,SAAS,CAAA;CACpB,2CAMA;AAED;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,uBAAuB,GAAG,IAAI,CAExE"}

package/dist/components/chat/tool-approval-context.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+/**
+ * Context for tool approval handling
+ */
+const ToolApprovalContext = createContext(null);
+/**
+ * Provider for tool approval handling
+ */
+export function ToolApprovalProvider({ onApprovalResponse, children, }) {
+    return (_jsx(ToolApprovalContext.Provider, { value: onApprovalResponse, children: children }));
+}
+/**
+ * Hook to get the approval response handler
+ */
+export function useToolApprovalResponse() {
+    return useContext(ToolApprovalContext);
+}

package/dist/components/chat/tool-approval.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { Button } from '../ui/button';
+/**
+ * State of the tool approval
+ */
+export type ToolApprovalState = 'approval-requested' | 'approval-responded' | 'output-available' | 'output-denied';
+/**
+ * Root component for tool approval UI
+ */
+interface ToolApprovalProps {
+    children: React.ReactNode;
+    /** Current state of the approval */
+    state: ToolApprovalState;
+    /** Whether the user approved (for responded/output states) */
+    approved?: boolean;
+    className?: string;
+}
+export declare function ToolApproval({ children, state, approved, className, }: ToolApprovalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header section with icon and title
+ */
+interface ToolApprovalHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function ToolApprovalHeader({ children, className, }: ToolApprovalHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Content shown only when approval is being requested
+ */
+interface ToolApprovalRequestProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function ToolApprovalRequest({ children, className, }: ToolApprovalRequestProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Expandable help section explaining why approval is needed
+ */
+interface ToolApprovalHelpProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function ToolApprovalHelp({ children, className, }: ToolApprovalHelpProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Pre-built help content for sandboxing explanation
+ */
+export declare function ToolApprovalSandboxHelp({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Pre-built help content for dangerous command explanation
+ */
+export declare function ToolApprovalDangerousHelp({ className, }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Content shown when approval was granted
+ */
+interface ToolApprovalAcceptedProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function ToolApprovalAccepted({ children, className, }: ToolApprovalAcceptedProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Content shown when approval was rejected
+ */
+interface ToolApprovalRejectedProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function ToolApprovalRejected({ children, className, }: ToolApprovalRejectedProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Actions container (approve/reject buttons)
+ */
+interface ToolApprovalActionsProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function ToolApprovalActions({ children, className, }: ToolApprovalActionsProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Individual action button
+ */
+type ToolApprovalActionProps = React.ComponentProps<typeof Button>;
+export declare function ToolApprovalAction({ className, size, ...props }: ToolApprovalActionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tool-approval.d.ts.map

package/dist/components/chat/tool-approval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-approval.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-approval.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,oBAAoB,GACpB,oBAAoB,GACpB,kBAAkB,GAClB,eAAe,CAAA;AAenB;;GAEG;AACH,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,oCAAoC;IACpC,KAAK,EAAE,iBAAiB,CAAA;IACxB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CAanB;AAED;;GAEG;AACH,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,GACV,EAAE,uBAAuB,2CAqBzB;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,kDAQ1B;AAED;;GAEG;AACH,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,kDAkCvB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAc5E;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,2CAaA;AAED;;GAEG;AACH,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,GACV,EAAE,yBAAyB,kDAqB3B;AAED;;GAEG;AACH,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,GACV,EAAE,yBAAyB,kDAuB3B;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,kDAkB1B;AAED;;GAEG;AACH,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAA;AAElE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,IAAW,EACX,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAIzB"}

package/dist/components/chat/tool-approval.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, HelpCircle, ShieldAlert, X } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+const ToolApprovalContext = React.createContext({
+    state: 'approval-requested',
+});
+function useToolApprovalContext() {
+    return React.useContext(ToolApprovalContext);
+}
+export function ToolApproval({ children, state, approved, className, }) {
+    return (_jsx(ToolApprovalContext.Provider, { value: { state, approved }, children: _jsx("div", { className: cn('bg-card border-border my-2 overflow-hidden rounded-lg border', className), children: children }) }));
+}
+export function ToolApprovalHeader({ children, className, }) {
+    const { state, approved } = useToolApprovalContext();
+    // Show different icons based on state
+    const icon = state === 'approval-requested' ? (_jsx(ShieldAlert, { className: "size-3.5 shrink-0 text-amber-500" })) : approved ? (_jsx(Check, { className: "text-success size-3.5 shrink-0" })) : (_jsx(X, { className: "text-destructive size-3.5 shrink-0" }));
+    return (_jsxs("div", { className: cn('bg-muted/50 flex items-start gap-2 px-3 py-2', className), children: [_jsx("div", { className: "mt-0.5", children: icon }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+}
+export function ToolApprovalRequest({ children, className, }) {
+    const { state } = useToolApprovalContext();
+    if (state !== 'approval-requested') {
+        return null;
+    }
+    return _jsx("div", { className: cn('text-xs', className), children: children });
+}
+export function ToolApprovalHelp({ children, className, }) {
+    const { state } = useToolApprovalContext();
+    const [isOpen, setIsOpen] = React.useState(false);
+    // Only show when approval is being requested
+    if (state !== 'approval-requested') {
+        return null;
+    }
+    return (_jsxs("div", { className: cn('', className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1 text-[10px] transition-colors", children: [_jsx(HelpCircle, { className: "size-2.5" }), _jsx("span", { children: "What does this mean?" }), _jsx(ChevronDown, { className: cn('size-2.5 transition-transform', isOpen && 'rotate-180') })] }), isOpen && (_jsx("div", { className: "bg-muted/30 mt-1.5 rounded-md px-2 py-1.5", children: _jsx("p", { className: "text-muted-foreground text-[10px] leading-relaxed", children: children }) }))] }));
+}
+/**
+ * Pre-built help content for sandboxing explanation
+ */
+export function ToolApprovalSandboxHelp({ className }) {
+    return (_jsxs(ToolApprovalHelp, { className: className, children: [_jsx("strong", { className: "text-foreground", children: "Sandboxing" }), " restricts commands from accessing the network and writing to sensitive locations. Package managers like", ' ', _jsx("code", { className: "bg-muted rounded px-1 py-0.5", children: "pnpm install" }), " need network access to download packages, so they run unsandboxed.", _jsxs("strong", { className: "text-foreground", children: [' ', "Only approve commands you trust."] })] }));
+}
+/**
+ * Pre-built help content for dangerous command explanation
+ */
+export function ToolApprovalDangerousHelp({ className, }) {
+    return (_jsxs(ToolApprovalHelp, { className: className, children: [_jsx("strong", { className: "text-foreground", children: "Dangerous commands" }), " can make irreversible changes to your system, like deleting files recursively or modifying permissions. These commands are flagged based on common patterns (rm -rf, sudo, etc.) to give you a chance to review before execution.", _jsxs("strong", { className: "text-foreground", children: [' ', "Only approve if you understand what the command does."] })] }));
+}
+export function ToolApprovalAccepted({ children, className, }) {
+    const { state, approved } = useToolApprovalContext();
+    // Show for responded/output states where approved is true
+    const shouldShow = (state === 'approval-responded' || state === 'output-available') && approved;
+    if (!shouldShow) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('text-success flex items-center gap-1.5 text-xs', className), children: children ?? 'Approved' }));
+}
+export function ToolApprovalRejected({ children, className, }) {
+    const { state, approved } = useToolApprovalContext();
+    // Show for output-denied or responded with approved=false
+    const shouldShow = state === 'output-denied' ||
+        ((state === 'approval-responded' || state === 'output-available') &&
+            approved === false);
+    if (!shouldShow) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('text-destructive flex items-center gap-1.5 text-xs', className), children: children ?? 'Rejected' }));
+}
+export function ToolApprovalActions({ children, className, }) {
+    const { state } = useToolApprovalContext();
+    // Only show actions when approval is being requested
+    if (state !== 'approval-requested') {
+        return null;
+    }
+    return (_jsx("div", { className: cn('border-border flex items-center justify-end gap-2 border-t px-3 py-2', className), children: children }));
+}
+export function ToolApprovalAction({ className, size = 'sm', ...props }) {
+    return (_jsx(Button, { className: cn('h-7 text-xs', className), size: size, ...props }));
+}

package/dist/components/chat/tool-handlers.d.ts

@@ -1,5 +1,24 @@
 import { type ReactNode } from 'react';
 import { ThinkingTimelineMarker } from './thinking-timeline';
+import { type ApprovalResponseHandler } from './tool-approval-context';
+/**
+ * Progress data for streaming tool execution (e.g., command stdout/stderr)
+ */
+export interface ToolStreamingProgress {
+    toolCallId: string;
+    command?: string;
+    stdout: string;
+    stderr: string;
+    status: 'running' | 'complete';
+}
+/**
+ * Approval info passed to renderApproval
+ */
+export interface ToolApprovalInfo {
+    approvalId: string;
+    toolCallId: string;
+    args: unknown;
+}
 /**
  * Tool handler definition
  */
@@ -9,6 +28,8 @@ export type ToolHandler = {
     inline?: boolean;
     renderOutput: (output: unknown, toolCallId: string) => ReactNode;
     renderLoading?: (args?: unknown) => ReactNode;
+    renderStreaming?: (args: unknown, progress: ToolStreamingProgress) => ReactNode;
+    renderApproval?: (approval: ToolApprovalInfo, onRespond: ApprovalResponseHandler) => ReactNode;
 };
 /**
  * Default tool handlers for Moldable tools

package/dist/components/chat/tool-handlers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-handlers.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-handlers.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAE5D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IAExB,YAAY,EAAE,MAAM,CAAA;IAEpB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,SAAS,CAAA;IAGhE,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,SAAS,CAAA;CAC9C,CAAA;AA0MD;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAm+B7D,CAAA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAgC5D"}
+{"version":3,"file":"tool-handlers.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-handlers.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAU5D,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAEtE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,SAAS,GAAG,UAAU,CAAA;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,OAAO,CAAA;CACd;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IAExB,YAAY,EAAE,MAAM,CAAA;IAEpB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,SAAS,CAAA;IAGhE,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,SAAS,CAAA;IAG7C,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,qBAAqB,KAC5B,SAAS,CAAA;IAGd,cAAc,CAAC,EAAE,CACf,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,uBAAuB,KAC/B,SAAS,CAAA;CACf,CAAA;AAkOD;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAk1C7D,CAAA;AAoBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAmC5D"}

package/dist/components/chat/tool-handlers.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, Check, CheckCheck, Copy, Download, FileCode, FileText, FolderOpen, Globe, Plus, Search, Sparkles, Terminal, Trash2, X, } from 'lucide-react';
+import { BookOpen, Check, CheckCheck, Copy, Download, FileCode, FileText, FolderOpen, Globe, Package, Plus, Search, Sparkles, Terminal, Trash2, X, } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '../../lib/utils';
 import { ThinkingTimelineMarker } from './thinking-timeline';
+import { ToolApproval, ToolApprovalAction, ToolApprovalActions, ToolApprovalDangerousHelp, ToolApprovalHeader, ToolApprovalRequest, ToolApprovalSandboxHelp, } from './tool-approval';
 /**
  * Code block component for displaying command output or file contents
  */
@@ -30,22 +31,22 @@ function summarizeCommand(command) {
     const firstLine = command.split('\n')[0];
     // Truncate if too long
     if (firstLine.length > 60) {
-        return firstLine.slice(0, 57) + '...';
+        return firstLine.slice(0, 25) + '...';
     }
     return firstLine;
 }
 /**
  * Terminal output component
  */
-function TerminalOutput({ command, stdout, stderr, exitCode, error, }) {
+function TerminalOutput({ command, stdout, stderr, exitCode, error, sandboxed, }) {
     const success = !error && (exitCode === 0 || exitCode === undefined);
     const hasOutput = stdout || stderr || error;
-    return (_jsxs("div", { className: "border-terminal-border bg-terminal min-w-0 overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "border-terminal-border bg-terminal-header flex min-w-0 items-center gap-2 border-b px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0" }), _jsx("code", { className: "text-terminal-foreground min-w-0 flex-1 truncate font-mono text-xs", children: summarizeCommand(command) }), _jsx(CopyButton, { text: command }), success ? (_jsx(Check, { className: "text-success size-3.5 shrink-0" })) : (_jsx(X, { className: "text-terminal-error size-3.5 shrink-0" }))] }), _jsxs("div", { className: "max-h-[300px] overflow-auto p-3", children: [_jsxs("div", { className: "text-terminal-foreground mb-2 break-all font-mono text-xs", children: [_jsx("span", { className: "text-terminal-muted", children: "$" }), " ", command] }), hasOutput && (_jsxs("div", { className: "border-terminal-border/50 border-t pt-2", children: [stdout && (_jsx("pre", { className: "text-terminal-stdout whitespace-pre-wrap break-all font-mono text-xs", children: stdout })), stderr && (_jsx("pre", { className: "text-terminal-stderr whitespace-pre-wrap break-all font-mono text-xs", children: stderr })), error && (_jsx("pre", { className: "text-terminal-error whitespace-pre-wrap break-all font-mono text-xs", children: error }))] }))] })] }));
+    return (_jsxs("div", { className: "border-terminal-border bg-terminal min-w-0 max-w-full overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "border-terminal-border bg-terminal-header flex min-w-0 items-center gap-2 border-b px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0" }), _jsx("code", { className: "text-terminal-foreground min-w-0 flex-1 truncate font-mono text-xs", children: summarizeCommand(command) }), sandboxed === false && (_jsx("span", { className: "shrink-0 rounded bg-amber-500/20 px-1.5 py-0.5 text-[10px] font-medium text-amber-600", children: "unsandboxed" })), _jsx(CopyButton, { text: command }), success ? (_jsx(Check, { className: "text-success size-3.5 shrink-0" })) : (_jsx(X, { className: "text-terminal-error size-3.5 shrink-0" }))] }), _jsxs("div", { className: "max-h-[300px] overflow-auto p-3", children: [_jsxs("div", { className: "text-terminal-foreground mb-2 break-all font-mono text-xs", children: [_jsx("span", { className: "text-terminal-muted", children: "$" }), " ", command] }), hasOutput && (_jsxs("div", { className: "border-terminal-border/50 border-t pt-2", children: [stdout && (_jsx("pre", { className: "text-terminal-stdout whitespace-pre-wrap break-all font-mono text-xs", children: stdout })), stderr && (_jsx("pre", { className: "text-terminal-stderr whitespace-pre-wrap break-all font-mono text-xs", children: stderr })), error && (_jsx("pre", { className: "text-terminal-error whitespace-pre-wrap break-all font-mono text-xs", children: error }))] }))] })] }));
 }
 /**
  * File operation indicator (inline, minimal)
  */
-function FileOperation({ operation, path, success = true, children, }) {
+function FileOperation({ operation, path, status = 'success', children, }) {
     const icons = {
         read: FileText,
         write: FileText,
@@ -54,7 +55,15 @@ function FileOperation({ operation, path, success = true, children, }) {
         delete: Trash2,
         edit: FileCode,
     };
-    const labels = {
+    const loadingLabels = {
+        read: 'Reading',
+        write: 'Writing',
+        list: 'Listing',
+        check: 'Checking',
+        delete: 'Deleting',
+        edit: 'Editing',
+    };
+    const completedLabels = {
         read: 'Read',
         write: 'Wrote',
         list: 'Listed',
@@ -64,9 +73,10 @@ function FileOperation({ operation, path, success = true, children, }) {
     };
     const Icon = icons[operation];
     const fileName = getFileName(path);
-    return (_jsxs("div", { className: "my-1 min-w-0", children: [_jsxs("div", { className: cn('inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs', success
-                    ? 'bg-muted text-muted-foreground'
-                    : 'bg-destructive/10 text-destructive'), children: [_jsx(Icon, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: labels[operation] }), _jsx("code", { className: "bg-background/50 min-w-0 truncate rounded px-1 font-mono", title: path, children: fileName }), success ? (_jsx(Check, { className: "size-3 shrink-0 text-green-600" })) : (_jsx(X, { className: "size-3 shrink-0" }))] }), children] }));
+    const label = status === 'loading' ? loadingLabels[operation] : completedLabels[operation];
+    return (_jsxs("div", { className: "my-1 min-w-0", children: [_jsxs("div", { className: cn('inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs', status === 'error'
+                    ? 'bg-destructive/10 text-destructive'
+                    : 'bg-muted text-muted-foreground'), children: [_jsx(Icon, { className: cn('size-3.5 shrink-0', status === 'loading' && 'animate-pulse') }), _jsx("span", { className: "shrink-0 font-medium", children: label }), _jsx("code", { className: "bg-background/50 min-w-0 truncate rounded px-1 font-mono", title: path, children: fileName }), status === 'success' && (_jsx(Check, { className: "size-3 shrink-0 text-green-600" })), status === 'error' && _jsx(X, { className: "size-3 shrink-0" }), status === 'loading' && (_jsx("span", { className: "text-muted-foreground/60 shrink-0", children: "..." }))] }), children] }));
 }
 /**
  * Extract just the filename from a path
@@ -83,14 +93,17 @@ export const DEFAULT_TOOL_HANDLERS = {
         loadingLabel: 'Reading file...',
         marker: ThinkingTimelineMarker.File,
         inline: true,
-        renderLoading: () => (_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(FileText, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Reading file..." })] })),
+        renderLoading: (args) => {
+            const { path } = (args ?? {});
+            return (_jsx(FileOperation, { operation: "read", path: path || 'file', status: "loading" }));
+        },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
-            if (!result.success) {
-                return (_jsx(FileOperation, { operation: "read", path: result.path || 'file', success: false }, toolCallId));
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsx(FileOperation, { operation: "read", path: "file", status: "loading" }, toolCallId));
             }
-            // Show simple indicator for successful reads
-            return (_jsx(FileOperation, { operation: "read", path: result.path || 'file', success: true }, toolCallId));
+            return (_jsx(FileOperation, { operation: "read", path: result.path || 'file', status: result.success === false ? 'error' : 'success' }, toolCallId));
         },
     },
     writeFile: {
@@ -108,26 +121,33 @@ export const DEFAULT_TOOL_HANDLERS = {
                 return (_jsxs("div", { className: "my-1 min-w-0", children: [_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(FileText, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "shrink-0 font-medium", children: "Writing" }), _jsx("code", { className: "bg-background/50 min-w-0 truncate rounded px-1 font-mono", children: path ? getFileName(path) : 'file' }), _jsxs("span", { className: "text-muted-foreground/70 shrink-0", children: ["(", lineCount, " line", lineCount !== 1 ? 's' : '', ")"] })] }), _jsx("div", { className: "mt-2", children: _jsx(CodeBlock, { maxHeight: 200, children: preview }) })] }));
             }
             // Fallback when content hasn't started streaming yet
-            return (_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(FileText, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Writing ", path ? getFileName(path) : 'file', "..."] })] }));
+            return (_jsx(FileOperation, { operation: "write", path: path || 'file', status: "loading" }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
-            if (!result.success) {
-                return (_jsx(FileOperation, { operation: "write", path: result.path || 'file', success: false }, toolCallId));
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsx(FileOperation, { operation: "write", path: "file", status: "loading" }, toolCallId));
             }
-            // Show simple indicator for successful writes
-            return (_jsx(FileOperation, { operation: "write", path: result.path || 'file', success: true }, toolCallId));
+            return (_jsx(FileOperation, { operation: "write", path: result.path || 'file', status: result.success === false ? 'error' : 'success' }, toolCallId));
         },
     },
     listDirectory: {
         loadingLabel: 'Listing directory...',
         marker: ThinkingTimelineMarker.Folder,
         inline: true,
-        renderLoading: () => (_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(FolderOpen, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Listing directory..." })] })),
+        renderLoading: (args) => {
+            const { path } = (args ?? {});
+            return (_jsx(FileOperation, { operation: "list", path: path || 'directory', status: "loading" }));
+        },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsx(FileOperation, { operation: "list", path: "directory", status: "loading" }, toolCallId));
+            }
             if (result.success === false) {
-                return (_jsx(FileOperation, { operation: "list", path: result.path || 'directory', success: false }, toolCallId));
+                return (_jsx(FileOperation, { operation: "list", path: result.path || 'directory', status: "error" }, toolCallId));
             }
             // Format entries for display
             const entries = result.items
@@ -140,10 +160,17 @@ export const DEFAULT_TOOL_HANDLERS = {
         loadingLabel: 'Checking file...',
         marker: ThinkingTimelineMarker.File,
         inline: true,
-        renderLoading: () => (_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(FileText, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Checking file..." })] })),
+        renderLoading: (args) => {
+            const { path } = (args ?? {});
+            return (_jsx(FileOperation, { operation: "check", path: path || 'file', status: "loading" }));
+        },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
-            return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(FileText, { className: "size-3.5 shrink-0" }), _jsx("code", { className: "bg-background/50 min-w-0 truncate rounded px-1 font-mono", children: result.path || 'file' }), _jsx("span", { className: "shrink-0", children: result.exists ? 'exists' : 'not found' }), result.exists ? (_jsx(Check, { className: "size-3 shrink-0 text-green-600" })) : (_jsx(X, { className: "size-3 shrink-0 text-amber-500" }))] }, toolCallId));
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsx(FileOperation, { operation: "check", path: "file", status: "loading" }, toolCallId));
+            }
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(FileText, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Checked" }), _jsx("code", { className: "bg-background/50 min-w-0 truncate rounded px-1 font-mono", title: result.path, children: getFileName(result.path || 'file') }), _jsx("span", { className: "shrink-0", children: result.exists ? 'exists' : 'not found' }), result.exists ? (_jsx(Check, { className: "size-3 shrink-0 text-green-600" })) : (_jsx(X, { className: "size-3 shrink-0 text-amber-500" }))] }, toolCallId));
         },
     },
     executeBashCommand: {
@@ -154,14 +181,18 @@ export const DEFAULT_TOOL_HANDLERS = {
             const { command } = (args ?? {});
             // Show streaming command as it's being written
             if (command && command.trim()) {
-                return (_jsxs("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground min-w-0 flex-1 truncate font-mono text-xs", children: summarizeCommand(command) })] }), _jsx("div", { className: "max-h-[150px] overflow-auto p-3", children: _jsxs("div", { className: "text-terminal-foreground break-all font-mono text-xs", children: [_jsx("span", { className: "text-terminal-muted", children: "$" }), " ", command] }) })] }));
+                return (_jsxs("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 max-w-full overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground min-w-0 flex-1 truncate font-mono text-xs", children: summarizeCommand(command) }), _jsx("span", { className: "text-terminal-muted shrink-0 text-[10px]", children: "Running..." })] }), _jsx("div", { className: "max-h-[150px] overflow-auto p-3", children: _jsxs("div", { className: "text-terminal-foreground break-all font-mono text-xs", children: [_jsx("span", { className: "text-terminal-muted", children: "$" }), " ", command] }) })] }));
             }
             // Fallback when command hasn't started streaming
-            return (_jsx("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 overflow-hidden rounded-lg border", children: _jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground/60 min-w-0 flex-1 truncate font-mono text-xs italic", children: "Generating command..." })] }) }));
+            return (_jsx("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 max-w-full overflow-hidden rounded-lg border", children: _jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground/60 min-w-0 flex-1 truncate font-mono text-xs italic", children: "Generating command..." })] }) }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
-            return (_jsx("div", { className: "my-2 min-w-0", children: _jsx(TerminalOutput, { command: result.command || 'command', stdout: result.stdout, stderr: result.stderr, exitCode: result.exitCode, error: result.error }) }, toolCallId));
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsx("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 max-w-full overflow-hidden rounded-lg border", children: _jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground/60 min-w-0 flex-1 truncate font-mono text-xs italic", children: "Executing..." })] }) }, toolCallId));
+            }
+            return (_jsx("div", { className: "my-2 min-w-0 max-w-full", children: _jsx(TerminalOutput, { command: result.command || 'command', stdout: result.stdout, stderr: result.stderr, exitCode: result.exitCode, error: result.error }) }, toolCallId));
         },
     },
     runCommand: {
@@ -169,17 +200,48 @@ export const DEFAULT_TOOL_HANDLERS = {
         marker: ThinkingTimelineMarker.Terminal,
         inline: true,
         renderLoading: (args) => {
-            const { command } = (args ?? {});
+            const { command, sandbox } = (args ?? {});
             // Show streaming command as it's being written
             if (command && command.trim()) {
-                return (_jsxs("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground min-w-0 flex-1 truncate font-mono text-xs", children: summarizeCommand(command) })] }), _jsx("div", { className: "max-h-[150px] overflow-auto p-3", children: _jsxs("div", { className: "text-terminal-foreground break-all font-mono text-xs", children: [_jsx("span", { className: "text-terminal-muted", children: "$" }), " ", command] }) })] }));
+                return (_jsxs("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 max-w-full overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground min-w-0 flex-1 truncate font-mono text-xs", children: summarizeCommand(command) }), sandbox === false && (_jsx("span", { className: "shrink-0 rounded bg-amber-500/20 px-1.5 py-0.5 text-[10px] font-medium text-amber-600", children: "unsandboxed" })), _jsx("span", { className: "text-terminal-muted shrink-0 text-[10px]", children: "Running..." })] }), _jsx("div", { className: "max-h-[150px] overflow-auto p-3", children: _jsxs("div", { className: "text-terminal-foreground break-all font-mono text-xs", children: [_jsx("span", { className: "text-terminal-muted", children: "$" }), " ", command] }) })] }));
             }
             // Fallback when command hasn't started streaming
-            return (_jsx("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 overflow-hidden rounded-lg border", children: _jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground/60 min-w-0 flex-1 truncate font-mono text-xs italic", children: "Preparing command..." })] }) }));
+            return (_jsx("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 max-w-full overflow-hidden rounded-lg border", children: _jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground/60 min-w-0 flex-1 truncate font-mono text-xs italic", children: "Preparing command..." })] }) }));
+        },
+        // Render with streaming stdout/stderr output
+        renderStreaming: (args, progress) => {
+            const { command, sandbox } = (args ?? {});
+            const { stdout, stderr, status } = progress;
+            const hasOutput = stdout || stderr;
+            const isComplete = status === 'complete';
+            return (_jsxs("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 max-w-full overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "border-terminal-border bg-terminal-header flex min-w-0 items-center gap-2 border-b px-3 py-1.5", children: [_jsx(Terminal, { className: cn('size-3.5 shrink-0', isComplete
+                                    ? 'text-terminal-muted'
+                                    : 'text-terminal-muted animate-pulse') }), _jsx("code", { className: "text-terminal-foreground min-w-0 flex-1 truncate font-mono text-xs", children: command ? summarizeCommand(command) : 'Running...' }), sandbox === false && (_jsx("span", { className: "shrink-0 rounded bg-amber-500/20 px-1.5 py-0.5 text-[10px] font-medium text-amber-600", children: "unsandboxed" })), isComplete ? (_jsx(Check, { className: "text-terminal-stdout size-3.5 shrink-0" })) : (_jsx("span", { className: "text-terminal-muted shrink-0 animate-pulse text-[10px]", children: "Running..." }))] }), _jsxs("div", { className: "max-h-[300px] overflow-auto p-3", children: [_jsxs("div", { className: "text-terminal-foreground mb-2 break-all font-mono text-xs", children: [_jsx("span", { className: "text-terminal-muted", children: "$" }), " ", command] }), hasOutput && (_jsxs("div", { className: "border-terminal-border/50 border-t pt-2", children: [stdout && (_jsx("pre", { className: "text-terminal-stdout whitespace-pre-wrap break-all font-mono text-xs", children: stdout })), stderr && (_jsx("pre", { className: "text-terminal-stderr whitespace-pre-wrap break-all font-mono text-xs", children: stderr }))] }))] })] }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
-            return (_jsx("div", { className: "my-2 min-w-0", children: _jsx(TerminalOutput, { command: result.command || 'command', stdout: result.stdout, stderr: result.stderr, exitCode: result.exitCode, error: result.error }) }, toolCallId));
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsx("div", { className: "border-terminal-border bg-terminal my-2 min-w-0 max-w-full overflow-hidden rounded-lg border", children: _jsxs("div", { className: "bg-terminal-header flex min-w-0 items-center gap-2 px-3 py-1.5", children: [_jsx(Terminal, { className: "text-terminal-muted size-3.5 shrink-0 animate-pulse" }), _jsx("code", { className: "text-terminal-foreground/60 min-w-0 flex-1 truncate font-mono text-xs italic", children: "Executing..." })] }) }, toolCallId));
+            }
+            return (_jsx("div", { className: "my-2 min-w-0 max-w-full", children: _jsx(TerminalOutput, { command: result.command || 'command', stdout: result.stdout, stderr: result.stderr, exitCode: result.exitCode, error: result.error, sandboxed: result.sandboxed }) }, toolCallId));
+        },
+        // Render approval request for unsandboxed or dangerous commands
+        renderApproval: (approval, onRespond) => {
+            const { command, sandbox } = (approval.args ?? {});
+            // Determine the reason for approval
+            const isUnsandboxed = sandbox === false;
+            const approvalReason = isUnsandboxed
+                ? 'This command requires running outside the sandbox.'
+                : 'This command has been flagged as potentially dangerous.';
+            return (_jsxs(ToolApproval, { state: "approval-requested", children: [_jsx(ToolApprovalHeader, { children: _jsxs(ToolApprovalRequest, { children: [_jsx("div", { className: "mb-1 text-xs font-medium", children: "Command requires approval" }), _jsx("div", { className: "text-muted-foreground mb-2 text-[10px]", children: approvalReason }), _jsx("code", { className: "bg-muted block rounded px-2 py-1.5 font-mono text-[10px]", children: command }), isUnsandboxed ? (_jsx(ToolApprovalSandboxHelp, { className: "mt-2" })) : (_jsx(ToolApprovalDangerousHelp, { className: "mt-2" }))] }) }), _jsxs(ToolApprovalActions, { children: [_jsx(ToolApprovalAction, { variant: "outline", onClick: () => onRespond({
+                                    approvalId: approval.approvalId,
+                                    approved: false,
+                                    reason: 'User rejected command execution',
+                                }), children: "Reject" }), _jsx(ToolApprovalAction, { onClick: () => onRespond({
+                                    approvalId: approval.approvalId,
+                                    approved: true,
+                                }), children: "Approve" })] })] }));
         },
     },
     // ─────────────────────────────────────────────────────────────────────────────
@@ -191,11 +253,15 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { path } = (args ?? {});
-            return (_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Trash2, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Deleting ", path ? getFileName(path) : 'file', "..."] })] }));
+            return (_jsx(FileOperation, { operation: "delete", path: path || 'file', status: "loading" }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
-            return (_jsx(FileOperation, { operation: "delete", path: result.path || 'file', success: result.success !== false }, toolCallId));
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsx(FileOperation, { operation: "delete", path: "file", status: "loading" }, toolCallId));
+            }
+            return (_jsx(FileOperation, { operation: "delete", path: result.path || 'file', status: result.success === false ? 'error' : 'success' }, toolCallId));
         },
     },
     editFile: {
@@ -204,11 +270,15 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { path } = (args ?? {});
-            return (_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(FileCode, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Editing ", path ? getFileName(path) : 'file', "..."] })] }));
+            return (_jsx(FileOperation, { operation: "edit", path: path || 'file', status: "loading" }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
-            return (_jsx(FileOperation, { operation: "edit", path: result.path || 'file', success: result.success !== false }, toolCallId));
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsx(FileOperation, { operation: "edit", path: "file", status: "loading" }, toolCallId));
+            }
+            return (_jsx(FileOperation, { operation: "edit", path: result.path || 'file', status: result.success === false ? 'error' : 'success' }, toolCallId));
         },
     },
     // ─────────────────────────────────────────────────────────────────────────────
@@ -226,6 +296,10 @@ export const DEFAULT_TOOL_HANDLERS = {
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Search, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Searching..." })] }, toolCallId));
+            }
             // Handle raw content output (ripgrep format)
             if (result.content && !result.matches) {
                 const lines = result.content.split('\n').filter(Boolean);
@@ -256,6 +330,10 @@ export const DEFAULT_TOOL_HANDLERS = {
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Search, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Finding files..." })] }, toolCallId));
+            }
             if (result.success === false || !result.files?.length) {
                 return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Search, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: "No files found" })] }, toolCallId));
             }
@@ -277,6 +355,10 @@ export const DEFAULT_TOOL_HANDLERS = {
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Globe, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Searching the web..." })] }, toolCallId));
+            }
             if (result.success === false || !result.results?.length) {
                 return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Globe, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: "No results found" })] }, toolCallId));
             }
@@ -378,7 +460,36 @@ export const DEFAULT_TOOL_HANDLERS = {
             return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 min-w-0", children: [_jsxs("div", { className: "inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(BookOpen, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "font-medium", children: "Skills config initialized" }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), result.repositories && result.repositories.length > 0 && (_jsxs("div", { className: "text-muted-foreground px-2 pb-1 text-[10px]", children: ["Added: ", result.repositories.map((r) => r.name).join(', ')] }))] }, toolCallId));
         },
     },
+    // ─────────────────────────────────────────────────────────────────────────────
+    // App Scaffolding
+    // ─────────────────────────────────────────────────────────────────────────────
+    scaffoldApp: {
+        loadingLabel: 'Creating app...',
+        marker: ThinkingTimelineMarker.Default,
+        inline: true,
+        renderLoading: (args) => {
+            const { name, appId } = (args ?? {});
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Package, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Creating ", name || appId || 'app', "..."] })] }));
+        },
+        renderOutput: (output, toolCallId) => {
+            const result = (output ?? {});
+            // If output is empty, tool is still executing
+            if (output === undefined || output === null) {
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Package, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Creating app..." })] }, toolCallId));
+            }
+            if (result.success === false) {
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Package, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to create app' })] }, toolCallId));
+            }
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 min-w-0 rounded-md", children: [_jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5 text-xs", children: [_jsx(Package, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "font-medium", children: [result.icon, " ", result.name || result.appId] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), _jsxs("div", { className: "border-border/50 flex flex-wrap gap-x-3 gap-y-0.5 border-t px-2 py-1 text-[10px]", children: [result.port && (_jsxs("span", { children: ["Port: ", _jsx("code", { className: "font-mono", children: result.port })] })), result.pnpmInstalled && (_jsx("span", { className: "text-green-600", children: "deps installed" })), result.registered && (_jsx("span", { className: "text-green-600", children: "registered" })), result.files && (_jsxs("span", { className: "text-muted-foreground/70", children: [result.files.length, " files"] }))] })] }, toolCallId));
+        },
+    },
 };
+/**
+ * Loading indicator for inline tool loading states
+ */
+function LoadingIndicator({ icon: Icon, children, }) {
+    return (_jsxs("div", { className: "bg-muted text-muted-foreground inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Icon, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: children })] }));
+}
 /**
  * Get the handler for a tool
  */
@@ -389,9 +500,10 @@ export function getToolHandler(toolName) {
     }
     // Default handler for unknown tools
     return {
-        loadingLabel: `Using ${toolName}...`,
+        loadingLabel: `Running ${toolName}...`,
         marker: ThinkingTimelineMarker.Default,
         inline: false,
+        renderLoading: () => (_jsxs(LoadingIndicator, { icon: Sparkles, children: ["Running ", toolName, "..."] })),
         renderOutput: (output, toolCallId) => {
             const outputContent = typeof output === 'string'
                 ? output

package/dist/components/chat/tool-progress-context.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+/**
+ * Progress data for a running tool (command execution with streaming stdout/stderr)
+ */
+export interface ToolProgressData {
+    toolCallId: string;
+    command: string;
+    stdout: string;
+    stderr: string;
+    status: 'running' | 'complete';
+}
+/**
+ * Provider for tool progress data
+ */
+export declare function ToolProgressProvider({ value, children, }: {
+    value: Record<string, ToolProgressData>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to get tool progress data
+ */
+export declare function useToolProgress(): Record<string, ToolProgressData>;
+/**
+ * Hook to get progress for a specific tool call
+ */
+export declare function useToolCallProgress(toolCallId: string | undefined): ToolProgressData | undefined;
+//# sourceMappingURL=tool-progress-context.d.ts.map

package/dist/components/chat/tool-progress-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-progress-context.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-progress-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA6B,MAAM,OAAO,CAAA;AAEjE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,SAAS,GAAG,UAAU,CAAA;CAC/B;AAOD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACvC,QAAQ,EAAE,SAAS,CAAA;CACpB,2CAMA;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAElE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,gBAAgB,GAAG,SAAS,CAG9B"}

package/dist/components/chat/tool-progress-context.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+/**
+ * Context for tool progress data
+ */
+const ToolProgressContext = createContext({});
+/**
+ * Provider for tool progress data
+ */
+export function ToolProgressProvider({ value, children, }) {
+    return (_jsx(ToolProgressContext.Provider, { value: value, children: children }));
+}
+/**
+ * Hook to get tool progress data
+ */
+export function useToolProgress() {
+    return useContext(ToolProgressContext);
+}
+/**
+ * Hook to get progress for a specific tool call
+ */
+export function useToolCallProgress(toolCallId) {
+    const progress = useContext(ToolProgressContext);
+    return toolCallId ? progress[toolCallId] : undefined;
+}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { cn } from './lib/utils';
 export { ThemeProvider, useTheme, themeScript, type Theme } from './lib/theme';
 export { WorkspaceProvider, useWorkspace, WORKSPACE_HEADER, } from './lib/workspace';
-export { useMoldableCommands, useMoldableCommand, isInMoldable, sendToMoldable, type AppCommand, type CommandAction, type CommandsResponse, type CommandMessage, } from './lib/commands';
+export { useMoldableCommands, useMoldableCommand, isInMoldable, sendToMoldable, downloadFile, type AppCommand, type CommandAction, type CommandsResponse, type CommandMessage, type DownloadFileOptions, } from './lib/commands';
 export * from './components/ui';
 export { useIsMobile } from './hooks/use-mobile';
 export { Markdown } from './components/markdown';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAGhC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAA;AAG9E,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,cAAc,GACpB,MAAM,gBAAgB,CAAA;AAGvB,cAAc,iBAAiB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAGzD,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAGhC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAA;AAG9E,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,mBAAmB,GACzB,MAAM,gBAAgB,CAAA;AAGvB,cAAc,iBAAiB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAGzD,cAAc,mBAAmB,CAAA"}

package/dist/index.js

@@ -5,7 +5,7 @@ export { ThemeProvider, useTheme, themeScript } from './lib/theme';
 // Export workspace
 export { WorkspaceProvider, useWorkspace, WORKSPACE_HEADER, } from './lib/workspace';
 // Export commands
-export { useMoldableCommands, useMoldableCommand, isInMoldable, sendToMoldable, } from './lib/commands';
+export { useMoldableCommands, useMoldableCommand, isInMoldable, sendToMoldable, downloadFile, } from './lib/commands';
 // Export UI components
 export * from './components/ui';
 // Export hooks

package/dist/lib/commands.d.ts

@@ -71,4 +71,41 @@ export declare function sendToMoldable(message: {
     type: string;
     [key: string]: unknown;
 }): void;
+/**
+ * Options for downloading a file
+ */
+export interface DownloadFileOptions {
+    /** Suggested filename for the save dialog */
+    filename: string;
+    /** File content - either a string or base64-encoded data */
+    data: string;
+    /** MIME type of the file (e.g., 'text/csv', 'application/json') */
+    mimeType: string;
+    /** If true, data is base64-encoded binary; if false, data is plain text */
+    isBase64?: boolean;
+}
+/**
+ * Trigger a file download via Moldable's native save dialog.
+ * Works inside Moldable's iframe environment where browser downloads don't work.
+ *
+ * @example
+ * ```tsx
+ * // Export CSV
+ * downloadFile({
+ *   filename: 'data.csv',
+ *   data: 'name,value\nfoo,1\nbar,2',
+ *   mimeType: 'text/csv',
+ * })
+ *
+ * // Export JSON
+ * downloadFile({
+ *   filename: 'data.json',
+ *   data: JSON.stringify({ items: [...] }, null, 2),
+ *   mimeType: 'application/json',
+ * })
+ * ```
+ *
+ * @returns Promise that resolves when the save dialog completes (or rejects on error)
+ */
+export declare function downloadFile(options: DownloadFileOptions): Promise<void>;
 //# sourceMappingURL=commands.d.ts.map

package/dist/lib/commands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../../src/lib/commands.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GACrC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAErC;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gDAAgD;IAChD,MAAM,EAAE,aAAa,CAAA;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,UAAU,EAAE,CAAA;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,QAwBtD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,QAgBrC;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,OAAO,CAGtC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,QAMA"}
+{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../../src/lib/commands.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GACrC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAErC;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gDAAgD;IAChD,MAAM,EAAE,aAAa,CAAA;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,UAAU,EAAE,CAAA;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,QAwBtD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,QAgBrC;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,OAAO,CAGtC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,QAMA;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAA;IACZ,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAA;IAChB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CA+DxE"}

package/dist/lib/commands.js

@@ -71,3 +71,88 @@ export function sendToMoldable(message) {
     }
     window.parent.postMessage(message, '*');
 }
+/**
+ * Trigger a file download via Moldable's native save dialog.
+ * Works inside Moldable's iframe environment where browser downloads don't work.
+ *
+ * @example
+ * ```tsx
+ * // Export CSV
+ * downloadFile({
+ *   filename: 'data.csv',
+ *   data: 'name,value\nfoo,1\nbar,2',
+ *   mimeType: 'text/csv',
+ * })
+ *
+ * // Export JSON
+ * downloadFile({
+ *   filename: 'data.json',
+ *   data: JSON.stringify({ items: [...] }, null, 2),
+ *   mimeType: 'application/json',
+ * })
+ * ```
+ *
+ * @returns Promise that resolves when the save dialog completes (or rejects on error)
+ */
+export function downloadFile(options) {
+    return new Promise((resolve, reject) => {
+        if (!isInMoldable()) {
+            // Fallback for browser: use traditional blob download
+            try {
+                const blob = options.isBase64
+                    ? new Blob([Uint8Array.from(atob(options.data), (c) => c.charCodeAt(0))], {
+                        type: options.mimeType,
+                    })
+                    : new Blob([options.data], { type: options.mimeType });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = options.filename;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+                resolve();
+            }
+            catch (err) {
+                reject(err);
+            }
+            return;
+        }
+        // Generate a unique ID for this download request
+        const requestId = `download-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        // Listen for the response
+        const handleResponse = (event) => {
+            if (event.data?.type !== 'moldable:save-file-result')
+                return;
+            if (event.data?.requestId !== requestId)
+                return;
+            window.removeEventListener('message', handleResponse);
+            if (event.data.success) {
+                resolve();
+            }
+            else if (event.data.cancelled) {
+                // User cancelled - not an error, just resolve
+                resolve();
+            }
+            else {
+                reject(new Error(event.data.error || 'Download failed'));
+            }
+        };
+        window.addEventListener('message', handleResponse);
+        // Send the download request to Moldable
+        sendToMoldable({
+            type: 'moldable:save-file',
+            requestId,
+            filename: options.filename,
+            data: options.data,
+            mimeType: options.mimeType,
+            isBase64: options.isBase64 ?? false,
+        });
+        // Timeout after 5 minutes (user might take time in save dialog)
+        setTimeout(() => {
+            window.removeEventListener('message', handleResponse);
+            reject(new Error('Download timed out'));
+        }, 5 * 60 * 1000);
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldable-ai/ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Shared UI components for Moldable applications",
   "author": "Desiderata LLC",
   "license": "Elastic-2.0",