@moldable-ai/ui 0.2.1 → 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"}