@moldable-ai/ui 0.2.2 → 0.2.5

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/components/ui/item.d.ts

@@ -11,7 +11,7 @@ declare function Item({ className, variant, size, asChild, ...props }: React.Com
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "image" | "default" | "icon" | null | undefined;
+    variant?: "default" | "image" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;

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,CAqExE"}

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);
+    });
+}