@quantum-ai/gemini-cli 0.45.8 → 0.45.10

package/dist/ui/components/BackgroundTaskDisplay.js

@@ -0,0 +1,251 @@
+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 { useEffect, useState, useRef } from 'react';
+import { useUIActions } from '../contexts/UIActionsContext.js';
+import { theme } from '../semantic-colors.js';
+import { ShellExecutionService, shortenPath, tildeifyPath, } from '@google/gemini-cli-core';
+import { cpLen, cpSlice, getCachedStringWidth } from '../utils/textUtils.js';
+import { Command } from '../key/keyMatchers.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { formatCommand } from '../key/keybindingUtils.js';
+import { ScrollableList, } from './shared/ScrollableList.js';
+import { SCROLL_TO_ITEM_END } from './shared/VirtualizedList.js';
+import { RadioButtonSelect, } from './shared/RadioButtonSelect.js';
+import { useKeyMatchers } from '../hooks/useKeyMatchers.js';
+const CONTENT_PADDING_X = 1;
+const BORDER_WIDTH = 2; // Left and Right border
+const MAIN_BORDER_HEIGHT = 2; // Top and Bottom border
+const HEADER_HEIGHT = 1;
+const FOOTER_HEIGHT = 1;
+const TOTAL_OVERHEAD_HEIGHT = MAIN_BORDER_HEIGHT + HEADER_HEIGHT + FOOTER_HEIGHT;
+const PROCESS_LIST_HEADER_HEIGHT = 3; // 1 padding top, 1 text, 1 margin bottom
+const TAB_DISPLAY_HORIZONTAL_PADDING = 4;
+const LOG_PATH_OVERHEAD = 7; // "Log: " (5) + paddingX (2)
+const formatShellCommandForDisplay = (command, maxWidth) => {
+    const commandFirstLine = command.split('\n')[0];
+    return cpLen(commandFirstLine) > maxWidth
+        ? `${cpSlice(commandFirstLine, 0, maxWidth - 3)}...`
+        : commandFirstLine;
+};
+export const BackgroundTaskDisplay = ({ shells, activePid, width, height, isFocused, isListOpenProp, }) => {
+    const keyMatchers = useKeyMatchers();
+    const { dismissBackgroundTask, setActiveBackgroundTaskPid, setIsBackgroundTaskListOpen, } = useUIActions();
+    const activeShell = shells.get(activePid);
+    const [output, setOutput] = useState(activeShell?.output || '');
+    const [highlightedPid, setHighlightedPid] = useState(activePid);
+    const outputRef = useRef(null);
+    const subscribedRef = useRef(false);
+    useEffect(() => {
+        if (!activePid)
+            return;
+        const ptyWidth = Math.max(1, width - BORDER_WIDTH - CONTENT_PADDING_X * 2);
+        const ptyHeight = Math.max(1, height - TOTAL_OVERHEAD_HEIGHT);
+        ShellExecutionService.resizePty(activePid, ptyWidth, ptyHeight);
+    }, [activePid, width, height]);
+    useEffect(() => {
+        if (!activePid) {
+            setOutput('');
+            return;
+        }
+        // Set initial output from the shell object
+        const shell = shells.get(activePid);
+        if (shell) {
+            setOutput(shell.output);
+        }
+        subscribedRef.current = false;
+        // Subscribe to live updates for the active shell
+        const unsubscribe = ShellExecutionService.subscribe(activePid, (event) => {
+            if (event.type === 'data') {
+                if (typeof event.chunk === 'string') {
+                    if (!subscribedRef.current) {
+                        // Initial synchronous update contains full history
+                        setOutput(event.chunk);
+                    }
+                    else {
+                        // Subsequent updates are deltas for child_process
+                        setOutput((prev) => typeof prev === 'string' ? prev + event.chunk : event.chunk);
+                    }
+                }
+                else {
+                    // PTY always sends full AnsiOutput
+                    setOutput(event.chunk);
+                }
+            }
+        });
+        subscribedRef.current = true;
+        return () => {
+            unsubscribe();
+            subscribedRef.current = false;
+        };
+    }, [activePid, shells]);
+    // Sync highlightedPid with activePid when list opens
+    useEffect(() => {
+        if (isListOpenProp) {
+            setHighlightedPid(activePid);
+        }
+    }, [isListOpenProp, activePid]);
+    useKeypress((key) => {
+        if (!activeShell)
+            return;
+        if (isListOpenProp) {
+            // Navigation (Up/Down/Enter) is handled by RadioButtonSelect
+            // We only handle special keys not consumed by RadioButtonSelect or overriding them if needed
+            // RadioButtonSelect handles Enter -> onSelect
+            if (keyMatchers[Command.BACKGROUND_SHELL_ESCAPE](key)) {
+                setIsBackgroundTaskListOpen(false);
+                return true;
+            }
+            if (keyMatchers[Command.KILL_BACKGROUND_SHELL](key)) {
+                if (highlightedPid) {
+                    void dismissBackgroundTask(highlightedPid);
+                    // If we killed the active one, the list might update via props
+                }
+                return true;
+            }
+            if (keyMatchers[Command.TOGGLE_BACKGROUND_SHELL_LIST](key)) {
+                if (highlightedPid) {
+                    setActiveBackgroundTaskPid(highlightedPid);
+                }
+                setIsBackgroundTaskListOpen(false);
+                return true;
+            }
+            return false;
+        }
+        if (keyMatchers[Command.TOGGLE_BACKGROUND_SHELL](key)) {
+            return false;
+        }
+        if (keyMatchers[Command.KILL_BACKGROUND_SHELL](key)) {
+            void dismissBackgroundTask(activeShell.pid);
+            return true;
+        }
+        if (keyMatchers[Command.TOGGLE_BACKGROUND_SHELL_LIST](key)) {
+            setIsBackgroundTaskListOpen(true);
+            return true;
+        }
+        if (keyMatchers[Command.BACKGROUND_SHELL_SELECT](key)) {
+            ShellExecutionService.writeToPty(activeShell.pid, '\r');
+            return true;
+        }
+        else if (keyMatchers[Command.DELETE_CHAR_LEFT](key)) {
+            ShellExecutionService.writeToPty(activeShell.pid, '\b');
+            return true;
+        }
+        else if (key.sequence) {
+            ShellExecutionService.writeToPty(activeShell.pid, key.sequence);
+            return true;
+        }
+        return false;
+    }, { isActive: isFocused && !!activeShell });
+    const helpTextParts = [
+        { label: 'Close', command: Command.TOGGLE_BACKGROUND_SHELL },
+        { label: 'Kill', command: Command.KILL_BACKGROUND_SHELL },
+        { label: 'List', command: Command.TOGGLE_BACKGROUND_SHELL_LIST },
+    ];
+    const helpTextStr = helpTextParts
+        .map((p) => `${p.label} (${formatCommand(p.command)})`)
+        .join(' | ');
+    const renderHelpText = () => (_jsx(Text, { children: helpTextParts.map((p, i) => (_jsxs(Text, { children: [i > 0 ? ' | ' : '', p.label, " (", _jsx(Text, { color: theme.text.accent, children: formatCommand(p.command) }), ")"] }, p.label))) }));
+    const renderTabs = () => {
+        const shellList = Array.from(shells.values()).filter((s) => s.status === 'running');
+        const pidInfoWidth = getCachedStringWidth(` (PID: ${activePid}) ${isFocused ? '(Focused)' : ''}`);
+        const availableWidth = width -
+            TAB_DISPLAY_HORIZONTAL_PADDING -
+            getCachedStringWidth(helpTextStr) -
+            pidInfoWidth;
+        let currentWidth = 0;
+        const tabs = [];
+        for (let i = 0; i < shellList.length; i++) {
+            const shell = shellList[i];
+            // Account for " i: " (length 4 if i < 9) and spaces (length 2)
+            const labelOverhead = 4 + (i + 1).toString().length;
+            const maxTabLabelLength = Math.max(1, Math.floor(availableWidth / shellList.length) - labelOverhead);
+            const truncatedCommand = formatShellCommandForDisplay(shell.command, maxTabLabelLength);
+            const label = ` ${i + 1}: ${truncatedCommand} `;
+            const labelWidth = getCachedStringWidth(label);
+            // If this is the only shell, we MUST show it (truncated if necessary)
+            // even if it exceeds availableWidth, as there are no alternatives.
+            if (i > 0 && currentWidth + labelWidth > availableWidth) {
+                break;
+            }
+            const isActive = shell.pid === activePid;
+            tabs.push(_jsx(Text, { color: isActive ? theme.text.primary : theme.text.secondary, bold: isActive, children: label }, shell.pid));
+            currentWidth += labelWidth;
+        }
+        if (shellList.length > tabs.length && !isListOpenProp) {
+            const overflowLabel = ` ... (${formatCommand(Command.TOGGLE_BACKGROUND_SHELL_LIST)}) `;
+            const overflowWidth = getCachedStringWidth(overflowLabel);
+            // If we only have one tab, ensure we don't show the overflow if it's too cramped
+            // We want at least 10 chars for the overflow or we favor the first tab.
+            const shouldShowOverflow = tabs.length > 1 || availableWidth - currentWidth >= overflowWidth;
+            if (shouldShowOverflow) {
+                tabs.push(_jsx(Text, { color: theme.status.warning, bold: true, children: overflowLabel }, "overflow"));
+            }
+        }
+        return tabs;
+    };
+    const renderProcessList = () => {
+        const maxCommandLength = Math.max(0, width - BORDER_WIDTH - CONTENT_PADDING_X * 2 - 10);
+        const items = Array.from(shells.values()).map((shell, index) => {
+            const truncatedCommand = formatShellCommandForDisplay(shell.command, maxCommandLength);
+            let label = `${index + 1}: ${truncatedCommand} (PID: ${shell.pid})`;
+            if (shell.status === 'exited') {
+                label += ` (Exit Code: ${shell.exitCode})`;
+            }
+            return {
+                key: shell.pid.toString(),
+                value: shell.pid,
+                label,
+            };
+        });
+        const initialIndex = items.findIndex((item) => item.value === activePid);
+        return (_jsxs(Box, { flexDirection: "column", height: "100%", width: "100%", children: [_jsx(Box, { flexShrink: 0, marginBottom: 1, paddingTop: 1, children: _jsx(Text, { bold: true, children: `Select Process (${formatCommand(Command.BACKGROUND_SHELL_SELECT)} to select, ${formatCommand(Command.KILL_BACKGROUND_SHELL)} to kill, ${formatCommand(Command.BACKGROUND_SHELL_ESCAPE)} to cancel):` }) }), _jsx(Box, { flexGrow: 1, width: "100%", children: _jsx(RadioButtonSelect, { items: items, initialIndex: initialIndex >= 0 ? initialIndex : 0, onSelect: (pid) => {
+                            setActiveBackgroundTaskPid(pid);
+                            setIsBackgroundTaskListOpen(false);
+                        }, onHighlight: (pid) => setHighlightedPid(pid), isFocused: isFocused, maxItemsToShow: Math.max(1, height - TOTAL_OVERHEAD_HEIGHT - PROCESS_LIST_HEADER_HEIGHT), renderItem: (item, { isSelected: _isSelected, titleColor: _titleColor }) => {
+                            // Custom render to handle exit code coloring if needed,
+                            // or just use default. The default RadioButtonSelect renderer
+                            // handles standard label.
+                            // But we want to color exit code differently?
+                            // The previous implementation colored exit code green/red.
+                            // Let's reimplement that.
+                            // We need access to shell details here.
+                            // We can put shell details in the item or lookup.
+                            // Lookup from shells map.
+                            const shell = shells.get(item.value);
+                            if (!shell)
+                                return _jsx(Text, { children: item.label });
+                            const truncatedCommand = formatShellCommandForDisplay(shell.command, maxCommandLength);
+                            return (_jsxs(Text, { children: [truncatedCommand, " (PID: ", shell.pid, ")", shell.status === 'exited' ? (_jsxs(Text, { color: shell.exitCode === 0
+                                            ? theme.status.success
+                                            : theme.status.error, children: [' ', "(Exit Code: ", shell.exitCode, ")"] })) : null] }));
+                        } }) })] }));
+    };
+    const renderFooter = () => {
+        const pidToDisplay = isListOpenProp
+            ? (highlightedPid ?? activePid)
+            : activePid;
+        if (!pidToDisplay)
+            return null;
+        const logPath = ShellExecutionService.getLogFilePath(pidToDisplay);
+        const displayPath = shortenPath(tildeifyPath(logPath), width - LOG_PATH_OVERHEAD);
+        return (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: theme.text.secondary, children: ["Log: ", displayPath] }) }));
+    };
+    const renderOutput = () => {
+        const lines = typeof output === 'string' ? output.split('\n') : output;
+        return (_jsx(ScrollableList, { ref: outputRef, data: lines, renderItem: ({ item: line, index }) => {
+                if (typeof line === 'string') {
+                    return _jsx(Text, { children: line }, index);
+                }
+                return (_jsx(Text, { wrap: "truncate", children: line.length > 0
+                        ? line.map((token, tokenIndex) => (_jsx(Text, { color: token.fg, backgroundColor: token.bg, inverse: token.inverse, dimColor: token.dim, bold: token.bold, italic: token.italic, underline: token.underline, children: token.text }, tokenIndex)))
+                        : null }, index));
+            }, estimatedItemHeight: () => 1, keyExtractor: (_, index) => index.toString(), hasFocus: isFocused, initialScrollIndex: SCROLL_TO_ITEM_END }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", width: "100%", borderStyle: "single", borderColor: isFocused ? theme.ui.focus : undefined, children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", borderStyle: "single", borderBottom: false, borderLeft: false, borderRight: false, borderTop: false, paddingX: 1, borderColor: isFocused ? theme.ui.focus : undefined, children: [_jsxs(Box, { flexDirection: "row", children: [renderTabs(), _jsxs(Text, { bold: true, children: [' ', "(PID: ", activeShell?.pid, ") ", isFocused ? '(Focused)' : ''] })] }), renderHelpText()] }), _jsx(Box, { flexGrow: 1, overflow: "hidden", paddingX: CONTENT_PADDING_X, children: isListOpenProp ? renderProcessList() : renderOutput() }), renderFooter()] }));
+};

package/dist/ui/components/Banner.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Box, Text } from 'ink';
+;
+import { ThemedGradient } from './ThemedGradient.js';
+import { theme } from '../semantic-colors.js';
+export function getFormattedBannerContent(rawText, isWarning, subsequentLineColor) {
+    const text = rawText.replace(/\\n/g, '\n');
+    const lines = text.split('\n');
+    return lines.map((line, index) => {
+        if (index === 0) {
+            if (isWarning) {
+                return (_jsx(Text, { bold: true, color: theme.status.warning, children: line }, index));
+            }
+            return (_jsx(ThemedGradient, { children: _jsx(Text, { bold: true, children: line }) }, index));
+        }
+        return (_jsx(Text, { color: subsequentLineColor, children: line }, index));
+    });
+}
+export const Banner = ({ bannerText, isWarning, width }) => {
+    const subsequentLineColor = theme.text.primary;
+    const formattedBannerContent = getFormattedBannerContent(bannerText, isWarning, subsequentLineColor);
+    return (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: isWarning ? theme.status.warning : theme.border.default, width: width, paddingLeft: 1, paddingRight: 1, children: formattedBannerContent }));
+};

package/dist/ui/components/Checklist.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+import { ChecklistItem } from './ChecklistItem.js';
+const ChecklistTitleDisplay = ({ title, items, toggleHint }) => {
+    const score = useMemo(() => {
+        let total = 0;
+        let completed = 0;
+        for (const item of items) {
+            if (item.status !== 'cancelled') {
+                total += 1;
+                if (item.status === 'completed') {
+                    completed += 1;
+                }
+            }
+        }
+        return `${completed}/${total} completed`;
+    }, [items]);
+    return (_jsxs(Box, { flexDirection: "row", columnGap: 2, height: 1, children: [_jsx(Text, { color: theme.text.primary, bold: true, "aria-label": `${title} list`, children: title }), _jsxs(Text, { color: theme.text.secondary, children: [score, toggleHint ? ` (${toggleHint})` : ''] })] }));
+};
+const ChecklistListDisplay = ({ items, }) => (_jsx(Box, { flexDirection: "column", "aria-role": "list", children: items.map((item, index) => (_jsx(ChecklistItem, { item: item, role: "listitem" }, `${index}-${item.label}`))) }));
+export const Checklist = ({ title, items, isExpanded, toggleHint, }) => {
+    const inProgress = useMemo(() => items.find((item) => item.status === 'in_progress') || null, [items]);
+    const hasActiveItems = useMemo(() => items.some((item) => item.status === 'pending' || item.status === 'in_progress'), [items]);
+    if (items.length === 0 || (!isExpanded && !hasActiveItems)) {
+        return null;
+    }
+    return (_jsx(Box, { borderStyle: "single", borderBottom: false, borderRight: false, borderLeft: false, borderColor: theme.border.default, paddingLeft: 1, paddingRight: 1, children: isExpanded ? (_jsxs(Box, { flexDirection: "column", rowGap: 1, children: [_jsx(ChecklistTitleDisplay, { title: title, items: items, toggleHint: toggleHint }), _jsx(ChecklistListDisplay, { items: items })] })) : (_jsxs(Box, { flexDirection: "row", columnGap: 1, height: 1, children: [_jsx(Box, { flexShrink: 0, flexGrow: 0, children: _jsx(ChecklistTitleDisplay, { title: title, items: items, toggleHint: toggleHint }) }), inProgress && (_jsx(Box, { flexShrink: 1, flexGrow: 1, children: _jsx(ChecklistItem, { item: inProgress, wrap: "truncate" }) }))] })) }));
+};

package/dist/ui/components/ChecklistItem.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+;
+import { theme } from '../semantic-colors.js';
+import { checkExhaustive } from '@google/gemini-cli-core';
+const ChecklistStatusDisplay = ({ status, }) => {
+    switch (status) {
+        case 'completed':
+            return (_jsx(Text, { color: theme.status.success, "aria-label": "Completed", children: "\u2713" }));
+        case 'in_progress':
+            return (_jsx(Text, { color: theme.text.accent, "aria-label": "In Progress", children: "\u00BB" }));
+        case 'pending':
+            return (_jsx(Text, { color: theme.text.secondary, "aria-label": "Pending", children: "\u2610" }));
+        case 'cancelled':
+            return (_jsx(Text, { color: theme.status.error, "aria-label": "Cancelled", children: "\u2717" }));
+        case 'blocked':
+            return (_jsx(Text, { color: theme.status.warning, "aria-label": "Blocked", children: "\u26D4" }));
+        default:
+            checkExhaustive(status);
+    }
+};
+export const ChecklistItem = ({ item, wrap, role: ariaRole, }) => {
+    const textColor = (() => {
+        switch (item.status) {
+            case 'in_progress':
+                return theme.text.accent;
+            case 'completed':
+            case 'cancelled':
+            case 'blocked':
+                return theme.text.secondary;
+            case 'pending':
+                return theme.text.primary;
+            default:
+                checkExhaustive(item.status);
+        }
+    })();
+    const strikethrough = item.status === 'cancelled';
+    return (_jsxs(Box, { flexDirection: "row", columnGap: 1, "aria-role": ariaRole, children: [_jsx(ChecklistStatusDisplay, { status: item.status }), _jsx(Box, { flexShrink: 1, children: _jsx(Text, { color: textColor, wrap: wrap, strikethrough: strikethrough, children: item.label }) })] }));
+};

package/dist/ui/components/CliSpinner.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import Spinner from 'ink-spinner';
+import { useEffect } from 'react';
+import { debugState } from '../debug.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+export const CliSpinner = (props) => {
+    const settings = useSettings();
+    const shouldShow = settings.merged.ui?.showSpinner !== false;
+    useEffect(() => {
+        if (shouldShow) {
+            debugState.debugNumAnimatedComponents++;
+            return () => {
+                debugState.debugNumAnimatedComponents--;
+            };
+        }
+        return undefined;
+    }, [shouldShow]);
+    if (!shouldShow) {
+        return null;
+    }
+    return _jsx(Spinner, { ...props });
+};

package/dist/ui/components/ColorsDisplay.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+;
+import Gradient from 'ink-gradient';
+import { theme } from '../semantic-colors.js';
+const VALUE_COLUMN_WIDTH = 10;
+const COLOR_DESCRIPTIONS = {
+    'text.primary': 'Primary text color (uses terminal default if blank)',
+    'text.secondary': 'Secondary/dimmed text color',
+    'text.link': 'Hyperlink and highlighting color',
+    'text.accent': 'Accent color for emphasis',
+    'text.response': 'Color for model response text (uses terminal default if blank)',
+    'background.primary': 'Main terminal background color',
+    'background.message': 'Subtle background for message blocks',
+    'background.input': 'Background for the input prompt',
+    'background.focus': 'Background highlight for selected/focused items',
+    'background.diff.added': 'Background for added lines in diffs',
+    'background.diff.removed': 'Background for removed lines in diffs',
+    'border.default': 'Standard border color',
+    'ui.comment': 'Color for code comments and metadata',
+    'ui.symbol': 'Color for technical symbols and UI icons',
+    'ui.active': 'Border color for active or running elements',
+    'ui.dark': 'Deeply dimmed color for subtle UI elements',
+    'ui.focus': 'Color for focused elements (e.g. selected menu items, focused borders)',
+    'status.error': 'Color for error messages and critical status',
+    'status.success': 'Color for success messages and positive status',
+    'status.warning': 'Color for warnings and cautionary status',
+};
+/**
+ * Determines a contrasting text color (black or white) based on the background color's luminance.
+ */
+function getContrastingTextColor(hex) {
+    if (!hex || !hex.startsWith('#') || hex.length < 7) {
+        // Fallback for invalid hex codes or named colors
+        return theme.text.primary;
+    }
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    // Using YIQ formula to determine luminance
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 128 ? '#000000' : '#FFFFFF';
+}
+export const ColorsDisplay = ({ activeTheme, }) => {
+    const semanticColors = activeTheme.semanticColors;
+    const backgroundRows = [];
+    const standardRows = [];
+    let gradientRow = null;
+    if (semanticColors.ui.gradient && semanticColors.ui.gradient.length > 0) {
+        gradientRow = {
+            type: 'gradient',
+            name: 'ui.gradient',
+            value: semanticColors.ui.gradient,
+        };
+    }
+    /**
+     * Recursively flattens the semanticColors object.
+     */
+    const flattenColors = (obj, path = '') => {
+        for (const [key, value] of Object.entries(obj)) {
+            if (value === undefined || value === null)
+                continue;
+            const newPath = path ? `${path}.${key}` : key;
+            if (key === 'gradient' && Array.isArray(value)) {
+                // Gradient handled separately
+                continue;
+            }
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                flattenColors(value, newPath);
+            }
+            else if (typeof value === 'string') {
+                if (newPath.startsWith('background.')) {
+                    backgroundRows.push({
+                        type: 'background',
+                        name: newPath,
+                        value,
+                    });
+                }
+                else {
+                    standardRows.push({
+                        type: 'standard',
+                        name: newPath,
+                        value,
+                    });
+                }
+            }
+        }
+    };
+    flattenColors(semanticColors);
+    // Final order: Backgrounds first, then Standards, then Gradient
+    const allRows = [
+        ...backgroundRows,
+        ...standardRows,
+        ...(gradientRow ? [gradientRow] : []),
+    ];
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 0, borderStyle: "round", borderColor: theme.border.default, children: [_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: theme.text.accent, children: "DEVELOPER TOOLS (Not visible to users)" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.text.primary, children: _jsx(Text, { bold: true, children: "How do colors get applied?" }) }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.text.primary, children: ["\u2022 ", _jsx(Text, { bold: true, children: "Hex:" }), " Rendered exactly by modern terminals. Not overridden by app themes."] }), _jsxs(Text, { color: theme.text.primary, children: ["\u2022 ", _jsx(Text, { bold: true, children: "Blank:" }), " Uses your terminal's default foreground/background."] }), _jsxs(Text, { color: theme.text.primary, children: ["\u2022 ", _jsx(Text, { bold: true, children: "Compatibility:" }), " On older terminals, hex is approximated to the nearest ANSI color."] }), _jsxs(Text, { color: theme.text.primary, children: ["\u2022 ", _jsx(Text, { bold: true, children: "ANSI Names:" }), " 'red', 'green', etc. are mapped to your terminal app's palette."] })] })] })] }), _jsxs(Box, { flexDirection: "row", marginBottom: 0, paddingX: 1, children: [_jsx(Box, { width: VALUE_COLUMN_WIDTH, children: _jsx(Text, { bold: true, color: theme.text.link, dimColor: true, children: "Value" }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { bold: true, color: theme.text.link, dimColor: true, children: "Name" }) })] }), _jsx(Box, { flexDirection: "column", children: allRows.map((row) => {
+                    if (row.type === 'standard')
+                        return renderStandardRow(row);
+                    if (row.type === 'gradient')
+                        return renderGradientRow(row);
+                    if (row.type === 'background')
+                        return renderBackgroundRow(row);
+                    return null;
+                }) })] }));
+};
+function renderStandardRow({ name, value }) {
+    const isHex = value.startsWith('#');
+    const displayColor = isHex ? value : theme.text.primary;
+    const description = COLOR_DESCRIPTIONS[name] || '';
+    return (_jsxs(Box, { flexDirection: "row", paddingX: 1, children: [_jsx(Box, { width: VALUE_COLUMN_WIDTH, children: _jsx(Text, { color: displayColor, children: value || '(blank)' }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", children: [_jsx(Box, { width: "30%", children: _jsx(Text, { color: displayColor, children: name }) }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: _jsx(Text, { color: theme.text.secondary, children: description }) })] })] }, name));
+}
+function renderGradientRow({ name, value }) {
+    const description = COLOR_DESCRIPTIONS[name] || '';
+    return (_jsxs(Box, { flexDirection: "row", paddingX: 1, children: [_jsx(Box, { width: VALUE_COLUMN_WIDTH, flexDirection: "column", children: value.map((c, i) => (_jsx(Text, { color: c, children: c }, i))) }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", children: [_jsx(Box, { width: "30%", children: _jsx(Gradient, { colors: value, children: _jsx(Text, { children: name }) }) }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: _jsx(Text, { color: theme.text.secondary, children: description }) })] })] }, name));
+}
+function renderBackgroundRow({ name, value }) {
+    const description = COLOR_DESCRIPTIONS[name] || '';
+    return (_jsxs(Box, { flexDirection: "row", paddingX: 1, children: [_jsx(Box, { width: VALUE_COLUMN_WIDTH, backgroundColor: value, justifyContent: "center", paddingX: 1, children: _jsx(Text, { color: getContrastingTextColor(value), bold: true, wrap: "truncate", children: value || 'default' }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", paddingLeft: 1, children: [_jsx(Box, { width: "30%", children: _jsx(Text, { color: theme.text.primary, children: name }) }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: _jsx(Text, { color: theme.text.secondary, children: description }) })] })] }, name));
+}

package/dist/ui/components/Composer.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Box } from 'ink';
+;
+import { useState, useEffect } from 'react';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useInputState } from '../contexts/InputContext.js';
+import { useUIActions } from '../contexts/UIActionsContext.js';
+import { useVimMode } from '../contexts/VimModeContext.js';
+import { useAlternateBuffer } from '../hooks/useAlternateBuffer.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { isNarrowWidth } from '../utils/isNarrowWidth.js';
+import { ToastDisplay, shouldShowToast } from './ToastDisplay.js';
+import { DetailedMessagesDisplay } from './DetailedMessagesDisplay.js';
+import { ShortcutsHelp } from './ShortcutsHelp.js';
+import { InputPrompt } from './InputPrompt.js';
+import { Footer } from './Footer.js';
+import { StatusRow } from './StatusRow.js';
+import { ShowMoreLines } from './ShowMoreLines.js';
+import { QueuedMessageDisplay } from './QueuedMessageDisplay.js';
+import { OverflowProvider } from '../contexts/OverflowContext.js';
+import { ConfigInitDisplay } from './ConfigInitDisplay.js';
+import { TodoTray } from './messages/Todo.js';
+import { useComposerStatus } from '../hooks/useComposerStatus.js';
+import { appEvents, AppEvent } from '../../utils/events.js';
+export const Composer = ({ isFocused = true }) => {
+    const uiState = useUIState();
+    const inputState = useInputState();
+    const uiActions = useUIActions();
+    const settings = useSettings();
+    const config = useConfig();
+    const { vimEnabled, vimMode } = useVimMode();
+    // Ink v4 compatibility: screen reader detection disabled.
+    const isScreenReaderEnabled = false;
+    const { columns: terminalWidth } = useTerminalSize();
+    const isNarrow = isNarrowWidth(terminalWidth);
+    const debugConsoleMaxHeight = Math.floor(Math.max(terminalWidth * 0.2, 5));
+    const [suggestionsVisible, setSuggestionsVisible] = useState(false);
+    const isAlternateBuffer = useAlternateBuffer();
+    const showUiDetails = uiState.cleanUiDetailsVisible;
+    const suggestionsPosition = isAlternateBuffer ? 'above' : 'below';
+    const hideContextSummary = suggestionsVisible && suggestionsPosition === 'above';
+    const { hasPendingActionRequired, shouldCollapseDuringApproval } = useComposerStatus();
+    const isPassiveShortcutsHelpState = uiState.isInputActive &&
+        uiState.streamingState === 'idle' &&
+        !hasPendingActionRequired;
+    const { setShortcutsHelpVisible } = uiActions;
+    useEffect(() => {
+        if (hasPendingActionRequired) {
+            appEvents.emit(AppEvent.ScrollToBottom);
+        }
+    }, [hasPendingActionRequired]);
+    useEffect(() => {
+        if (uiState.shortcutsHelpVisible && !isPassiveShortcutsHelpState) {
+            setShortcutsHelpVisible(false);
+        }
+    }, [
+        uiState.shortcutsHelpVisible,
+        isPassiveShortcutsHelpState,
+        setShortcutsHelpVisible,
+    ]);
+    const showShortcutsHelp = uiState.shortcutsHelpVisible &&
+        uiState.streamingState === 'idle' &&
+        !hasPendingActionRequired;
+    if (hasPendingActionRequired && shouldCollapseDuringApproval) {
+        return null;
+    }
+    const showToast = shouldShowToast(uiState, inputState);
+    const hideUiDetailsForSuggestions = suggestionsVisible && suggestionsPosition === 'above';
+    // Mini Mode VIP Flags (Pure Content Triggers)
+    const showMinimalToast = showToast;
+    return (_jsxs(Box, { flexDirection: "column", width: uiState.terminalWidth, flexGrow: 0, flexShrink: 0, children: [uiState.isResuming && (_jsx(ConfigInitDisplay, { message: "Resuming session..." })), showUiDetails && (_jsx(QueuedMessageDisplay, { messageQueue: uiState.messageQueue })), showUiDetails && _jsx(TodoTray, {}), showShortcutsHelp && _jsx(ShortcutsHelp, {}), (showUiDetails || showMinimalToast) && (_jsx(Box, { minHeight: 1, marginLeft: isNarrow ? 0 : 1, children: _jsx(ToastDisplay, {}) })), _jsx(Box, { width: "100%", flexDirection: "column", children: _jsx(StatusRow, { showUiDetails: showUiDetails, isNarrow: isNarrow, terminalWidth: terminalWidth, hideContextSummary: hideContextSummary, hideUiDetailsForSuggestions: hideUiDetailsForSuggestions, hasPendingActionRequired: hasPendingActionRequired }) }), showUiDetails && uiState.showErrorDetails && (_jsx(OverflowProvider, { children: _jsxs(Box, { flexDirection: "column", children: [_jsx(DetailedMessagesDisplay, { maxHeight: uiState.constrainHeight ? debugConsoleMaxHeight : undefined, width: uiState.terminalWidth, hasFocus: uiState.showErrorDetails }), _jsx(ShowMoreLines, { constrainHeight: uiState.constrainHeight })] }) })), uiState.isInputActive && (_jsx(InputPrompt, { onSubmit: uiActions.handleFinalSubmit, setBannerVisible: uiActions.setBannerVisible, onClearScreen: uiActions.handleClearScreen, config: config, slashCommands: uiState.slashCommands || [], commandContext: uiState.commandContext, setShellModeActive: uiActions.setShellModeActive, approvalMode: uiState.showApprovalModeIndicator, onEscapePromptChange: uiActions.onEscapePromptChange, focus: isFocused, vimHandleInput: uiActions.vimHandleInput, vimEnabled: vimEnabled, vimMode: vimMode, isEmbeddedShellFocused: uiState.embeddedShellFocused, popAllMessages: uiActions.popAllMessages, onQueueMessage: uiActions.addMessage, placeholder: vimEnabled
+                    ? vimMode === 'INSERT'
+                        ? "  Press 'Esc' for NORMAL mode."
+                        : "  Press 'i' for INSERT mode."
+                    : inputState.shellModeActive
+                        ? '  Type your shell command'
+                        : '  Type your message or @path/to/file', setQueueErrorMessage: uiActions.setQueueErrorMessage, streamingState: uiState.streamingState, suggestionsPosition: suggestionsPosition, onSuggestionsVisibilityChange: setSuggestionsVisible })), showUiDetails &&
+                !settings.merged.ui.hideFooter &&
+                !isScreenReaderEnabled && _jsx(Footer, {})] }));
+};