dexto 1.3.0 → 1.4.0

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { Box, Text, useInput } from 'ink';
+import React, { useState, useEffect, useRef, useMemo, useCallback, forwardRef, useImperativeHandle, } from 'react';
+import { Box, Text, useStdout } from 'ink';
 import { getAllCommands } from '../../commands/interactive-commands/commands.js';
 /**
  * Get match score for prompt: 0 = no match, 1 = description/title match, 2 = name includes, 3 = name starts with
@@ -74,22 +74,46 @@ function getSystemCommandMatchScore(cmd, query) {
 function matchesSystemCommandQuery(cmd, query) {
     return getSystemCommandMatchScore(cmd, query) > 0;
 }
-export default function SlashCommandAutocomplete({ isVisible, searchQuery, onSelectPrompt, onSelectSystemCommand, onLoadIntoInput, onClose, onCreatePrompt, agent, }) {
+/**
+ * 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
+ */
+const SlashCommandAutocompleteInner = forwardRef(function SlashCommandAutocomplete({ isVisible, searchQuery, onSelectPrompt, onSelectSystemCommand, onLoadIntoInput, onSubmitRaw, onClose, agent, }, ref) {
     const [prompts, setPrompts] = useState([]);
     const [systemCommands, setSystemCommands] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [scrollOffset, setScrollOffset] = useState(0);
+    // Combined state to guarantee single render on navigation
+    const [selection, setSelection] = useState({ index: 0, offset: 0 });
     const selectedIndexRef = useRef(0);
-    const MAX_VISIBLE_ITEMS = 10; // Increased to show more items
-    // Wrapper to set both state and ref synchronously to prevent race conditions
-    const setSelectedIndexSync = useCallback((newIndex) => {
-        setSelectedIndex((prev) => {
-            const resolved = typeof newIndex === 'function' ? newIndex(prev) : newIndex;
-            selectedIndexRef.current = resolved;
-            return resolved;
+    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) => {
+        setSelection((prev) => {
+            const newIndex = typeof indexUpdater === 'function' ? indexUpdater(prev.index) : indexUpdater;
+            selectedIndexRef.current = newIndex;
+            // Calculate new scroll offset
+            let newOffset = prev.offset;
+            if (newIndex < prev.offset) {
+                newOffset = newIndex;
+            }
+            else if (newIndex >= prev.offset + MAX_VISIBLE_ITEMS) {
+                newOffset = Math.max(0, newIndex - MAX_VISIBLE_ITEMS + 1);
+            }
+            return { index: newIndex, offset: newOffset };
         });
-    }, []);
+    }, [MAX_VISIBLE_ITEMS]);
     // Fetch prompts and system commands from agent
     useEffect(() => {
         if (!isVisible)
@@ -119,9 +143,9 @@ export default function SlashCommandAutocomplete({ isVisible, searchQuery, onSel
                     setIsLoading(false);
                 }
             }
-            catch (error) {
+            catch {
                 if (!cancelled) {
-                    console.error(`Error in fetchCommands: ${error instanceof Error ? error.message : String(error)}`);
+                    // Silently fail - don't use console.error as it interferes with Ink rendering
                     setPrompts([]);
                     setSystemCommands([]);
                     setIsLoading(false);
@@ -169,150 +193,232 @@ export default function SlashCommandAutocomplete({ isVisible, searchQuery, onSel
             return scoreB - scoreA; // Higher score first
         });
     }, [systemCommands, commandQuery]);
-    // Check if user has started typing arguments (hide autocomplete if so)
+    // Check if user has started typing arguments (hide autocomplete)
     const hasArguments = useMemo(() => {
         if (!searchQuery.startsWith('/'))
             return false;
         const afterSlash = searchQuery.slice(1).trim();
         return afterSlash.includes(' ');
     }, [searchQuery]);
-    // Show create option only if query doesn't match any commands and is a valid prompt name
-    const showCreateOption = useMemo(() => {
-        if (!commandQuery)
-            return false; // Don't show create when just "/"
-        if (hasArguments)
-            return false; // Don't show create when typing arguments
-        // Only show create if no matches and query looks like a prompt name (no spaces, valid chars)
-        return (filteredPrompts.length === 0 &&
-            filteredSystemCommands.length === 0 &&
-            commandQuery.length > 0);
-    }, [commandQuery, hasArguments, filteredPrompts.length, filteredSystemCommands.length]);
-    // Combine items: system commands first, then prompts, then create option
-    // Hide autocomplete if user has started typing arguments
+    // Combine items: system commands first, then prompts
+    // When typing arguments, show only exact matches (for argument hints)
     const combinedItems = useMemo(() => {
+        const items = [];
         if (hasArguments) {
-            return []; // Hide autocomplete when typing arguments
+            // When typing arguments, only show exact match for the command
+            const exactSystemCmd = systemCommands.find((cmd) => cmd.name.toLowerCase() === commandQuery.toLowerCase());
+            if (exactSystemCmd) {
+                items.push({ kind: 'system', command: exactSystemCmd });
+            }
+            const exactPrompt = prompts.find((p) => p.name.toLowerCase() === commandQuery.toLowerCase() ||
+                (p.displayName && p.displayName.toLowerCase() === commandQuery.toLowerCase()));
+            if (exactPrompt) {
+                items.push({ kind: 'prompt', prompt: exactPrompt });
+            }
+            return items;
         }
-        const items = [];
         // System commands first (they're more commonly used)
         filteredSystemCommands.forEach((cmd) => items.push({ kind: 'system', command: cmd }));
         // Then prompts
         filteredPrompts.forEach((prompt) => items.push({ kind: 'prompt', prompt }));
-        // Create option last
-        if (showCreateOption) {
-            items.push({ kind: 'create' });
-        }
         return items;
-    }, [hasArguments, showCreateOption, filteredPrompts, filteredSystemCommands]);
-    // Reset selected index and scroll when items change
-    useEffect(() => {
-        setSelectedIndexSync(0);
-        setScrollOffset(0);
-    }, [combinedItems.length, setSelectedIndexSync]);
-    // Auto-scroll to keep selected item visible
+    }, [
+        hasArguments,
+        filteredPrompts,
+        filteredSystemCommands,
+        systemCommands,
+        prompts,
+        commandQuery,
+    ]);
+    // Get stable identity for first item (used to detect content changes)
+    const getFirstItemId = () => {
+        const first = combinedItems[0];
+        if (!first)
+            return null;
+        if (first.kind === 'system')
+            return `sys:${first.command.name}`;
+        return `prompt:${first.prompt.name}`;
+    };
+    // Track items for reset detection (length + first item identity)
+    const currentFirstId = getFirstItemId();
+    const prevItemsRef = useRef({ length: combinedItems.length, firstId: currentFirstId });
+    const itemsChanged = combinedItems.length !== prevItemsRef.current.length ||
+        currentFirstId !== prevItemsRef.current.firstId;
+    // Derive clamped selection values during render (always valid, no setState needed)
+    // This prevents the double-render that was causing flickering
+    const selectedIndex = itemsChanged
+        ? 0
+        : 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));
+    // Sync state only when items actually changed AND state differs
+    // This effect runs AFTER render, updating state for next user interaction
     useEffect(() => {
-        if (selectedIndex < scrollOffset) {
-            // Selected item is above visible area, scroll up
-            setScrollOffset(selectedIndex);
-        }
-        else if (selectedIndex >= scrollOffset + MAX_VISIBLE_ITEMS) {
-            // Selected item is below visible area, scroll down
-            setScrollOffset(Math.max(0, selectedIndex - MAX_VISIBLE_ITEMS + 1));
+        if (itemsChanged) {
+            prevItemsRef.current = { length: combinedItems.length, firstId: currentFirstId };
+            // Only setState if values actually differ (prevents unnecessary re-render)
+            if (selection.index !== 0 || selection.offset !== 0) {
+                selectedIndexRef.current = 0;
+                setSelection({ index: 0, offset: 0 });
+            }
+            else {
+                selectedIndexRef.current = 0;
+            }
         }
-    }, [selectedIndex, scrollOffset]);
+    }, [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]);
-    // Handle keyboard navigation
-    useInput((input, key) => {
-        if (!isVisible)
-            return;
-        const itemsLength = combinedItems.length;
-        if (itemsLength === 0)
-            return;
-        if (key.upArrow) {
-            setSelectedIndexSync((prev) => (prev - 1 + itemsLength) % itemsLength);
-        }
-        if (key.downArrow) {
-            setSelectedIndexSync((prev) => (prev + 1) % itemsLength);
-        }
-        if (key.escape) {
-            onClose();
-        }
-        // Tab: Load command into input (for editing before execution)
-        if (key.tab && itemsLength > 0) {
-            const item = combinedItems[selectedIndexRef.current];
-            if (!item)
-                return;
-            if (item.kind === 'create') {
-                // For create, load the command name into input
-                onLoadIntoInput?.(`/${commandQuery || 'name'}`);
+    }, [combinedItems, scrollOffset, MAX_VISIBLE_ITEMS]);
+    // Expose handleInput method via ref
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            if (!isVisible)
+                return false;
+            // Escape always closes, regardless of item count
+            if (key.escape) {
+                onClose();
+                return true;
             }
-            else if (item.kind === 'system') {
-                // Load system command into input
-                onLoadIntoInput?.(`/${item.command.name}`);
+            const itemsLength = combinedItems.length;
+            // Handle Enter when no matches or typing arguments
+            // Submit raw text directly (main input won't handle it since overlay is active)
+            if (itemsLength === 0 || hasArguments) {
+                if (key.return) {
+                    void Promise.resolve(onSubmitRaw?.(searchQuery)).catch((err) => {
+                        const message = err instanceof Error ? err.message : String(err);
+                        agent.logger.error(`SlashCommandAutocomplete: Failed to submit raw command: ${message}`);
+                    });
+                    onClose();
+                    return true;
+                }
+                // Let other keys (typing, backspace) fall through
+                return false;
             }
-            else {
-                // Load prompt command into input
-                const argsString = item.prompt.arguments && item.prompt.arguments.length > 0
-                    ? ' ' +
-                        item.prompt.arguments
-                            .map((arg) => `<${arg.name}${arg.required ? '' : '?'}>`)
-                            .join(' ')
-                    : '';
-                onLoadIntoInput?.(`/${item.prompt.name}${argsString}`);
+            if (key.upArrow) {
+                updateSelection((prev) => (prev - 1 + itemsLength) % itemsLength);
+                return true;
             }
-            return;
-        }
-        // Enter: Always execute the highlighted command/prompt
-        if (key.return && itemsLength > 0) {
-            const item = combinedItems[selectedIndexRef.current];
-            if (!item)
-                return;
-            if (item.kind === 'create') {
-                onCreatePrompt?.();
+            if (key.downArrow) {
+                updateSelection((prev) => (prev + 1) % itemsLength);
+                return true;
             }
-            else if (item.kind === 'system') {
-                onSelectSystemCommand?.(item.command.name);
+            // Tab: For interactive commands (model, resume, switch), execute them like Enter
+            // For other commands, load into input for editing
+            if (key.tab) {
+                const item = combinedItems[selectedIndexRef.current];
+                if (!item)
+                    return false;
+                // Check if this is an interactive command that should be executed
+                const interactiveCommands = ['model', 'resume', 'switch'];
+                const isInteractiveCommand = item.kind === 'system' && interactiveCommands.includes(item.command.name);
+                if (isInteractiveCommand && item.kind === 'system') {
+                    // Execute interactive command (same as Enter)
+                    onSelectSystemCommand?.(item.command.name);
+                }
+                else if (item.kind === 'system') {
+                    // Load system command into input
+                    onLoadIntoInput?.(`/${item.command.name}`);
+                }
+                else {
+                    // Load prompt command into input
+                    // Use displayName only if it's command-safe (no spaces/special chars)
+                    const promptDisplayName = item.prompt.displayName || item.prompt.name;
+                    const isCommandSafe = /^[A-Za-z0-9_-]+$/.test(promptDisplayName);
+                    const commandName = isCommandSafe ? promptDisplayName : item.prompt.name;
+                    const argsString = item.prompt.arguments && item.prompt.arguments.length > 0
+                        ? ' ' +
+                            item.prompt.arguments
+                                .map((arg) => `<${arg.name}${arg.required ? '' : '?'}>`)
+                                .join(' ')
+                        : '';
+                    onLoadIntoInput?.(`/${commandName}${argsString}`);
+                }
+                return true;
             }
-            else {
-                onSelectPrompt(item.prompt);
+            // Enter: Execute the highlighted command/prompt and close overlay
+            if (key.return) {
+                const item = combinedItems[selectedIndexRef.current];
+                if (!item)
+                    return false;
+                if (item.kind === 'system') {
+                    onSelectSystemCommand?.(item.command.name);
+                }
+                else {
+                    onSelectPrompt(item.prompt);
+                }
+                onClose();
+                return true;
             }
-        }
-    }, { isActive: isVisible });
+            // Don't consume other keys (typing, backspace, etc.)
+            // Let them fall through to the input handler
+            return false;
+        },
+    }), [
+        isVisible,
+        combinedItems,
+        hasArguments,
+        selectedIndexRef,
+        searchQuery,
+        onClose,
+        onLoadIntoInput,
+        onSubmitRaw,
+        onSelectPrompt,
+        onSelectSystemCommand,
+        updateSelection,
+        agent,
+    ]);
     if (!isVisible)
         return null;
-    // Hide autocomplete when user is typing arguments
-    if (hasArguments)
-        return null;
+    // Show loading state while fetching commands
     if (isLoading) {
-        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: "Loading commands..." }) }));
+        return (_jsx(Box, { width: terminalWidth, paddingX: 0, paddingY: 0, children: _jsx(Text, { dimColor: true, children: "Loading commands..." }) }));
     }
+    // If no items after loading, don't render
     if (combinedItems.length === 0) {
-        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: "No commands found" }) }));
+        return null;
     }
-    const hasMoreAbove = scrollOffset > 0;
-    const hasMoreBelow = scrollOffset + MAX_VISIBLE_ITEMS < combinedItems.length;
     const totalItems = combinedItems.length;
-    return (_jsxs(Box, { borderStyle: "single", borderColor: "cyan", flexDirection: "column", height: Math.min(MAX_VISIBLE_ITEMS + 3, totalItems + 3), children: [_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["Commands (", selectedIndex + 1, "/", totalItems, ") - \u2191\u2193 to navigate, Tab to load, Enter to execute, Esc to close"] }) }), hasMoreAbove && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2191 (", scrollOffset, " more above)"] }) })), visibleItems.map((item, visibleIndex) => {
+    // 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 === 'create') {
-                    return (_jsx(Box, { paddingX: 1, paddingY: 0, backgroundColor: isSelected ? 'yellow' : undefined, children: _jsxs(Text, { color: isSelected ? 'black' : 'gray', bold: isSelected, children: ["+ Create new prompt: /", commandQuery || 'name'] }) }, "create"));
-                }
                 if (item.kind === 'system') {
                     const cmd = item.command;
-                    return (_jsxs(Box, { paddingX: 1, paddingY: 0, backgroundColor: isSelected ? 'yellow' : undefined, flexDirection: "row", children: [_jsxs(Text, { color: isSelected ? 'black' : 'gray', bold: isSelected, children: ["/", cmd.name] }), cmd.description && (_jsxs(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: ['    ', cmd.description] })), cmd.category && (_jsxs(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: [' ', "(", cmd.category, ")"] }))] }, `system-${cmd.name}`));
+                    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', dimColor: !isSelected, children: ['    ', descText, categoryText] })] }, `system-${cmd.name}`));
                 }
-                // Prompt command
+                // Prompt command (MCP prompts)
                 const prompt = item.prompt;
-                const description = prompt.title || prompt.description || '';
+                // Use displayName for user-friendly display, fall back to full name
+                const displayName = prompt.displayName || prompt.name;
+                const nameText = `/${displayName}`;
                 const argsString = prompt.arguments && prompt.arguments.length > 0
-                    ? prompt.arguments
-                        .map((arg) => `<${arg.name}${arg.required ? '' : '?'}>`)
-                        .join(' ')
+                    ? ' ' +
+                        prompt.arguments
+                            .map((arg) => `<${arg.name}${arg.required ? '' : '?'}>`)
+                            .join(' ')
                     : '';
-                return (_jsxs(Box, { paddingX: 1, paddingY: 0, backgroundColor: isSelected ? 'yellow' : undefined, flexDirection: "row", children: [_jsxs(Text, { color: isSelected ? 'black' : 'gray', bold: isSelected, children: ["/", prompt.name] }), argsString && (_jsxs(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: [' ', argsString] })), description && (_jsxs(Text, { color: isSelected ? 'black' : 'gray', dimColor: !isSelected, children: ['    ', description] }))] }, `prompt-${prompt.name}`));
-            }), hasMoreBelow && (_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { dimColor: true, children: ["... \u2193 (", totalItems - scrollOffset - MAX_VISIBLE_ITEMS, " more below)"] }) }))] }));
-}
+                const description = prompt.title || prompt.description || '';
+                // Two-line layout:
+                // Line 1: /command-name <args>
+                // Line 2:     Description text (source)
+                const commandText = nameText + argsString;
+                const sourceLabel = prompt.source || 'prompt';
+                return (_jsxs(Box, { flexDirection: "column", paddingX: 0, children: [_jsx(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: commandText }), _jsxs(Text, { color: isSelected ? 'white' : 'gray', dimColor: !isSelected, children: ['    ', description, ` (${sourceLabel})`] })] }, `prompt-${prompt.name}`));
+            })] }));
+});
+/**
+ * Export with React.memo to prevent unnecessary re-renders from parent
+ * Only re-renders when props actually change (shallow comparison)
+ */
+export const SlashCommandAutocomplete = React.memo(SlashCommandAutocompleteInner);

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

@@ -1,17 +1,30 @@
 /**
  * StatusBar Component
  * Displays processing status and controls above the input area
+ *
+ * Layout:
+ * - Line 1: Spinner + phrase (+ queue count if any)
+ * - Line 2: Meta info (time, tokens, cancel hint)
+ * This 2-line layout prevents truncation on any terminal width.
  */
+import type { DextoAgent } from '@dexto/core';
 interface StatusBarProps {
+    agent: DextoAgent;
     isProcessing: boolean;
     isThinking: boolean;
     approvalQueueCount: number;
-    exitWarningShown?: boolean;
+    copyModeEnabled?: boolean;
+    /** Whether an approval prompt is currently shown */
+    isAwaitingApproval?: boolean;
 }
 /**
  * Status bar that shows processing state above input area
  * Provides clear feedback on whether the agent is running or idle
+ *
+ * Design decisions:
+ * - Hide spinner during approval wait (user is reviewing, not waiting)
+ * - Only show elapsed time after 30s (avoid visual noise for fast operations)
  */
-export declare function StatusBar({ isProcessing, isThinking, approvalQueueCount, exitWarningShown, }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatusBar({ agent, isProcessing, isThinking, approvalQueueCount, copyModeEnabled, isAwaitingApproval, }: StatusBarProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=StatusBar.d.ts.map

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;;;GAGG;AAKH,UAAU,cAAc;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACtB,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,gBAAwB,GAC3B,EAAE,cAAc,2CA+DhB"}
+{"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,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,eAAuB,EACvB,kBAA0B,GAC7B,EAAE,cAAc,kDAwFhB"}

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

@@ -2,28 +2,66 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * StatusBar Component
  * Displays processing status and controls above the input area
+ *
+ * Layout:
+ * - Line 1: Spinner + phrase (+ queue count if any)
+ * - Line 2: Meta info (time, tokens, cancel hint)
+ * 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';
 /**
  * Status bar that shows processing state above input area
  * Provides clear feedback on whether the agent is running or idle
+ *
+ * Design decisions:
+ * - Hide spinner during approval wait (user is reviewing, not waiting)
+ * - Only show elapsed time after 30s (avoid visual noise for fast operations)
  */
-export function StatusBar({ isProcessing, isThinking, approvalQueueCount, exitWarningShown = false, }) {
-    // Show exit warning if Ctrl+C was pressed
-    if (exitWarningShown) {
-        return (_jsxs(Box, { paddingX: 1, marginBottom: 0, children: [_jsx(Text, { color: "yellow", bold: true, children: "\u26A0 Press Ctrl+C again to exit" }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "(or press any key to cancel)"] })] }));
+export function StatusBar({ agent, isProcessing, isThinking, approvalQueueCount, copyModeEnabled = false, isAwaitingApproval = false, }) {
+    // Cycle through witty phrases while processing
+    const { phrase } = usePhraseCycler({ isActive: isProcessing });
+    // Track elapsed time during processing
+    const { formatted: elapsedTime, elapsedMs } = useElapsedTime({ isActive: isProcessing });
+    // Track token usage during processing
+    const { formatted: tokenCount } = useTokenCounter({ agent, isActive: isProcessing });
+    // Only show time after 30 seconds
+    const showTime = elapsedMs >= 30000;
+    // Show copy mode warning (highest priority)
+    if (copyModeEnabled) {
+        return (_jsx(Box, { paddingX: 1, marginBottom: 0, children: _jsx(Text, { color: "yellow", bold: true, children: "\uD83D\uDCCB Copy Mode - Select text with mouse. Press any key to exit." }) }));
     }
     if (!isProcessing) {
-        // Show idle state - minimal, non-intrusive
-        return (_jsxs(Box, { paddingX: 1, marginBottom: 0, children: [_jsx(Text, { color: "green", children: "\u25CF" }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "Ready"] })] }));
+        // No status bar when idle
+        return null;
+    }
+    // Hide status bar during approval wait - user is reviewing, not waiting
+    if (isAwaitingApproval) {
+        return null;
     }
     // Show initial processing state (before streaming starts) - magenta color
     // TODO: Rename this event/state to "reasoning" and associate it with actual reasoning tokens
     // Currently "thinking" event fires before any response, not during reasoning token generation
     if (isThinking) {
-        return (_jsxs(Box, { paddingX: 1, marginBottom: 0, flexDirection: "row", children: [_jsx(Text, { color: "magenta", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "magenta", children: " Processing" }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 Press Esc or Ctrl+C to cancel"] })] }));
+        const metaParts = [];
+        if (showTime)
+            metaParts.push(`(${elapsedTime})`);
+        metaParts.push('Esc to cancel');
+        const metaContent = metaParts.join(' • ');
+        return (_jsxs(Box, { paddingX: 1, marginTop: 1, marginBottom: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Text, { color: "magenta", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { color: "magenta", children: [" ", phrase] })] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", dimColor: true, children: metaContent }) })] }));
     }
     // Show active streaming state - cyan color
-    return (_jsxs(Box, { paddingX: 1, marginBottom: 0, flexDirection: "row", children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "cyan", children: " Processing" }), approvalQueueCount > 0 && (_jsxs(Text, { color: "yellow", children: [" \u2022 ", approvalQueueCount, " approval(s) queued"] })), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 Press Esc or Ctrl+C to cancel"] })] }));
+    // Always use 2-line layout: phrase on first line, meta on second
+    // This prevents truncation and messy wrapping on any terminal width
+    const metaParts = [];
+    if (showTime)
+        metaParts.push(`(${elapsedTime})`);
+    if (tokenCount)
+        metaParts.push(tokenCount);
+    metaParts.push('Esc to cancel');
+    const metaContent = metaParts.join(' • ');
+    return (_jsxs(Box, { paddingX: 1, marginTop: 1, marginBottom: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { color: "cyan", children: [" ", phrase] }), approvalQueueCount > 0 && (_jsxs(Text, { color: "yellow", children: [" \u2022 ", approvalQueueCount, " queued"] }))] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", dimColor: true, children: metaContent }) })] }));
 }

package/dist/cli/ink-cli/components/TextBufferInput.d.ts

@@ -0,0 +1,52 @@
+/**
+ * TextBufferInput Component
+ *
+ * Buffer is passed as prop from parent.
+ * Uses direct useKeypress for input handling (no ref chain).
+ * Parent owns the buffer and can read values directly.
+ */
+import type { TextBuffer } from './shared/text-buffer.js';
+import type { PendingImage, PastedBlock } from '../state/types.js';
+/** Overlay trigger types for event-driven overlay detection */
+export type OverlayTrigger = 'slash-autocomplete' | 'resource-autocomplete' | 'close';
+interface TextBufferInputProps {
+    /** Text buffer (owned by parent) */
+    buffer: TextBuffer;
+    /** Called when user presses Enter to submit */
+    onSubmit: (value: string) => void;
+    /** Placeholder text when empty */
+    placeholder?: string | undefined;
+    /** Whether input handling is disabled (e.g., during processing) */
+    isDisabled?: boolean | undefined;
+    /** Called for history navigation (up/down at boundaries) */
+    onHistoryNavigate?: ((direction: 'up' | 'down') => void) | undefined;
+    /** Called to trigger overlay (slash command, @mention) */
+    onTriggerOverlay?: ((trigger: OverlayTrigger) => void) | undefined;
+    /** Maximum lines to show in viewport */
+    maxViewportLines?: number | undefined;
+    /** Whether this input should handle keypresses */
+    isActive: boolean;
+    /** Optional handler for keyboard scroll (PageUp/PageDown, Shift+arrows) */
+    onKeyboardScroll?: ((direction: 'up' | 'down') => void) | undefined;
+    /** Current number of attached images (for placeholder numbering) */
+    imageCount?: number | undefined;
+    /** Called when image is pasted from clipboard */
+    onImagePaste?: ((image: PendingImage) => void) | undefined;
+    /** Current pending images (for placeholder removal detection) */
+    images?: PendingImage[] | undefined;
+    /** Called when an image placeholder is removed from text */
+    onImageRemove?: ((imageId: string) => void) | undefined;
+    /** Current pasted blocks for collapse/expand feature */
+    pastedBlocks?: PastedBlock[] | undefined;
+    /** Called when a large paste is detected and should be collapsed */
+    onPasteBlock?: ((block: PastedBlock) => void) | undefined;
+    /** Called to update a pasted block (e.g., toggle collapse) */
+    onPasteBlockUpdate?: ((blockId: string, updates: Partial<PastedBlock>) => void) | undefined;
+    /** Called when a paste block placeholder is removed from text */
+    onPasteBlockRemove?: ((blockId: string) => void) | undefined;
+    /** Query to highlight in input text (for history search) */
+    highlightQuery?: string | undefined;
+}
+export declare function TextBufferInput({ buffer, onSubmit, placeholder, isDisabled, onHistoryNavigate, onTriggerOverlay, maxViewportLines, isActive, onKeyboardScroll, imageCount, onImagePaste, images, onImageRemove, pastedBlocks, onPasteBlock, onPasteBlockUpdate, onPasteBlockRemove, highlightQuery, }: TextBufferInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TextBufferInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextBufferInput.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/TextBufferInput.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGnE,+DAA+D;AAC/D,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,uBAAuB,GAAG,OAAO,CAAC;AActF,UAAU,oBAAoB;IAC1B,oCAAoC;IACpC,MAAM,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACrE,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,kDAAkD;IAClD,QAAQ,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpE,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,iEAAiE;IACjE,MAAM,CAAC,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IACpC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACxD,wDAAwD;IACxD,YAAY,CAAC,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;IACzC,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1D,8DAA8D;IAC9D,kBAAkB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5F,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7D,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAuCD,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,UAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAqB,EACrB,QAAQ,EACR,gBAAgB,EAChB,UAAc,EACd,YAAY,EACZ,MAAW,EACX,aAAa,EACb,YAAiB,EACjB,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,GACjB,EAAE,oBAAoB,2CA8gBtB"}