@quantum-ai/gemini-cli 0.45.8 → 0.45.9

package/dist/ui/components/StatusRow.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef, useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+;
+import Polyfill from 'resize-observer-polyfill';
+const ResizeObserver = Polyfill.default || Polyfill.ResizeObserver || Polyfill;
+import { isUserVisibleHook, } from '@google/gemini-cli-core';
+import stripAnsi from 'strip-ansi';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+import { theme } from '../semantic-colors.js';
+import { GENERIC_WORKING_LABEL } from '../textConstants.js';
+import { INTERACTIVE_SHELL_WAITING_PHRASE } from '../hooks/usePhraseCycler.js';
+import { LoadingIndicator } from './LoadingIndicator.js';
+import { StatusDisplay } from './StatusDisplay.js';
+import { ContextUsageDisplay } from './ContextUsageDisplay.js';
+import { HorizontalLine } from './shared/HorizontalLine.js';
+import { ApprovalModeIndicator } from './ApprovalModeIndicator.js';
+import { ShellModeIndicator } from './ShellModeIndicator.js';
+import { RawMarkdownIndicator } from './RawMarkdownIndicator.js';
+import { useComposerStatus } from '../hooks/useComposerStatus.js';
+/**
+ * Layout constants to prevent magic numbers.
+ */
+const LAYOUT = {
+    STATUS_MIN_HEIGHT: 1,
+    TIP_LEFT_MARGIN: 2,
+    TIP_RIGHT_MARGIN_NARROW: 0,
+    TIP_RIGHT_MARGIN_WIDE: 1,
+    INDICATOR_LEFT_MARGIN: 1,
+    CONTEXT_DISPLAY_TOP_MARGIN_NARROW: 1,
+    CONTEXT_DISPLAY_LEFT_MARGIN_NARROW: 1,
+    CONTEXT_DISPLAY_LEFT_MARGIN_WIDE: 0,
+    COLLISION_GAP: 10,
+};
+/**
+ * Renders the loading or hook execution status.
+ */
+export const StatusNode = ({ showTips, showWit, thought, elapsedTime, currentWittyPhrase, activeHooks, showLoadingIndicator, errorVerbosity, onResize, }) => {
+    const observerRef = useRef(null);
+    useEffect(() => () => {
+        observerRef.current?.disconnect();
+    }, []);
+    const onRefChange = useCallback((node) => {
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        if (node && onResize) {
+            const observer = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (entry) {
+                    onResize(Math.round(entry.contentRect.width));
+                }
+            });
+            observer.observe(node);
+            observerRef.current = observer;
+        }
+    }, [onResize]);
+    if (activeHooks.length === 0 && !showLoadingIndicator)
+        return null;
+    let currentLoadingPhrase = undefined;
+    let currentThought = null;
+    if (activeHooks.length > 0) {
+        const userVisibleHooks = activeHooks.filter((h) => isUserVisibleHook(h.source));
+        if (userVisibleHooks.length > 0) {
+            const label = userVisibleHooks.length > 1 ? 'Executing Hooks' : 'Executing Hook';
+            const displayNames = userVisibleHooks.map((h) => {
+                let name = stripAnsi(h.name);
+                if (h.index && h.total && h.total > 1) {
+                    name += ` (${h.index}/${h.total})`;
+                }
+                return name;
+            });
+            currentLoadingPhrase = `${label}: ${displayNames.join(', ')}`;
+        }
+        else {
+            currentLoadingPhrase = GENERIC_WORKING_LABEL;
+        }
+    }
+    else {
+        // Sanitize thought subject to prevent terminal injection
+        currentThought = thought
+            ? { ...thought, subject: stripAnsi(thought.subject) }
+            : null;
+    }
+    return (_jsx(Box, { ref: onRefChange, children: _jsx(LoadingIndicator, { inline: true, showTips: showTips, showWit: showWit, errorVerbosity: errorVerbosity, thought: currentThought, currentLoadingPhrase: currentLoadingPhrase, elapsedTime: elapsedTime, forceRealStatusOnly: false, wittyPhrase: currentWittyPhrase }) }));
+};
+import { useInputState } from '../contexts/InputContext.js';
+export const StatusRow = ({ showUiDetails, isNarrow, terminalWidth, hideContextSummary, hideUiDetailsForSuggestions, hasPendingActionRequired, }) => {
+    const uiState = useUIState();
+    const inputState = useInputState();
+    const settings = useSettings();
+    const { isInteractiveShellWaiting, showLoadingIndicator, showTips, showWit, modeContentObj, showMinimalContext, } = useComposerStatus();
+    const [statusWidth, setStatusWidth] = useState(0);
+    const [tipWidth, setTipWidth] = useState(0);
+    const tipObserverRef = useRef(null);
+    useEffect(() => () => {
+        tipObserverRef.current?.disconnect();
+    }, []);
+    const onTipRefChange = useCallback((node) => {
+        if (tipObserverRef.current) {
+            tipObserverRef.current.disconnect();
+            tipObserverRef.current = null;
+        }
+        if (node) {
+            const observer = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (entry) {
+                    const width = Math.round(entry.contentRect.width);
+                    // Only update if width > 0 to prevent layout feedback loops
+                    // when the tip is hidden. This ensures we always use the
+                    // intrinsic width for collision detection.
+                    if (width > 0) {
+                        setTipWidth(width);
+                    }
+                }
+            });
+            observer.observe(node);
+            tipObserverRef.current = observer;
+        }
+    }, []);
+    const tipContentStr = (() => {
+        // 1. Proactive Tip (Priority)
+        if (showTips &&
+            uiState.currentTip &&
+            !(isInteractiveShellWaiting &&
+                uiState.currentTip === INTERACTIVE_SHELL_WAITING_PHRASE)) {
+            return uiState.currentTip;
+        }
+        // 2. Shortcut Hint (Fallback)
+        if (settings.merged.ui.showShortcutsHint &&
+            !hideUiDetailsForSuggestions &&
+            !hasPendingActionRequired &&
+            inputState.buffer.text.length === 0) {
+            return showUiDetails ? '? for shortcuts' : 'press tab twice for more';
+        }
+        return undefined;
+    })();
+    // Collision detection using measured widths
+    const willCollideTip = statusWidth + tipWidth + LAYOUT.COLLISION_GAP > terminalWidth;
+    const showTipLine = Boolean(!hasPendingActionRequired && tipContentStr && !willCollideTip && !isNarrow);
+    const showRow1Minimal = showLoadingIndicator || uiState.activeHooks.length > 0 || showTipLine;
+    const showRow2Minimal = (Boolean(modeContentObj) && !hideUiDetailsForSuggestions) ||
+        showMinimalContext;
+    const showRow1 = showUiDetails || showRow1Minimal;
+    const showRow2 = showUiDetails || showRow2Minimal;
+    const onStatusResize = useCallback((width) => {
+        if (width > 0)
+            setStatusWidth(width);
+    }, []);
+    const statusNode = (_jsx(StatusNode, { showTips: showTips, showWit: showWit, thought: uiState.thought, elapsedTime: uiState.elapsedTime, currentWittyPhrase: uiState.currentWittyPhrase, activeHooks: uiState.activeHooks, showLoadingIndicator: showLoadingIndicator, errorVerbosity: settings.merged.ui.errorVerbosity, onResize: onStatusResize }));
+    const renderTipNode = () => {
+        if (!tipContentStr)
+            return null;
+        const isShortcutHint = tipContentStr === '? for shortcuts' ||
+            tipContentStr === 'press tab twice for more';
+        const color = isShortcutHint && uiState.shortcutsHelpVisible
+            ? theme.text.accent
+            : theme.text.secondary;
+        return (_jsx(Box, { flexDirection: "row", justifyContent: "flex-end", ref: onTipRefChange, children: _jsx(Text, { color: color, wrap: "truncate-end", italic: !isShortcutHint && tipContentStr === uiState.currentWittyPhrase, children: tipContentStr === uiState.currentTip
+                    ? `Tip: ${tipContentStr}`
+                    : tipContentStr }) }));
+    };
+    if (!showUiDetails && !showRow1Minimal && !showRow2Minimal) {
+        return _jsx(Box, { height: LAYOUT.STATUS_MIN_HEIGHT });
+    }
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [showRow1 && (_jsxs(Box, { width: "100%", flexDirection: "row", alignItems: "center", justifyContent: "space-between", minHeight: LAYOUT.STATUS_MIN_HEIGHT, children: [_jsx(Box, { flexDirection: "row", flexGrow: 1, flexShrink: 1, children: !showUiDetails && showRow1Minimal ? (_jsxs(Box, { flexDirection: "row", columnGap: 1, children: [statusNode, !showUiDetails && showRow2Minimal && modeContentObj && (_jsx(Box, { children: _jsxs(Text, { color: modeContentObj.color, children: ["\u25CF ", modeContentObj.text] }) }))] })) : isInteractiveShellWaiting ? (_jsx(Box, { width: "100%", marginLeft: LAYOUT.INDICATOR_LEFT_MARGIN, children: _jsx(Text, { color: theme.status.warning, children: INTERACTIVE_SHELL_WAITING_PHRASE }) })) : (_jsx(Box, { flexDirection: "row", alignItems: isNarrow ? 'flex-start' : 'center', flexGrow: 1, flexShrink: 0, marginLeft: LAYOUT.INDICATOR_LEFT_MARGIN, children: statusNode })) }), _jsx(Box, { flexShrink: 0, marginLeft: showTipLine ? LAYOUT.TIP_LEFT_MARGIN : 0, marginRight: showTipLine
+                            ? isNarrow
+                                ? LAYOUT.TIP_RIGHT_MARGIN_NARROW
+                                : LAYOUT.TIP_RIGHT_MARGIN_WIDE
+                            : 0, position: showTipLine ? 'relative' : 'absolute', ...(showTipLine ? {} : { top: -100, left: -100 }), children: !isNarrow && tipContentStr && renderTipNode() })] })), showRow1 &&
+                showRow2 &&
+                (showUiDetails || (showRow1Minimal && showRow2Minimal)) && (_jsx(Box, { width: "100%", children: _jsx(HorizontalLine, { dim: true }) })), showRow2 && (_jsxs(Box, { width: "100%", flexDirection: isNarrow ? 'column' : 'row', alignItems: isNarrow ? 'flex-start' : 'center', justifyContent: "space-between", children: [_jsx(Box, { flexDirection: "row", alignItems: "center", marginLeft: LAYOUT.INDICATOR_LEFT_MARGIN, children: showUiDetails ? (_jsxs(_Fragment, { children: [!hideUiDetailsForSuggestions &&
+                                    !inputState.shellModeActive && (_jsx(ApprovalModeIndicator, { approvalMode: uiState.showApprovalModeIndicator, allowPlanMode: uiState.allowPlanMode })), inputState.shellModeActive && (_jsx(Box, { marginLeft: LAYOUT.INDICATOR_LEFT_MARGIN, children: _jsx(ShellModeIndicator, {}) })), !uiState.renderMarkdown && (_jsx(Box, { marginLeft: LAYOUT.INDICATOR_LEFT_MARGIN, children: _jsx(RawMarkdownIndicator, {}) }))] })) : (showRow2Minimal &&
+                            modeContentObj && (_jsxs(Text, { color: modeContentObj.color, children: ["\u25CF ", modeContentObj.text] }))) }), _jsxs(Box, { marginTop: isNarrow ? LAYOUT.CONTEXT_DISPLAY_TOP_MARGIN_NARROW : 0, flexDirection: "row", alignItems: "center", marginLeft: isNarrow
+                            ? LAYOUT.CONTEXT_DISPLAY_LEFT_MARGIN_NARROW
+                            : LAYOUT.CONTEXT_DISPLAY_LEFT_MARGIN_WIDE, children: [(showUiDetails || showMinimalContext) && (_jsx(StatusDisplay, { hideContextSummary: hideContextSummary })), showMinimalContext && !showUiDetails && (_jsx(Box, { marginLeft: LAYOUT.INDICATOR_LEFT_MARGIN, children: _jsx(ContextUsageDisplay, { promptTokenCount: uiState.sessionStats.lastPromptTokenCount, model: typeof uiState.currentModel === 'string'
+                                        ? uiState.currentModel
+                                        : undefined, terminalWidth: terminalWidth }) }))] })] }))] }));
+};

package/dist/ui/components/StickyHeader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+export const StickyHeader = ({ children, width, isFirst, borderColor, borderDimColor, containerRef, }) => (_jsx(Box, { ref: containerRef, sticky: true, minHeight: 1, flexShrink: 0, width: width, stickyChildren: _jsxs(Box, { borderStyle: "round", flexDirection: "column", width: width, opaque: true, borderColor: borderColor, borderDimColor: borderDimColor, borderBottom: false, borderTop: isFirst, paddingTop: isFirst ? 0 : 1, children: [_jsx(Box, { paddingX: 1, children: children }), _jsx(Box, { width: width - 2, borderColor: theme.ui.dark, borderStyle: "single", borderTop: false, borderBottom: true, borderLeft: false, borderRight: false })] }), children: _jsx(Box, { borderStyle: "round", width: width, borderColor: borderColor, borderDimColor: borderDimColor, borderBottom: false, borderTop: isFirst, borderLeft: true, borderRight: true, paddingX: 1, paddingBottom: 1, paddingTop: isFirst ? 0 : 1, children: children }) }));

package/dist/ui/components/SuggestionsDisplay.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+import { ExpandableText, MAX_WIDTH } from './shared/ExpandableText.js';
+import { CommandKind } from '../commands/types.js';
+import { Colors } from '../colors.js';
+import { sanitizeForDisplay } from '../utils/textUtils.js';
+export const MAX_SUGGESTIONS_TO_SHOW = 8;
+export { MAX_WIDTH };
+export function SuggestionsDisplay({ suggestions, activeIndex, isLoading, width, scrollOffset, userInput, mode, expandedIndex, }) {
+    if (isLoading) {
+        return (_jsx(Box, { paddingX: 1, width: width, children: _jsx(Text, { color: "gray", children: "Loading suggestions..." }) }));
+    }
+    if (suggestions.length === 0) {
+        return null; // Don't render anything if there are no suggestions
+    }
+    // Calculate the visible slice based on scrollOffset
+    const startIndex = scrollOffset;
+    const endIndex = Math.min(scrollOffset + MAX_SUGGESTIONS_TO_SHOW, suggestions.length);
+    const visibleSuggestions = suggestions.slice(startIndex, endIndex);
+    const COMMAND_KIND_SUFFIX = {
+        [CommandKind.MCP_PROMPT]: ' [MCP]',
+        [CommandKind.AGENT]: ' [Agent]',
+    };
+    const getFullLabel = (s) => s.label + (s.commandKind ? (COMMAND_KIND_SUFFIX[s.commandKind] ?? '') : '');
+    const maxLabelLength = Math.max(...suggestions.map((s) => getFullLabel(s).length));
+    const commandColumnWidth = mode === 'slash' ? Math.min(maxLabelLength, Math.floor(width * 0.5)) : 0;
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, width: width, children: [scrollOffset > 0 && _jsx(Text, { color: theme.text.primary, children: "\u25B2" }), visibleSuggestions.map((suggestion, index) => {
+                const originalIndex = startIndex + index;
+                const isActive = originalIndex === activeIndex;
+                const isExpanded = originalIndex === expandedIndex;
+                const textColor = isActive ? theme.ui.focus : theme.text.secondary;
+                const isLong = suggestion.value.length >= MAX_WIDTH;
+                const previousSectionTitle = suggestions[originalIndex - 1]?.sectionTitle;
+                const shouldRenderSectionHeader = mode === 'slash' &&
+                    !!suggestion.sectionTitle &&
+                    suggestion.sectionTitle !== previousSectionTitle;
+                const labelElement = (_jsx(ExpandableText, { label: suggestion.value, matchedIndex: suggestion.matchedIndex, userInput: userInput, textColor: textColor, isExpanded: isExpanded }));
+                return (_jsxs(Box, { flexDirection: "column", children: [shouldRenderSectionHeader && (_jsxs(Text, { color: theme.text.secondary, children: ["-- ", suggestion.sectionTitle, " --"] })), _jsxs(Box, { flexDirection: "row", backgroundColor: isActive ? theme.background.focus : undefined, children: [_jsx(Box, { ...(mode === 'slash'
+                                        ? { width: commandColumnWidth, flexShrink: 0 }
+                                        : { flexShrink: 1 }), children: _jsxs(Box, { children: [labelElement, suggestion.commandKind &&
+                                                COMMAND_KIND_SUFFIX[suggestion.commandKind] && (_jsx(Text, { color: textColor, children: COMMAND_KIND_SUFFIX[suggestion.commandKind] }))] }) }), suggestion.description && (_jsx(Box, { flexGrow: 1, paddingLeft: 3, children: _jsx(Text, { color: textColor, wrap: "truncate", children: sanitizeForDisplay(suggestion.description, 100) }) })), isActive && isLong && (_jsx(Box, { width: 3, flexShrink: 0, children: _jsx(Text, { color: Colors.Gray, children: isExpanded ? ' ← ' : ' → ' }) }))] })] }, `${suggestion.value}-${originalIndex}`));
+            }), endIndex < suggestions.length && _jsx(Text, { color: "gray", children: "\u25BC" }), suggestions.length > MAX_SUGGESTIONS_TO_SHOW && (_jsxs(Text, { color: "gray", children: ["(", activeIndex + 1, "/", suggestions.length, ")"] }))] }));
+}

package/dist/ui/components/Table.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+export function Table({ data, columns }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { flexDirection: "row", children: columns.map((col, index) => (_jsx(Box, { width: col.width, flexGrow: col.flexGrow, flexShrink: col.flexShrink, flexBasis: col.flexBasis ?? (col.width ? undefined : 0), paddingRight: 1, children: typeof col.header === 'string' ? (_jsx(Text, { bold: true, color: theme.text.primary, children: col.header })) : (col.header) }, `header-${index}`))) }), _jsx(Box, { borderStyle: "single", borderBottom: true, borderTop: false, borderLeft: false, borderRight: false, borderColor: theme.border.default, marginBottom: 0 }), data.map((item, rowIndex) => (_jsx(Box, { flexDirection: "row", children: columns.map((col, colIndex) => (_jsx(Box, { width: col.width, flexGrow: col.flexGrow, flexShrink: col.flexShrink, flexBasis: col.flexBasis ?? (col.width ? undefined : 0), paddingRight: 1, children: col.renderCell ? (col.renderCell(item)) : (_jsx(Text, { color: theme.text.primary, children: String(item[col.key]) })) }, `cell-${rowIndex}-${colIndex}`))) }, `row-${rowIndex}`)))] }));
+}

package/dist/ui/components/ThemeDialog.constants.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/** The fraction of the dialog width allocated to the selection (left) pane. */
+export const SELECTION_PANE_WIDTH_PERCENTAGE = 0.45;
+/** The fraction of the dialog width allocated to the preview (right) pane. */
+export const PREVIEW_PANE_WIDTH_PERCENTAGE = 0.55;
+/**
+ * A safety margin to prevent text from touching the preview pane border.
+ * Note: This is specific to the ThemeDialog layout and is unrelated to
+ * SHELL_WIDTH_FRACTION in AppContainer.
+ */
+export const PREVIEW_PANE_WIDTH_SAFETY_MARGIN = 0.9;
+/**
+ * Combined horizontal padding from the dialog and preview pane used
+ * to calculate available width for the code preview.
+ */
+export const TOTAL_HORIZONTAL_PADDING = 4;
+/** Padding for the dialog container. */
+export const DIALOG_PADDING = 2;
+/** Fixed vertical space taken by preview pane elements (title, borders, margins). */
+export const PREVIEW_PANE_FIXED_VERTICAL_SPACE = 8;
+/** Height of the tab/scope selection hint at the bottom. */
+export const TAB_TO_SELECT_HEIGHT = 2;

package/dist/ui/components/ThemeDialog.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+import { themeManager, DEFAULT_THEME } from '../themes/theme-manager.js';
+import { pickDefaultThemeName } from '../themes/theme.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+import { DiffRenderer } from './messages/DiffRenderer.js';
+import { colorizeCode } from '../utils/CodeColorizer.js';
+import { SettingScope } from '../../config/settings.js';
+import { getScopeMessageForSetting } from '../../utils/dialogScopeUtils.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { useAlternateBuffer } from '../hooks/useAlternateBuffer.js';
+import { ScopeSelector } from './shared/ScopeSelector.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { ColorsDisplay } from './ColorsDisplay.js';
+import { isDevelopment } from '../../utils/installationInfo.js';
+import { resolveColor } from '../themes/color-utils.js';
+function generateThemeItem(name, typeDisplay, fullTheme, terminalBackgroundColor) {
+    const isCompatible = fullTheme
+        ? themeManager.isThemeCompatible(fullTheme, terminalBackgroundColor)
+        : true;
+    const themeBackground = fullTheme
+        ? resolveColor(fullTheme.colors.Background)
+        : undefined;
+    const isBackgroundMatch = terminalBackgroundColor &&
+        themeBackground &&
+        terminalBackgroundColor.toLowerCase() === themeBackground.toLowerCase();
+    return {
+        label: name,
+        value: name,
+        themeNameDisplay: name,
+        themeTypeDisplay: typeDisplay,
+        themeWarning: isCompatible ? '' : ' (Incompatible)',
+        themeMatch: isBackgroundMatch ? ' (Matches terminal)' : '',
+        key: name,
+        isCompatible,
+    };
+}
+import { DIALOG_PADDING, PREVIEW_PANE_FIXED_VERTICAL_SPACE, PREVIEW_PANE_WIDTH_PERCENTAGE, PREVIEW_PANE_WIDTH_SAFETY_MARGIN, SELECTION_PANE_WIDTH_PERCENTAGE, TAB_TO_SELECT_HEIGHT, TOTAL_HORIZONTAL_PADDING, } from './ThemeDialog.constants.js';
+export function ThemeDialog({ onSelect, onCancel, onHighlight, settings, availableTerminalHeight, terminalWidth, }) {
+    const isAlternateBuffer = useAlternateBuffer();
+    const { terminalBackgroundColor } = useUIState();
+    const [selectedScope, setSelectedScope] = useState(SettingScope.User);
+    // Track the currently highlighted theme name
+    const [highlightedThemeName, setHighlightedThemeName] = useState(() => {
+        // If a theme is already set, use it.
+        if (settings.merged.ui.theme) {
+            return settings.merged.ui.theme;
+        }
+        // Otherwise, try to pick a theme that matches the terminal background.
+        return pickDefaultThemeName(terminalBackgroundColor, themeManager.getAllThemes(), DEFAULT_THEME.name, 'Default Light');
+    });
+    const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+    // Generate theme items
+    const themeItems = themeManager
+        .getAvailableThemes()
+        .map((theme) => {
+        const fullTheme = themeManager.getTheme(theme.name);
+        const capitalizedType = capitalize(theme.type);
+        const typeDisplay = theme.name.endsWith(capitalizedType)
+            ? ''
+            : capitalizedType;
+        return generateThemeItem(theme.name, typeDisplay, fullTheme, terminalBackgroundColor);
+    })
+        .sort((a, b) => {
+        // Show compatible themes first
+        if (a.isCompatible && !b.isCompatible)
+            return -1;
+        if (!a.isCompatible && b.isCompatible)
+            return 1;
+        // Then sort by name
+        return a.label.localeCompare(b.label);
+    });
+    // Find the index of the selected theme, but only if it exists in the list
+    const initialThemeIndex = themeItems.findIndex((item) => item.value === highlightedThemeName);
+    // If not found, fall back to the first theme
+    const safeInitialThemeIndex = initialThemeIndex >= 0 ? initialThemeIndex : 0;
+    const handleThemeSelect = useCallback(async (themeName) => {
+        await onSelect(themeName, selectedScope);
+    }, [onSelect, selectedScope]);
+    const handleThemeHighlight = (themeName) => {
+        setHighlightedThemeName(themeName);
+        onHighlight(themeName);
+    };
+    const handleScopeHighlight = useCallback((scope) => {
+        setSelectedScope(scope);
+    }, []);
+    const handleScopeSelect = useCallback(async (scope) => {
+        await onSelect(highlightedThemeName, scope);
+    }, [onSelect, highlightedThemeName]);
+    const [mode, setMode] = useState('theme');
+    useKeypress((key) => {
+        if (key.name === 'tab') {
+            setMode((prev) => (prev === 'theme' ? 'scope' : 'theme'));
+            return true;
+        }
+        if (key.name === 'escape') {
+            onCancel();
+            return true;
+        }
+        return false;
+    }, { isActive: true });
+    // Generate scope message for theme setting
+    const otherScopeModifiedMessage = getScopeMessageForSetting('ui.theme', selectedScope, settings);
+    const colorizeCodeWidth = Math.max(Math.floor((terminalWidth - TOTAL_HORIZONTAL_PADDING) *
+        PREVIEW_PANE_WIDTH_PERCENTAGE *
+        PREVIEW_PANE_WIDTH_SAFETY_MARGIN), 1);
+    const selectThemeHeight = themeItems.length + 1;
+    availableTerminalHeight = availableTerminalHeight ?? Number.MAX_SAFE_INTEGER;
+    availableTerminalHeight -= 2; // Top and bottom borders.
+    availableTerminalHeight -= TAB_TO_SELECT_HEIGHT;
+    let totalLeftHandSideHeight = DIALOG_PADDING + selectThemeHeight;
+    let includePadding = true;
+    // Remove content from the LHS that can be omitted if it exceeds the available height.
+    if (totalLeftHandSideHeight > availableTerminalHeight) {
+        includePadding = false;
+        totalLeftHandSideHeight -= DIALOG_PADDING;
+    }
+    // The right column doesn't need to ever be shorter than the left column.
+    availableTerminalHeight = Math.max(availableTerminalHeight, totalLeftHandSideHeight);
+    const availableTerminalHeightCodeBlock = availableTerminalHeight -
+        PREVIEW_PANE_FIXED_VERTICAL_SPACE -
+        (includePadding ? 2 : 0) * 2;
+    // Subtract margin between code blocks from available height.
+    const availableHeightForPanes = Math.max(0, availableTerminalHeightCodeBlock - 1);
+    // The code block is slightly longer than the diff, so give it more space.
+    const codeBlockHeight = Math.ceil(availableHeightForPanes * 0.6);
+    const diffHeight = Math.floor(availableHeightForPanes * 0.4);
+    const previewTheme = themeManager.getTheme(highlightedThemeName || DEFAULT_THEME.name) ||
+        DEFAULT_THEME;
+    const leftColumnWidth = `${SELECTION_PANE_WIDTH_PERCENTAGE * 100}%`;
+    const rightColumnWidth = `${PREVIEW_PANE_WIDTH_PERCENTAGE * 100}%`;
+    return (_jsxs(Box, { borderStyle: "round", borderColor: theme.border.default, flexDirection: "column", paddingTop: includePadding ? 1 : 0, paddingBottom: includePadding ? 1 : 0, paddingLeft: 1, paddingRight: 1, width: "100%", children: [mode === 'theme' ? (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", width: leftColumnWidth, paddingRight: 2, children: [_jsxs(Text, { bold: mode === 'theme', wrap: "truncate", children: [mode === 'theme' ? '> ' : '  ', "Select Theme", ' ', _jsx(Text, { color: theme.text.secondary, children: otherScopeModifiedMessage })] }), _jsx(RadioButtonSelect, { items: themeItems, initialIndex: safeInitialThemeIndex, onSelect: handleThemeSelect, onHighlight: handleThemeHighlight, isFocused: mode === 'theme', maxItemsToShow: 12, showScrollArrows: true, showNumbers: mode === 'theme', renderItem: (item, { titleColor }) => {
+                                    // We know item has themeWarning because we put it there, but we need to cast or access safely
+                                    const itemWithExtras = item;
+                                    if (itemWithExtras.themeNameDisplay) {
+                                        const match = itemWithExtras.themeNameDisplay.match(/^(.*) \((.*)\)$/);
+                                        let themeNamePart = itemWithExtras.themeNameDisplay;
+                                        if (match) {
+                                            themeNamePart = (_jsxs(_Fragment, { children: [match[1], ' ', _jsxs(Text, { color: theme.text.secondary, children: ["(", match[2], ")"] })] }));
+                                        }
+                                        return (_jsxs(Text, { color: titleColor, wrap: "truncate", children: [themeNamePart, itemWithExtras.themeTypeDisplay ? (_jsxs(_Fragment, { children: [' ', _jsx(Text, { color: theme.text.secondary, children: itemWithExtras.themeTypeDisplay })] })) : null, itemWithExtras.themeMatch && (_jsx(Text, { color: theme.status.success, children: itemWithExtras.themeMatch })), itemWithExtras.themeWarning && (_jsx(Text, { color: theme.status.warning, children: itemWithExtras.themeWarning }))] }, item.key));
+                                    }
+                                    // Regular label display
+                                    return (_jsx(Text, { color: titleColor, wrap: "truncate", children: item.label }));
+                                } })] }), _jsxs(Box, { flexDirection: "column", width: rightColumnWidth, paddingLeft: 2, children: [_jsx(Text, { bold: true, color: theme.text.primary, children: "Preview" }), _jsxs(Box, { borderStyle: "single", borderColor: theme.border.default, paddingTop: includePadding ? 1 : 0, paddingBottom: includePadding ? 1 : 0, paddingLeft: 1, paddingRight: 1, flexDirection: "column", children: [colorizeCode({
+                                        code: `# function
+def fibonacci(n):
+    a, b = 0, 1
+    for _ in range(n):
+        a, b = b, a + b
+    return a`,
+                                        language: 'python',
+                                        availableHeight: isAlternateBuffer === false ? codeBlockHeight : undefined,
+                                        maxWidth: colorizeCodeWidth,
+                                        settings,
+                                    }), _jsx(Box, { marginTop: 1 }), _jsx(DiffRenderer, { diffContent: `--- a/util.py
++++ b/util.py
+@@ -1,2 +1,2 @@
+- print("Hello, " + name)
++ print(f"Hello, {name}!")
+`, availableTerminalHeight: isAlternateBuffer === false ? diffHeight : undefined, terminalWidth: colorizeCodeWidth, theme: previewTheme })] }), isDevelopment && (_jsx(Box, { marginTop: 1, children: _jsx(ColorsDisplay, { activeTheme: previewTheme }) }))] })] })) : (_jsx(ScopeSelector, { onSelect: handleScopeSelect, onHighlight: handleScopeHighlight, isFocused: mode === 'scope', initialScope: selectedScope })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.text.secondary, wrap: "truncate", children: ["(Use Enter to ", mode === 'theme' ? 'select' : 'apply scope', ", Tab to", ' ', mode === 'theme' ? 'configure scope' : 'select theme', ", Esc to close)"] }) })] }));
+}

package/dist/ui/components/ThemedGradient.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+;
+import Gradient from 'ink-gradient';
+import { theme } from '../semantic-colors.js';
+export const ThemedGradient = ({ children, ...props }) => {
+    const gradient = theme.ui.gradient;
+    if (gradient && gradient.length >= 2) {
+        return (_jsx(Gradient, { colors: gradient, children: _jsx(Text, { ...props, children: children }) }));
+    }
+    if (gradient && gradient.length === 1) {
+        return (_jsx(Text, { color: gradient[0], ...props, children: children }));
+    }
+    // Fallback to accent color if no gradient
+    return (_jsx(Text, { color: theme.text.accent, ...props, children: children }));
+};

package/dist/ui/components/Tips.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+export const Tips = ({ config }) => {
+    const geminiMdFileCount = config.getGeminiMdFileCount();
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: theme.text.primary, children: "Tips for getting started:" }), geminiMdFileCount === 0 && (_jsxs(Text, { color: theme.text.primary, children: ["1. Create ", _jsx(Text, { bold: true, children: "GEMINI.md" }), " files to customize your interactions"] })), _jsxs(Text, { color: theme.text.primary, children: [geminiMdFileCount === 0 ? '2.' : '1.', ' ', _jsx(Text, { color: theme.text.secondary, children: "/help" }), " for more information"] }), _jsxs(Text, { color: theme.text.primary, children: [geminiMdFileCount === 0 ? '3.' : '2.', " Ask coding questions, edit code or run commands"] }), _jsxs(Text, { color: theme.text.primary, children: [geminiMdFileCount === 0 ? '4.' : '3.', " Be specific for the best results"] })] }));
+};

package/dist/ui/components/ToastDisplay.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useInputState } from '../contexts/InputContext.js';
+import { TransientMessageType } from '../../utils/events.js';
+export function shouldShowToast(uiState, inputState) {
+    return (uiState.ctrlCPressedOnce ||
+        Boolean(uiState.transientMessage) ||
+        uiState.ctrlDPressedOnce ||
+        (inputState.showEscapePrompt &&
+            (inputState.buffer.text.length > 0 || uiState.history.length > 0)) ||
+        Boolean(uiState.queueErrorMessage) ||
+        uiState.showIsExpandableHint);
+}
+export const ToastDisplay = () => {
+    const uiState = useUIState();
+    const inputState = useInputState();
+    if (uiState.ctrlCPressedOnce) {
+        return (_jsx(Text, { color: theme.status.warning, children: "Press Ctrl+C again to exit." }));
+    }
+    if (uiState.transientMessage?.type === TransientMessageType.Warning &&
+        uiState.transientMessage.text) {
+        return (_jsx(Text, { color: theme.status.warning, children: uiState.transientMessage.text }));
+    }
+    if (uiState.ctrlDPressedOnce) {
+        return (_jsx(Text, { color: theme.status.warning, children: "Press Ctrl+D again to exit." }));
+    }
+    if (inputState.showEscapePrompt) {
+        const isPromptEmpty = inputState.buffer.text.length === 0;
+        const hasHistory = uiState.history.length > 0;
+        if (isPromptEmpty && !hasHistory) {
+            return null;
+        }
+        return (_jsxs(Text, { color: theme.text.secondary, children: ["Press Esc again to ", isPromptEmpty ? 'rewind' : 'clear prompt', "."] }));
+    }
+    if (uiState.transientMessage?.type === TransientMessageType.Hint &&
+        uiState.transientMessage.text) {
+        return (_jsx(Text, { color: theme.text.secondary, children: uiState.transientMessage.text }));
+    }
+    if (uiState.queueErrorMessage) {
+        return _jsx(Text, { color: theme.status.error, children: uiState.queueErrorMessage });
+    }
+    if (uiState.showIsExpandableHint) {
+        const action = uiState.constrainHeight ? 'show more' : 'collapse';
+        return (_jsxs(Text, { color: theme.text.secondary, children: ["Press Ctrl+O to ", action, " lines of the last response"] }));
+    }
+    return null;
+};

package/dist/ui/components/ToolConfirmationQueue.js

@@ -0,0 +1,63 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { ToolConfirmationMessage } from './messages/ToolConfirmationMessage.js';
+import { isShellTool, ToolStatusIndicator, ToolInfo, } from './messages/ToolShared.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { StickyHeader } from './StickyHeader.js';
+import { useUIActions } from '../contexts/UIActionsContext.js';
+function getConfirmationHeader(details) {
+    const headers = {
+        ask_user: 'Answer Questions',
+        exit_plan_mode: 'Ready to start implementation?',
+    };
+    if (!details?.type) {
+        return 'Action Required';
+    }
+    return headers[details.type] ?? 'Action Required';
+}
+function getConfirmationLabel(toolName, details) {
+    if (details?.type === 'ask_user')
+        return 'Questions';
+    if (details?.type === 'exit_plan_mode')
+        return 'Implementation';
+    if (isShellTool(toolName))
+        return 'Shell';
+    return toolName;
+}
+export const ToolConfirmationQueue = ({ confirmingTool, }) => {
+    const config = useConfig();
+    const { getPreferredEditor } = useUIActions();
+    const { mainAreaWidth, terminalHeight, constrainHeight, availableTerminalHeight: uiAvailableHeight, } = useUIState();
+    const { tool, index, total } = confirmingTool;
+    // Safety check: ToolConfirmationMessage requires confirmationDetails
+    if (!tool.confirmationDetails)
+        return null;
+    // Render up to 100% of the available terminal height
+    // to maximize space for diffs and other content.
+    const maxHeight = uiAvailableHeight !== undefined
+        ? Math.max(uiAvailableHeight, 4)
+        : Math.floor(terminalHeight * 0.5);
+    const isShell = isShellTool(tool.name);
+    const isEdit = tool.confirmationDetails?.type === 'edit';
+    if (isShell || isEdit) {
+        // Use the new simplified layout for Shell and Edit tools
+        const borderColor = theme.border.default;
+        const availableContentHeight = constrainHeight
+            ? Math.max(maxHeight - 3, 4)
+            : undefined;
+        const toolLabel = getConfirmationLabel(tool.name, tool.confirmationDetails);
+        return (_jsxs(Box, { flexDirection: "column", width: mainAreaWidth, flexShrink: 0, borderStyle: "round", borderColor: borderColor, paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: 0, children: [_jsxs(Box, { flexDirection: "row", flexShrink: 1, overflow: "hidden", children: [_jsxs(Text, { color: theme.status.warning, bold: true, children: ["? ", toolLabel, !!tool.description && '  '] }), !!tool.description && (_jsx(Box, { flexShrink: 1, overflow: "hidden", children: _jsx(Text, { color: theme.text.primary, wrap: "truncate-end", children: tool.description }) }))] }), total > 1 && (_jsxs(Text, { color: theme.text.secondary, children: [index, " of ", total] }))] }), _jsx(Box, { flexDirection: "column", children: _jsx(ToolConfirmationMessage, { callId: tool.callId, confirmationDetails: tool.confirmationDetails, config: config, getPreferredEditor: getPreferredEditor, terminalWidth: mainAreaWidth - 4, availableTerminalHeight: availableContentHeight, toolName: tool.name, isFocused: true }) })] }));
+    }
+    // Restore original logic for other tools
+    const isRoutine = tool.confirmationDetails?.type === 'ask_user' ||
+        tool.confirmationDetails?.type === 'exit_plan_mode';
+    const borderColor = isRoutine ? theme.status.success : theme.status.warning;
+    const hideToolIdentity = isRoutine;
+    const availableContentHeight = constrainHeight
+        ? Math.max(maxHeight - (hideToolIdentity ? 4 : 6), 4)
+        : undefined;
+    return (_jsxs(Box, { flexDirection: "column", width: mainAreaWidth, flexShrink: 0, children: [_jsx(StickyHeader, { width: mainAreaWidth, isFirst: true, borderColor: borderColor, borderDimColor: false, children: _jsxs(Box, { flexDirection: "column", width: mainAreaWidth - 4, children: [_jsxs(Box, { marginBottom: hideToolIdentity ? 0 : 1, justifyContent: "space-between", children: [_jsx(Text, { color: borderColor, bold: true, children: getConfirmationHeader(tool.confirmationDetails) }), total > 1 && (_jsxs(Text, { color: theme.text.secondary, children: [index, " of ", total] }))] }), !hideToolIdentity && (_jsxs(Box, { children: [_jsx(ToolStatusIndicator, { status: tool.status, name: tool.name }), _jsx(ToolInfo, { name: tool.name, status: tool.status, description: tool.description, emphasis: "high" })] }))] }) }), _jsx(Box, { width: mainAreaWidth, borderStyle: "round", borderColor: borderColor, borderTop: false, borderBottom: false, borderLeft: true, borderRight: true, paddingX: 1, flexDirection: "column", children: _jsx(ToolConfirmationMessage, { callId: tool.callId, confirmationDetails: tool.confirmationDetails, config: config, getPreferredEditor: getPreferredEditor, terminalWidth: mainAreaWidth - 4, availableTerminalHeight: availableContentHeight, toolName: tool.name, isFocused: true }) }), _jsx(Box, { height: 1, width: mainAreaWidth, borderLeft: true, borderRight: true, borderTop: false, borderBottom: true, borderColor: borderColor, borderStyle: "round" })] }));
+};