dexto 1.6.0 → 1.6.1

package/dist/cli/ink-cli/components/ResourceAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/ResourceAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,WAAW,0BAA0B;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,yBAAyB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AAsFD;;GAEG;AACH,QAAA,MAAM,yBAAyB,8GA6W9B,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,oBAAoB,EAErB,OAAO,yBAAyB,CAAC;AAEtC,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ResourceAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/ResourceAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C,MAAM,WAAW,0BAA0B;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,yBAAyB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AAsFD;;GAEG;AACH,QAAA,MAAM,yBAAyB,8GA4X9B,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,oBAAoB,EAErB,OAAO,yBAAyB,CAAC;AAEtC,eAAe,oBAAoB,CAAC"}

package/dist/cli/ink-cli/components/ResourceAutocomplete.js

@@ -3,6 +3,8 @@ import React, { useState, useEffect, useRef, useMemo, useCallback, forwardRef, u
 import { Box, Text } from 'ink';
 import path from 'path';
 import { centerTruncatePath } from '../utils/messageFormatting.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { getMaxVisibleItemsForTerminalRows } from '../utils/overlaySizing.js';
 /**
  * Get match score for resource: 0 = no match, 1 = description/URI match, 2 = name includes, 3 = name starts with
  * Prioritizes name matches over description/URI matches
@@ -73,10 +75,17 @@ function sortResources(resources, query) {
 const ResourceAutocompleteInner = forwardRef(function ResourceAutocomplete({ isVisible, searchQuery, onSelectResource, onLoadIntoInput, onClose, agent }, ref) {
     const [resources, setResources] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const { columns: terminalWidth, rows: terminalRows } = useTerminalSize();
+    const maxVisibleItems = useMemo(() => {
+        return getMaxVisibleItemsForTerminalRows({
+            rows: terminalRows,
+            hardCap: 15,
+            reservedRows: 6,
+        });
+    }, [terminalRows]);
     // Combined state to guarantee single render on navigation
     const [selection, setSelection] = useState({ index: 0, offset: 0 });
     const selectedIndexRef = useRef(0);
-    const MAX_VISIBLE_ITEMS = 5;
     // Update selection AND scroll offset in a single state update
     // This guarantees exactly one render per navigation action
     const updateSelection = useCallback((indexUpdater) => {
@@ -90,12 +99,12 @@ const ResourceAutocompleteInner = forwardRef(function ResourceAutocomplete({ isV
             if (newIndex < prev.offset) {
                 newOffset = newIndex;
             }
-            else if (newIndex >= prev.offset + MAX_VISIBLE_ITEMS) {
-                newOffset = Math.max(0, newIndex - MAX_VISIBLE_ITEMS + 1);
+            else if (newIndex >= prev.offset + maxVisibleItems) {
+                newOffset = Math.max(0, newIndex - maxVisibleItems + 1);
             }
             return { index: newIndex, offset: newOffset };
         });
-    }, [MAX_VISIBLE_ITEMS]);
+    }, [maxVisibleItems]);
     // Fetch resources from agent
     useEffect(() => {
         if (!isVisible)
@@ -256,7 +265,7 @@ const ResourceAutocompleteInner = forwardRef(function ResourceAutocomplete({ isV
         : Math.min(selection.index, Math.max(0, displayItems.length - 1));
     const scrollOffset = itemsChanged
         ? 0
-        : Math.min(selection.offset, Math.max(0, displayItems.length - MAX_VISIBLE_ITEMS));
+        : Math.min(selection.offset, Math.max(0, displayItems.length - maxVisibleItems));
     // Sync state only when items actually changed AND state differs
     // This effect runs AFTER render, updating state for next user interaction
     useEffect(() => {
@@ -274,8 +283,8 @@ const ResourceAutocompleteInner = forwardRef(function ResourceAutocomplete({ isV
     }, [itemsChanged, displayItems.length, selection.index, selection.offset]);
     // Calculate visible items based on scroll offset
     const visibleResources = useMemo(() => {
-        return displayItems.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS);
-    }, [displayItems, scrollOffset, MAX_VISIBLE_ITEMS]);
+        return displayItems.slice(scrollOffset, scrollOffset + maxVisibleItems);
+    }, [displayItems, scrollOffset, maxVisibleItems]);
     // Expose handleInput method via ref
     useImperativeHandle(ref, () => ({
         handleInput: (_input, key) => {
@@ -358,14 +367,14 @@ const ResourceAutocompleteInner = forwardRef(function ResourceAutocomplete({ isV
                     ? `No resources match "${mentionQuery}"`
                     : 'No resources available. Connect an MCP server or enable internal resources.' }) }));
     }
-    return (_jsx(Box, { flexDirection: "column", paddingLeft: 2, children: visibleResources.map((item, visibleIndex) => {
+    return (_jsx(Box, { flexDirection: "column", width: terminalWidth, paddingLeft: 2, children: visibleResources.map((item, visibleIndex) => {
             const actualIndex = scrollOffset + visibleIndex;
             const isSelected = actualIndex === selectedIndex;
-            // Use center truncation for long paths
-            const displayPath = centerTruncatePath(item.path, 60);
+            // Use center truncation for long paths (and still force truncate to prevent wrapping)
+            const displayPath = centerTruncatePath(item.path, Math.max(20, terminalWidth - 16));
             // Check if it's an image file
             const isImage = item.resource?.mimeType?.startsWith('image/');
-            return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : 'gray', children: isSelected ? '❯ ' : '  ' }), _jsxs(Text, { color: isSelected ? 'cyan' : 'white', bold: isSelected, children: [isImage && '🖼️  ', displayPath, item.resource?.serverName && ` [${item.resource.serverName}]`] })] }, item.path));
+            return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : 'gray', children: isSelected ? '❯ ' : '  ' }), _jsxs(Text, { wrap: "truncate-end", color: isSelected ? 'cyan' : 'white', bold: isSelected, children: [isImage && '🖼️  ', displayPath, item.resource?.serverName && ` [${item.resource.serverName}]`] })] }, item.path));
         }) }));
 });
 /**

package/dist/cli/ink-cli/components/SlashCommandAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlashCommandAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/SlashCommandAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,MAAM,WAAW,8BAA8B;IAC3C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,6BAA6B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AA4GD;;GAEG;AACH,QAAA,MAAM,6BAA6B,sHAwbjC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAEhC,OAAO,6BAA6B,CAAC"}
+{"version":3,"file":"SlashCommandAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/SlashCommandAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,MAAM,WAAW,8BAA8B;IAC3C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,6BAA6B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AAmGD;;GAEG;AACH,QAAA,MAAM,6BAA6B,sHA4bjC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAEhC,OAAO,6BAA6B,CAAC"}

package/dist/cli/ink-cli/components/SlashCommandAutocomplete.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef, useMemo, useCallback, forwardRef, useImperativeHandle, } from 'react';
-import { Box, Text, useStdout } from 'ink';
+import { Box, Text } from 'ink';
 import { getAllCommands } from '../../commands/interactive-commands/commands.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { getMaxVisibleItemsForTerminalRows } from '../utils/overlaySizing.js';
 /**
  * Get match score for prompt: 0 = no match, 1 = description/title match, 2 = name includes, 3 = name starts with
  */
@@ -74,16 +76,6 @@ function getSystemCommandMatchScore(cmd, query) {
 function matchesSystemCommandQuery(cmd, query) {
     return getSystemCommandMatchScore(cmd, query) > 0;
 }
-/**
- * Truncate text to fit within maxLength, adding ellipsis if truncated
- */
-function truncateText(text, maxLength) {
-    if (text.length <= maxLength)
-        return text;
-    if (maxLength <= 3)
-        return text.slice(0, maxLength);
-    return text.slice(0, maxLength - 1) + '…';
-}
 /**
  * Inner component - wrapped with React.memo below
  */
@@ -91,12 +83,17 @@ const SlashCommandAutocompleteInner = forwardRef(function SlashCommandAutocomple
     const [prompts, setPrompts] = useState([]);
     const [systemCommands, setSystemCommands] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const { columns: terminalWidth, rows: terminalRows } = useTerminalSize();
+    const maxVisibleItems = useMemo(() => {
+        return getMaxVisibleItemsForTerminalRows({
+            rows: terminalRows,
+            hardCap: 8,
+            reservedRows: 8,
+        });
+    }, [terminalRows]);
     // Combined state to guarantee single render on navigation
     const [selection, setSelection] = useState({ index: 0, offset: 0 });
     const selectedIndexRef = useRef(0);
-    const { stdout } = useStdout();
-    const terminalWidth = stdout?.columns || 80;
-    const MAX_VISIBLE_ITEMS = 8;
     // Update selection AND scroll offset in a single state update
     // This guarantees exactly one render per navigation action
     const updateSelection = useCallback((indexUpdater) => {
@@ -108,12 +105,12 @@ const SlashCommandAutocompleteInner = forwardRef(function SlashCommandAutocomple
             if (newIndex < prev.offset) {
                 newOffset = newIndex;
             }
-            else if (newIndex >= prev.offset + MAX_VISIBLE_ITEMS) {
-                newOffset = Math.max(0, newIndex - MAX_VISIBLE_ITEMS + 1);
+            else if (newIndex >= prev.offset + maxVisibleItems) {
+                newOffset = Math.max(0, newIndex - maxVisibleItems + 1);
             }
             return { index: newIndex, offset: newOffset };
         });
-    }, [MAX_VISIBLE_ITEMS]);
+    }, [maxVisibleItems]);
     // Fetch prompts and system commands from agent
     useEffect(() => {
         if (!isVisible)
@@ -251,7 +248,7 @@ const SlashCommandAutocompleteInner = forwardRef(function SlashCommandAutocomple
         : Math.min(selection.index, Math.max(0, combinedItems.length - 1));
     const scrollOffset = itemsChanged
         ? 0
-        : Math.min(selection.offset, Math.max(0, combinedItems.length - MAX_VISIBLE_ITEMS));
+        : Math.min(selection.offset, Math.max(0, combinedItems.length - maxVisibleItems));
     // Sync state only when items actually changed AND state differs
     // This effect runs AFTER render, updating state for next user interaction
     useEffect(() => {
@@ -269,8 +266,8 @@ const SlashCommandAutocompleteInner = forwardRef(function SlashCommandAutocomple
     }, [itemsChanged, combinedItems.length, currentFirstId, selection.index, selection.offset]);
     // Calculate visible items based on scroll offset
     const visibleItems = useMemo(() => {
-        return combinedItems.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS);
-    }, [combinedItems, scrollOffset, MAX_VISIBLE_ITEMS]);
+        return combinedItems.slice(scrollOffset, scrollOffset + maxVisibleItems);
+    }, [combinedItems, scrollOffset, maxVisibleItems]);
     // Expose handleInput method via ref
     useImperativeHandle(ref, () => ({
         handleInput: (input, key) => {
@@ -377,53 +374,36 @@ const SlashCommandAutocompleteInner = forwardRef(function SlashCommandAutocomple
     if (combinedItems.length === 0) {
         return null;
     }
-    const totalItems = combinedItems.length;
-    // Show simplified header when user is typing arguments
-    const headerText = hasArguments
-        ? 'Press Enter to execute'
-        : `Commands (${selectedIndex + 1}/${totalItems}) - ↑↓ navigate, Tab load, Enter execute, Esc close`;
-    return (_jsxs(Box, { flexDirection: "column", width: terminalWidth, children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "purple", bold: true, children: headerText }) }), visibleItems.map((item, visibleIndex) => {
-                const actualIndex = scrollOffset + visibleIndex;
-                const isSelected = actualIndex === selectedIndex;
-                if (item.kind === 'system') {
-                    const cmd = item.command;
-                    const nameText = `/${cmd.name}`;
-                    const categoryText = cmd.category ? ` (${cmd.category})` : '';
-                    const descText = cmd.description || '';
-                    // Two-line layout:
-                    // Line 1: /command-name
-                    // Line 2:     Description text (category)
-                    return (_jsxs(Box, { flexDirection: "column", paddingX: 0, children: [_jsx(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: nameText }), _jsxs(Text, { color: isSelected ? 'white' : 'gray', children: ['    ', descText, categoryText] })] }, `system-${cmd.name}`));
-                }
-                // Prompt command (MCP prompts)
-                const prompt = item.prompt;
-                // Use displayName for user-friendly display, fall back to full name
-                const displayName = prompt.displayName || prompt.name;
-                // Check if there's a collision (commandName includes source prefix)
-                const hasCollision = prompt.commandName && prompt.commandName !== displayName;
-                const nameText = `/${displayName}`;
-                const argsString = prompt.arguments && prompt.arguments.length > 0
-                    ? ' ' +
-                        prompt.arguments
-                            .map((arg) => `<${arg.name}${arg.required ? '' : '?'}>`)
-                            .join(' ')
-                    : '';
-                const description = prompt.title || prompt.description || '';
-                // Two-line layout:
-                // Line 1: /command-name <args>
-                // Line 2:     Description text (source)
-                const commandText = nameText + argsString;
-                // Show source as label, with collision indicator if needed
-                // For plugin skills, show namespace (plugin name) instead of "config"
-                const metadata = prompt.metadata;
-                const displaySource = metadata?.namespace
-                    ? String(metadata.namespace)
-                    : prompt.source || 'prompt';
-                const sourceLabel = hasCollision
-                    ? `${displaySource} - use /${prompt.commandName}`
-                    : displaySource;
-                return (_jsxs(Box, { flexDirection: "column", paddingX: 0, children: [_jsx(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: commandText }), _jsxs(Text, { color: isSelected ? 'white' : 'gray', children: ['    ', description, ` (${sourceLabel})`] })] }, `prompt-${prompt.name}`));
-            })] }));
+    const nameColumnWidth = Math.max(16, Math.min(28, Math.floor(terminalWidth * 0.32)));
+    const descriptionColor = (isSelected) => (isSelected ? 'white' : 'gray');
+    const commandColor = (isSelected) => (isSelected ? 'cyan' : 'gray');
+    return (_jsx(Box, { flexDirection: "column", width: terminalWidth, children: visibleItems.map((item, visibleIndex) => {
+            const actualIndex = scrollOffset + visibleIndex;
+            const isSelected = actualIndex === selectedIndex;
+            if (item.kind === 'system') {
+                const cmd = item.command;
+                const nameText = `/${cmd.name}`;
+                const descText = cmd.description || '';
+                return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { marginRight: 1, children: _jsx(Text, { color: commandColor(isSelected), children: isSelected ? '❯' : ' ' }) }), _jsx(Box, { width: nameColumnWidth, children: _jsx(Text, { wrap: "truncate-end", color: commandColor(isSelected), bold: isSelected, children: nameText }) }), _jsx(Box, { flexGrow: 1, minWidth: 0, children: _jsx(Text, { wrap: "truncate-end", color: descriptionColor(isSelected), children: descText }) })] }, `system-${cmd.name}`));
+            }
+            // Prompt command (MCP prompts)
+            const prompt = item.prompt;
+            // Use displayName for user-friendly display, fall back to full name
+            const displayName = prompt.displayName || prompt.name;
+            // Check if there's a collision (commandName includes source prefix)
+            const hasCollision = prompt.commandName && prompt.commandName !== displayName;
+            const nameText = `/${displayName}`;
+            const argsString = prompt.arguments && prompt.arguments.length > 0
+                ? ' ' +
+                    prompt.arguments
+                        .map((arg) => `<${arg.name}${arg.required ? '' : '?'}>`)
+                        .join(' ')
+                : '';
+            const description = prompt.title || prompt.description || '';
+            const commandText = nameText + argsString;
+            const collisionSuffix = hasCollision ? ` (use /${prompt.commandName})` : '';
+            return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { marginRight: 1, children: _jsx(Text, { color: commandColor(isSelected), children: isSelected ? '❯' : ' ' }) }), _jsx(Box, { width: nameColumnWidth, children: _jsx(Text, { wrap: "truncate-end", color: commandColor(isSelected), bold: isSelected, children: commandText }) }), _jsx(Box, { flexGrow: 1, minWidth: 0, children: _jsxs(Text, { wrap: "truncate-end", color: descriptionColor(isSelected), children: [description, collisionSuffix] }) })] }, `prompt-${prompt.name}`));
+        }) }));
 });
 /**
  * Export with React.memo to prevent unnecessary re-renders from parent

package/dist/cli/ink-cli/components/StatusBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/StatusBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C,UAAU,cAAc;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yCAAyC;IACzC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,eAAuB,EACvB,kBAA0B,EAC1B,YAAmB,EACnB,QAAgB,EAChB,cAAsB,EACtB,gBAAwB,EACxB,sBAA0B,GAC7B,EAAE,cAAc,kDA8IhB"}
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/StatusBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAa9C,UAAU,cAAc;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yCAAyC;IACzC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,eAAuB,EACvB,kBAA0B,EAC1B,YAAmB,EACnB,QAAgB,EAChB,cAAsB,EACtB,gBAAwB,EACxB,sBAA0B,GAC7B,EAAE,cAAc,kDAwIhB"}

package/dist/cli/ink-cli/components/StatusBar.js

@@ -9,10 +9,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * This 2-line layout prevents truncation on any terminal width.
  */
 import { Box, Text } from 'ink';
-import Spinner from 'ink-spinner';
 import { usePhraseCycler } from '../hooks/usePhraseCycler.js';
 import { useElapsedTime } from '../hooks/useElapsedTime.js';
 import { useTokenCounter } from '../hooks/useTokenCounter.js';
+import { useAnimationTick } from '../hooks/useAnimationTick.js';
+import { BRAILLE_SPINNER_FRAMES } from '../constants/spinnerFrames.js';
+function StatusSpinner({ enabled, color }) {
+    const tick = useAnimationTick({ enabled, intervalMs: 80 });
+    const frame = BRAILLE_SPINNER_FRAMES[tick % BRAILLE_SPINNER_FRAMES.length];
+    return _jsx(Text, { color: color, children: frame });
+}
 /**
  * Status bar that shows processing state above input area
  * Provides clear feedback on whether the agent is running or idle
@@ -67,7 +73,7 @@ export function StatusBar({ agent, isProcessing, isThinking, isCompacting, appro
         if (todoHint)
             metaParts.push(todoHint);
         const metaContent = metaParts.join(' • ');
-        return (_jsxs(Box, { paddingX: 1, marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "yellow", children: " \uD83D\uDCE6 Compacting context..." })] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: metaContent }) })] }));
+        return (_jsxs(Box, { paddingX: 1, marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(StatusSpinner, { enabled: true, color: "yellow" }), _jsx(Text, { color: "yellow", children: " \uD83D\uDCE6 Compacting context..." })] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: metaContent }) })] }));
     }
     // Show initial processing state (before streaming starts) - green/teal color
     // TODO: Rename this event/state to "reasoning" and associate it with actual reasoning tokens
@@ -87,7 +93,7 @@ export function StatusBar({ agent, isProcessing, isThinking, isCompacting, appro
         if (todoHint)
             metaParts.push(todoHint);
         const metaContent = metaParts.join(' • ');
-        return (_jsxs(Box, { paddingX: 1, marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Text, { color: "green", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { color: "green", children: [" ", phrase] })] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: metaContent }) })] }));
+        return (_jsxs(Box, { paddingX: 1, marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(StatusSpinner, { enabled: true, color: "green" }), _jsxs(Text, { color: "green", children: [" ", phrase] })] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: metaContent }) })] }));
     }
     // Show active streaming state - green/teal color
     // Always use 2-line layout: phrase on first line, meta on second
@@ -106,5 +112,5 @@ export function StatusBar({ agent, isProcessing, isThinking, isCompacting, appro
     if (todoHint)
         metaParts.push(todoHint);
     const metaContent = metaParts.join(' • ');
-    return (_jsxs(Box, { paddingX: 1, marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Text, { color: "green", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { color: "green", children: [" ", phrase] }), approvalQueueCount > 0 && (_jsxs(Text, { color: "yellowBright", children: [" \u2022 ", approvalQueueCount, " queued"] }))] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: metaContent }) })] }));
+    return (_jsxs(Box, { paddingX: 1, marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(StatusSpinner, { enabled: true, color: "green" }), _jsxs(Text, { color: "green", children: [" ", phrase] }), approvalQueueCount > 0 && (_jsxs(Text, { color: "yellowBright", children: [" \u2022 ", approvalQueueCount, " queued"] }))] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: metaContent }) })] }));
 }

package/dist/cli/ink-cli/components/base/BaseSelector.d.ts

@@ -21,6 +21,7 @@ export interface BaseSelectorProps<T> {
     borderColor?: string;
     onTab?: (item: T) => void;
     supportsTab?: boolean;
+    instructionsOverride?: string;
 }
 export interface BaseSelectorHandle {
     handleInput: (input: string, key: Key) => boolean;
@@ -28,7 +29,7 @@ export interface BaseSelectorHandle {
 /**
  * Generic selector component with keyboard navigation and scrolling
  */
-declare function BaseSelectorInner<T>({ items, isVisible, isLoading, selectedIndex, onSelectIndex, onSelect, onClose, formatItem, title, maxVisibleItems, loadingMessage, emptyMessage, borderColor, onTab, supportsTab, }: BaseSelectorProps<T>, ref: React.Ref<BaseSelectorHandle>): import("react/jsx-runtime").JSX.Element | null;
+declare function BaseSelectorInner<T>({ items, isVisible, isLoading, selectedIndex, onSelectIndex, onSelect, onClose, formatItem, title, maxVisibleItems, loadingMessage, emptyMessage, borderColor, onTab, supportsTab, instructionsOverride, }: BaseSelectorProps<T>, ref: React.Ref<BaseSelectorHandle>): import("react/jsx-runtime").JSX.Element | null;
 export declare const BaseSelector: <T>(props: BaseSelectorProps<T> & {
     ref?: React.Ref<BaseSelectorHandle>;
 }) => ReturnType<typeof BaseSelectorInner>;

package/dist/cli/ink-cli/components/base/BaseSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSelector.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/base/BaseSelector.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAE/D,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IAC/B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EACxB,EACI,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,OAAO,EACP,UAAU,EACV,KAAK,EACL,eAAmB,EACnB,cAA6B,EAC7B,YAA+B,EAC/B,WAAoB,EACpB,KAAK,EACL,WAAmB,GACtB,EAAE,iBAAiB,CAAC,CAAC,CAAC,EACvB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,kDAyJrC;AAGD,eAAO,MAAM,YAAY,EAAoC,CAAC,CAAC,EAC3D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;CAAE,KACpE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"BaseSelector.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/base/BaseSelector.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAK/D,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IAC/B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EACxB,EACI,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,OAAO,EACP,UAAU,EACV,KAAK,EACL,eAAmB,EACnB,cAA6B,EAC7B,YAA+B,EAC/B,WAAoB,EACpB,KAAK,EACL,WAAmB,EACnB,oBAAoB,GACvB,EAAE,iBAAiB,CAAC,CAAC,CAAC,EACvB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,kDA8LrC;AAGD,eAAO,MAAM,YAAY,EAAoC,CAAC,CAAC,EAC3D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;CAAE,KACpE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Base Selector Component
  * Reusable selector with keyboard navigation for lists
@@ -6,10 +6,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useEffect, useRef, useMemo, useCallback, forwardRef, useImperativeHandle, } from 'react';
 import { Box, Text } from 'ink';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { getMaxVisibleItemsForTerminalRows } from '../../utils/overlaySizing.js';
+import { HintBar } from '../shared/HintBar.js';
 /**
  * Generic selector component with keyboard navigation and scrolling
  */
-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) {
+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, instructionsOverride, }, ref) {
+    const { rows: terminalRows } = useTerminalSize();
+    const viewportItems = useMemo(() => {
+        return getMaxVisibleItemsForTerminalRows({
+            rows: terminalRows,
+            hardCap: maxVisibleItems,
+            reservedRows: 14,
+        });
+    }, [terminalRows, maxVisibleItems]);
     // Track scroll offset as state, but derive during render when needed
     const [scrollOffsetState, setScrollOffset] = useState(0);
     const selectedIndexRef = useRef(selectedIndex);
@@ -21,7 +32,7 @@ function BaseSelectorInner({ items, isVisible, isLoading = false, selectedIndex,
     const scrollOffset = useMemo(() => {
         const itemsChanged = items.length !== prevItemsLengthRef.current;
         // Reset scroll if items changed significantly
-        if (itemsChanged && items.length <= maxVisibleItems) {
+        if (itemsChanged && items.length <= viewportItems) {
             return 0;
         }
         let offset = scrollOffsetState;
@@ -29,13 +40,13 @@ function BaseSelectorInner({ items, isVisible, isLoading = false, selectedIndex,
         if (selectedIndex < offset) {
             offset = selectedIndex;
         }
-        else if (selectedIndex >= offset + maxVisibleItems) {
-            offset = Math.max(0, selectedIndex - maxVisibleItems + 1);
+        else if (selectedIndex >= offset + viewportItems) {
+            offset = Math.max(0, selectedIndex - viewportItems + 1);
         }
         // Clamp to valid range
-        const maxOffset = Math.max(0, items.length - maxVisibleItems);
+        const maxOffset = Math.max(0, items.length - viewportItems);
         return Math.min(maxOffset, Math.max(0, offset));
-    }, [selectedIndex, items.length, maxVisibleItems, scrollOffsetState]);
+    }, [selectedIndex, items.length, viewportItems, scrollOffsetState]);
     // Update refs after render (not during useMemo which can run multiple times)
     useEffect(() => {
         prevItemsLengthRef.current = items.length;
@@ -54,8 +65,8 @@ function BaseSelectorInner({ items, isVisible, isLoading = false, selectedIndex,
     }, [onSelectIndex]);
     // Calculate visible items
     const visibleItems = useMemo(() => {
-        return items.slice(scrollOffset, scrollOffset + maxVisibleItems);
-    }, [items, scrollOffset, maxVisibleItems]);
+        return items.slice(scrollOffset, scrollOffset + viewportItems);
+    }, [items, scrollOffset, viewportItems]);
     // Expose handleInput method via ref
     useImperativeHandle(ref, () => ({
         handleInput: (_input, key) => {
@@ -67,8 +78,8 @@ function BaseSelectorInner({ items, isVisible, isLoading = false, selectedIndex,
                 return true;
             }
             const itemsLength = items.length;
-            if (itemsLength === 0)
-                return false;
+            if (isLoading || itemsLength === 0)
+                return true;
             if (key.upArrow) {
                 const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
                 handleSelectIndex(nextIndex);
@@ -95,24 +106,23 @@ function BaseSelectorInner({ items, isVisible, isLoading = false, selectedIndex,
             }
             return false;
         },
-    }), [isVisible, items, handleSelectIndex, onClose, onSelect, onTab]);
+    }), [isVisible, isLoading, items, handleSelectIndex, onClose, onSelect, onTab]);
     if (!isVisible)
         return null;
-    if (isLoading) {
-        return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: loadingMessage }) }));
-    }
-    if (items.length === 0) {
-        return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: emptyMessage }) }));
-    }
-    // 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: 0, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex));
-            })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: borderColor, bold: true, children: title }) }), _jsx(Box, { flexDirection: "column", height: viewportItems, marginTop: 1, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: loadingMessage }) }), Array.from({ length: Math.max(0, viewportItems - 1) }, (_, index) => (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { children: " " }) }, `loading-spacer-${index}`)))] })) : items.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: emptyMessage }) }), Array.from({ length: Math.max(0, viewportItems - 1) }, (_, index) => (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { children: " " }) }, `empty-spacer-${index}`)))] })) : (Array.from({ length: viewportItems }, (_, rowIndex) => {
+                    const item = visibleItems[rowIndex];
+                    if (item === undefined) {
+                        return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { children: " " }) }, `item-empty-${rowIndex}`));
+                    }
+                    const actualIndex = scrollOffset + rowIndex;
+                    const isSelected = actualIndex === selectedIndex;
+                    return (_jsx(Box, { paddingX: 0, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex));
+                })) }), _jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: instructionsOverride ? (_jsx(Text, { color: "gray", wrap: "truncate-end", children: instructionsOverride })) : (_jsx(HintBar, { hints: [
+                        '↑↓ navigate',
+                        supportsTab ? 'Tab load' : '',
+                        'Enter select',
+                        'Esc close',
+                    ] })) })] }));
 }
 // Export with proper generic type support
 export const BaseSelector = forwardRef(BaseSelectorInner);

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;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,2CAoF1F"}
+{"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,2CA6E1F"}

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

@@ -12,5 +12,5 @@ export function Header({ modelName, sessionId, hasActiveSession, startupInfo })
 ██║  ██║█████╗   ╚███╔╝    ██║   ██║   ██║
 ██║  ██║██╔══╝   ██╔██╗    ██║   ██║   ██║
 ██████╔╝███████╗██╔╝ ██╗   ██║   ╚██████╔╝
-╚═════╝ ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚═════╝` }) }), _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 && process.env.DEXTO_DEV_MODE === 'true' && (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: "gray", children: ["Logs: ", startupInfo.logFile] }) })), startupInfo.updateInfo && (_jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsxs(Text, { color: "yellow", children: ["\u2B06\uFE0F Update available: ", startupInfo.updateInfo.current, " \u2192", ' ', startupInfo.updateInfo.latest] }), _jsx(Text, { color: "gray", children: " \u2022 Run: " }), _jsx(Text, { color: "cyan", children: startupInfo.updateInfo.updateCommand })] })), startupInfo.needsAgentSync && (_jsxs(Box, { marginTop: startupInfo.updateInfo ? 0 : 1, flexDirection: "row", children: [_jsx(Text, { color: "yellow", children: "\uD83D\uDD04 Agent configs have updates available. Run: " }), _jsx(Text, { color: "cyan", children: "dexto sync-agents" })] })), _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.updateInfo && (_jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsxs(Text, { color: "yellow", children: ["\u2B06\uFE0F Update available: ", startupInfo.updateInfo.current, " \u2192", ' ', startupInfo.updateInfo.latest] }), _jsx(Text, { color: "gray", children: " \u2022 Run: " }), _jsx(Text, { color: "cyan", children: startupInfo.updateInfo.updateCommand })] })), startupInfo.needsAgentSync && (_jsxs(Box, { marginTop: startupInfo.updateInfo ? 0 : 1, flexDirection: "row", children: [_jsx(Text, { color: "yellow", children: "\uD83D\uDD04 Agent configs have updates available. Run: " }), _jsx(Text, { color: "cyan", children: "dexto sync-agents" })] })), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: " " }) })] }));
 }

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;AAKH,OAAO,KAAK,EACR,OAAO,EAUV,MAAM,sBAAsB,CAAC;AAoD9B,UAAU,gBAAgB;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,mEACc,gBAAgB,6CAyOrD,CAAC"}
+{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/MessageItem.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EACR,OAAO,EAUV,MAAM,sBAAsB,CAAC;AAoD9B,UAAU,gBAAgB;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,mEACc,gBAAgB,6CA4OrD,CAAC"}

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

@@ -147,7 +147,9 @@ export const MessageItem = memo(({ message, terminalWidth = 80 }) => {
             trim: false,
         });
         const toolLines = wrappedToolText.split('\n');
-        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, width: terminalWidth, children: [toolLines.map((line, i) => (_jsxs(Box, { flexDirection: "row", children: [i === 0 ? (_jsx(ToolIcon, { status: message.toolStatus || 'finished', isError: message.isError ?? false })) : (_jsx(Text, { children: '  ' })), _jsx(Text, { children: i === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: line.slice(0, toolName.length) }), _jsx(Text, { children: line.slice(toolName.length) })] })) : (line) })] }, i))), subHeaderLine && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: subHeaderLine }) })), subAgentProgress && isRunning && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "gray", children: ["\u2514\u2500 ", subAgentProgress.toolsCalled, " tool", subAgentProgress.toolsCalled !== 1 ? 's' : '', " called | Current:", ' ', subAgentProgress.currentTool, subAgentProgress.tokenUsage &&
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, width: terminalWidth, children: [toolLines.map((line, i) => (_jsxs(Box, { flexDirection: "row", children: [i === 0 ? (_jsx(ToolIcon, { status: message.toolStatus || 'finished', isError: message.isError ?? false })) : (_jsx(Text, { children: '  ' })), _jsx(Text, { children: i === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: line.slice(0, toolName.length) }), _jsx(Text, { children: line.slice(toolName.length) })] })) : (line) })] }, i))), subHeaderLine && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: subHeaderLine }) })), subAgentProgress && isRunning && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "gray", children: ["\u2514\u2500 ", subAgentProgress.toolsCalled, " tool", subAgentProgress.toolsCalled !== 1 ? 's' : '', " called | Current:", ' ', subAgentProgress.currentTool, subAgentProgress.runtimeAgentId
+                                ? ` | Agent: ${subAgentProgress.agentId} (${subAgentProgress.runtimeAgentId})`
+                                : ` | Agent: ${subAgentProgress.agentId}`, subAgentProgress.tokenUsage &&
                                 subAgentProgress.tokenUsage.total > 0
                                 ? ` | ${subAgentProgress.tokenUsage.total.toLocaleString()} tokens`
                                 : ''] }) })), hasStructuredDisplay ? (_jsx(ToolResultRenderer, { display: message.toolDisplayData, content: message.toolContent })) : (message.toolResult && (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { color: "gray", children: ["\u23BF ", formatToolResultPreview(message.toolResult)] }) })))] }));

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;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAKD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,aAAa,2CAqD1D"}
+{"version":3,"file":"ToolIcon.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/chat/ToolIcon.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvD,UAAU,aAAa;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,aAAa,2CAyC1D"}

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

@@ -3,10 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ToolIcon Component
  * Animated icon for tool calls with status-based visual feedback
  */
-import { useState, useEffect } from 'react';
 import { Text } from 'ink';
-// Spinner frames for running animation
-const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+import { useAnimationTick } from '../../hooks/useAnimationTick.js';
+import { BRAILLE_SPINNER_FRAMES } from '../../constants/spinnerFrames.js';
 /**
  * Animated tool icon that changes based on execution status
  * - Running: Animated spinner (green/teal)
@@ -14,17 +13,8 @@ const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧',
  * - Finished (error): Red dot
  */
 export function ToolIcon({ status, isError }) {
-    const [frame, setFrame] = useState(0);
-    // Animate spinner only when actually running (not during approval)
-    useEffect(() => {
-        if (status !== 'running') {
-            return;
-        }
-        const interval = setInterval(() => {
-            setFrame((prev) => (prev + 1) % SPINNER_FRAMES.length);
-        }, 80); // 80ms per frame for smooth animation
-        return () => clearInterval(interval);
-    }, [status]);
+    const tick = useAnimationTick({ enabled: status === 'running', intervalMs: 80 });
+    const frame = tick % BRAILLE_SPINNER_FRAMES.length;
     // Pending: static gray dot (tool call received, checking approval)
     if (status === 'pending') {
         return _jsx(Text, { color: "gray", children: "\u25CF " });
@@ -42,5 +32,5 @@ export function ToolIcon({ status, isError }) {
         return (_jsxs(Text, { color: "green", bold: true, children: ["\u25CF", ' '] }));
     }
     // Running state with spinner
-    return (_jsxs(Text, { color: "green", bold: true, children: [SPINNER_FRAMES[frame], ' '] }));
+    return (_jsxs(Text, { color: "green", bold: true, children: [BRAILLE_SPINNER_FRAMES[frame], ' '] }));
 }

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

@@ -1 +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,2CA8BvD"}
+{"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

@@ -2,7 +2,7 @@ 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 && process.env.DEXTO_DEV_MODE === 'true' && (_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) => {
+    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 }) : null] }), _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/modes/AlternateBufferCLI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlternateBufferCLI.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/modes/AlternateBufferCLI.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,KAAK,EAAW,WAAW,EAAE,MAAM,sBAAsB,CAAC;AA8BjE,UAAU,uBAAuB;IAC7B,KAAK,EAAE,UAAU,CAAC;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,YAAmB,GACtB,EAAE,uBAAuB,2CA4VzB"}
+{"version":3,"file":"AlternateBufferCLI.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/modes/AlternateBufferCLI.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,KAAK,EAAW,WAAW,EAAE,MAAM,sBAAsB,CAAC;AA+BjE,UAAU,uBAAuB;IAC7B,KAAK,EAAE,UAAU,CAAC;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,YAAmB,GACtB,EAAE,uBAAuB,2CAgWzB"}