@quantum-ai/gemini-cli 0.45.8 → 0.45.10

package/dist/ui/components/Footer.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+import { shortenPath, tildeifyPath, getDisplayString, checkExhaustive, AuthType, UserAccountManager, } from '@google/gemini-cli-core';
+import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js';
+import process from 'node:process';
+import os from 'node:os';
+import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
+import { ContextUsageDisplay } from './ContextUsageDisplay.js';
+import { QuotaDisplay } from './QuotaDisplay.js';
+import { DebugProfiler } from './DebugProfiler.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useQuotaState } from '../contexts/QuotaContext.js';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+import { useVimMode } from '../contexts/VimModeContext.js';
+import { useInputState } from '../contexts/InputContext.js';
+import { ALL_ITEMS, deriveItemsFromLegacySettings, } from '../../config/footerItems.js';
+import { isDevelopment } from '../../utils/installationInfo.js';
+const HOSTNAME = os.hostname();
+const CwdIndicator = ({ targetDir, maxWidth, debugMode, debugMessage, color = theme.text.primary, }) => {
+    const debugSuffix = debugMode ? ' ' + (debugMessage || '--debug') : '';
+    const availableForPath = Math.max(10, maxWidth - debugSuffix.length);
+    const displayPath = shortenPath(tildeifyPath(targetDir), availableForPath);
+    return (_jsxs(Text, { color: color, children: [displayPath, debugMode && _jsx(Text, { color: theme.status.error, children: debugSuffix })] }));
+};
+const SandboxIndicator = ({ isTrustedFolder, }) => {
+    const config = useConfig();
+    const sandboxEnabled = config.getSandboxEnabled();
+    if (isTrustedFolder === false) {
+        return _jsx(Text, { color: theme.status.warning, children: "untrusted" });
+    }
+    const sandbox = process.env['SANDBOX'];
+    if (sandbox) {
+        return _jsx(Text, { color: theme.status.warning, children: "current process" });
+    }
+    if (sandboxEnabled) {
+        return _jsx(Text, { color: theme.status.warning, children: "all tools" });
+    }
+    return _jsx(Text, { color: theme.status.error, children: "no sandbox" });
+};
+const CorgiIndicator = () => (_jsxs(Text, { children: [_jsx(Text, { color: theme.status.error, children: "\u25BC" }), _jsx(Text, { color: theme.text.primary, children: "(\u00B4" }), _jsx(Text, { color: theme.status.error, children: "\u1D25" }), _jsx(Text, { color: theme.text.primary, children: "`)" }), _jsx(Text, { color: theme.status.error, children: "\u25BC" })] }));
+const COLUMN_GAP = 3;
+export const FooterRow = ({ items, showLabels }) => {
+    const elements = [];
+    items.forEach((item, idx) => {
+        if (idx > 0) {
+            elements.push(_jsx(Box, { flexGrow: 1, flexShrink: 1, minWidth: showLabels ? COLUMN_GAP : 3, justifyContent: "center", alignItems: "center", children: !showLabels && _jsx(Text, { color: theme.ui.comment, children: " \u00B7 " }) }, `sep-${item.key}`));
+        }
+        elements.push(_jsxs(Box, { flexDirection: "column", flexGrow: item.flexGrow ?? 0, flexShrink: item.flexShrink ?? 1, alignItems: item.alignItems, backgroundColor: item.isFocused ? theme.background.focus : undefined, children: [showLabels && (_jsx(Box, { height: 1, children: _jsx(Text, { color: item.isFocused ? theme.text.primary : theme.ui.comment, children: item.header }) })), _jsx(Box, { height: 1, children: item.element })] }, item.key));
+    });
+    return (_jsx(Box, { flexDirection: "row", flexWrap: "nowrap", width: "100%", children: elements }));
+};
+function isFooterItemId(id) {
+    return ALL_ITEMS.some((i) => i.id === id);
+}
+export const Footer = () => {
+    const uiState = useUIState();
+    const quotaState = useQuotaState();
+    const { copyModeEnabled } = useInputState();
+    const config = useConfig();
+    const settings = useSettings();
+    const { vimEnabled, vimMode } = useVimMode();
+    const authType = config.getContentGeneratorConfig()?.authType;
+    const [email, setEmail] = useState();
+    useEffect(() => {
+        if (authType) {
+            const userAccountManager = new UserAccountManager();
+            setEmail(userAccountManager.getCachedGoogleAccount() ?? undefined);
+        }
+        else {
+            setEmail(undefined);
+        }
+    }, [authType]);
+    const { model, targetDir, debugMode, branchName, debugMessage, corgiMode, errorCount, showErrorDetails, promptTokenCount, isTrustedFolder, terminalWidth, } = {
+        model: uiState.currentModel,
+        targetDir: config.getTargetDir(),
+        debugMode: config.getDebugMode(),
+        branchName: uiState.branchName,
+        debugMessage: uiState.debugMessage,
+        corgiMode: uiState.corgiMode,
+        errorCount: uiState.errorCount,
+        showErrorDetails: uiState.showErrorDetails,
+        promptTokenCount: uiState.sessionStats.lastPromptTokenCount,
+        isTrustedFolder: uiState.isTrustedFolder,
+        terminalWidth: uiState.terminalWidth,
+    };
+    const quotaStats = quotaState.stats;
+    const isFullErrorVerbosity = settings.merged.ui.errorVerbosity === 'full';
+    const showErrorSummary = !showErrorDetails &&
+        errorCount > 0 &&
+        (isFullErrorVerbosity || debugMode || isDevelopment);
+    const displayVimMode = vimEnabled ? vimMode : undefined;
+    const items = settings.merged.ui.footer.items ??
+        deriveItemsFromLegacySettings(settings.merged);
+    const showLabels = settings.merged.ui.footer.showLabels !== false;
+    const itemColor = showLabels ? theme.text.primary : theme.ui.comment;
+    const potentialColumns = [];
+    const addCol = (id, header, element, dataWidth, isHighPriority = false) => {
+        potentialColumns.push({
+            id,
+            header: showLabels ? header : '',
+            element,
+            width: Math.max(dataWidth, showLabels ? header.length : 0),
+            isHighPriority,
+        });
+    };
+    // 1. System Indicators (Far Left, high priority)
+    if (uiState.showDebugProfiler) {
+        addCol('debug', '', () => _jsx(DebugProfiler, {}), 45, true);
+    }
+    if (displayVimMode) {
+        const vimStr = `[${displayVimMode}]`;
+        addCol('vim', '', () => _jsx(Text, { color: theme.text.accent, children: vimStr }), vimStr.length, true);
+    }
+    // 2. Main Configurable Items
+    for (const id of items) {
+        if (!isFooterItemId(id))
+            continue;
+        const itemConfig = ALL_ITEMS.find((i) => i.id === id);
+        const header = itemConfig?.header ?? id;
+        switch (id) {
+            case 'workspace': {
+                const fullPath = tildeifyPath(targetDir);
+                const debugSuffix = debugMode ? ' ' + (debugMessage || '--debug') : '';
+                addCol(id, header, (maxWidth) => (_jsx(CwdIndicator, { targetDir: targetDir, maxWidth: maxWidth, debugMode: debugMode, debugMessage: debugMessage, color: itemColor })), fullPath.length + debugSuffix.length);
+                break;
+            }
+            case 'git-branch': {
+                if (branchName) {
+                    addCol(id, header, () => _jsx(Text, { color: itemColor, children: branchName }), branchName.length);
+                }
+                break;
+            }
+            case 'sandbox': {
+                let str = 'no sandbox';
+                const sandbox = process.env['SANDBOX'];
+                if (isTrustedFolder === false)
+                    str = 'untrusted';
+                else if (sandbox)
+                    str = 'current process';
+                else if (config.getSandboxEnabled())
+                    str = 'all tools';
+                addCol(id, header, () => _jsx(SandboxIndicator, { isTrustedFolder: isTrustedFolder }), str.length);
+                break;
+            }
+            case 'model-name': {
+                const str = getDisplayString(model);
+                addCol(id, header, () => _jsx(Text, { color: itemColor, children: str }), str.length);
+                break;
+            }
+            case 'context-used': {
+                addCol(id, header, () => (_jsx(ContextUsageDisplay, { promptTokenCount: promptTokenCount, model: model, terminalWidth: terminalWidth })), 10);
+                break;
+            }
+            case 'quota': {
+                if (quotaStats?.remaining !== undefined && quotaStats.limit) {
+                    addCol(id, header, () => (_jsx(QuotaDisplay, { remaining: quotaStats.remaining, limit: quotaStats.limit, forceShow: true, lowercase: true })), 9);
+                }
+                break;
+            }
+            case 'memory-usage': {
+                addCol(id, header, () => (_jsx(MemoryUsageDisplay, { color: itemColor, isActive: !copyModeEnabled })), 10);
+                break;
+            }
+            case 'session-id': {
+                addCol(id, header, () => (_jsx(Text, { color: itemColor, children: uiState.sessionStats.sessionId.slice(0, 8) })), 8);
+                break;
+            }
+            case 'hostname': {
+                addCol(id, header, () => _jsx(Text, { color: itemColor, children: HOSTNAME }), HOSTNAME.length);
+                break;
+            }
+            case 'auth': {
+                if (!settings.merged.ui.showUserIdentity)
+                    break;
+                if (!authType)
+                    break;
+                const displayStr = authType === AuthType.LOGIN_WITH_GOOGLE
+                    ? (email ?? 'google')
+                    : authType;
+                addCol(id, header, () => (_jsx(Text, { color: itemColor, wrap: "truncate-end", children: displayStr })), displayStr.length);
+                break;
+            }
+            case 'code-changes': {
+                const added = uiState.sessionStats.metrics.files.totalLinesAdded;
+                const removed = uiState.sessionStats.metrics.files.totalLinesRemoved;
+                if (added > 0 || removed > 0) {
+                    const str = `+${added} -${removed}`;
+                    addCol(id, header, () => (_jsxs(Text, { children: [_jsxs(Text, { color: theme.status.success, children: ["+", added] }), ' ', _jsxs(Text, { color: theme.status.error, children: ["-", removed] })] })), str.length);
+                }
+                break;
+            }
+            case 'token-count': {
+                let total = 0;
+                for (const m of Object.values(uiState.sessionStats.metrics.models))
+                    total += m.tokens.total;
+                if (total > 0) {
+                    const formatter = new Intl.NumberFormat('en-US', {
+                        notation: 'compact',
+                        maximumFractionDigits: 1,
+                    });
+                    const formatted = formatter.format(total).toLowerCase();
+                    addCol(id, header, () => _jsxs(Text, { color: itemColor, children: [formatted, " tokens"] }), formatted.length + 7);
+                }
+                break;
+            }
+            default:
+                checkExhaustive(id);
+                break;
+        }
+    }
+    // 3. Transients
+    if (corgiMode)
+        addCol('corgi', '', () => _jsx(CorgiIndicator, {}), 5);
+    if (showErrorSummary) {
+        addCol('error-count', '', () => _jsx(ConsoleSummaryDisplay, { errorCount: errorCount }), 12, true);
+    }
+    // --- Width Fitting Logic ---
+    const columnsToRender = [];
+    let droppedAny = false;
+    let currentUsedWidth = 2; // Initial padding
+    for (const col of potentialColumns) {
+        const gap = columnsToRender.length > 0 ? (showLabels ? COLUMN_GAP : 3) : 0;
+        const budgetWidth = col.id === 'workspace' ? 20 : col.width;
+        if (col.isHighPriority ||
+            currentUsedWidth + gap + budgetWidth <= terminalWidth - 2) {
+            columnsToRender.push(col);
+            currentUsedWidth += gap + budgetWidth;
+        }
+        else {
+            droppedAny = true;
+        }
+    }
+    const rowItems = columnsToRender.map((col, index) => {
+        const isWorkspace = col.id === 'workspace';
+        const isLast = index === columnsToRender.length - 1;
+        // Calculate exact space available for growth to prevent over-estimation truncation
+        const otherItemsWidth = columnsToRender
+            .filter((c) => c.id !== 'workspace')
+            .reduce((sum, c) => sum + c.width, 0);
+        const numItems = columnsToRender.length + (droppedAny ? 1 : 0);
+        const numGaps = numItems > 1 ? numItems - 1 : 0;
+        const gapsWidth = numGaps * (showLabels ? COLUMN_GAP : 3);
+        const ellipsisWidth = droppedAny ? 1 : 0;
+        const availableForWorkspace = Math.max(20, terminalWidth - 2 - gapsWidth - otherItemsWidth - ellipsisWidth);
+        const estimatedWidth = isWorkspace ? availableForWorkspace : col.width;
+        return {
+            key: col.id,
+            header: col.header,
+            element: col.element(estimatedWidth),
+            flexGrow: 0,
+            flexShrink: isWorkspace ? 1 : 0,
+            alignItems: isLast && !droppedAny && index > 0 ? 'flex-end' : 'flex-start',
+        };
+    });
+    if (droppedAny) {
+        rowItems.push({
+            key: 'ellipsis',
+            header: '',
+            element: _jsx(Text, { color: theme.ui.comment, children: "\u2026" }),
+            flexGrow: 0,
+            flexShrink: 0,
+            alignItems: 'flex-end',
+        });
+    }
+    return (_jsx(Box, { width: terminalWidth, paddingX: 1, overflow: "hidden", flexWrap: "nowrap", children: _jsx(FooterRow, { items: rowItems, showLabels: showLabels }) }));
+};

package/dist/ui/components/FooterConfigDialog.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useReducer, useState } from 'react';
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+import { useSettingsStore } from '../contexts/SettingsContext.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { Command } from '../key/keyMatchers.js';
+import { FooterRow } from './Footer.js';
+import { ALL_ITEMS, resolveFooterState, deriveItemsFromLegacySettings, } from '../../config/footerItems.js';
+import { SettingScope } from '../../config/settings.js';
+import { BaseSelectionList } from './shared/BaseSelectionList.js';
+import { DialogFooter } from './shared/DialogFooter.js';
+import { useKeyMatchers } from '../hooks/useKeyMatchers.js';
+function footerConfigReducer(state, action) {
+    switch (action.type) {
+        case 'MOVE_ITEM': {
+            const currentIndex = state.orderedIds.indexOf(action.id);
+            const newIndex = currentIndex + action.direction;
+            if (currentIndex === -1 ||
+                newIndex < 0 ||
+                newIndex >= state.orderedIds.length) {
+                return state;
+            }
+            const newOrderedIds = [...state.orderedIds];
+            [newOrderedIds[currentIndex], newOrderedIds[newIndex]] = [
+                newOrderedIds[newIndex],
+                newOrderedIds[currentIndex],
+            ];
+            return { ...state, orderedIds: newOrderedIds };
+        }
+        case 'TOGGLE_ITEM': {
+            const nextSelected = new Set(state.selectedIds);
+            if (nextSelected.has(action.id)) {
+                nextSelected.delete(action.id);
+            }
+            else {
+                nextSelected.add(action.id);
+            }
+            return { ...state, selectedIds: nextSelected };
+        }
+        case 'SET_STATE':
+            return { ...state, ...action.payload };
+        default:
+            return state;
+    }
+}
+export const FooterConfigDialog = ({ onClose, }) => {
+    const keyMatchers = useKeyMatchers();
+    const { settings, setSetting } = useSettingsStore();
+    const { constrainHeight, terminalHeight, staticExtraHeight } = useUIState();
+    const [state, dispatch] = useReducer(footerConfigReducer, undefined, () => resolveFooterState(settings.merged));
+    const { orderedIds, selectedIds } = state;
+    const [focusKey, setFocusKey] = useState(orderedIds[0]);
+    const listItems = useMemo(() => {
+        const items = orderedIds
+            .map((id) => {
+            const item = ALL_ITEMS.find((i) => i.id === id);
+            if (!item)
+                return null;
+            return {
+                key: id,
+                value: {
+                    key: id,
+                    id,
+                    label: item.id,
+                    description: item.description,
+                    type: 'config',
+                },
+            };
+        })
+            .filter((i) => i !== null);
+        items.push({
+            key: 'show-labels',
+            value: {
+                key: 'show-labels',
+                id: 'show-labels',
+                label: 'Show footer labels',
+                type: 'labels-toggle',
+            },
+        });
+        items.push({
+            key: 'reset',
+            value: {
+                key: 'reset',
+                id: 'reset',
+                label: 'Reset to default footer',
+                type: 'reset',
+            },
+        });
+        return items;
+    }, [orderedIds]);
+    const handleSaveAndClose = useCallback(() => {
+        const finalItems = orderedIds.filter((id) => selectedIds.has(id));
+        const currentSetting = settings.merged.ui?.footer?.items;
+        // When items haven't been explicitly set yet (legacy mode), compare against
+        // the legacy-derived items to avoid persisting items and silently overriding
+        // legacy boolean settings like hideContextPercentage.
+        const effectiveCurrent = currentSetting ?? deriveItemsFromLegacySettings(settings.merged);
+        if (JSON.stringify(finalItems) !== JSON.stringify(effectiveCurrent)) {
+            setSetting(SettingScope.User, 'ui.footer.items', finalItems);
+        }
+        onClose?.();
+    }, [orderedIds, selectedIds, setSetting, settings.merged, onClose]);
+    const handleResetToDefaults = useCallback(() => {
+        setSetting(SettingScope.User, 'ui.footer.items', undefined);
+        const newState = resolveFooterState(settings.merged);
+        dispatch({ type: 'SET_STATE', payload: newState });
+        setFocusKey(newState.orderedIds[0]);
+    }, [setSetting, settings.merged]);
+    const handleToggleLabels = useCallback(() => {
+        const current = settings.merged.ui.footer.showLabels !== false;
+        setSetting(SettingScope.User, 'ui.footer.showLabels', !current);
+    }, [setSetting, settings.merged.ui.footer.showLabels]);
+    const handleSelect = useCallback((item) => {
+        if (item.type === 'config') {
+            dispatch({ type: 'TOGGLE_ITEM', id: item.id });
+        }
+        else if (item.type === 'labels-toggle') {
+            handleToggleLabels();
+        }
+        else if (item.type === 'reset') {
+            handleResetToDefaults();
+        }
+    }, [handleResetToDefaults, handleToggleLabels]);
+    const handleHighlight = useCallback((item) => {
+        setFocusKey(item.key);
+    }, []);
+    useKeypress((key) => {
+        if (keyMatchers[Command.ESCAPE](key)) {
+            handleSaveAndClose();
+            return true;
+        }
+        if (keyMatchers[Command.MOVE_LEFT](key)) {
+            if (focusKey && orderedIds.includes(focusKey)) {
+                dispatch({ type: 'MOVE_ITEM', id: focusKey, direction: -1 });
+                return true;
+            }
+        }
+        if (keyMatchers[Command.MOVE_RIGHT](key)) {
+            if (focusKey && orderedIds.includes(focusKey)) {
+                dispatch({ type: 'MOVE_ITEM', id: focusKey, direction: 1 });
+                return true;
+            }
+        }
+        return false;
+    }, { isActive: true, priority: true });
+    const showLabels = settings.merged.ui.footer.showLabels !== false;
+    // Preview logic
+    const previewContent = useMemo(() => {
+        if (focusKey === 'reset') {
+            return (_jsx(Text, { color: theme.ui.comment, italic: true, children: "Default footer (uses legacy settings)" }));
+        }
+        const itemsToPreview = orderedIds.filter((id) => selectedIds.has(id));
+        if (itemsToPreview.length === 0)
+            return null;
+        const itemColor = showLabels ? theme.text.primary : theme.ui.comment;
+        const getColor = (id, defaultColor) => defaultColor || itemColor;
+        // Mock data for preview (headers come from ALL_ITEMS)
+        const mockData = {
+            workspace: (_jsx(Text, { color: getColor('workspace', itemColor), children: "~/project/path" })),
+            'git-branch': _jsx(Text, { color: getColor('git-branch', itemColor), children: "main" }),
+            sandbox: _jsx(Text, { color: getColor('sandbox', 'green'), children: "docker" }),
+            'model-name': (_jsx(Text, { color: getColor('model-name', itemColor), children: "gemini-2.5-pro" })),
+            'context-used': (_jsx(Text, { color: getColor('context-used', itemColor), children: "85% used" })),
+            quota: _jsx(Text, { color: getColor('quota', itemColor), children: "42% used" }),
+            'memory-usage': (_jsx(Text, { color: getColor('memory-usage', itemColor), children: "260 MB" })),
+            'session-id': (_jsx(Text, { color: getColor('session-id', itemColor), children: "769992f9" })),
+            hostname: (_jsx(Text, { color: getColor('hostname', itemColor), children: "dev-machine" })),
+            'code-changes': (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: getColor('code-changes', theme.status.success), children: "+12" }), _jsx(Text, { color: getColor('code-changes'), children: " " }), _jsx(Text, { color: getColor('code-changes', theme.status.error), children: "-4" })] })),
+            auth: _jsx(Text, { color: getColor('auth', itemColor), children: "test@example.com" }),
+            'token-count': (_jsx(Text, { color: getColor('token-count', itemColor), children: "1.5k tokens" })),
+        };
+        const rowItems = itemsToPreview
+            .filter((id) => mockData[id])
+            .map((id) => ({
+            key: id,
+            header: ALL_ITEMS.find((i) => i.id === id)?.header ?? id,
+            element: mockData[id],
+            flexGrow: 0,
+            isFocused: id === focusKey,
+        }));
+        return (_jsx(Box, { overflow: "hidden", flexWrap: "nowrap", width: "100%", children: _jsx(FooterRow, { items: rowItems, showLabels: showLabels }) }));
+    }, [orderedIds, selectedIds, focusKey, showLabels]);
+    const availableTerminalHeight = constrainHeight
+        ? terminalHeight - staticExtraHeight
+        : Number.MAX_SAFE_INTEGER;
+    const BORDER_HEIGHT = 2; // Outer round border
+    const STATIC_ELEMENTS = 13; // Text, margins, preview box, dialog footer
+    // Default padding adds 2 lines (top and bottom)
+    let includePadding = true;
+    if (availableTerminalHeight < BORDER_HEIGHT + 2 + STATIC_ELEMENTS + 6) {
+        includePadding = false;
+    }
+    const effectivePaddingY = includePadding ? 2 : 0;
+    const availableListSpace = Math.max(0, availableTerminalHeight -
+        BORDER_HEIGHT -
+        effectivePaddingY -
+        STATIC_ELEMENTS);
+    const maxItemsToShow = Math.max(1, Math.min(listItems.length, Math.floor(availableListSpace / 2)));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.default, paddingX: 2, paddingY: includePadding ? 1 : 0, width: "100%", children: [_jsxs(Text, { bold: true, children: ["Configure Footer", '\n'] }), _jsx(Text, { color: theme.text.secondary, children: "Select which items to display in the footer." }), _jsx(Box, { flexDirection: "column", marginTop: 1, flexGrow: 1, children: _jsx(BaseSelectionList, { items: listItems, onSelect: handleSelect, onHighlight: handleHighlight, focusKey: focusKey, showNumbers: false, maxItemsToShow: maxItemsToShow, showScrollArrows: true, selectedIndicator: ">", renderItem: (item, { isSelected, titleColor }) => {
+                        const configItem = item.value;
+                        const isChecked = configItem.type === 'config'
+                            ? selectedIds.has(configItem.id)
+                            : configItem.type === 'labels-toggle'
+                                ? showLabels
+                                : false;
+                        return (_jsxs(Box, { flexDirection: "column", minHeight: 2, children: [_jsxs(Box, { flexDirection: "row", children: [configItem.type !== 'reset' && (_jsxs(Text, { color: isChecked ? theme.status.success : theme.text.secondary, children: ["[", isChecked ? '✓' : ' ', "]"] })), _jsxs(Text, { color: configItem.type === 'reset' && isSelected
+                                                ? theme.status.warning
+                                                : titleColor, children: [configItem.type !== 'reset' ? ' ' : '', configItem.label] })] }), configItem.description && (_jsxs(Text, { color: theme.text.secondary, wrap: "wrap", children: [' ', configItem.description] }))] }));
+                    } }) }), _jsx(DialogFooter, { primaryAction: "Enter to select", navigationActions: "\u2191/\u2193 to navigate \u00B7 \u2190/\u2192 to reorder", cancelAction: "Esc to close" }), _jsxs(Box, { marginTop: 1, borderStyle: "single", borderColor: theme.border.default, paddingX: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Preview:" }), _jsx(Box, { flexDirection: "row", width: "100%", children: previewContent })] })] }));
+};

package/dist/ui/components/GeminiRespondingSpinner.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+;
+import { useStreamingContext } from '../contexts/StreamingContext.js';
+import { StreamingState } from '../types.js';
+import { SCREEN_READER_LOADING, SCREEN_READER_RESPONDING, } from '../textConstants.js';
+import { theme } from '../semantic-colors.js';
+import { GeminiSpinner } from './GeminiSpinner.js';
+export const GeminiRespondingSpinner = ({ nonRespondingDisplay, spinnerType = 'dots', isHookActive = false, color, }) => {
+    const streamingState = useStreamingContext();
+    // Ink v4 compatibility
+    const isScreenReaderEnabled = false;
+    // If a hook is active, we want to show the hook icon (nonRespondingDisplay)
+    // to be consistent, instead of the rainbow spinner which means "Gemini is talking".
+    if (streamingState === StreamingState.Responding && !isHookActive) {
+        return (_jsx(GeminiSpinner, { spinnerType: spinnerType, altText: SCREEN_READER_RESPONDING }));
+    }
+    if (nonRespondingDisplay) {
+        return isScreenReaderEnabled ? (_jsx(Text, { children: SCREEN_READER_LOADING })) : (_jsx(Text, { color: color ?? theme.text.primary, children: nonRespondingDisplay }));
+    }
+    return null;
+};

package/dist/ui/components/GeminiSpinner.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { Text } from 'ink';
+;
+import { CliSpinner } from './CliSpinner.js';
+import { Colors } from '../colors.js';
+import tinygradient from 'tinygradient';
+const COLOR_CYCLE_DURATION_MS = 4000;
+export const GeminiSpinner = ({ spinnerType = 'dots', altText, }) => {
+    const isScreenReaderEnabled = false; // Ink v4
+    const [time, setTime] = useState(0);
+    const googleGradient = useMemo(() => {
+        const brandColors = [
+            Colors.AccentPurple,
+            Colors.AccentBlue,
+            Colors.AccentCyan,
+            Colors.AccentGreen,
+            Colors.AccentYellow,
+            Colors.AccentRed,
+        ];
+        return tinygradient([...brandColors, brandColors[0]]);
+    }, []);
+    useEffect(() => {
+        if (isScreenReaderEnabled) {
+            return;
+        }
+        const interval = setInterval(() => {
+            setTime((prevTime) => prevTime + 30);
+        }, 30); // ~33fps for smooth color transitions
+        return () => clearInterval(interval);
+    }, [isScreenReaderEnabled]);
+    const progress = (time % COLOR_CYCLE_DURATION_MS) / COLOR_CYCLE_DURATION_MS;
+    const currentColor = googleGradient.rgbAt(progress).toHexString();
+    return isScreenReaderEnabled ? (_jsx(Text, { children: altText })) : (_jsx(Text, { color: currentColor, children: _jsx(CliSpinner, { type: spinnerType }) }));
+};

package/dist/ui/components/Header.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from 'ink';
+;
+import { ThemedGradient } from './ThemedGradient.js';
+import { shortAsciiLogo, longAsciiLogo, tinyAsciiLogo } from './AsciiArt.js';
+import { getAsciiArtWidth } from '../utils/textUtils.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { useSnowfall } from '../hooks/useSnowfall.js';
+export const Header = ({ customAsciiArt, version, nightly, }) => {
+    const { columns: terminalWidth } = useTerminalSize();
+    let displayTitle;
+    const widthOfLongLogo = getAsciiArtWidth(longAsciiLogo);
+    const widthOfShortLogo = getAsciiArtWidth(shortAsciiLogo);
+    if (customAsciiArt) {
+        displayTitle = customAsciiArt;
+    }
+    else if (terminalWidth >= widthOfLongLogo) {
+        displayTitle = longAsciiLogo;
+    }
+    else if (terminalWidth >= widthOfShortLogo) {
+        displayTitle = shortAsciiLogo;
+    }
+    else {
+        displayTitle = tinyAsciiLogo;
+    }
+    const artWidth = getAsciiArtWidth(displayTitle);
+    const title = useSnowfall(displayTitle);
+    return (_jsxs(Box, { alignItems: "flex-start", width: artWidth, flexShrink: 0, flexDirection: "column", children: [_jsx(ThemedGradient, { children: title }), nightly && (_jsx(Box, { width: "100%", flexDirection: "row", justifyContent: "flex-end", children: _jsxs(ThemedGradient, { children: ["v", version] }) }))] }));
+};

package/dist/ui/components/Help.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+import { CommandKind } from '../commands/types.js';
+import { KEYBOARD_SHORTCUTS_URL } from '../constants.js';
+import { sanitizeForDisplay } from '../utils/textUtils.js';
+import { formatCommand } from '../key/keybindingUtils.js';
+import { Command } from '../key/keyBindings.js';
+export const Help = ({ commands }) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, borderColor: theme.border.default, borderStyle: "round", padding: 1, children: [_jsx(Text, { bold: true, color: theme.text.primary, children: "Basics:" }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: "Add context" }), ": Use", ' ', _jsx(Text, { bold: true, color: theme.text.accent, children: "@" }), ' ', "to specify files for context (e.g.,", ' ', _jsx(Text, { bold: true, color: theme.text.accent, children: "@src/myFile.ts" }), ") to target specific files or folders."] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: "Shell mode" }), ": Execute shell commands via", ' ', _jsx(Text, { bold: true, color: theme.text.accent, children: "!" }), ' ', "(e.g.,", ' ', _jsx(Text, { bold: true, color: theme.text.accent, children: "!npm run start" }), ") or use natural language (e.g.", ' ', _jsx(Text, { bold: true, color: theme.text.accent, children: "start server" }), ")."] }), _jsx(Box, { height: 1 }), _jsx(Text, { bold: true, color: theme.text.primary, children: "Commands:" }), commands
+            .filter((command) => command.description && !command.hidden)
+            .map((command) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.text.primary, children: [_jsxs(Text, { bold: true, color: theme.text.accent, children: [' ', "/", command.name] }), command.kind === CommandKind.MCP_PROMPT && (_jsx(Text, { color: theme.text.secondary, children: " [MCP]" })), command.description &&
+                            ' - ' + sanitizeForDisplay(command.description, 100)] }), command.subCommands &&
+                    command.subCommands
+                        .filter((subCommand) => !subCommand.hidden)
+                        .map((subCommand) => (_jsxs(Text, { color: theme.text.primary, children: [_jsxs(Text, { bold: true, color: theme.text.accent, children: ['   ', subCommand.name] }), subCommand.description &&
+                                ' - ' + sanitizeForDisplay(subCommand.description, 100)] }, subCommand.name)))] }, command.name))), _jsxs(Text, { color: theme.text.primary, children: [_jsxs(Text, { bold: true, color: theme.text.accent, children: [' ', "!", ' '] }), "- shell command"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { color: theme.text.secondary, children: "[MCP]" }), " - Model Context Protocol command (from external servers)"] }), _jsx(Box, { height: 1 }), _jsx(Text, { bold: true, color: theme.text.primary, children: "Keyboard Shortcuts:" }), _jsxs(Text, { color: theme.text.primary, children: [_jsxs(Text, { bold: true, color: theme.text.accent, children: [formatCommand(Command.MOVE_WORD_LEFT), "/", formatCommand(Command.MOVE_WORD_RIGHT)] }), ' ', "- Jump through words in the input"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: formatCommand(Command.QUIT) }), ' ', "- Quit application"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: formatCommand(Command.NEWLINE) }), ' ', "- New line"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: formatCommand(Command.CLEAR_SCREEN) }), ' ', "- Clear the screen"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: formatCommand(Command.TOGGLE_COPY_MODE) }), ' ', "- Enter selection mode to copy text"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: formatCommand(Command.OPEN_EXTERNAL_EDITOR) }), ' ', "- Open input in external editor"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: formatCommand(Command.TOGGLE_YOLO) }), ' ', "- Toggle YOLO mode"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: formatCommand(Command.SUBMIT) }), ' ', "- Send message"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: formatCommand(Command.ESCAPE) }), ' ', "- Cancel operation / Clear input (double press)"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsxs(Text, { bold: true, color: theme.text.accent, children: [formatCommand(Command.PAGE_UP), "/", formatCommand(Command.PAGE_DOWN)] }), ' ', "- Scroll page up/down"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsx(Text, { bold: true, color: theme.text.accent, children: formatCommand(Command.CYCLE_APPROVAL_MODE) }), ' ', "- Toggle auto-accepting edits"] }), _jsxs(Text, { color: theme.text.primary, children: [_jsxs(Text, { bold: true, color: theme.text.accent, children: [formatCommand(Command.HISTORY_UP), "/", formatCommand(Command.HISTORY_DOWN)] }), ' ', "- Cycle through your prompt history"] }), _jsx(Box, { height: 1 }), _jsxs(Text, { color: theme.text.primary, children: ["For a full list of shortcuts, see", ' ', _jsx(Text, { bold: true, color: theme.text.accent, children: KEYBOARD_SHORTCUTS_URL })] })] }));