@moldable-ai/ui 0.2.22 → 0.2.24

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

@@ -2,15 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, BookOpen, Camera, Check, CheckCheck, Copy, Database, Download, FileCode, FileText, FolderOpen, Globe, Info, Package, Plus, Search, Sparkles, Terminal, Trash2, X, } from 'lucide-react';
 import { useState } from 'react';
-import { cn } from '../../lib/utils';
-import { ChatImageLightbox } from './chat-image-lightbox';
-import { ThinkingTimelineMarker } from './thinking-timeline';
-import { ToolApproval, ToolApprovalAction, ToolApprovalActions, ToolApprovalDangerousHelp, ToolApprovalHeader, ToolApprovalHelp, ToolApprovalRequest, ToolApprovalSandboxHelp, } from './tool-approval';
+import { cn } from '../../lib/utils.js';
+import { ChatImageLightbox } from './chat-image-lightbox.js';
+import { ThinkingTimelineMarker } from './thinking-timeline.js';
+import { ToolApproval, ToolApprovalAction, ToolApprovalActions, ToolApprovalDangerousHelp, ToolApprovalHeader, ToolApprovalHelp, ToolApprovalRequest, ToolApprovalSandboxHelp, } from './tool-approval.js';
 /**
  * Code block component for displaying command output or file contents
  */
 function CodeBlock({ children, maxHeight = 200, className, }) {
-    return (_jsx("pre", { className: cn('bg-terminal text-terminal-foreground min-w-0 overflow-auto whitespace-pre-wrap break-all rounded-lg p-3 font-mono text-xs', className), style: { maxHeight }, children: children }));
+    return (_jsx("pre", { className: cn('bg-terminal text-terminal-foreground rounded-container text-ui-caption min-w-0 overflow-auto whitespace-pre-wrap break-all p-3 font-mono', className), style: { maxHeight }, children: children }));
 }
 /**
  * Copy button component
@@ -22,7 +22,7 @@ function CopyButton({ text }) {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
-    return (_jsx("button", { onClick: handleCopy, className: "text-terminal-muted hover:bg-terminal-border hover:text-terminal-foreground cursor-pointer rounded p-1 transition-colors", title: "Copy command", children: copied ? (_jsx(CheckCheck, { className: "text-success size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }));
+    return (_jsx("button", { onClick: handleCopy, className: "text-terminal-muted hover:bg-terminal-border hover:text-terminal-foreground rounded-control cursor-pointer p-1 transition-colors", title: "Copy command", children: copied ? (_jsx(CheckCheck, { className: "text-success size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }));
 }
 /**
  * Summarize a command for the header (truncate long commands)
@@ -42,7 +42,7 @@ function summarizeCommand(command) {
 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 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 }))] }))] })] }));
+    return (_jsxs("div", { className: "border-terminal-border bg-terminal rounded-container min-w-0 max-w-full overflow-hidden 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 text-ui-caption min-w-0 flex-1 truncate font-mono", children: summarizeCommand(command) }), sandboxed === false && (_jsx("span", { className: "rounded-control text-11 shrink-0 bg-amber-500/20 px-1.5 py-0.5 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 text-ui-caption mb-2 break-all font-mono", 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 text-ui-caption whitespace-pre-wrap break-all font-mono", children: stdout })), stderr && (_jsx("pre", { className: "text-terminal-stderr text-ui-caption whitespace-pre-wrap break-all font-mono", children: stderr })), error && (_jsx("pre", { className: "text-terminal-error text-ui-caption whitespace-pre-wrap break-all font-mono", children: error }))] }))] })] }));
 }
 /**
  * File operation indicator (inline, minimal)
@@ -75,9 +75,9 @@ function FileOperation({ operation, path, status = 'success', children, }) {
     const Icon = icons[operation];
     const fileName = getFileName(path);
     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'
+    return (_jsxs("div", { className: "my-1 min-w-0", children: [_jsxs("div", { className: cn('rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1', 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] }));
+                    : '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 rounded-control min-w-0 truncate 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
@@ -133,13 +133,13 @@ export const DEFAULT_TOOL_HANDLERS = {
                     ? `data:${image.mediaType};base64,${image.data}`
                     : undefined);
             if (imageSrc) {
-                return (_jsxs("details", { className: "border-border bg-muted text-muted-foreground my-1 max-w-2xl overflow-hidden rounded-md border text-xs", children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-2 px-2 py-1.5", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: result.imagePath
+                return (_jsxs("details", { className: "border-border bg-muted text-muted-foreground rounded-control text-ui-caption my-1 max-w-2xl overflow-hidden border", children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-2 px-2 py-1.5", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: result.imagePath
                                         ? `Viewed ${getFileName(result.imagePath)}`
                                         : 'Viewed image' })] }), _jsx("div", { className: "border-border border-t p-2", children: _jsx(ChatImageLightbox, { src: imageSrc, alt: result.imagePath
                                     ? getFileName(result.imagePath)
-                                    : 'Image viewed by Moldable', className: "bg-background block size-20 rounded-2xl border", imageClassName: "size-full object-cover" }) })] }, toolCallId));
+                                    : 'Image viewed by Moldable', className: "bg-background rounded-container block size-20 border", imageClassName: "size-full object-cover" }) })] }, 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(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: result.imagePath
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: result.imagePath
                             ? `Viewed ${getFileName(result.imagePath)}`
                             : 'Viewed image' })] }, toolCallId));
         },
@@ -163,7 +163,7 @@ export const DEFAULT_TOOL_HANDLERS = {
             if (!images?.length) {
                 return (_jsx(LoadingIndicator, { icon: Sparkles, children: "Showing images..." }, toolCallId));
             }
-            return (_jsx("div", { className: "my-2 flex max-w-full gap-2 overflow-x-auto", children: images.map((image, index) => (_jsx(ChatImageLightbox, { src: image.imageUrl, alt: image.altText || image.filename || 'Image shown by Moldable', className: "border-border bg-muted block size-20 shrink-0 rounded-2xl border", imageClassName: "size-full object-cover" }, `${image.imageUrl}-${index}`))) }, toolCallId));
+            return (_jsx("div", { className: "my-2 flex max-w-full gap-2 overflow-x-auto", children: images.map((image, index) => (_jsx(ChatImageLightbox, { src: image.imageUrl, alt: image.altText || image.filename || 'Image shown by Moldable', className: "border-border bg-muted rounded-container block size-20 shrink-0 border", imageClassName: "size-full object-cover" }, `${image.imageUrl}-${index}`))) }, toolCallId));
         },
     },
     generateImage: {
@@ -181,7 +181,7 @@ export const DEFAULT_TOOL_HANDLERS = {
                         : aspectRatio === 'widescreen'
                             ? 'aspect-video'
                             : 'aspect-square';
-            return (_jsx("figure", { className: "my-2 min-w-0 max-w-2xl", children: _jsxs("div", { className: cn('border-border bg-muted relative w-full overflow-hidden rounded-lg border', ratioClass), children: [_jsx("div", { className: "from-muted via-background/45 to-muted absolute inset-0 animate-pulse bg-gradient-to-br" }), _jsx("div", { className: "bg-foreground/5 absolute inset-0" }), _jsxs("div", { className: "text-muted-foreground absolute inset-0 flex flex-col items-center justify-center gap-2 px-6 text-center", children: [_jsx(Sparkles, { className: "size-5 animate-pulse" }), _jsx("span", { className: "max-w-full truncate text-xs font-medium", children: prompt
+            return (_jsx("figure", { className: "my-2 min-w-0 max-w-2xl", children: _jsxs("div", { className: cn('border-border bg-muted rounded-container relative w-full overflow-hidden border', ratioClass), children: [_jsx("div", { className: "from-muted via-background/45 to-muted absolute inset-0 animate-pulse bg-gradient-to-br" }), _jsx("div", { className: "bg-foreground/5 absolute inset-0" }), _jsxs("div", { className: "text-muted-foreground absolute inset-0 flex flex-col items-center justify-center gap-2 px-6 text-center", children: [_jsx(Sparkles, { className: "size-5 animate-pulse" }), _jsx("span", { className: "text-ui-caption max-w-full truncate font-medium", children: prompt
                                         ? `Generating "${prompt.slice(0, 54)}${prompt.length > 54 ? '...' : ''}"`
                                         : 'Generating image...' })] })] }) }));
         },
@@ -199,11 +199,11 @@ export const DEFAULT_TOOL_HANDLERS = {
                     ? `data:${image.mediaType};base64,${image.data}`
                     : undefined);
             if (!imageSrc) {
-                return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 flex max-w-full items-start gap-2 rounded-md px-2 py-1.5 text-xs", children: [_jsx(Sparkles, { className: "mt-0.5 size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 whitespace-normal break-words leading-relaxed", children: result.imagePath
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 flex max-w-full items-start gap-2 px-2 py-1.5", children: [_jsx(Sparkles, { className: "mt-0.5 size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 whitespace-normal break-words leading-relaxed", children: result.imagePath
                                 ? `Generated image saved at ${result.imagePath}.`
                                 : 'Generated image saved.' })] }, toolCallId));
             }
-            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx(ChatImageLightbox, { src: imageSrc, alt: result.prompt || 'Generated image', className: "border-border bg-muted block max-w-full rounded-2xl border", imageClassName: "block max-h-[420px] w-full object-contain" }), _jsxs("figcaption", { className: "text-muted-foreground mt-1 flex min-w-0 items-center gap-1 text-xs", children: [_jsx(Sparkles, { className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: result.imagePath
+            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx(ChatImageLightbox, { src: imageSrc, alt: result.prompt || 'Generated image', className: "border-border bg-muted rounded-container block max-w-full border", imageClassName: "block max-h-[420px] w-full object-contain" }), _jsxs("figcaption", { className: "text-muted-foreground text-ui-caption mt-1 flex min-w-0 items-center gap-1", children: [_jsx(Sparkles, { className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: result.imagePath
                                     ? `${getFileName(result.imagePath)}${result.size ? ` - ${result.size}` : ''}`
                                     : result.size || 'Generated image' })] })] }, toolCallId));
         },
@@ -219,7 +219,7 @@ export const DEFAULT_TOOL_HANDLERS = {
                 return (_jsx(LoadingIndicator, { icon: Camera, children: "Taking screenshot..." }, toolCallId));
             }
             if (result.type === 'error-text') {
-                return (_jsxs("div", { className: "bg-destructive/10 text-destructive my-1 flex max-w-full items-start gap-2 rounded-md px-2 py-1.5 text-xs", children: [_jsx(Camera, { className: "mt-0.5 size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 whitespace-normal break-words leading-relaxed", children: typeof result.value === 'string'
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-ui-caption my-1 flex max-w-full items-start gap-2 px-2 py-1.5", children: [_jsx(Camera, { className: "mt-0.5 size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 whitespace-normal break-words leading-relaxed", children: typeof result.value === 'string'
                                 ? result.value
                                 : 'Screenshot failed' })] }, toolCallId));
             }
@@ -229,9 +229,9 @@ export const DEFAULT_TOOL_HANDLERS = {
                 part.mediaType?.startsWith('image/'));
             const text = parts.find((part) => part.type === 'text')?.text;
             if (!image?.data || !image.mediaType) {
-                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(Camera, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: text || 'Screenshot captured' }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Camera, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: text || 'Screenshot captured' }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
             }
-            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx(ChatImageLightbox, { src: `data:${image.mediaType};base64,${image.data}`, alt: "Current app screenshot", className: "border-border bg-muted block max-w-full rounded-2xl border", imageClassName: "block max-h-[420px] w-full object-contain" }), text && (_jsxs("figcaption", { className: "text-muted-foreground mt-1 flex items-center gap-1 text-xs", children: [_jsx(Camera, { className: "size-3" }), _jsx("span", { className: "truncate", children: text })] }))] }, toolCallId));
+            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx(ChatImageLightbox, { src: `data:${image.mediaType};base64,${image.data}`, alt: "Current app screenshot", className: "border-border bg-muted rounded-container block max-w-full border", imageClassName: "block max-h-[420px] w-full object-contain" }), text && (_jsxs("figcaption", { className: "text-muted-foreground text-ui-caption mt-1 flex items-center gap-1", children: [_jsx(Camera, { className: "size-3" }), _jsx("span", { className: "truncate", children: text })] }))] }, toolCallId));
         },
     },
     listMoldableAppApi: {
@@ -247,7 +247,7 @@ export const DEFAULT_TOOL_HANDLERS = {
             const apps = result.apps ?? [];
             const scopes = appApiScopes(result);
             const hasError = result.success === false;
-            return (_jsx("div", { className: "my-1 min-w-0 max-w-xl", children: _jsxs("div", { className: cn('inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs', hasError
+            return (_jsx("div", { className: "my-1 min-w-0 max-w-xl", children: _jsxs("div", { className: cn('rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1', hasError
                         ? 'bg-destructive/10 text-destructive'
                         : 'bg-muted text-muted-foreground'), children: [_jsx(Database, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: hasError ? 'App API list failed' : 'Listing app APIs' }), !hasError && (_jsxs("span", { className: "truncate", children: [apps.length, " app", apps.length === 1 ? '' : 's', ", ", scopes.length, ' ', "function", scopes.length === 1 ? '' : 's'] })), hasError ? (_jsx(X, { className: "size-3 shrink-0" })) : (_jsx(Check, { className: "size-3 shrink-0 text-green-600" }))] }) }, toolCallId));
         },
@@ -264,7 +264,7 @@ export const DEFAULT_TOOL_HANDLERS = {
             const response = output;
             const ok = response.ok !== false && !response.error;
             const itemCount = ok ? appApiItemCount(response.result) : 0;
-            return (_jsx("div", { className: "my-1 min-w-0 max-w-xl", children: _jsxs("div", { className: cn('inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs', ok
+            return (_jsx("div", { className: "my-1 min-w-0 max-w-xl", children: _jsxs("div", { className: cn('rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1', ok
                         ? 'bg-muted text-muted-foreground'
                         : 'bg-destructive/10 text-destructive'), children: [_jsx(Database, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: ok ? 'Fetched app data' : 'App API failed' }), _jsx("span", { className: "min-w-0 truncate", children: ok
                                 ? `${itemCount} item${itemCount === 1 ? '' : 's'}`
@@ -300,7 +300,7 @@ export const DEFAULT_TOOL_HANDLERS = {
                 const previewLines = lines.slice(0, 20);
                 const preview = previewLines.join('\n').slice(0, 1000);
                 const lineCount = lines.length;
-                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 }) })] }));
+                return (_jsxs("div", { className: "my-1 min-w-0", children: [_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", 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 rounded-control min-w-0 truncate 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 (_jsx(FileOperation, { operation: "write", path: path || 'file', status: "loading" }));
@@ -335,7 +335,7 @@ export const DEFAULT_TOOL_HANDLERS = {
             const entries = result.items
                 ? result.items.map((i) => `${i.type === 'directory' ? '📁' : '📄'} ${i.name}`)
                 : result.entries || [];
-            return (_jsxs("div", { className: cn('my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs', 'bg-muted text-muted-foreground'), children: [_jsx(FolderOpen, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Listed" }), _jsx("code", { className: "bg-background/50 min-w-0 truncate rounded px-1 font-mono", title: result.path, children: getFileName(result.path || 'directory') }), _jsxs("span", { className: "text-muted-foreground/70 shrink-0", children: ["(", entries.length, " items)"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            return (_jsxs("div", { className: cn('rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1', 'bg-muted text-muted-foreground'), children: [_jsx(FolderOpen, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Listed" }), _jsx("code", { className: "bg-background/50 rounded-control min-w-0 truncate px-1 font-mono", title: result.path, children: getFileName(result.path || 'directory') }), _jsxs("span", { className: "text-muted-foreground/70 shrink-0", children: ["(", entries.length, " items)"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
         },
     },
     fileExists: {
@@ -352,7 +352,7 @@ export const DEFAULT_TOOL_HANDLERS = {
             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));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(FileText, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Checked" }), _jsx("code", { className: "bg-background/50 rounded-control min-w-0 truncate 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: {
@@ -363,16 +363,16 @@ 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 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] }) })] }));
+                return (_jsxs("div", { className: "border-terminal-border bg-terminal rounded-container my-2 min-w-0 max-w-full overflow-hidden 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 text-ui-caption min-w-0 flex-1 truncate font-mono", children: summarizeCommand(command) }), _jsx("span", { className: "text-terminal-muted text-11 shrink-0", children: "Running..." })] }), _jsx("div", { className: "max-h-[150px] overflow-auto p-3", children: _jsxs("div", { className: "text-terminal-foreground text-ui-caption break-all font-mono", 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 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..." })] }) }));
+            return (_jsx("div", { className: "border-terminal-border bg-terminal rounded-container my-2 min-w-0 max-w-full overflow-hidden 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 text-ui-caption min-w-0 flex-1 truncate font-mono italic", children: "Generating command..." })] }) }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             // 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: "border-terminal-border bg-terminal rounded-container my-2 min-w-0 max-w-full overflow-hidden 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 text-ui-caption min-w-0 flex-1 truncate font-mono 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));
         },
@@ -385,10 +385,10 @@ export const DEFAULT_TOOL_HANDLERS = {
             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 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] }) })] }));
+                return (_jsxs("div", { className: "border-terminal-border bg-terminal rounded-container my-2 min-w-0 max-w-full overflow-hidden 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 text-ui-caption min-w-0 flex-1 truncate font-mono", children: summarizeCommand(command) }), sandbox === false && (_jsx("span", { className: "rounded-control text-11 shrink-0 bg-amber-500/20 px-1.5 py-0.5 font-medium text-amber-600", children: "unsandboxed" })), _jsx("span", { className: "text-terminal-muted text-11 shrink-0", children: "Running..." })] }), _jsx("div", { className: "max-h-[150px] overflow-auto p-3", children: _jsxs("div", { className: "text-terminal-foreground text-ui-caption break-all font-mono", 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 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..." })] }) }));
+            return (_jsx("div", { className: "border-terminal-border bg-terminal rounded-container my-2 min-w-0 max-w-full overflow-hidden 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 text-ui-caption min-w-0 flex-1 truncate font-mono italic", children: "Preparing command..." })] }) }));
         },
         // Render with streaming stdout/stderr output
         renderStreaming: (args, progress) => {
@@ -396,15 +396,15 @@ export const DEFAULT_TOOL_HANDLERS = {
             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
+            return (_jsxs("div", { className: "border-terminal-border bg-terminal rounded-container my-2 min-w-0 max-w-full overflow-hidden 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 }))] }))] })] }));
+                                    : 'text-terminal-muted animate-pulse') }), _jsx("code", { className: "text-terminal-foreground text-ui-caption min-w-0 flex-1 truncate font-mono", children: command ? summarizeCommand(command) : 'Running...' }), sandbox === false && (_jsx("span", { className: "rounded-control text-11 shrink-0 bg-amber-500/20 px-1.5 py-0.5 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 text-11 shrink-0 animate-pulse", children: "Running..." }))] }), _jsxs("div", { className: "max-h-[300px] overflow-auto p-3", children: [_jsxs("div", { className: "text-terminal-foreground text-ui-caption mb-2 break-all font-mono", 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 text-ui-caption whitespace-pre-wrap break-all font-mono", children: stdout })), stderr && (_jsx("pre", { className: "text-terminal-stderr text-ui-caption whitespace-pre-wrap break-all font-mono", children: stderr }))] }))] })] }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             // 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: "border-terminal-border bg-terminal rounded-container my-2 min-w-0 max-w-full overflow-hidden 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 text-ui-caption min-w-0 flex-1 truncate font-mono 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));
         },
@@ -416,7 +416,7 @@ export const DEFAULT_TOOL_HANDLERS = {
             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({
+            return (_jsxs(ToolApproval, { state: "approval-requested", children: [_jsx(ToolApprovalHeader, { children: _jsxs(ToolApprovalRequest, { children: [_jsx("div", { className: "text-ui-caption mb-1 font-medium", children: "Command requires approval" }), _jsx("div", { className: "text-muted-foreground text-11 mb-2", children: approvalReason }), _jsx("code", { className: "bg-muted rounded-control text-11 block px-2 py-1.5 font-mono", 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',
@@ -472,7 +472,7 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { pattern } = (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(Search, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Searching", pattern
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Search, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Searching", pattern
                                 ? ` for "${pattern.slice(0, 20)}${pattern.length > 20 ? '...' : ''}"`
                                 : '', "..."] })] }));
         },
@@ -480,15 +480,15 @@ export const DEFAULT_TOOL_HANDLERS = {
             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));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", 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);
-                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: "shrink-0 font-medium", children: "Search results" }), _jsxs("span", { className: "text-muted-foreground/70 shrink-0", children: ["(", lines.length, " lines)"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Search, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Search results" }), _jsxs("span", { className: "text-muted-foreground/70 shrink-0", children: ["(", lines.length, " lines)"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
             }
             if (result.success === false || !result.matches?.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 matches found" })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Search, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: "No matches found" })] }, toolCallId));
             }
             // Group matches by file
             const byFile = result.matches.reduce((acc, match) => {
@@ -499,7 +499,7 @@ export const DEFAULT_TOOL_HANDLERS = {
             }, {});
             const fileCount = Object.keys(byFile).length;
             const matchCount = result.totalMatches || result.matches.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: "shrink-0 font-medium", children: "Found" }), _jsxs("span", { className: "shrink-0", children: [matchCount, " match", matchCount !== 1 ? 'es' : '', " in ", fileCount, " file", fileCount !== 1 ? 's' : ''] }), result.truncated && (_jsx("span", { className: "shrink-0 text-amber-500", children: "(truncated)" })), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Search, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Found" }), _jsxs("span", { className: "shrink-0", children: [matchCount, " match", matchCount !== 1 ? 'es' : '', " in ", fileCount, " file", fileCount !== 1 ? 's' : ''] }), result.truncated && (_jsx("span", { className: "shrink-0 text-amber-500", children: "(truncated)" })), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
         },
     },
     globFileSearch: {
@@ -508,18 +508,18 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { pattern } = (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(Search, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Finding files", pattern ? ` matching "${pattern}"` : '', "..."] })] }));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Search, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Finding files", pattern ? ` matching "${pattern}"` : '', "..."] })] }));
         },
         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));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", 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));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Search, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: "No files found" })] }, 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(Search, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Found" }), _jsxs("span", { className: "shrink-0", children: [result.files.length, " file", result.files.length !== 1 ? 's' : ''] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Search, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Found" }), _jsxs("span", { className: "shrink-0", children: [result.files.length, " file", result.files.length !== 1 ? 's' : ''] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
         },
     },
     readToolOutput: {
@@ -541,7 +541,7 @@ export const DEFAULT_TOOL_HANDLERS = {
             }
             const startLine = result.startLine ?? 0;
             const endLine = startLine + (result.linesReturned || 0);
-            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: "Read tool output" }), _jsxs("span", { className: "text-muted-foreground/70 shrink-0", children: [startLine, "\u2013", endLine, "/", result.totalLines || 0] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(FileText, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Read tool output" }), _jsxs("span", { className: "text-muted-foreground/70 shrink-0", children: [startLine, "\u2013", endLine, "/", result.totalLines || 0] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
         },
     },
     // ─────────────────────────────────────────────────────────────────────────────
@@ -553,7 +553,7 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { query } = (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(Globe, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Searching", query
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Globe, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Searching", query
                                 ? ` "${query.slice(0, 30)}${query.length > 30 ? '...' : ''}"`
                                 : ' the web', "..."] })] }));
         },
@@ -561,12 +561,12 @@ export const DEFAULT_TOOL_HANDLERS = {
             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));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", 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));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Globe, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: "No results found" })] }, 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(Globe, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Web search" }), _jsxs("span", { className: "shrink-0", children: [result.results.length, " result", result.results.length !== 1 ? 's' : ''] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Globe, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Web search" }), _jsxs("span", { className: "shrink-0", children: [result.results.length, " result", result.results.length !== 1 ? 's' : ''] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
         },
     },
     // ─────────────────────────────────────────────────────────────────────────────
@@ -576,13 +576,13 @@ export const DEFAULT_TOOL_HANDLERS = {
         loadingLabel: 'Listing skill repositories...',
         marker: ThinkingTimelineMarker.Default,
         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(BookOpen, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Loading skill repositories..." })] })),
+        renderLoading: () => (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(BookOpen, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Loading skill repositories..." })] })),
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             if (result.success === false || !result.repositories?.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(BookOpen, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'No skill repositories configured' })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(BookOpen, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'No skill repositories configured' })] }, 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(BookOpen, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Skill Repositories" }), _jsxs("span", { className: "shrink-0", children: ["(", result.repositories.length, " repo", result.repositories.length !== 1 ? 's' : '', ")"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(BookOpen, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: "Skill Repositories" }), _jsxs("span", { className: "shrink-0", children: ["(", result.repositories.length, " repo", result.repositories.length !== 1 ? 's' : '', ")"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
         },
     },
     listAvailableSkills: {
@@ -591,16 +591,16 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { repoName } = (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(Sparkles, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Fetching skills", repoName ? ` from ${repoName}` : '', "..."] })] }));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Fetching skills", repoName ? ` from ${repoName}` : '', "..."] })] }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             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(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to fetch skills' })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to fetch skills' })] }, toolCallId));
             }
             const available = result.available || [];
             const selected = result.selected || [];
-            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(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: result.repoName || 'Available Skills' }), _jsxs("span", { className: "shrink-0", children: ["(", selected.length, "/", available.length, " selected)"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "shrink-0 font-medium", children: result.repoName || 'Available Skills' }), _jsxs("span", { className: "shrink-0", children: ["(", selected.length, "/", available.length, " selected)"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
         },
     },
     syncSkills: {
@@ -609,16 +609,16 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { repoName } = (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(Download, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Syncing skills", repoName ? ` from ${repoName}` : '', "..."] })] }));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Download, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Syncing skills", repoName ? ` from ${repoName}` : '', "..."] })] }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             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(Download, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Sync failed' })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Download, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Sync failed' })] }, toolCallId));
             }
             const synced = result.synced || 0;
             const failed = result.failed || 0;
-            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(Download, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "font-medium", children: "Skills synced" }), _jsxs("span", { className: "text-green-600", children: [synced, " synced"] }), failed > 0 && (_jsxs("span", { className: "text-amber-500", children: [failed, " failed"] })), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), result.skills && result.skills.length > 0 && (_jsx("div", { className: "mt-1.5 flex flex-wrap gap-1 px-2 pb-1", children: result.skills.map((skill) => (_jsxs("span", { className: "bg-primary/10 text-primary inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium", children: [_jsx(Check, { className: "size-2.5" }), skill] }, skill))) }))] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 min-w-0", children: [_jsxs("div", { className: "rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Download, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "font-medium", children: "Skills synced" }), _jsxs("span", { className: "text-green-600", children: [synced, " synced"] }), failed > 0 && (_jsxs("span", { className: "text-amber-500", children: [failed, " failed"] })), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), result.skills && result.skills.length > 0 && (_jsx("div", { className: "mt-1.5 flex flex-wrap gap-1 px-2 pb-1", children: result.skills.map((skill) => (_jsxs("span", { className: "bg-primary/10 text-primary rounded-pill text-11 inline-flex items-center gap-1 px-2 py-0.5 font-medium", children: [_jsx(Check, { className: "size-2.5" }), skill] }, skill))) }))] }, toolCallId));
         },
     },
     addSkillRepo: {
@@ -627,14 +627,14 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { url } = (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(Plus, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Adding repository", url ? `: ${url}` : '', "..."] })] }));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Plus, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Adding repository", url ? `: ${url}` : '', "..."] })] }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             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(Plus, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to add repository' })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Plus, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to add repository' })] }, toolCallId));
             }
-            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(Plus, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "font-medium", children: "Repository added" }), _jsx("code", { className: "bg-background/50 truncate rounded px-1 font-mono text-[10px]", children: result.url }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), result.availableSkills && result.availableSkills.length > 0 && (_jsxs("div", { className: "text-muted-foreground px-2 pb-1 text-[10px]", children: [result.availableSkills.length, " skill", result.availableSkills.length !== 1 ? 's' : '', " available:", ' ', result.availableSkills.slice(0, 8).join(', '), result.availableSkills.length > 8 &&
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 min-w-0", children: [_jsxs("div", { className: "rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Plus, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "font-medium", children: "Repository added" }), _jsx("code", { className: "bg-background/50 rounded-control text-11 truncate px-1 font-mono", children: result.url }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), result.availableSkills && result.availableSkills.length > 0 && (_jsxs("div", { className: "text-muted-foreground text-11 px-2 pb-1", children: [result.availableSkills.length, " skill", result.availableSkills.length !== 1 ? 's' : '', " available:", ' ', result.availableSkills.slice(0, 8).join(', '), result.availableSkills.length > 8 &&
                                 ` +${result.availableSkills.length - 8} more`] }))] }, toolCallId));
         },
     },
@@ -642,26 +642,26 @@ export const DEFAULT_TOOL_HANDLERS = {
         loadingLabel: 'Updating skill selection...',
         marker: ThinkingTimelineMarker.Default,
         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(Sparkles, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Updating skill selection..." })] })),
+        renderLoading: () => (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Updating skill selection..." })] })),
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             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(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Update failed' })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Update failed' })] }, 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(Sparkles, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "font-medium", children: [result.repoName || 'Selection', " updated"] }), _jsxs("span", { children: ["Mode: ", _jsx("span", { className: "font-medium", children: result.mode })] }), result.skills && result.skills.length > 0 && (_jsxs("span", { className: "truncate", children: ["(", result.skills.length, " skill", result.skills.length !== 1 ? 's' : '', ")"] })), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "font-medium", children: [result.repoName || 'Selection', " updated"] }), _jsxs("span", { children: ["Mode: ", _jsx("span", { className: "font-medium", children: result.mode })] }), result.skills && result.skills.length > 0 && (_jsxs("span", { className: "truncate", children: ["(", result.skills.length, " skill", result.skills.length !== 1 ? 's' : '', ")"] })), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
         },
     },
     initSkillsConfig: {
         loadingLabel: 'Initializing skills config...',
         marker: ThinkingTimelineMarker.Default,
         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(BookOpen, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Initializing skills configuration..." })] })),
+        renderLoading: () => (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(BookOpen, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Initializing skills configuration..." })] })),
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             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(BookOpen, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Initialization failed' })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(BookOpen, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Initialization failed' })] }, toolCallId));
             }
-            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));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 min-w-0", children: [_jsxs("div", { className: "rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", 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 text-11 px-2 pb-1", children: ["Added: ", result.repositories.map((r) => r.name).join(', ')] }))] }, toolCallId));
         },
     },
     // ─────────────────────────────────────────────────────────────────────────────
@@ -673,18 +673,18 @@ export const DEFAULT_TOOL_HANDLERS = {
         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', "..."] })] }));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", 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));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", 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-destructive/10 text-destructive rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", 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));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control my-1 min-w-0", children: [_jsxs("div", { className: "text-ui-caption flex items-center gap-2 px-2 py-1.5", 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 text-11 flex flex-wrap gap-x-3 gap-y-0.5 border-t px-2 py-1", 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));
         },
     },
     // ─────────────────────────────────────────────────────────────────────────────
@@ -696,18 +696,18 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { 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(Info, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Getting info for ", appId || 'app', "..."] })] }));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Info, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Getting info for ", appId || 'app', "..."] })] }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             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(Info, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Getting app info..." })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Info, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Getting app info..." })] }, 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(Info, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to get app info' })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Info, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to get app info' })] }, toolCallId));
             }
             const workspaceCount = result.installedInWorkspaces?.length || 0;
-            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(Info, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "font-medium", children: result.appName || 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: [_jsxs("span", { children: ["Installed in ", workspaceCount, " workspace", workspaceCount !== 1 ? 's' : ''] }), result.hasWorkspaceData && (_jsx("span", { className: "text-amber-600", children: "has workspace data" }))] })] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control my-1 min-w-0", children: [_jsxs("div", { className: "text-ui-caption flex items-center gap-2 px-2 py-1.5", children: [_jsx(Info, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "font-medium", children: result.appName || result.appId }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), _jsxs("div", { className: "border-border/50 text-11 flex flex-wrap gap-x-3 gap-y-0.5 border-t px-2 py-1", children: [_jsxs("span", { children: ["Installed in ", workspaceCount, " workspace", workspaceCount !== 1 ? 's' : ''] }), result.hasWorkspaceData && (_jsx("span", { className: "text-amber-600", children: "has workspace data" }))] })] }, toolCallId));
         },
     },
     unregisterApp: {
@@ -716,21 +716,21 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { 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: ["Removing ", appId || 'app', " from workspace..."] })] }));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Package, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Removing ", appId || 'app', " from workspace..."] })] }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             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(Package, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Removing app from workspace..." })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Package, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Removing app from workspace..." })] }, 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 remove app' })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Package, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to remove app' })] }, 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(Package, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "font-medium", children: [result.appName || result.appId, " removed from workspace"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Package, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "font-medium", children: [result.appName || result.appId, " removed from workspace"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
         },
         renderApproval: (approval, onRespond) => {
             const { appId } = (approval.args ?? {});
-            return (_jsxs(ToolApproval, { state: "approval-requested", children: [_jsx(ToolApprovalHeader, { children: _jsxs(ToolApprovalRequest, { children: [_jsx("div", { className: "mb-1 text-xs font-medium", children: "Remove app from workspace" }), _jsxs("div", { className: "text-muted-foreground mb-2 text-[10px]", children: ["Remove ", _jsx("strong", { children: appId }), " from this workspace?"] }), _jsx("div", { className: "bg-muted/50 rounded px-2 py-1.5 text-[10px]", children: "The app's code and data will be preserved. You can add it back later from the app gallery." })] }) }), _jsxs(ToolApprovalActions, { children: [_jsx(ToolApprovalAction, { variant: "outline", onClick: () => onRespond({
+            return (_jsxs(ToolApproval, { state: "approval-requested", children: [_jsx(ToolApprovalHeader, { children: _jsxs(ToolApprovalRequest, { children: [_jsx("div", { className: "text-ui-caption mb-1 font-medium", children: "Remove app from workspace" }), _jsxs("div", { className: "text-muted-foreground text-11 mb-2", children: ["Remove ", _jsx("strong", { children: appId }), " from this workspace?"] }), _jsx("div", { className: "bg-muted/50 rounded-control text-11 px-2 py-1.5", children: "The app's code and data will be preserved. You can add it back later from the app gallery." })] }) }), _jsxs(ToolApprovalActions, { children: [_jsx(ToolApprovalAction, { variant: "outline", onClick: () => onRespond({
                                     approvalId: approval.approvalId,
                                     approved: false,
                                     reason: 'User cancelled',
@@ -746,21 +746,21 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { appId, workspaceId } = (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(Database, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Deleting data for ", appId || 'app', workspaceId ? ` in ${workspaceId}` : '', "..."] })] }));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Database, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Deleting data for ", appId || 'app', workspaceId ? ` in ${workspaceId}` : '', "..."] })] }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             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(Database, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Deleting app data..." })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Database, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Deleting app data..." })] }, toolCallId));
             }
             if (result.success === false) {
-                return (_jsxs("div", { className: "bg-destructive/10 text-destructive 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(Database, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to delete app data' })] }), (result.workspaceName || result.workspaceId) && (_jsxs("div", { className: "border-destructive/20 border-t px-2 py-1 text-[10px]", children: ["Workspace:", ' ', _jsx("span", { className: "font-medium", children: result.workspaceName || result.workspaceId }), result.workspaceName && result.workspaceId && (_jsxs("span", { className: "text-destructive/70", children: [' ', "(", result.workspaceId, ")"] }))] }))] }, toolCallId));
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control my-1 min-w-0", children: [_jsxs("div", { className: "text-ui-caption flex items-center gap-2 px-2 py-1.5", children: [_jsx(Database, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to delete app data' })] }), (result.workspaceName || result.workspaceId) && (_jsxs("div", { className: "border-destructive/20 text-11 border-t px-2 py-1", children: ["Workspace:", ' ', _jsx("span", { className: "font-medium", children: result.workspaceName || result.workspaceId }), result.workspaceName && result.workspaceId && (_jsxs("span", { className: "text-destructive/70", children: [' ', "(", result.workspaceId, ")"] }))] }))] }, 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(Database, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "font-medium", children: ["Data deleted for ", result.appId] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), (result.workspaceName || result.workspaceId) && (_jsxs("div", { className: "border-border/50 border-t px-2 py-1 text-[10px]", children: ["Workspace:", ' ', _jsx("span", { className: "font-medium", children: result.workspaceName || result.workspaceId }), result.workspaceName && result.workspaceId && (_jsxs("span", { className: "text-muted-foreground/70", children: [' ', "(", result.workspaceId, ")"] }))] }))] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control my-1 min-w-0", children: [_jsxs("div", { className: "text-ui-caption flex items-center gap-2 px-2 py-1.5", children: [_jsx(Database, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "font-medium", children: ["Data deleted for ", result.appId] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), (result.workspaceName || result.workspaceId) && (_jsxs("div", { className: "border-border/50 text-11 border-t px-2 py-1", children: ["Workspace:", ' ', _jsx("span", { className: "font-medium", children: result.workspaceName || result.workspaceId }), result.workspaceName && result.workspaceId && (_jsxs("span", { className: "text-muted-foreground/70", children: [' ', "(", result.workspaceId, ")"] }))] }))] }, toolCallId));
         },
         renderApproval: (approval, onRespond) => {
             const { appId, workspaceId } = (approval.args ?? {});
-            return (_jsxs(ToolApproval, { state: "approval-requested", children: [_jsx(ToolApprovalHeader, { children: _jsxs(ToolApprovalRequest, { children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-xs font-medium text-amber-600", children: [_jsx(AlertTriangle, { className: "size-3.5" }), "Delete app data"] }), _jsxs("div", { className: "text-muted-foreground mb-2 text-[10px]", children: ["Delete all data for ", _jsx("strong", { children: appId }), " in workspace ID", ' ', _jsx("strong", { children: workspaceId || 'unknown' }), "?"] }), _jsxs("div", { className: "bg-muted/50 mb-2 grid gap-1 rounded px-2 py-1.5 text-[10px]", children: [_jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "App" }), _jsx("code", { className: "bg-background/70 truncate rounded px-1 font-mono", children: appId || 'unknown' })] }), _jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Target workspace ID" }), _jsx("code", { className: "bg-background/70 truncate rounded px-1 font-mono", children: workspaceId || 'unknown' })] })] }), _jsx("div", { className: "rounded bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-700", children: "This permanently deletes this app's database, files, and cache only in the target workspace. The app will remain installed and start fresh there." })] }) }), _jsxs(ToolApprovalActions, { children: [_jsx(ToolApprovalAction, { variant: "outline", onClick: () => onRespond({
+            return (_jsxs(ToolApproval, { state: "approval-requested", children: [_jsx(ToolApprovalHeader, { children: _jsxs(ToolApprovalRequest, { children: [_jsxs("div", { className: "text-ui-caption mb-1 flex items-center gap-1.5 font-medium text-amber-600", children: [_jsx(AlertTriangle, { className: "size-3.5" }), "Delete app data"] }), _jsxs("div", { className: "text-muted-foreground text-11 mb-2", children: ["Delete all data for ", _jsx("strong", { children: appId }), " in workspace ID", ' ', _jsx("strong", { children: workspaceId || 'unknown' }), "?"] }), _jsxs("div", { className: "bg-muted/50 rounded-control text-11 mb-2 grid gap-1 px-2 py-1.5", children: [_jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "App" }), _jsx("code", { className: "bg-background/70 rounded-control truncate px-1 font-mono", children: appId || 'unknown' })] }), _jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Target workspace ID" }), _jsx("code", { className: "bg-background/70 rounded-control truncate px-1 font-mono", children: workspaceId || 'unknown' })] })] }), _jsx("div", { className: "rounded-control text-11 bg-amber-500/10 px-2 py-1.5 text-amber-700", children: "This permanently deletes this app's database, files, and cache only in the target workspace. The app will remain installed and start fresh there." })] }) }), _jsxs(ToolApprovalActions, { children: [_jsx(ToolApprovalAction, { variant: "outline", onClick: () => onRespond({
                                     approvalId: approval.approvalId,
                                     approved: false,
                                     reason: 'User cancelled',
@@ -776,22 +776,22 @@ export const DEFAULT_TOOL_HANDLERS = {
         inline: true,
         renderLoading: (args) => {
             const { 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(Trash2, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Deleting ", appId || 'app', " permanently..."] })] }));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Trash2, { className: "size-3.5 shrink-0 animate-pulse" }), _jsxs("span", { className: "truncate", children: ["Deleting ", appId || 'app', " permanently..."] })] }));
         },
         renderOutput: (output, toolCallId) => {
             const result = (output ?? {});
             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(Trash2, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Deleting app..." })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Trash2, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: "Deleting 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(Trash2, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to delete app' })] }, toolCallId));
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-ui-caption my-1 inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Trash2, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: result.error || 'Failed to delete app' })] }, toolCallId));
             }
             const affectedCount = result.workspacesAffected?.length || 0;
-            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(Trash2, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "font-medium", children: [result.appName || result.appId, " deleted permanently"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), affectedCount > 0 && (_jsxs("div", { className: "border-border/50 border-t px-2 py-1 text-[10px]", children: ["Removed from ", affectedCount, " workspace", affectedCount !== 1 ? 's' : ''] }))] }, toolCallId));
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control my-1 min-w-0", children: [_jsxs("div", { className: "text-ui-caption flex items-center gap-2 px-2 py-1.5", children: [_jsx(Trash2, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "font-medium", children: [result.appName || result.appId, " deleted permanently"] }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }), affectedCount > 0 && (_jsxs("div", { className: "border-border/50 text-11 border-t px-2 py-1", children: ["Removed from ", affectedCount, " workspace", affectedCount !== 1 ? 's' : ''] }))] }, toolCallId));
         },
         renderApproval: (approval, onRespond) => {
             const { appId } = (approval.args ?? {});
-            return (_jsxs(ToolApproval, { state: "approval-requested", children: [_jsx(ToolApprovalHeader, { children: _jsxs(ToolApprovalRequest, { children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-xs font-medium text-red-600", children: [_jsx(AlertTriangle, { className: "size-3.5" }), "Delete app permanently"] }), _jsxs("div", { className: "text-muted-foreground mb-2 text-[10px]", children: ["Permanently delete ", _jsx("strong", { children: appId }), " from Moldable?"] }), _jsxs("div", { className: "bg-destructive/10 text-destructive rounded px-2 py-1.5 text-[10px]", children: [_jsx("strong", { children: "This will:" }), _jsxs("ul", { className: "mt-1 list-inside list-disc space-y-0.5", children: [_jsx("li", { children: "Remove the app from ALL workspaces" }), _jsx("li", { children: "Delete all source code from shared/apps/" }), _jsx("li", { children: "Delete all workspace data" })] }), _jsx("p", { className: "mt-1.5 font-medium", children: "This action cannot be undone." })] }), _jsxs(ToolApprovalHelp, { className: "mt-2", children: ["To just hide this app from the current workspace (keeps code and data), ask to ", _jsx("strong", { children: "remove" }), " it instead. To clear the app's data but keep it installed, ask to", ' ', _jsx("strong", { children: "reset" }), " it."] })] }) }), _jsxs(ToolApprovalActions, { children: [_jsx(ToolApprovalAction, { variant: "outline", onClick: () => onRespond({
+            return (_jsxs(ToolApproval, { state: "approval-requested", children: [_jsx(ToolApprovalHeader, { children: _jsxs(ToolApprovalRequest, { children: [_jsxs("div", { className: "text-ui-caption mb-1 flex items-center gap-1.5 font-medium text-red-600", children: [_jsx(AlertTriangle, { className: "size-3.5" }), "Delete app permanently"] }), _jsxs("div", { className: "text-muted-foreground text-11 mb-2", children: ["Permanently delete ", _jsx("strong", { children: appId }), " from Moldable?"] }), _jsxs("div", { className: "bg-destructive/10 text-destructive rounded-control text-11 px-2 py-1.5", children: [_jsx("strong", { children: "This will:" }), _jsxs("ul", { className: "mt-1 list-inside list-disc space-y-0.5", children: [_jsx("li", { children: "Remove the app from ALL workspaces" }), _jsx("li", { children: "Delete all source code from shared/apps/" }), _jsx("li", { children: "Delete all workspace data" })] }), _jsx("p", { className: "mt-1.5 font-medium", children: "This action cannot be undone." })] }), _jsxs(ToolApprovalHelp, { className: "mt-2", children: ["To just hide this app from the current workspace (keeps code and data), ask to ", _jsx("strong", { children: "remove" }), " it instead. To clear the app's data but keep it installed, ask to", ' ', _jsx("strong", { children: "reset" }), " it."] })] }) }), _jsxs(ToolApprovalActions, { children: [_jsx(ToolApprovalAction, { variant: "outline", onClick: () => onRespond({
                                     approvalId: approval.approvalId,
                                     approved: false,
                                     reason: 'User cancelled',
@@ -806,7 +806,7 @@ export const DEFAULT_TOOL_HANDLERS = {
  * 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 })] }));
+    return (_jsxs("div", { className: "bg-muted text-muted-foreground rounded-control text-ui-caption inline-flex max-w-full items-center gap-2 px-2 py-1", children: [_jsx(Icon, { className: "size-3.5 shrink-0 animate-pulse" }), _jsx("span", { className: "truncate", children: children })] }));
 }
 /**
  * Get the handler for a tool
@@ -828,7 +828,7 @@ export function getToolHandler(toolName) {
                 : output
                     ? JSON.stringify(output, null, 2)
                     : 'No output';
-            return (_jsx("div", { className: "min-w-0 px-2 py-1", children: _jsxs("div", { className: "text-muted-foreground min-w-0 font-mono text-xs", children: [_jsxs("div", { className: "truncate font-semibold", children: [toolName, " completed"] }), _jsxs(CodeBlock, { maxHeight: 150, className: "mt-1", children: [outputContent.slice(0, 1000), outputContent.length > 1000 && '\n... (truncated)'] })] }) }, toolCallId));
+            return (_jsx("div", { className: "min-w-0 px-2 py-1", children: _jsxs("div", { className: "text-muted-foreground text-ui-caption min-w-0 font-mono", children: [_jsxs("div", { className: "truncate font-semibold", children: [toolName, " completed"] }), _jsxs(CodeBlock, { maxHeight: 150, className: "mt-1", children: [outputContent.slice(0, 1000), outputContent.length > 1000 && '\n... (truncated)'] })] }) }, toolCallId));
         },
     };
 }