@quantum-ai/gemini-cli 0.45.8 → 0.45.10

package/dist/ui/components/shared/MaxSizedBox.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { Box, Text } from 'ink';
+;
+import Polyfill from 'resize-observer-polyfill';
+const ResizeObserver = Polyfill.default || Polyfill.ResizeObserver || Polyfill;
+import { theme } from '../../semantic-colors.js';
+import { useOverflowActions } from '../../contexts/OverflowContext.js';
+import { isNarrowWidth } from '../../utils/isNarrowWidth.js';
+import { Command } from '../../key/keyBindings.js';
+import { formatCommand } from '../../key/keybindingUtils.js';
+/**
+ * Minimum height for the MaxSizedBox component.
+ * This ensures there is room for at least one line of content as well as the
+ * message that content was truncated.
+ */
+export const MINIMUM_MAX_HEIGHT = 2;
+/**
+ * A React component that constrains the size of its children and provides
+ * content-aware truncation when the content exceeds the specified `maxHeight`.
+ */
+export const MaxSizedBox = ({ children, maxWidth, maxHeight, overflowDirection = 'top', additionalHiddenLinesCount = 0, paddingX = 0, }) => {
+    const id = useId();
+    const { addOverflowingId, removeOverflowingId } = useOverflowActions() || {};
+    const observerRef = useRef(null);
+    useEffect(() => () => {
+        observerRef.current?.disconnect();
+    }, []);
+    const [contentHeight, setContentHeight] = useState(0);
+    const onRefChange = useCallback((node) => {
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        if (node && maxHeight !== undefined) {
+            const observer = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (entry) {
+                    setContentHeight(Math.round(entry.contentRect.height));
+                }
+            });
+            observer.observe(node);
+            observerRef.current = observer;
+        }
+    }, [maxHeight]);
+    const effectiveMaxHeight = maxHeight !== undefined
+        ? Math.max(Math.round(maxHeight), MINIMUM_MAX_HEIGHT)
+        : undefined;
+    const isOverflowing = (effectiveMaxHeight !== undefined && contentHeight > effectiveMaxHeight) ||
+        additionalHiddenLinesCount > 0;
+    // If we're overflowing, we need to hide at least 1 line for the message.
+    const visibleContentHeight = isOverflowing && effectiveMaxHeight !== undefined
+        ? effectiveMaxHeight - 1
+        : effectiveMaxHeight;
+    const hiddenLinesCount = visibleContentHeight !== undefined
+        ? Math.max(0, contentHeight - visibleContentHeight)
+        : 0;
+    const totalHiddenLines = hiddenLinesCount + additionalHiddenLinesCount;
+    const isNarrow = maxWidth !== undefined && isNarrowWidth(maxWidth);
+    const showMoreKey = formatCommand(Command.SHOW_MORE_LINES);
+    useEffect(() => {
+        if (totalHiddenLines > 0) {
+            addOverflowingId?.(id);
+        }
+        else {
+            removeOverflowingId?.(id);
+        }
+    }, [id, totalHiddenLines, addOverflowingId, removeOverflowingId]);
+    useEffect(() => () => {
+        removeOverflowingId?.(id);
+    }, [id, removeOverflowingId]);
+    if (effectiveMaxHeight === undefined && totalHiddenLines === 0) {
+        return (_jsx(Box, { flexDirection: "column", width: maxWidth, children: children }));
+    }
+    const offset = hiddenLinesCount > 0 && overflowDirection === 'top' ? -hiddenLinesCount : 0;
+    return (_jsxs(Box, { flexDirection: "column", width: maxWidth, maxHeight: effectiveMaxHeight, flexShrink: 0, children: [totalHiddenLines > 0 && overflowDirection === 'top' && (_jsx(Box, { paddingX: paddingX, children: _jsx(Text, { color: theme.text.secondary, wrap: "truncate", children: isNarrow
+                        ? `... ${totalHiddenLines} hidden (${showMoreKey}) ...`
+                        : `... first ${totalHiddenLines} line${totalHiddenLines === 1 ? '' : 's'} hidden (${showMoreKey} to show) ...` }) })), _jsx(Box, { flexDirection: "column", overflow: "hidden", flexGrow: 0, maxHeight: isOverflowing ? visibleContentHeight : undefined, children: _jsx(Box, { flexDirection: "column", ref: onRefChange, flexShrink: 0, marginTop: offset, children: children }) }), totalHiddenLines > 0 && overflowDirection === 'bottom' && (_jsx(Box, { paddingX: paddingX, children: _jsx(Text, { color: theme.text.secondary, wrap: "truncate", children: isNarrow
+                        ? `... ${totalHiddenLines} hidden (${showMoreKey}) ...`
+                        : `... last ${totalHiddenLines} line${totalHiddenLines === 1 ? '' : 's'} hidden (${showMoreKey} to show) ...` }) }))] }));
+};

package/dist/ui/components/shared/RadioButtonSelect.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Box } from 'ink';
+;
+import { theme } from '../../semantic-colors.js';
+import { BaseSelectionList, } from './BaseSelectionList.js';
+/**
+ * A custom component that displays a list of items with radio buttons,
+ * supporting scrolling and keyboard navigation.
+ *
+ * @template T The type of the value associated with each radio item.
+ */
+export function RadioButtonSelect({ items, initialIndex = 0, onSelect, onHighlight, isFocused = true, showScrollArrows = false, maxItemsToShow = 10, showNumbers = true, priority, renderItem, }) {
+    return (_jsx(BaseSelectionList, { items: items, initialIndex: initialIndex, onSelect: onSelect, onHighlight: onHighlight, isFocused: isFocused, showNumbers: showNumbers, showScrollArrows: showScrollArrows, maxItemsToShow: maxItemsToShow, priority: priority, renderItem: renderItem ||
+            ((item, { titleColor }) => {
+                // Handle special theme display case for ThemeDialog compatibility
+                if (item.themeNameDisplay && item.themeTypeDisplay) {
+                    return (_jsxs(Text, { color: titleColor, wrap: "truncate", children: [item.themeNameDisplay, ' ', _jsx(Text, { color: theme.text.secondary, children: item.themeTypeDisplay })] }, item.key));
+                }
+                // Regular label display
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: titleColor, wrap: "truncate", children: item.label }), item.sublabel && (_jsx(Text, { color: theme.text.secondary, wrap: "truncate", children: item.sublabel }))] }));
+            }) }));
+}

package/dist/ui/components/shared/ScopeSelector.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+;
+import { getScopeItems } from '../../../utils/dialogScopeUtils.js';
+import { RadioButtonSelect } from './RadioButtonSelect.js';
+export function ScopeSelector({ onSelect, onHighlight, isFocused, initialScope, }) {
+    const scopeItems = getScopeItems().map((item) => ({
+        ...item,
+        key: item.value,
+    }));
+    const initialIndex = scopeItems.findIndex((item) => item.value === initialScope);
+    const safeInitialIndex = initialIndex >= 0 ? initialIndex : 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: isFocused, wrap: "truncate", children: [isFocused ? '> ' : '  ', "Apply To"] }), _jsx(RadioButtonSelect, { items: scopeItems, initialIndex: safeInitialIndex, onSelect: onSelect, onHighlight: onHighlight, isFocused: isFocused, showNumbers: isFocused })] }));
+}

package/dist/ui/components/shared/Scrollable.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useMemo, useLayoutEffect, useEffect, useId, } from 'react';
+import { Box } from 'ink';
+;
+import Polyfill from 'resize-observer-polyfill';
+const ResizeObserver = Polyfill.default || Polyfill.ResizeObserver || Polyfill;
+import { useKeypress } from '../../hooks/useKeypress.js';
+import { useScrollable } from '../../contexts/ScrollProvider.js';
+import { useAnimatedScrollbar } from '../../hooks/useAnimatedScrollbar.js';
+import { useBatchedScroll } from '../../hooks/useBatchedScroll.js';
+import { Command } from '../../key/keyMatchers.js';
+import { useOverflowActions } from '../../contexts/OverflowContext.js';
+import { useKeyMatchers } from '../../hooks/useKeyMatchers.js';
+export const Scrollable = ({ children, width, height, maxWidth, maxHeight, hasFocus, scrollToBottom, flexGrow, reportOverflow = false, overflowToBackbuffer, scrollbar = true, stableScrollback, }) => {
+    const keyMatchers = useKeyMatchers();
+    const [scrollTop, setScrollTop] = useState(0);
+    const viewportRef = useRef(null);
+    const contentRef = useRef(null);
+    const overflowActions = useOverflowActions();
+    const id = useId();
+    const [size, setSize] = useState({
+        innerHeight: typeof height === 'number' ? height : 0,
+        scrollHeight: 0,
+    });
+    const sizeRef = useRef(size);
+    const scrollTopRef = useRef(scrollTop);
+    useLayoutEffect(() => {
+        sizeRef.current = size;
+    }, [size]);
+    useLayoutEffect(() => {
+        scrollTopRef.current = scrollTop;
+    }, [scrollTop]);
+    useEffect(() => {
+        if (reportOverflow && size.scrollHeight > size.innerHeight) {
+            overflowActions?.addOverflowingId?.(id);
+        }
+        else {
+            overflowActions?.removeOverflowingId?.(id);
+        }
+    }, [
+        reportOverflow,
+        size.scrollHeight,
+        size.innerHeight,
+        id,
+        overflowActions,
+    ]);
+    useEffect(() => () => {
+        overflowActions?.removeOverflowingId?.(id);
+    }, [id, overflowActions]);
+    const viewportObserverRef = useRef(null);
+    const contentObserverRef = useRef(null);
+    useEffect(() => () => {
+        viewportObserverRef.current?.disconnect();
+        contentObserverRef.current?.disconnect();
+    }, []);
+    const viewportRefCallback = useCallback((node) => {
+        viewportObserverRef.current?.disconnect();
+        viewportRef.current = node;
+        if (node) {
+            const observer = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (entry) {
+                    const innerHeight = Math.round(entry.contentRect.height);
+                    setSize((prev) => {
+                        const scrollHeight = prev.scrollHeight;
+                        const isAtBottom = scrollHeight > prev.innerHeight &&
+                            scrollTopRef.current >= scrollHeight - prev.innerHeight - 1;
+                        if (isAtBottom) {
+                            setScrollTop(Number.MAX_SAFE_INTEGER);
+                        }
+                        return { ...prev, innerHeight };
+                    });
+                }
+            });
+            observer.observe(node);
+            viewportObserverRef.current = observer;
+        }
+    }, []);
+    const contentRefCallback = useCallback((node) => {
+        contentObserverRef.current?.disconnect();
+        contentRef.current = node;
+        if (node) {
+            const observer = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (entry) {
+                    const scrollHeight = Math.round(entry.contentRect.height);
+                    setSize((prev) => {
+                        const innerHeight = prev.innerHeight;
+                        const isAtBottom = prev.scrollHeight > innerHeight &&
+                            scrollTopRef.current >= prev.scrollHeight - innerHeight - 1;
+                        if (isAtBottom ||
+                            (scrollToBottom && scrollHeight > prev.scrollHeight)) {
+                            setScrollTop(Number.MAX_SAFE_INTEGER);
+                        }
+                        return { ...prev, scrollHeight };
+                    });
+                }
+            });
+            observer.observe(node);
+            contentObserverRef.current = observer;
+        }
+    }, [scrollToBottom]);
+    const { getScrollTop, setPendingScrollTop } = useBatchedScroll(scrollTop);
+    const scrollBy = useCallback((delta) => {
+        const { scrollHeight, innerHeight } = sizeRef.current;
+        const maxScroll = Math.max(0, scrollHeight - innerHeight);
+        const current = Math.min(getScrollTop(), maxScroll);
+        let next = Math.max(0, current + delta);
+        if (next >= maxScroll) {
+            next = Number.MAX_SAFE_INTEGER;
+        }
+        setPendingScrollTop(next);
+        setScrollTop(next);
+    }, [getScrollTop, setPendingScrollTop]);
+    const { scrollbarColor, flashScrollbar, scrollByWithAnimation } = useAnimatedScrollbar(hasFocus, scrollBy);
+    useKeypress((key) => {
+        const { scrollHeight, innerHeight } = sizeRef.current;
+        const scrollTop = getScrollTop();
+        const maxScroll = Math.max(0, scrollHeight - innerHeight);
+        const actualScrollTop = Math.min(scrollTop, maxScroll);
+        // Only capture scroll-up events if there's room;
+        // otherwise allow events to bubble.
+        if (actualScrollTop > 0) {
+            if (keyMatchers[Command.PAGE_UP](key)) {
+                scrollByWithAnimation(-innerHeight);
+                return true;
+            }
+            if (keyMatchers[Command.SCROLL_UP](key)) {
+                scrollByWithAnimation(-1);
+                return true;
+            }
+        }
+        // Only capture scroll-down events if there's room;
+        // otherwise allow events to bubble.
+        if (actualScrollTop < maxScroll) {
+            if (keyMatchers[Command.PAGE_DOWN](key)) {
+                scrollByWithAnimation(innerHeight);
+                return true;
+            }
+            if (keyMatchers[Command.SCROLL_DOWN](key)) {
+                scrollByWithAnimation(1);
+                return true;
+            }
+        }
+        // bubble keypress
+        return false;
+    }, { isActive: hasFocus });
+    const getScrollState = useCallback(() => {
+        const maxScroll = Math.max(0, size.scrollHeight - size.innerHeight);
+        return {
+            scrollTop: Math.min(getScrollTop(), maxScroll),
+            scrollHeight: size.scrollHeight,
+            innerHeight: size.innerHeight,
+        };
+    }, [getScrollTop, size.scrollHeight, size.innerHeight]);
+    const hasFocusCallback = useCallback(() => hasFocus, [hasFocus]);
+    const scrollableEntry = useMemo(() => ({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+        ref: viewportRef,
+        getScrollState,
+        scrollBy: scrollByWithAnimation,
+        hasFocus: hasFocusCallback,
+        flashScrollbar,
+    }), [getScrollState, scrollByWithAnimation, hasFocusCallback, flashScrollbar]);
+    useScrollable(scrollableEntry, true);
+    return (_jsx(Box, { ref: viewportRefCallback, maxHeight: maxHeight, width: width ?? maxWidth, height: height, flexDirection: "column", overflowY: "scroll", overflowX: "hidden", scrollTop: scrollTop, flexGrow: flexGrow, scrollbarThumbColor: scrollbarColor, overflowToBackbuffer: overflowToBackbuffer, scrollbar: scrollbar, stableScrollback: stableScrollback, children: _jsx(Box, { ref: contentRefCallback, flexShrink: 0, paddingRight: 1, flexDirection: "column", children: children }) }));
+};

package/dist/ui/components/shared/ScrollableList.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { useRef, forwardRef, useImperativeHandle, useCallback, useMemo, useLayoutEffect, } from 'react';
+import { VirtualizedList, SCROLL_TO_ITEM_END, } from './VirtualizedList.js';
+import { useScrollable } from '../../contexts/ScrollProvider.js';
+import { Box } from 'ink';
+;
+import { useAnimatedScrollbar } from '../../hooks/useAnimatedScrollbar.js';
+import { useKeypress } from '../../hooks/useKeypress.js';
+import { Command } from '../../key/keyMatchers.js';
+import { useKeyMatchers } from '../../hooks/useKeyMatchers.js';
+const ANIMATION_FRAME_DURATION_MS = 33;
+function ScrollableList(props, ref) {
+    const keyMatchers = useKeyMatchers();
+    const { hasFocus, width, scrollbar = true, stableScrollback } = props;
+    const virtualizedListRef = useRef(null);
+    const containerRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        scrollBy: (delta) => virtualizedListRef.current?.scrollBy(delta),
+        scrollTo: (offset) => virtualizedListRef.current?.scrollTo(offset),
+        scrollToEnd: () => virtualizedListRef.current?.scrollToEnd(),
+        scrollToIndex: (params) => virtualizedListRef.current?.scrollToIndex(params),
+        scrollToItem: (params) => virtualizedListRef.current?.scrollToItem(params),
+        getScrollIndex: () => virtualizedListRef.current?.getScrollIndex() ?? 0,
+        getScrollState: () => virtualizedListRef.current?.getScrollState() ?? {
+            scrollTop: 0,
+            scrollHeight: 0,
+            innerHeight: 0,
+        },
+    }), []);
+    const getScrollState = useCallback(() => virtualizedListRef.current?.getScrollState() ?? {
+        scrollTop: 0,
+        scrollHeight: 0,
+        innerHeight: 0,
+    }, []);
+    const scrollBy = useCallback((delta) => {
+        virtualizedListRef.current?.scrollBy(delta);
+    }, []);
+    const { scrollbarColor, flashScrollbar, scrollByWithAnimation } = useAnimatedScrollbar(hasFocus, scrollBy);
+    const smoothScrollState = useRef({ active: false, start: 0, from: 0, to: 0, duration: 0, timer: null });
+    const stopSmoothScroll = useCallback(() => {
+        if (smoothScrollState.current.timer) {
+            clearInterval(smoothScrollState.current.timer);
+            smoothScrollState.current.timer = null;
+        }
+        smoothScrollState.current.active = false;
+    }, []);
+    useLayoutEffect(() => stopSmoothScroll, [stopSmoothScroll]);
+    const smoothScrollTo = useCallback((targetScrollTop, duration = process.env['NODE_ENV'] === 'test' ? 0 : 200) => {
+        stopSmoothScroll();
+        const scrollState = virtualizedListRef.current?.getScrollState() ?? {
+            scrollTop: 0,
+            scrollHeight: 0,
+            innerHeight: 0,
+        };
+        const { scrollTop: rawStartScrollTop, scrollHeight, innerHeight, } = scrollState;
+        const maxScrollTop = Math.max(0, scrollHeight - innerHeight);
+        const startScrollTop = Math.min(rawStartScrollTop, maxScrollTop);
+        let effectiveTarget = targetScrollTop;
+        if (targetScrollTop === SCROLL_TO_ITEM_END ||
+            targetScrollTop >= maxScrollTop) {
+            effectiveTarget = maxScrollTop;
+        }
+        const clampedTarget = Math.max(0, Math.min(maxScrollTop, effectiveTarget));
+        if (duration === 0) {
+            if (targetScrollTop === SCROLL_TO_ITEM_END ||
+                targetScrollTop >= maxScrollTop) {
+                virtualizedListRef.current?.scrollTo(Number.MAX_SAFE_INTEGER);
+            }
+            else {
+                virtualizedListRef.current?.scrollTo(Math.round(clampedTarget));
+            }
+            flashScrollbar();
+            return;
+        }
+        smoothScrollState.current = {
+            active: true,
+            start: Date.now(),
+            from: startScrollTop,
+            to: clampedTarget,
+            duration,
+            timer: setInterval(() => {
+                const now = Date.now();
+                const elapsed = now - smoothScrollState.current.start;
+                const progress = Math.min(elapsed / duration, 1);
+                // Ease-in-out
+                const t = progress;
+                const ease = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+                const current = smoothScrollState.current.from +
+                    (smoothScrollState.current.to - smoothScrollState.current.from) *
+                        ease;
+                if (progress >= 1) {
+                    if (targetScrollTop === SCROLL_TO_ITEM_END ||
+                        targetScrollTop >= maxScrollTop) {
+                        virtualizedListRef.current?.scrollTo(Number.MAX_SAFE_INTEGER);
+                    }
+                    else {
+                        virtualizedListRef.current?.scrollTo(Math.round(current));
+                    }
+                    stopSmoothScroll();
+                    flashScrollbar();
+                }
+                else {
+                    virtualizedListRef.current?.scrollTo(Math.round(current));
+                }
+            }, ANIMATION_FRAME_DURATION_MS),
+        };
+    }, [stopSmoothScroll, flashScrollbar]);
+    useKeypress((key) => {
+        if (keyMatchers[Command.SCROLL_UP](key)) {
+            stopSmoothScroll();
+            scrollByWithAnimation(-1);
+            return true;
+        }
+        else if (keyMatchers[Command.SCROLL_DOWN](key)) {
+            stopSmoothScroll();
+            scrollByWithAnimation(1);
+            return true;
+        }
+        else if (keyMatchers[Command.PAGE_UP](key) ||
+            keyMatchers[Command.PAGE_DOWN](key)) {
+            const direction = keyMatchers[Command.PAGE_UP](key) ? -1 : 1;
+            const scrollState = getScrollState();
+            const maxScroll = Math.max(0, scrollState.scrollHeight - scrollState.innerHeight);
+            const current = smoothScrollState.current.active
+                ? smoothScrollState.current.to
+                : Math.min(scrollState.scrollTop, maxScroll);
+            const innerHeight = scrollState.innerHeight;
+            smoothScrollTo(current + direction * innerHeight);
+            return true;
+        }
+        else if (keyMatchers[Command.SCROLL_HOME](key)) {
+            smoothScrollTo(0);
+            return true;
+        }
+        else if (keyMatchers[Command.SCROLL_END](key)) {
+            smoothScrollTo(SCROLL_TO_ITEM_END);
+            return true;
+        }
+        return false;
+    }, { isActive: hasFocus });
+    const hasFocusCallback = useCallback(() => hasFocus, [hasFocus]);
+    const scrollableEntry = useMemo(() => ({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+        ref: containerRef,
+        getScrollState,
+        scrollBy: scrollByWithAnimation,
+        scrollTo: smoothScrollTo,
+        hasFocus: hasFocusCallback,
+        flashScrollbar,
+    }), [
+        getScrollState,
+        hasFocusCallback,
+        flashScrollbar,
+        scrollByWithAnimation,
+        smoothScrollTo,
+    ]);
+    useScrollable(scrollableEntry, true);
+    return (_jsx(Box, { ref: containerRef, flexGrow: 1, flexDirection: "column", width: width, children: _jsx(VirtualizedList, { ref: virtualizedListRef, ...props, scrollbar: scrollbar, scrollbarThumbColor: scrollbarColor, stableScrollback: stableScrollback }) }));
+}
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+const ScrollableListWithForwardRef = forwardRef(ScrollableList);
+export { ScrollableListWithForwardRef as ScrollableList };

package/dist/ui/components/shared/SearchableList.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { useMemo, useCallback } from 'react';
+import { Box, Text } from 'ink';
+;
+import { theme } from '../../semantic-colors.js';
+import { useSelectionList } from '../../hooks/useSelectionList.js';
+import { TextInput } from './TextInput.js';
+import { useKeypress } from '../../hooks/useKeypress.js';
+import { Command } from '../../key/keyMatchers.js';
+import { useKeyMatchers } from '../../hooks/useKeyMatchers.js';
+/**
+ * A generic searchable list component with keyboard navigation.
+ */
+export function SearchableList({ title, items, onSelect, onClose, searchPlaceholder = 'Search...', renderItem, header, footer, maxItemsToShow = 10, useSearch, onSearch, resetSelectionOnItemsChange = false, isFocused = true, }) {
+    const keyMatchers = useKeyMatchers();
+    const { filteredItems, searchBuffer, maxLabelWidth } = useSearch({
+        items,
+        onSearch,
+    });
+    const selectionItems = useMemo(() => filteredItems.map((item) => ({
+        key: item.key,
+        value: item,
+    })), [filteredItems]);
+    const handleSelectValue = useCallback((item) => {
+        onSelect(item);
+    }, [onSelect]);
+    const { activeIndex, setActiveIndex } = useSelectionList({
+        items: selectionItems,
+        onSelect: handleSelectValue,
+        isFocused,
+        showNumbers: false,
+        wrapAround: true,
+        priority: true,
+    });
+    const [scrollOffsetState, setScrollOffsetState] = React.useState(0);
+    // Compute effective scroll offset during render to avoid visual flicker
+    let scrollOffset = scrollOffsetState;
+    if (activeIndex < scrollOffset) {
+        scrollOffset = activeIndex;
+    }
+    else if (activeIndex >= scrollOffset + maxItemsToShow) {
+        scrollOffset = activeIndex - maxItemsToShow + 1;
+    }
+    const maxScroll = Math.max(0, filteredItems.length - maxItemsToShow);
+    if (scrollOffset > maxScroll) {
+        scrollOffset = maxScroll;
+    }
+    // Update state to match derived value if it changed
+    if (scrollOffsetState !== scrollOffset) {
+        setScrollOffsetState(scrollOffset);
+    }
+    // Reset selection to top when items change if requested
+    const prevItemsRef = React.useRef(filteredItems);
+    React.useLayoutEffect(() => {
+        if (resetSelectionOnItemsChange && filteredItems !== prevItemsRef.current) {
+            setActiveIndex(0);
+            setScrollOffsetState(0);
+        }
+        prevItemsRef.current = filteredItems;
+    }, [filteredItems, setActiveIndex, resetSelectionOnItemsChange]);
+    // Handle global Escape key to close the list
+    useKeypress((key) => {
+        if (keyMatchers[Command.ESCAPE](key)) {
+            onClose();
+            return true;
+        }
+        return false;
+    }, { isActive: isFocused });
+    const visibleItems = filteredItems.slice(scrollOffset, scrollOffset + maxItemsToShow);
+    const defaultRenderItem = (item, isActive, labelWidth) => (_jsxs(Box, { flexDirection: "row", alignItems: "flex-start", children: [_jsx(Box, { minWidth: 2, flexShrink: 0, children: _jsx(Text, { color: isActive ? theme.status.success : theme.text.secondary, children: isActive ? '●' : '' }) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, minWidth: 0, children: [_jsx(Text, { color: isActive ? theme.status.success : theme.text.primary, children: item.label.padEnd(labelWidth) }), item.description && (_jsx(Text, { color: theme.text.secondary, wrap: "truncate-end", children: item.description }))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", paddingX: 1, children: [title && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.text.primary, children: title }) })), searchBuffer && (_jsx(Box, { borderStyle: "round", borderColor: theme.border.default, paddingX: 1, marginBottom: 1, children: _jsx(TextInput, { buffer: searchBuffer, placeholder: searchPlaceholder, focus: isFocused }) })), header && _jsx(Box, { marginBottom: 1, children: header }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: filteredItems.length === 0 ? (_jsx(Box, { marginX: 2, children: _jsx(Text, { color: theme.text.secondary, children: "No items found." }) })) : (_jsxs(_Fragment, { children: [filteredItems.length > maxItemsToShow && (_jsx(Box, { marginX: 1, children: _jsx(Text, { color: theme.text.secondary, children: "\u25B2" }) })), visibleItems.map((item, index) => {
+                            const isSelected = activeIndex === scrollOffset + index;
+                            return (_jsx(Box, { marginBottom: 1, marginX: 1, children: renderItem
+                                    ? renderItem(item, isSelected, maxLabelWidth)
+                                    : defaultRenderItem(item, isSelected, maxLabelWidth) }, item.key));
+                        }), filteredItems.length > maxItemsToShow && (_jsx(Box, { marginX: 1, children: _jsx(Text, { color: theme.text.secondary, children: "\u25BC" }) }))] })) }), footer && (_jsx(Box, { marginTop: 1, children: footer({
+                    startIndex: scrollOffset,
+                    endIndex: scrollOffset + visibleItems.length,
+                    totalVisible: filteredItems.length,
+                }) }))] }));
+}

package/dist/ui/components/shared/SectionHeader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+;
+import { theme } from '../../semantic-colors.js';
+export const SectionHeader = ({ title, subtitle, }) => (_jsxs(Box, { width: "100%", flexDirection: "column", overflow: "hidden", children: [_jsx(Box, { width: "100%", borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: theme.text.secondary }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: theme.text.primary, bold: true, wrap: "truncate-end", children: title }), subtitle && (_jsx(Text, { color: theme.text.secondary, wrap: "truncate-end", children: subtitle }))] })] }));

package/dist/ui/components/shared/SlicingMaxSizedBox.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { useMemo } from 'react';
+import { MaxSizedBox } from './MaxSizedBox.js';
+// Large threshold to ensure we don't cause performance issues for very large
+// outputs that will get truncated further MaxSizedBox anyway.
+const MAXIMUM_RESULT_DISPLAY_CHARACTERS = 20000;
+/**
+ * An extension of MaxSizedBox that performs explicit slicing of the input data
+ * (string or array) before rendering. This is useful for performance and to
+ * ensure consistent truncation behavior for large outputs.
+ */
+export function SlicingMaxSizedBox({ data, maxLines, isAlternateBuffer, children, ...boxProps }) {
+    const { truncatedData, hiddenLinesCount } = useMemo(() => {
+        let hiddenLines = 0;
+        const overflowDirection = boxProps.overflowDirection ?? 'top';
+        // Only truncate string output if not in alternate buffer mode to ensure
+        // we can scroll through the full output.
+        if (typeof data === 'string' && !isAlternateBuffer) {
+            let text = data;
+            if (text.length > MAXIMUM_RESULT_DISPLAY_CHARACTERS) {
+                if (overflowDirection === 'bottom') {
+                    text = text.slice(0, MAXIMUM_RESULT_DISPLAY_CHARACTERS) + '...';
+                }
+                else {
+                    text = '...' + text.slice(-MAXIMUM_RESULT_DISPLAY_CHARACTERS);
+                }
+            }
+            if (maxLines !== undefined) {
+                const hasTrailingNewline = text.endsWith('\n');
+                const contentText = hasTrailingNewline ? text.slice(0, -1) : text;
+                const lines = contentText.split('\n');
+                if (lines.length > maxLines) {
+                    // We will have a label from MaxSizedBox. Reserve space for it.
+                    const targetLines = Math.max(1, maxLines - 1);
+                    hiddenLines = lines.length - targetLines;
+                    if (overflowDirection === 'bottom') {
+                        text =
+                            lines.slice(0, targetLines).join('\n') +
+                                (hasTrailingNewline ? '\n' : '');
+                    }
+                    else {
+                        text =
+                            lines.slice(-targetLines).join('\n') +
+                                (hasTrailingNewline ? '\n' : '');
+                    }
+                }
+            }
+            return {
+                truncatedData: text,
+                hiddenLinesCount: hiddenLines,
+            };
+        }
+        if (Array.isArray(data) && !isAlternateBuffer && maxLines !== undefined) {
+            if (data.length > maxLines) {
+                // We will have a label from MaxSizedBox. Reserve space for it.
+                const targetLines = Math.max(1, maxLines - 1);
+                const hiddenCount = data.length - targetLines;
+                return {
+                    truncatedData: overflowDirection === 'bottom'
+                        ? data.slice(0, targetLines)
+                        : data.slice(-targetLines),
+                    hiddenLinesCount: hiddenCount,
+                };
+            }
+        }
+        return { truncatedData: data, hiddenLinesCount: 0 };
+    }, [data, isAlternateBuffer, maxLines, boxProps.overflowDirection]);
+    return (_jsx(MaxSizedBox, { ...boxProps, additionalHiddenLinesCount: (boxProps.additionalHiddenLinesCount ?? 0) + hiddenLinesCount, children: children(truncatedData) }));
+}

package/dist/ui/components/shared/TabHeader.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { Text, Box } from 'ink';
+;
+import { theme } from '../../semantic-colors.js';
+/**
+ * A header component that displays tab indicators for multi-tab interfaces.
+ *
+ * Renders in the format: `← Tab1 │ Tab2 │ Tab3 →`
+ *
+ * Features:
+ * - Shows completion status (✓ or □) per tab
+ * - Highlights current tab with accent color
+ * - Supports special tabs (like "Review") with different icons
+ * - Customizable status icons
+ */
+export function TabHeader({ tabs, currentIndex, completedIndices = new Set(), showArrows = true, showStatusIcons = true, renderStatusIcon, }) {
+    if (tabs.length <= 1)
+        return null;
+    const getStatusIcon = (tab, index) => {
+        const isCompleted = completedIndices.has(index);
+        // Try custom renderer first
+        if (renderStatusIcon) {
+            const customIcon = renderStatusIcon(tab, index, isCompleted);
+            if (customIcon !== undefined)
+                return customIcon;
+        }
+        // Use tab's own icon if provided
+        if (tab.statusIcon)
+            return tab.statusIcon;
+        // Default icons
+        if (tab.isSpecial)
+            return '≡';
+        return isCompleted ? '✓' : '□';
+    };
+    return (_jsxs(Box, { flexDirection: "row", marginBottom: 1, "aria-role": "tablist", children: [showArrows && _jsx(Text, { color: theme.text.secondary, children: '← ' }), tabs.map((tab, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { color: theme.text.secondary, children: ' │ ' }), showStatusIcons && (_jsxs(Text, { color: theme.text.secondary, children: [getStatusIcon(tab, i), " "] })), _jsx(Box, { maxWidth: i !== currentIndex ? 16 : 100, children: _jsx(Text, { color: i === currentIndex ? theme.status.success : theme.text.secondary, bold: i === currentIndex, underline: i === currentIndex, "aria-current": i === currentIndex ? 'step' : undefined, wrap: "truncate", children: tab.header }) })] }, tab.key))), showArrows && _jsx(Text, { color: theme.text.secondary, children: ' →' })] }));
+}