dexto 1.3.0 → 1.5.0

package/dist/cli/ink-cli/components/base/BaseSelector.js

@@ -4,74 +4,115 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Reusable selector with keyboard navigation for lists
  * Used by ModelSelector and SessionSelector
  */
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { useState, useEffect, useRef, useMemo, useCallback, forwardRef, useImperativeHandle, } from 'react';
+import { Box, Text } from 'ink';
 /**
  * Generic selector component with keyboard navigation and scrolling
  */
-export function BaseSelector({ items, isVisible, isLoading = false, selectedIndex, onSelectIndex, onSelect, onClose, formatItem, title, maxVisibleItems = 10, loadingMessage = 'Loading...', emptyMessage = 'No items found', borderColor = 'cyan', }) {
-    const [scrollOffset, setScrollOffset] = useState(0);
+function BaseSelectorInner({ items, isVisible, isLoading = false, selectedIndex, onSelectIndex, onSelect, onClose, formatItem, title, maxVisibleItems = 8, loadingMessage = 'Loading...', emptyMessage = 'No items found', borderColor = 'cyan', onTab, supportsTab = false, }, ref) {
+    // Track scroll offset as state, but derive during render when needed
+    const [scrollOffsetState, setScrollOffset] = useState(0);
     const selectedIndexRef = useRef(selectedIndex);
-    // Wrapper to update both parent state and ref synchronously to prevent race conditions
+    const prevItemsLengthRef = useRef(items.length);
+    // Keep ref in sync
+    selectedIndexRef.current = selectedIndex;
+    // Derive the correct scroll offset during render (no second render needed)
+    // This handles both selectedIndex changes from parent AND items length changes
+    const scrollOffset = useMemo(() => {
+        const itemsChanged = items.length !== prevItemsLengthRef.current;
+        // Reset scroll if items changed significantly
+        if (itemsChanged && items.length <= maxVisibleItems) {
+            return 0;
+        }
+        let offset = scrollOffsetState;
+        // Adjust offset to keep selectedIndex visible
+        if (selectedIndex < offset) {
+            offset = selectedIndex;
+        }
+        else if (selectedIndex >= offset + maxVisibleItems) {
+            offset = Math.max(0, selectedIndex - maxVisibleItems + 1);
+        }
+        // Clamp to valid range
+        const maxOffset = Math.max(0, items.length - maxVisibleItems);
+        return Math.min(maxOffset, Math.max(0, offset));
+    }, [selectedIndex, items.length, maxVisibleItems, scrollOffsetState]);
+    // Update refs after render (not during useMemo which can run multiple times)
+    useEffect(() => {
+        prevItemsLengthRef.current = items.length;
+    }, [items.length]);
+    // Sync scroll offset state after render if it changed
+    // This ensures the stored state is correct for next navigation
+    useEffect(() => {
+        if (scrollOffset !== scrollOffsetState) {
+            setScrollOffset(scrollOffset);
+        }
+    }, [scrollOffset, scrollOffsetState]);
+    // Handle selection change - only updates parent state
     const handleSelectIndex = useCallback((newIndex) => {
         selectedIndexRef.current = newIndex;
         onSelectIndex(newIndex);
     }, [onSelectIndex]);
-    // Keep ref in sync with prop changes (e.g., when parent resets selection)
-    useEffect(() => {
-        selectedIndexRef.current = selectedIndex;
-    }, [selectedIndex]);
-    // Auto-scroll to keep selected item visible
-    useEffect(() => {
-        if (selectedIndex < scrollOffset) {
-            setScrollOffset(selectedIndex);
-        }
-        else if (selectedIndex >= scrollOffset + maxVisibleItems) {
-            setScrollOffset(Math.max(0, selectedIndex - maxVisibleItems + 1));
-        }
-    }, [selectedIndex, scrollOffset, maxVisibleItems]);
     // Calculate visible items
     const visibleItems = useMemo(() => {
         return items.slice(scrollOffset, scrollOffset + maxVisibleItems);
     }, [items, scrollOffset, maxVisibleItems]);
-    // Handle keyboard navigation
-    useInput((_inputChar, key) => {
-        if (!isVisible)
-            return;
-        const itemsLength = items.length;
-        if (itemsLength === 0)
-            return;
-        if (key.upArrow) {
-            const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
-            handleSelectIndex(nextIndex);
-        }
-        if (key.downArrow) {
-            const nextIndex = (selectedIndexRef.current + 1) % itemsLength;
-            handleSelectIndex(nextIndex);
-        }
-        if (key.escape) {
-            onClose();
-        }
-        if (key.return && itemsLength > 0) {
-            const item = items[selectedIndexRef.current];
-            if (item !== undefined) {
-                onSelect(item);
+    // Expose handleInput method via ref
+    useImperativeHandle(ref, () => ({
+        handleInput: (_input, key) => {
+            if (!isVisible)
+                return false;
+            // Escape always works, regardless of item count
+            if (key.escape) {
+                onClose();
+                return true;
             }
-        }
-    }, { isActive: isVisible });
+            const itemsLength = items.length;
+            if (itemsLength === 0)
+                return false;
+            if (key.upArrow) {
+                const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
+                handleSelectIndex(nextIndex);
+                return true;
+            }
+            if (key.downArrow) {
+                const nextIndex = (selectedIndexRef.current + 1) % itemsLength;
+                handleSelectIndex(nextIndex);
+                return true;
+            }
+            if (key.tab && onTab) {
+                const item = items[selectedIndexRef.current];
+                if (item !== undefined) {
+                    onTab(item);
+                    return true;
+                }
+            }
+            if (key.return && itemsLength > 0) {
+                const item = items[selectedIndexRef.current];
+                if (item !== undefined) {
+                    onSelect(item);
+                    return true;
+                }
+            }
+            return false;
+        },
+    }), [isVisible, items, handleSelectIndex, onClose, onSelect, onTab]);
     if (!isVisible)
         return null;
     if (isLoading) {
-        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: loadingMessage }) }));
+        return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: loadingMessage }) }));
     }
     if (items.length === 0) {
-        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: emptyMessage }) }));
+        return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: emptyMessage }) }));
     }
-    const hasMoreAbove = scrollOffset > 0;
-    const hasMoreBelow = scrollOffset + maxVisibleItems < items.length;
-    return (_jsxs(Box, { borderStyle: "single", borderColor: borderColor, flexDirection: "column", height: Math.min(maxVisibleItems + 3, items.length + 3), children: [_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: [title, " (", selectedIndex + 1, "/", items.length, ") - \u2191\u2193 to navigate, Enter to select, Esc to close"] }) }), hasMoreAbove && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2191 (", scrollOffset, " more above)"] }) })), visibleItems.map((item, visibleIndex) => {
+    // Build instruction text based on features
+    const instructions = supportsTab
+        ? '↑↓ navigate, Tab load, Enter select, Esc close'
+        : '↑↓ navigate, Enter select, Esc close';
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Text, { color: borderColor, bold: true, children: [title, " (", selectedIndex + 1, "/", items.length, ") - ", instructions] }) }), visibleItems.map((item, visibleIndex) => {
                 const actualIndex = scrollOffset + visibleIndex;
                 const isSelected = actualIndex === selectedIndex;
-                return (_jsx(Box, { paddingX: 1, paddingY: 0, backgroundColor: isSelected ? 'yellow' : undefined, children: formatItem(item, isSelected) }, actualIndex));
-            }), hasMoreBelow && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2193 (", items.length - scrollOffset - maxVisibleItems, " more below)"] }) }))] }));
+                return (_jsx(Box, { paddingX: 0, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex));
+            })] }));
 }
+// Export with proper generic type support
+export const BaseSelector = forwardRef(BaseSelectorInner);

package/dist/cli/ink-cli/components/chat/Footer.js

@@ -4,5 +4,5 @@ import { Box, Text } from 'ink';
  * Pure presentational component for CLI footer
  */
 export function Footer() {
-    return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Shift+Enter/Ctrl+J: newline \u2022 Ctrl+W: del word \u2022 Ctrl+U: del line \u2022 Ctrl+C: exit" }) }));
+    return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsx(Text, { color: "gray", children: "Shift+Enter/Ctrl+J: newline \u2022 Ctrl+W: del word \u2022 Ctrl+U: del line \u2022 Ctrl+C: exit" }) }));
 }

package/dist/cli/ink-cli/components/chat/Header.d.ts

@@ -11,6 +11,7 @@ interface HeaderProps {
 }
 /**
  * Pure presentational component for CLI header
+ * Automatically adjusts width to terminal size
  */
 export declare function Header({ modelName, sessionId, hasActiveSession, startupInfo }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cli/ink-cli/components/chat/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,UAAU,WAAW;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,EAAE,WAAW,2CAiE1F"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,UAAU,WAAW;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,EAAE,WAAW,2CAgE1F"}

package/dist/cli/ink-cli/components/chat/Header.js

@@ -1,13 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
 /**
  * Pure presentational component for CLI header
+ * Automatically adjusts width to terminal size
  */
 export function Header({ modelName, sessionId, hasActiveSession, startupInfo }) {
-    return (_jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, flexDirection: "column", children: [_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "greenBright", children: `██████╗ ███████╗██╗  ██╗████████╗ ██████╗
+    const { columns } = useTerminalSize();
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, flexDirection: "column", flexShrink: 0, width: columns, children: [_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "greenBright", children: `██████╗ ███████╗██╗  ██╗████████╗ ██████╗
 ██╔══██╗██╔════╝╚██╗██╔╝╚══██╔══╝██╔═══██╗
 ██║  ██║█████╗   ╚███╔╝    ██║   ██║   ██║
 ██║  ██║██╔══╝   ██╔██╗    ██║   ██║   ██║
 ██████╔╝███████╗██╔╝ ██╗   ██║   ╚██████╔╝
-╚═════╝ ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚═════╝` }) }), _jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsxs(Text, { color: "gray", dimColor: true, children: ["Model:", ' '] }), _jsx(Text, { color: "white", children: modelName }), hasActiveSession && sessionId && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 Session:", ' '] }), _jsx(Text, { color: "white", children: sessionId.slice(0, 8) })] }))] }), _jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: "gray", dimColor: true, children: ["Servers:", ' '] }), _jsx(Text, { color: "white", children: startupInfo.connectedServers.count }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 Tools:", ' '] }), _jsx(Text, { color: "white", children: startupInfo.toolCount })] }), startupInfo.failedConnections.length > 0 && (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: "yellow", children: ["\u26A0\uFE0F Failed: ", startupInfo.failedConnections.join(', ')] }) })), _jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: "gray", dimColor: true, children: ["Logs: ", startupInfo.logFile] }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: " " }) })] }));
+╚═════╝ ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚═════╝` }) }), _jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsx(Text, { color: "gray", children: "Model: " }), _jsx(Text, { color: "white", children: modelName }), hasActiveSession && sessionId && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: " \u2022 Session: " }), _jsx(Text, { color: "white", children: sessionId.slice(0, 8) })] }))] }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "gray", children: "Servers: " }), _jsx(Text, { color: "white", children: startupInfo.connectedServers.count }), _jsx(Text, { color: "gray", children: " \u2022 Tools: " }), _jsx(Text, { color: "white", children: startupInfo.toolCount })] }), startupInfo.failedConnections.length > 0 && (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: "yellowBright", children: ["\u26A0\uFE0F Failed: ", startupInfo.failedConnections.join(', ')] }) })), startupInfo.logFile && (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: "gray", children: ["Logs: ", startupInfo.logFile] }) })), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: " " }) })] }));
 }

package/dist/cli/ink-cli/components/chat/MessageItem.d.ts

@@ -10,6 +10,9 @@ interface MessageItemProps {
 /**
  * Pure presentational component for a single message
  * Visual hierarchy through colors and spacing only (no borders for easy text copying)
+ *
+ * Memoization with custom comparator prevents re-renders when message array changes
+ * but individual message content hasn't changed.
  */
 export declare const MessageItem: import("react").MemoExoticComponent<({ message }: MessageItemProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/cli/ink-cli/components/chat/MessageItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/MessageItem.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,UAAU,gBAAgB;IACtB,OAAO,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,oDAAsB,gBAAgB,6CAiE5D,CAAC"}
+{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/MessageItem.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EACR,OAAO,EAUV,MAAM,sBAAsB,CAAC;AAuC9B,UAAU,gBAAgB;IACtB,OAAO,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,oDACN,gBAAgB,6CAwJjC,CAAC"}

package/dist/cli/ink-cli/components/chat/MessageItem.js

@@ -6,27 +6,113 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { memo } from 'react';
 import { Box, Text } from 'ink';
+import { ConfigBox, StatsBox, HelpBox, SessionListBox, SessionHistoryBox, LogConfigBox, ShortcutsBox, SyspromptBox, } from './styled-boxes/index.js';
+import { ToolResultRenderer } from '../renderers/index.js';
+import { MarkdownText } from '../shared/MarkdownText.js';
 import { ToolIcon } from './ToolIcon.js';
+/**
+ * Format milliseconds into a compact human-readable string
+ * Examples: "1.2s", "1m 23s", "1h 2m"
+ */
+function formatDuration(ms) {
+    const seconds = Math.floor(ms / 1000);
+    const tenths = Math.floor((ms % 1000) / 100);
+    if (seconds < 60) {
+        return `${seconds}.${tenths}s`;
+    }
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    if (minutes < 60) {
+        return `${minutes}m ${remainingSeconds}s`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    return `${hours}h ${remainingMinutes}m`;
+}
 /**
  * Pure presentational component for a single message
  * Visual hierarchy through colors and spacing only (no borders for easy text copying)
+ *
+ * Memoization with custom comparator prevents re-renders when message array changes
+ * but individual message content hasn't changed.
  */
 export const MessageItem = memo(({ message }) => {
-    // User message: Simple '>' with dim background for easy scanning
+    // Check for styled message first
+    if (message.styledType && message.styledData) {
+        switch (message.styledType) {
+            case 'config':
+                return _jsx(ConfigBox, { data: message.styledData });
+            case 'stats':
+                return _jsx(StatsBox, { data: message.styledData });
+            case 'help':
+                return _jsx(HelpBox, { data: message.styledData });
+            case 'session-list':
+                return _jsx(SessionListBox, { data: message.styledData });
+            case 'session-history':
+                return (_jsx(SessionHistoryBox, { data: message.styledData }));
+            case 'log-config':
+                return _jsx(LogConfigBox, { data: message.styledData });
+            case 'run-summary': {
+                const data = message.styledData;
+                const durationStr = formatDuration(data.durationMs);
+                const tokensStr = data.outputTokens > 0 ? `, Used ${data.outputTokens} tokens` : '';
+                return (_jsx(Box, { marginTop: 1, marginBottom: 1, width: "100%", children: _jsxs(Text, { color: "gray", children: ["\u2500 Worked for ", durationStr, tokensStr, " \u2500"] }) }));
+            }
+            case 'shortcuts':
+                return _jsx(ShortcutsBox, { data: message.styledData });
+            case 'sysprompt':
+                return _jsx(SyspromptBox, { data: message.styledData });
+        }
+    }
+    // User message: '>' prefix with gray background
     if (message.role === 'user') {
-        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { flexDirection: "row", paddingX: 1, backgroundColor: "gray", children: [_jsx(Text, { color: "green", dimColor: true, children: '> ' }), _jsx(Text, { color: "white", children: message.content })] }), _jsx(Text, { children: '' })] }));
+        return (_jsx(Box, { flexDirection: "column", marginTop: 2, marginBottom: 1, width: "100%", children: _jsxs(Box, { flexDirection: "row", paddingX: 1, backgroundColor: "gray", children: [_jsx(Text, { color: "green", children: '> ' }), _jsx(Text, { color: "white", wrap: "wrap", children: message.content })] }) }));
     }
-    // Assistant message: Cyan accent bar with white text
+    // Assistant message: Gray circle indicator (unless continuation)
+    // IMPORTANT: width="100%" is required to prevent Ink layout failures on large content.
+    // Without width constraints, streaming content causes terminal blackout at ~50+ lines.
+    // marginTop={1} for consistent spacing with tool messages
     if (message.role === 'assistant') {
-        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: "cyan", bold: true, children: ["\u258D", ' '] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Text, { color: "white", children: message.content || ' ' }) })] }), _jsx(Text, { children: '' })] }));
+        // Continuation messages: no indicator, just content
+        if (message.isContinuation) {
+            return (_jsx(Box, { flexDirection: "column", width: "100%", children: _jsx(MarkdownText, { children: message.content || '' }) }));
+        }
+        // Regular assistant message: bullet prefix inline with first line
+        // Text wraps at terminal width - wrapped lines may start at column 0
+        // This is simpler and avoids mid-word splitting issues with Ink's wrap
+        return (_jsx(Box, { flexDirection: "column", marginTop: 1, width: "100%", children: _jsx(MarkdownText, { bulletPrefix: "\u23FA ", children: message.content || '' }) }));
     }
-    // Tool message: Animated icon with status-based colors
+    // Tool message: Animated icon based on status
+    // - Running: green spinner + "Running..."
+    // - Finished (success): green dot
+    // - Finished (error): red dot
     if (message.role === 'tool') {
-        const toolStatus = message.toolStatus || 'running';
-        const textColor = toolStatus === 'finished' ? 'green' : 'magentaBright';
-        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(ToolIcon, { status: toolStatus }), _jsx(Text, { color: textColor, children: message.content })] }), message.toolResult && (_jsx(Box, { marginLeft: 2, marginTop: 0, flexDirection: "column", children: _jsx(Text, { color: "gray", dimColor: true, children: message.toolResult }) })), _jsx(Text, { children: '' })] }));
+        // Use structured renderers if display data is available
+        const hasStructuredDisplay = message.toolDisplayData && message.toolContent;
+        const isRunning = message.toolStatus === 'running';
+        const isPending = message.toolStatus === 'pending' || message.toolStatus === 'pending_approval';
+        // Parse tool name and args for bold formatting: "ToolName(args)" → bold name + normal args
+        const parenIndex = message.content.indexOf('(');
+        const toolName = parenIndex > 0 ? message.content.slice(0, parenIndex) : message.content;
+        const toolArgs = parenIndex > 0 ? message.content.slice(parenIndex) : '';
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, width: "100%", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(ToolIcon, { status: message.toolStatus || 'finished', isError: message.isError ?? false }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { bold: true, children: toolName }), _jsx(Text, { children: toolArgs }), isRunning && _jsx(Text, { color: "green", children: " Running..." }), isPending && _jsx(Text, { color: "yellowBright", children: " Waiting..." })] }) })] }), hasStructuredDisplay ? (_jsx(ToolResultRenderer, { display: message.toolDisplayData, content: message.toolContent })) : (message.toolResult && (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { color: "gray", children: [" \u23BF ", message.toolResult] }) })))] }));
     }
     // System message: Compact gray text
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: "gray", dimColor: true, children: message.content }), _jsx(Text, { children: '' })] }));
+    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, width: "100%", children: _jsx(Text, { color: "gray", children: message.content }) }));
+}, 
+// Custom comparator: only re-render if message content actually changed
+(prev, next) => {
+    return (prev.message.id === next.message.id &&
+        prev.message.content === next.message.content &&
+        prev.message.role === next.message.role &&
+        prev.message.toolStatus === next.message.toolStatus &&
+        prev.message.toolResult === next.message.toolResult &&
+        prev.message.isStreaming === next.message.isStreaming &&
+        prev.message.styledType === next.message.styledType &&
+        prev.message.styledData === next.message.styledData &&
+        prev.message.isContinuation === next.message.isContinuation &&
+        prev.message.isError === next.message.isError &&
+        prev.message.toolDisplayData === next.message.toolDisplayData &&
+        prev.message.toolContent === next.message.toolContent);
 });
 MessageItem.displayName = 'MessageItem';

package/dist/cli/ink-cli/components/chat/MessageList.js

@@ -16,5 +16,5 @@ export function MessageList({ messages, maxVisible = 50 }) {
         return messages.slice(-maxVisible);
     }, [messages, maxVisible]);
     const hasMoreMessages = messages.length > maxVisible;
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, paddingY: 1, children: [hasMoreMessages && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["... (", messages.length - maxVisible, " earlier messages hidden)"] }) })), visibleMessages.length === 0 && (_jsx(Box, { marginY: 2, children: _jsx(Text, { dimColor: true, children: "Welcome to Dexto CLI! Type your message below or use /help for commands." }) })), visibleMessages.map((msg) => (_jsx(MessageItem, { message: msg }, msg.id)))] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, paddingY: 1, children: [hasMoreMessages && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "gray", children: ["... (", messages.length - maxVisible, " earlier messages hidden)"] }) })), visibleMessages.length === 0 && (_jsx(Box, { marginY: 2, children: _jsx(Text, { color: "greenBright", children: "Welcome to Dexto CLI! Type your message below or use /help for commands." }) })), visibleMessages.map((msg) => (_jsx(MessageItem, { message: msg }, msg.id)))] }));
 }

package/dist/cli/ink-cli/components/chat/QueuedMessagesDisplay.d.ts

@@ -0,0 +1,16 @@
+/**
+ * QueuedMessagesDisplay - Shows queued messages waiting to be processed
+ *
+ * Similar to webui's QueuedMessagesDisplay.tsx but for Ink/terminal.
+ * Shows:
+ * - Count of queued messages
+ * - Keyboard hint (↑ to edit)
+ * - Truncated preview of each queued message
+ */
+import type { QueuedMessage } from '@dexto/core';
+interface QueuedMessagesDisplayProps {
+    messages: QueuedMessage[];
+}
+export declare function QueuedMessagesDisplay({ messages }: QueuedMessagesDisplayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=QueuedMessagesDisplay.d.ts.map

package/dist/cli/ink-cli/components/chat/QueuedMessagesDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueuedMessagesDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/QueuedMessagesDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAe,MAAM,aAAa,CAAC;AAE9D,UAAU,0BAA0B;IAChC,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC7B;AAwBD,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE,0BAA0B,kDA2B7E"}

package/dist/cli/ink-cli/components/chat/QueuedMessagesDisplay.js

@@ -0,0 +1,27 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/**
+ * Extract text content from ContentPart[]
+ */
+function getMessageText(content) {
+    const textParts = content
+        .filter((part) => part.type === 'text')
+        .map((part) => part.text);
+    return textParts.join(' ') || '[attachment]';
+}
+/**
+ * Truncate text to fit terminal width
+ */
+function truncateText(text, maxLength = 60) {
+    // Replace newlines with spaces for single-line display
+    const singleLine = text.replace(/\n/g, ' ').trim();
+    if (singleLine.length <= maxLength) {
+        return singleLine;
+    }
+    return singleLine.slice(0, maxLength - 3) + '...';
+}
+export function QueuedMessagesDisplay({ messages }) {
+    if (messages.length === 0)
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [messages.length, " message", messages.length !== 1 ? 's' : '', " queued"] }), _jsx(Text, { color: "gray", children: " \u2022 " }), _jsx(Text, { color: "gray", children: "\u2191 to edit" })] }), messages.map((message, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "gray", children: index === messages.length - 1 ? '↳ ' : '│ ' }), _jsx(Text, { color: "gray", italic: true, children: truncateText(getMessageText(message.content)) })] }, message.id)))] }));
+}

package/dist/cli/ink-cli/components/chat/ToolIcon.d.ts

@@ -5,12 +5,14 @@
 import type { ToolStatus } from '../../state/types.js';
 interface ToolIconProps {
     status: ToolStatus;
+    isError?: boolean;
 }
 /**
  * Animated tool icon that changes based on execution status
- * - Running: Animated spinner (magenta)
- * - Finished: Checkmark (green)
+ * - Running: Animated spinner (green/teal)
+ * - Finished (success): Green dot
+ * - Finished (error): Red dot
  */
-export declare function ToolIcon({ status }: ToolIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolIcon({ status, isError }: ToolIconProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ToolIcon.d.ts.map

package/dist/cli/ink-cli/components/chat/ToolIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolIcon.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/ToolIcon.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,UAAU,aAAa;IACnB,MAAM,EAAE,UAAU,CAAC;CACtB;AAKD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,aAAa,2CA8BjD"}
+{"version":3,"file":"ToolIcon.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/ToolIcon.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,UAAU,aAAa;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAKD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,aAAa,2CAqD1D"}

package/dist/cli/ink-cli/components/chat/ToolIcon.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ToolIcon Component
  * Animated icon for tool calls with status-based visual feedback
@@ -9,12 +9,13 @@ import { Text } from 'ink';
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 /**
  * Animated tool icon that changes based on execution status
- * - Running: Animated spinner (magenta)
- * - Finished: Checkmark (green)
+ * - Running: Animated spinner (green/teal)
+ * - Finished (success): Green dot
+ * - Finished (error): Red dot
  */
-export function ToolIcon({ status }) {
+export function ToolIcon({ status, isError }) {
     const [frame, setFrame] = useState(0);
-    // Animate spinner when running
+    // Animate spinner only when actually running (not during approval)
     useEffect(() => {
         if (status !== 'running') {
             return;
@@ -24,9 +25,22 @@ export function ToolIcon({ status }) {
         }, 80); // 80ms per frame for smooth animation
         return () => clearInterval(interval);
     }, [status]);
+    // Pending: static gray dot (tool call received, checking approval)
+    if (status === 'pending') {
+        return _jsx(Text, { color: "gray", children: "\u25CF " });
+    }
+    // Pending approval: static yellowBright dot (waiting for user)
+    if (status === 'pending_approval') {
+        return (_jsxs(Text, { color: "yellowBright", bold: true, children: ["\u25CF", ' '] }));
+    }
     if (status === 'finished') {
-        return (_jsxs(Text, { color: "green", bold: true, children: ["\u2713", ' '] }));
+        // Error state: red dot
+        if (isError) {
+            return (_jsxs(Text, { color: "red", bold: true, children: ["\u25CF", ' '] }));
+        }
+        // Success state: green dot
+        return (_jsxs(Text, { color: "green", bold: true, children: ["\u25CF", ' '] }));
     }
     // Running state with spinner
-    return (_jsxs(Text, { color: "magenta", bold: true, children: [SPINNER_FRAMES[frame], ' '] }));
+    return (_jsxs(Text, { color: "green", bold: true, children: [SPINNER_FRAMES[frame], ' '] }));
 }

package/dist/cli/ink-cli/components/chat/styled-boxes/ConfigBox.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ConfigBox - Styled output for /config command
+ */
+import type { ConfigStyledData } from '../../../state/types.js';
+interface ConfigBoxProps {
+    data: ConfigStyledData;
+}
+export declare function ConfigBox({ data }: ConfigBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConfigBox.d.ts.map

package/dist/cli/ink-cli/components/chat/styled-boxes/ConfigBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigBox.d.ts","sourceRoot":"","sources":["../../../../../../src/cli/ink-cli/components/chat/styled-boxes/ConfigBox.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,UAAU,cAAc;IACpB,IAAI,EAAE,gBAAgB,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE,cAAc,2CAmEjD"}

package/dist/cli/ink-cli/components/chat/styled-boxes/ConfigBox.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { StyledBox, StyledSection, StyledRow } from './StyledBox.js';
+export function ConfigBox({ data }) {
+    return (_jsxs(StyledBox, { title: "Runtime Configuration", titleColor: "cyan", children: [data.configFilePath && (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Agent config: " }), _jsx(Text, { color: "blue", children: data.configFilePath })] })), _jsxs(StyledSection, { title: "LLM", children: [_jsx(StyledRow, { label: "Provider", value: data.provider }), _jsx(StyledRow, { label: "Model", value: data.model }), data.maxTokens !== null && (_jsx(StyledRow, { label: "Max Tokens", value: data.maxTokens.toString() })), data.temperature !== null && (_jsx(StyledRow, { label: "Temperature", value: data.temperature.toString() }))] }), _jsx(StyledSection, { title: "Tool Confirmation", children: _jsx(StyledRow, { label: "Mode", value: data.toolConfirmationMode }) }), _jsxs(StyledSection, { title: "Sessions", children: [_jsx(StyledRow, { label: "Max Sessions", value: data.maxSessions }), _jsx(StyledRow, { label: "Session TTL", value: data.sessionTTL })] }), _jsx(StyledSection, { title: "MCP Servers", children: data.mcpServers.length > 0 ? (data.mcpServers.map((server) => (_jsx(Box, { children: _jsx(Text, { color: "cyan", children: server }) }, server)))) : (_jsx(Text, { color: "gray", children: "No MCP servers configured" })) }), data.promptsCount > 0 && (_jsx(StyledSection, { title: "Prompts", children: _jsxs(Text, { color: "gray", children: [data.promptsCount, " prompt(s) configured"] }) })), data.pluginsEnabled.length > 0 && (_jsx(StyledSection, { title: "Plugins", children: data.pluginsEnabled.map((plugin) => (_jsx(Box, { children: _jsx(Text, { color: "green", children: plugin }) }, plugin))) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", italic: true, children: "Note: Some fields (logs, database paths) are auto-populated by the CLI." }) })] }));
+}

package/dist/cli/ink-cli/components/chat/styled-boxes/HelpBox.d.ts

@@ -0,0 +1,10 @@
+/**
+ * HelpBox - Styled output for /help command
+ */
+import type { HelpStyledData } from '../../../state/types.js';
+interface HelpBoxProps {
+    data: HelpStyledData;
+}
+export declare function HelpBox({ data }: HelpBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HelpBox.d.ts.map

package/dist/cli/ink-cli/components/chat/styled-boxes/HelpBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpBox.d.ts","sourceRoot":"","sources":["../../../../../../src/cli/ink-cli/components/chat/styled-boxes/HelpBox.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,UAAU,YAAY;IAClB,IAAI,EAAE,cAAc,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,YAAY,2CAiC7C"}

package/dist/cli/ink-cli/components/chat/styled-boxes/HelpBox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { StyledBox } from './StyledBox.js';
+export function HelpBox({ data }) {
+    // Group commands by category
+    const categories = data.commands.reduce((acc, cmd) => {
+        const cat = cmd.category || 'Other';
+        if (!acc[cat]) {
+            acc[cat] = [];
+        }
+        acc[cat].push(cmd);
+        return acc;
+    }, {});
+    return (_jsx(StyledBox, { title: "Available Commands", children: Object.entries(categories).map(([category, commands]) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, color: "gray", children: category }), commands.map((cmd) => (_jsxs(Box, { marginLeft: 2, children: [_jsx(Box, { width: 16, children: _jsxs(Text, { color: "cyan", children: ["/", cmd.name] }) }), _jsx(Text, { color: "gray", children: cmd.description })] }, cmd.name)))] }, category))) }));
+}

package/dist/cli/ink-cli/components/chat/styled-boxes/LogConfigBox.d.ts

@@ -0,0 +1,10 @@
+/**
+ * LogConfigBox - Styled output for /log command (no args)
+ */
+import type { LogConfigStyledData } from '../../../state/types.js';
+interface LogConfigBoxProps {
+    data: LogConfigStyledData;
+}
+export declare function LogConfigBox({ data }: LogConfigBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LogConfigBox.d.ts.map

package/dist/cli/ink-cli/components/chat/styled-boxes/LogConfigBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogConfigBox.d.ts","sourceRoot":"","sources":["../../../../../../src/cli/ink-cli/components/chat/styled-boxes/LogConfigBox.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAGnE,UAAU,iBAAiB;IACvB,IAAI,EAAE,mBAAmB,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CA4BvD"}

package/dist/cli/ink-cli/components/chat/styled-boxes/LogConfigBox.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { StyledBox, StyledRow, StyledListItem } from './StyledBox.js';
+export function LogConfigBox({ data }) {
+    return (_jsxs(StyledBox, { title: "Logging Configuration", children: [_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(StyledRow, { label: "Current level", value: data.currentLevel, valueColor: "green" }), data.logFile && _jsx(StyledRow, { label: "Log file", value: data.logFile })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "Available levels (least to most verbose):" }), data.availableLevels.map((level) => {
+                        const isCurrent = level === data.currentLevel;
+                        return (_jsx(StyledListItem, { icon: isCurrent ? '>' : ' ', text: level, isActive: isCurrent }, level));
+                    })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Use /log <level> to change level" }) })] }));
+}

package/dist/cli/ink-cli/components/chat/styled-boxes/SessionHistoryBox.d.ts

@@ -0,0 +1,10 @@
+/**
+ * SessionHistoryBox - Styled output for /session history command
+ */
+import type { SessionHistoryStyledData } from '../../../state/types.js';
+interface SessionHistoryBoxProps {
+    data: SessionHistoryStyledData;
+}
+export declare function SessionHistoryBox({ data }: SessionHistoryBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SessionHistoryBox.d.ts.map

package/dist/cli/ink-cli/components/chat/styled-boxes/SessionHistoryBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionHistoryBox.d.ts","sourceRoot":"","sources":["../../../../../../src/cli/ink-cli/components/chat/styled-boxes/SessionHistoryBox.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAGxE,UAAU,sBAAsB;IAC5B,IAAI,EAAE,wBAAwB,CAAC;CAClC;AA4BD,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE,sBAAsB,2CAmCjE"}