@selesai/code 0.8.1 → 0.8.3

package/dist/modes/interactive/interactive-mode.d.ts

@@ -3,8 +3,11 @@
  * Handles TUI rendering and user interaction, delegating business logic to AgentSession.
  */
 import type { ImageContent } from "@earendil-works/pi-ai/compat";
+import type { Terminal } from "@earendil-works/pi-tui";
+import { type TUI, TuiAltScreen, TuiMainScreen } from "@earendil-works/pi-tui";
 import { type AgentSessionRuntime } from "../../core/agent-session-runtime.ts";
 import { SessionManager } from "../../core/session-manager.ts";
+import type { TuiMode } from "../../core/settings-manager.ts";
 import { type LatestPiRelease } from "../../utils/version-check.ts";
 type PendingUserInput = {
     text: string;
@@ -29,14 +32,32 @@ export interface InteractiveModeOptions {
     initialMessages?: string[];
     /** Force verbose startup (overrides quietStartup setting) */
     verbose?: boolean;
+    /** TUI layout mode. */
+    tuiMode?: TuiMode;
 }
+interface InteractiveTuiOptions {
+    tuiMode: TuiMode;
+    showHardwareCursor: boolean;
+    logDirectory: string;
+    terminal?: Terminal;
+    onRightClickPaste?: () => void;
+}
+/** Composition root for selecting the interactive terminal renderer. */
+export declare function createInteractiveTui(options: InteractiveTuiOptions): TuiMainScreen | TuiAltScreen;
+/** Stable reference for components while InteractiveMode replaces the active renderer. */
+export declare function createInteractiveTuiReference(getTui: () => TUI): TUI;
 export declare class InteractiveMode {
     private runtimeHost;
+    private renderer;
     private ui;
+    private mainScreenRenderState;
+    private documentContainer;
     private loadedResourcesContainer;
     private chatContainer;
     private pendingMessagesContainer;
     private statusContainer;
+    private transcriptScrollView;
+    private fullscreenLayoutRoot;
     private defaultEditor;
     private editor;
     private editorComponentFactory;
@@ -45,6 +66,7 @@ export declare class InteractiveMode {
     private fdPath;
     private editorContainer;
     private footer;
+    private footerContainer;
     private footerDataProvider;
     private keybindings;
     private version;
@@ -95,6 +117,7 @@ export declare class InteractiveMode {
     private builtInHeader;
     private customHeader;
     private options;
+    private readonly onRightClickPaste;
     private autoTrustOnReloadCwd;
     private themeController;
     private get session();
@@ -108,6 +131,9 @@ export declare class InteractiveMode {
     private createBaseAutocompleteProvider;
     private setupAutocompleteProvider;
     private showStartupNoticesIfNeeded;
+    private mountInteractiveTui;
+    private stopInteractiveTui;
+    private switchTuiMode;
     init(): Promise<void>;
     /**
      * Update terminal title with session name and cwd.
@@ -193,6 +219,7 @@ export declare class InteractiveMode {
      */
     private setExtensionHeader;
     private addExtensionTerminalInputListener;
+    private rebindExtensionTerminalInputListeners;
     private clearExtensionTerminalInputListeners;
     /**
      * Create the ExtensionUIContext for extensions.
@@ -240,6 +267,7 @@ export declare class InteractiveMode {
      */
     private showExtensionError;
     private setupKeyHandlers;
+    private handleRightClickPaste;
     private handleClipboardPaste;
     private consumePendingInputImages;
     private handleGitCommand;

package/dist/modes/interactive/interactive-mode.js

@@ -5,7 +5,8 @@
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
-import { CombinedAutocompleteProvider, Container, fuzzyFilter, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TUI, visibleWidth, } from "@earendil-works/pi-tui";
+import * as TuiLayouts from "@earendil-works/pi-tui";
+import { CombinedAutocompleteProvider, Container, fuzzyFilter, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TuiAltScreen, TuiMainScreen, visibleWidth, } from "@earendil-works/pi-tui";
 import chalk from "chalk";
 import { spawn, spawnSync } from "child_process";
 import { APP_NAME, APP_TITLE, CONFIG_DIR_NAME, getAgentDir, getAuthPath, getDebugLogPath, getDocsPath, getShareViewerUrl, getUpdateInstruction, PACKAGE_NAME, VERSION, } from "../../config.js";
@@ -31,6 +32,7 @@ import { extensionForImageMimeType, readClipboardImage } from "../../utils/clipb
 import { parseGitUrl } from "../../utils/git.js";
 import { formatDimensionNote, resizeImage } from "../../utils/image-resize.js";
 import { getCwdRelativePath } from "../../utils/paths.js";
+import { openBrowser } from "../../utils/open-browser.js";
 import { getPiUserAgent } from "../../utils/pi-user-agent.js";
 import { killTrackedDetachedChildren } from "../../utils/shell.js";
 import { ensureTool } from "../../utils/tools-manager.js";
@@ -162,13 +164,60 @@ function formatLoginProviderCompletionDescription(provider) {
     const authTypes = provider.authTypes.map(formatAuthSelectorProviderType).join("/");
     return provider.name === provider.id ? authTypes : `${provider.name} · ${authTypes}`;
 }
+/** Composition root for selecting the interactive terminal renderer. */
+export function createInteractiveTui(options) {
+    const terminal = options.terminal ?? new ProcessTerminal();
+    if (options.tuiMode === "fullscreen") {
+        return new TuiAltScreen(terminal, options.showHardwareCursor, options.logDirectory, {
+            openUrl: openBrowser,
+            onRightClickPaste: options.onRightClickPaste,
+        });
+    }
+    return new TuiMainScreen(terminal, options.showHardwareCursor, options.logDirectory);
+}
+/** Stable reference for components while InteractiveMode replaces the active renderer. */
+export function createInteractiveTuiReference(getTui) {
+    return new Proxy({}, {
+        get: (_target, property) => {
+            const tui = getTui();
+            const value = Reflect.get(tui, property, tui);
+            if (typeof value !== "function")
+                return value;
+            let methodTui = tui;
+            let method = value;
+            return (...args) => {
+                const currentTui = getTui();
+                if (currentTui !== methodTui) {
+                    const currentMethod = Reflect.get(currentTui, property, currentTui);
+                    if (typeof currentMethod !== "function") {
+                        throw new TypeError(`TUI property ${String(property)} is not callable`);
+                    }
+                    methodTui = currentTui;
+                    method = currentMethod;
+                }
+                return Reflect.apply(method, methodTui, args);
+            };
+        },
+        set: (_target, property, value) => {
+            const tui = getTui();
+            return Reflect.set(tui, property, value, tui);
+        },
+        has: (_target, property) => Reflect.has(getTui(), property),
+        getPrototypeOf: () => Reflect.getPrototypeOf(getTui()),
+    });
+}
 export class InteractiveMode {
     runtimeHost;
+    renderer;
     ui;
+    mainScreenRenderState;
+    documentContainer;
     loadedResourcesContainer;
     chatContainer;
     pendingMessagesContainer;
     statusContainer;
+    transcriptScrollView;
+    fullscreenLayoutRoot;
     defaultEditor;
     editor;
     editorComponentFactory;
@@ -177,6 +226,7 @@ export class InteractiveMode {
     fdPath;
     editorContainer;
     footer;
+    footerContainer;
     footerDataProvider;
     // Stored so the same manager can be injected into custom editors, selectors, and extension UI.
     keybindings;
@@ -232,7 +282,9 @@ export class InteractiveMode {
     extensionSelector = undefined;
     extensionInput = undefined;
     extensionEditor = undefined;
-    extensionTerminalInputUnsubscribers = new Set();
+    // Extension terminal input listeners, keyed by handler so they can be
+    // re-registered on the active renderer after a TUI mode switch.
+    extensionTerminalInputUnsubscribers = new Map();
     // Extension widgets (components rendered above/below the editor)
     extensionWidgetsAbove = new Map();
     extensionWidgetsBelow = new Map();
@@ -247,6 +299,9 @@ export class InteractiveMode {
     // Custom header from extension (undefined = use built-in header)
     customHeader = undefined;
     options;
+    onRightClickPaste = () => {
+        void this.handleRightClickPaste();
+    };
     autoTrustOnReloadCwd;
     themeController;
     // Convenience accessors
@@ -264,7 +319,8 @@ export class InteractiveMode {
     }
     constructor(runtimeHost, options = {}) {
         this.runtimeHost = runtimeHost;
-        this.options = options;
+        const tuiMode = options.tuiMode ?? this.settingsManager.getTuiMode();
+        this.options = { ...options, tuiMode };
         this.autoTrustOnReloadCwd = options.autoTrustOnReloadCwd;
         this.runtimeHost.setBeforeSessionInvalidate(() => {
             this.resetExtensionUI();
@@ -273,11 +329,21 @@ export class InteractiveMode {
             await this.rebindCurrentSession({ renderBeforeBind: true });
         });
         this.version = VERSION;
-        this.ui = new TUI(new ProcessTerminal(), this.settingsManager.getShowHardwareCursor(), getAgentDir());
+        this.renderer = createInteractiveTui({
+            tuiMode,
+            showHardwareCursor: this.settingsManager.getShowHardwareCursor(),
+            logDirectory: getAgentDir(),
+            onRightClickPaste: this.onRightClickPaste,
+        });
+        this.ui = createInteractiveTuiReference(() => this.renderer);
         this.ui.setClearOnShrink(this.settingsManager.getClearOnShrink());
+        this.documentContainer = new Container();
         this.headerContainer = new Container();
         this.loadedResourcesContainer = new Container();
         this.chatContainer = new Container();
+        this.documentContainer.addChild(this.headerContainer);
+        this.documentContainer.addChild(this.loadedResourcesContainer);
+        this.documentContainer.addChild(this.chatContainer);
         this.pendingMessagesContainer = new Container();
         this.statusContainer = new Container();
         this.widgetContainerAbove = new Container();
@@ -296,6 +362,8 @@ export class InteractiveMode {
         this.footerDataProvider = new FooterDataProvider(this.sessionManager.getCwd());
         this.footer = new FooterComponent(this.session, this.footerDataProvider);
         this.footer.setAutoCompactEnabled(this.session.autoCompactionEnabled);
+        this.footerContainer = new Container();
+        this.footerContainer.addChild(this.footer);
         // Load hide thinking block setting
         this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
         this.outputPad = this.settingsManager.getOutputPad();
@@ -453,6 +521,73 @@ export class InteractiveMode {
         }
         this.chatContainer.addChild(new DynamicBorder());
     }
+    mountInteractiveTui(tui, components) {
+        for (const component of components)
+            tui.addChild(component);
+        if (TuiLayouts.isViewportTUI(tui)) {
+            if (!this.fullscreenLayoutRoot)
+                throw new Error("Fullscreen layout is not initialized");
+            tui.setLayoutRoot(this.fullscreenLayoutRoot);
+        }
+    }
+    stopInteractiveTui() {
+        if (this.renderer.mode === "fullscreen") {
+            while (this.renderer.hasOverlayEntries)
+                this.renderer.hideOverlay();
+            this.switchTuiMode("regular", false, false);
+            this.renderer.renderNow();
+        }
+        this.ui.stop();
+    }
+    switchTuiMode(mode, restoreProgress = true, startRenderer = true) {
+        const previousUi = this.renderer;
+        if (mode === previousUi.mode)
+            return true;
+        if (previousUi.hasOverlayEntries)
+            return false;
+        const components = [...previousUi.children];
+        const focus = previousUi.getFocusedComponent();
+        const terminal = previousUi.terminal;
+        const showHardwareCursor = previousUi.getShowHardwareCursor();
+        const clearOnShrink = previousUi.getClearOnShrink();
+        const onDebug = previousUi.onDebug;
+        if (previousUi instanceof TuiMainScreen) {
+            this.mainScreenRenderState = previousUi.captureRenderState();
+        }
+        previousUi.stop({ preserveScreen: true });
+        previousUi.setFocus(null);
+        previousUi.clear();
+        if (TuiLayouts.isViewportTUI(previousUi))
+            previousUi.setLayoutRoot(undefined);
+        const nextUi = createInteractiveTui({
+            tuiMode: mode,
+            showHardwareCursor,
+            logDirectory: getAgentDir(),
+            terminal,
+            onRightClickPaste: this.onRightClickPaste,
+        });
+        nextUi.setClearOnShrink(clearOnShrink);
+        nextUi.onDebug = onDebug;
+        if (nextUi instanceof TuiMainScreen && this.mainScreenRenderState) {
+            nextUi.restoreRenderState(this.mainScreenRenderState);
+        }
+        this.renderer = nextUi;
+        this.options.tuiMode = mode;
+        this.mountInteractiveTui(nextUi, components);
+        nextUi.invalidate();
+        nextUi.setFocus(focus);
+        if (!startRenderer)
+            return true;
+        nextUi.start();
+        this.themeController.rebindTui();
+        this.rebindExtensionTerminalInputListeners();
+        if (restoreProgress &&
+            this.settingsManager.getShowTerminalProgress() &&
+            (this.session.isStreaming || this.session.isCompacting)) {
+            terminal.setProgress(true);
+        }
+        return true;
+    }
     async init() {
         if (this.isInitialized)
             return;
@@ -476,18 +611,36 @@ export class InteractiveMode {
                 : "";
             console.log(theme.fg("dim", `Model scope: ${modelList}${cycleHint}`));
         }
-        // Add header container as first child. Populate it after applying theme settings.
-        // Keep loaded resources before chat so restored session messages never precede them.
-        this.ui.addChild(this.headerContainer);
-        this.ui.addChild(this.loadedResourcesContainer);
-        this.ui.addChild(this.chatContainer);
-        this.ui.addChild(this.pendingMessagesContainer);
-        this.ui.addChild(this.statusContainer);
+        // Keep one component tree and remount it when changing renderers.
         this.renderWidgets(); // Initialize with default spacer
-        this.ui.addChild(this.widgetContainerAbove);
-        this.ui.addChild(this.editorContainer);
-        this.ui.addChild(this.widgetContainerBelow);
-        this.ui.addChild(this.footer);
+        this.transcriptScrollView = new TuiLayouts.ScrollView(this.documentContainer, {
+            follow: "end",
+            primary: true,
+            overscroll: "chain",
+            scrollbar: this.settingsManager.getFullscreenScrollbar(),
+            scrollbarStyle: (text) => theme.bg("scrollbarThumb", text),
+        });
+        const dock = new TuiLayouts.VStack([
+            { component: this.pendingMessagesContainer, shrink: 1, minSize: 0 },
+            { component: this.statusContainer, shrink: 1, minSize: 0 },
+            { component: this.widgetContainerAbove, shrink: 1, minSize: 0 },
+            { component: this.editorContainer, shrink: 1, minSize: 3 },
+            { component: this.widgetContainerBelow, shrink: 1, minSize: 0 },
+            { component: this.footerContainer, shrink: 1, minSize: 1 },
+        ]);
+        this.fullscreenLayoutRoot = new TuiLayouts.VStack([
+            { component: this.transcriptScrollView, basis: 0, grow: 1, shrink: 1, minSize: 1 },
+            { component: dock, basis: "auto", grow: 0, shrink: 1, minSize: 1 },
+        ]);
+        this.mountInteractiveTui(this.renderer, [
+            this.documentContainer,
+            this.pendingMessagesContainer,
+            this.statusContainer,
+            this.widgetContainerAbove,
+            this.editorContainer,
+            this.widgetContainerBelow,
+            this.footerContainer,
+        ]);
         this.ui.setFocus(this.editor);
         this.setupKeyHandlers();
         this.setupEditorSubmitHandler();
@@ -1577,22 +1730,16 @@ export class InteractiveMode {
         if (this.customFooter?.dispose) {
             this.customFooter.dispose();
         }
-        // Remove current footer from UI
-        if (this.customFooter) {
-            this.ui.removeChild(this.customFooter);
-        }
-        else {
-            this.ui.removeChild(this.footer);
-        }
+        this.footerContainer.clear();
         if (factory) {
             // Create and add custom footer, passing the data provider
             this.customFooter = factory(this.ui, theme, this.footerDataProvider);
-            this.ui.addChild(this.customFooter);
+            this.footerContainer.addChild(this.customFooter);
         }
         else {
             // Restore built-in footer
             this.customFooter = undefined;
-            this.ui.addChild(this.footer);
+            this.footerContainer.addChild(this.footer);
         }
         this.ui.requestRender();
     }
@@ -1639,14 +1786,19 @@ export class InteractiveMode {
     }
     addExtensionTerminalInputListener(handler) {
         const unsubscribe = this.ui.addInputListener(handler);
-        this.extensionTerminalInputUnsubscribers.add(unsubscribe);
+        this.extensionTerminalInputUnsubscribers.set(handler, unsubscribe);
         return () => {
             unsubscribe();
-            this.extensionTerminalInputUnsubscribers.delete(unsubscribe);
+            this.extensionTerminalInputUnsubscribers.delete(handler);
         };
     }
+    rebindExtensionTerminalInputListeners() {
+        for (const handler of this.extensionTerminalInputUnsubscribers.keys()) {
+            this.extensionTerminalInputUnsubscribers.set(handler, this.ui.addInputListener(handler));
+        }
+    }
     clearExtensionTerminalInputListeners() {
-        for (const unsubscribe of this.extensionTerminalInputUnsubscribers) {
+        for (const unsubscribe of this.extensionTerminalInputUnsubscribers.values()) {
             unsubscribe();
         }
         this.extensionTerminalInputUnsubscribers.clear();
@@ -2074,6 +2226,22 @@ export class InteractiveMode {
             void this.handleClipboardPaste();
         };
     }
+    async handleRightClickPaste() {
+        const target = this.renderer.getFocusedComponent();
+        const handleInput = target?.handleInput;
+        if (!target || !handleInput)
+            return;
+        try {
+            const text = await readClipboardText();
+            if (!text || this.renderer.getFocusedComponent() !== target)
+                return;
+            handleInput.call(target, `\x1b[200~${text}\x1b[201~`);
+            this.ui.requestRender();
+        }
+        catch {
+            // Silently ignore clipboard errors (may not have permission, etc.)
+        }
+    }
     async handleClipboardPaste() {
         try {
             const image = await readClipboardImage();
@@ -3470,6 +3638,8 @@ export class InteractiveMode {
                 quietStartup: this.settingsManager.getQuietStartup(),
                 clearOnShrink: this.settingsManager.getClearOnShrink(),
                 showTerminalProgress: this.settingsManager.getShowTerminalProgress(),
+                tuiMode: this.settingsManager.getTuiMode(),
+                fullscreenScrollbar: this.settingsManager.getFullscreenScrollbar(),
                 warnings: this.settingsManager.getWarnings(),
             }, {
                 onAutoCompactChange: (enabled) => {
@@ -3609,6 +3779,22 @@ export class InteractiveMode {
                 onShowTerminalProgressChange: (enabled) => {
                     this.settingsManager.setShowTerminalProgress(enabled);
                 },
+                onTuiModeChange: (mode) => {
+                    if (!this.switchTuiMode(mode)) {
+                        this.settingsManager.setTuiMode(this.ui.mode);
+                        this.showStatus("Close active overlays before changing TUI mode");
+                        return;
+                    }
+                    this.settingsManager.setTuiMode(mode);
+                    if (!this.activeStatusIndicator)
+                        this.statusContainer.clear();
+                    this.showStatus(`TUI mode: ${mode}`);
+                },
+                onFullscreenScrollbarChange: (mode) => {
+                    this.settingsManager.setFullscreenScrollbar(mode);
+                    this.transcriptScrollView?.setScrollbar(mode);
+                    this.ui.requestRender();
+                },
                 onWarningsChange: (warnings) => {
                     this.settingsManager.setWarnings(warnings);
                 },
@@ -5106,7 +5292,7 @@ export class InteractiveMode {
             this.unsubscribe();
         }
         if (this.isInitialized) {
-            this.ui.stop();
+            this.stopInteractiveTui();
             this.isInitialized = false;
         }
         this.unregisterSignalHandlers();

package/dist/modes/interactive/theme/dark.json

@@ -33,6 +33,7 @@
 		"thinkingText": "gray",
 
 		"selectedBg": "selectedBg",
+		"scrollbarThumb": "selectedBg",
 		"userMessageBg": "userMsgBg",
 		"userMessageText": "text",
 		"customMessageBg": "customMsgBg",

package/dist/modes/interactive/theme/light.json

@@ -32,6 +32,7 @@
 		"thinkingText": "mediumGray",
 
 		"selectedBg": "selectedBg",
+		"scrollbarThumb": "selectedBg",
 		"userMessageBg": "userMsgBg",
 		"userMessageText": "text",
 		"customMessageBg": "customMsgBg",

package/dist/modes/interactive/theme/theme-controller.d.ts

@@ -13,7 +13,9 @@ export declare class InteractiveThemeController {
     private terminalTheme;
     private activeThemeName;
     private autoSyncEnabled;
+    private terminalColorSchemeUnsubscribe;
     constructor(ui: TUI, settingsManager: SettingsManager, showError: (message: string) => void, onChanged: () => void);
+    rebindTui(): void;
     applyFromSettings(): Promise<void>;
     setThemeName(themeName: string, showError?: boolean): ThemeResult;
     setThemeInstance(themeInstance: Theme): ThemeResult;
@@ -23,6 +25,7 @@ export declare class InteractiveThemeController {
     private applyThemeName;
     private notifyChanged;
     private setAutoSync;
+    private bindTerminalColorSchemeListener;
     private applyTerminalTheme;
 }
 export {};

package/dist/modes/interactive/theme/theme-controller.js

@@ -7,6 +7,7 @@ export class InteractiveThemeController {
     terminalTheme = detectTerminalBackgroundFromEnv().theme;
     activeThemeName;
     autoSyncEnabled = false;
+    terminalColorSchemeUnsubscribe;
     constructor(ui, settingsManager, showError, onChanged) {
         this.ui = ui;
         this.settingsManager = settingsManager;
@@ -14,7 +15,12 @@ export class InteractiveThemeController {
         this.onChanged = onChanged;
         this.activeThemeName = resolveThemeSetting(this.settingsManager.getThemeSetting(), this.terminalTheme);
         initTheme(this.activeThemeName, true);
-        this.ui.onTerminalColorSchemeChange((terminalTheme) => this.applyTerminalTheme(terminalTheme));
+        this.bindTerminalColorSchemeListener();
+    }
+    rebindTui() {
+        this.terminalColorSchemeUnsubscribe?.();
+        this.bindTerminalColorSchemeListener();
+        this.ui.setTerminalColorSchemeNotifications(this.autoSyncEnabled);
     }
     async applyFromSettings() {
         const themeSetting = this.settingsManager.getThemeSetting();
@@ -84,6 +90,9 @@ export class InteractiveThemeController {
         this.autoSyncEnabled = enabled;
         this.ui.setTerminalColorSchemeNotifications(enabled);
     }
+    bindTerminalColorSchemeListener() {
+        this.terminalColorSchemeUnsubscribe = this.ui.onTerminalColorSchemeChange((terminalTheme) => this.applyTerminalTheme(terminalTheme));
+    }
     applyTerminalTheme(terminalTheme) {
         if (!this.autoSyncEnabled)
             return;

package/dist/modes/interactive/theme/theme.d.ts

@@ -2,7 +2,7 @@ import type { ThinkingLevel } from "@earendil-works/pi-agent-core";
 import { type EditorTheme, type MarkdownTheme, type RgbColor, type SelectListTheme, type SettingsListTheme } from "@earendil-works/pi-tui";
 import type { SourceInfo } from "../../../core/source-info.ts";
 export type ThemeColor = "accent" | "border" | "borderAccent" | "borderMuted" | "success" | "error" | "warning" | "muted" | "dim" | "text" | "thinkingText" | "userMessageText" | "customMessageText" | "customMessageLabel" | "toolTitle" | "toolOutput" | "mdHeading" | "mdLink" | "mdLinkUrl" | "mdCode" | "mdCodeBlock" | "mdCodeBlockBorder" | "mdQuote" | "mdQuoteBorder" | "mdHr" | "mdListBullet" | "toolDiffAdded" | "toolDiffRemoved" | "toolDiffContext" | "syntaxComment" | "syntaxKeyword" | "syntaxFunction" | "syntaxVariable" | "syntaxString" | "syntaxNumber" | "syntaxType" | "syntaxOperator" | "syntaxPunctuation" | "thinkingOff" | "thinkingMinimal" | "thinkingLow" | "thinkingMedium" | "thinkingHigh" | "thinkingXhigh" | "thinkingMax" | "bashMode";
-export type ThemeBg = "selectedBg" | "userMessageBg" | "customMessageBg" | "toolPendingBg" | "toolSuccessBg" | "toolErrorBg";
+export type ThemeBg = "selectedBg" | "scrollbarThumb" | "userMessageBg" | "customMessageBg" | "toolPendingBg" | "toolSuccessBg" | "toolErrorBg";
 type ColorMode = "truecolor" | "256color";
 export declare class Theme {
     readonly name?: string;
@@ -11,7 +11,7 @@ export declare class Theme {
     private fgColors;
     private bgColors;
     private mode;
-    constructor(fgColors: Record<ThemeColor, string | number>, bgColors: Record<ThemeBg, string | number>, mode: ColorMode, options?: {
+    constructor(fgColors: Record<ThemeColor, string | number>, bgColors: Record<Exclude<ThemeBg, "scrollbarThumb">, string | number> & Partial<Record<"scrollbarThumb", string | number>>, mode: ColorMode, options?: {
         name?: string;
         sourcePath?: string;
         sourceInfo?: SourceInfo;

package/dist/modes/interactive/theme/theme.js

@@ -31,8 +31,9 @@ const ThemeJsonSchema = Type.Object({
         dim: ColorValueSchema,
         text: ColorValueSchema,
         thinkingText: ColorValueSchema,
-        // Backgrounds & Content Text (11 colors)
+        // Backgrounds & Content Text (11 required, 1 optional)
         selectedBg: ColorValueSchema,
+        scrollbarThumb: Type.Optional(ColorValueSchema),
         userMessageBg: ColorValueSchema,
         userMessageText: ColorValueSchema,
         customMessageBg: ColorValueSchema,
@@ -224,7 +225,11 @@ function resolveThemeColors(colors, vars = {}) {
     return resolved;
 }
 function withThemeColorFallbacks(colors) {
-    return { ...colors, thinkingMax: colors.thinkingMax ?? colors.thinkingXhigh };
+    return {
+        ...colors,
+        thinkingMax: colors.thinkingMax ?? colors.thinkingXhigh,
+        scrollbarThumb: colors.scrollbarThumb ?? colors.selectedBg,
+    };
 }
 // ============================================================================
 // Theme Class
@@ -247,7 +252,11 @@ export class Theme {
             this.fgColors.set(key, fgAnsi(value, mode));
         }
         this.bgColors = new Map();
-        for (const [key, value] of Object.entries(bgColors)) {
+        const backgrounds = {
+            ...bgColors,
+            scrollbarThumb: bgColors.scrollbarThumb ?? bgColors.selectedBg,
+        };
+        for (const [key, value] of Object.entries(backgrounds)) {
             this.bgColors.set(key, bgAnsi(value, mode));
         }
     }
@@ -463,6 +472,7 @@ function createTheme(themeJson, mode, sourcePath) {
     const bgColors = {};
     const bgColorKeys = new Set([
         "selectedBg",
+        "scrollbarThumb",
         "userMessageBg",
         "customMessageBg",
         "toolPendingBg",
@@ -588,15 +598,23 @@ export async function detectTerminalBackgroundTheme({ ui, timeoutMs, env, }) {
     return detectTerminalBackgroundFromEnv({ env });
 }
 export async function detectTerminalThemeForAuto({ ui, timeoutMs, env, }) {
+    let colorSchemePromise;
+    try {
+        colorSchemePromise = ui.queryTerminalColorScheme?.({ timeoutMs });
+    }
+    catch {
+        // Fall back to OSC 11 / COLORFGBG detection when starting the color-scheme query fails.
+    }
+    const backgroundThemePromise = detectTerminalBackgroundTheme({ ui, timeoutMs, env });
     try {
-        const colorScheme = await ui.queryTerminalColorScheme?.({ timeoutMs });
+        const colorScheme = await colorSchemePromise;
         if (colorScheme)
             return colorScheme;
     }
     catch {
-        // Fall back to OSC 11 / COLORFGBG detection when color-scheme DSR is unsupported.
+        // Fall back to the concurrently queried OSC 11 / COLORFGBG detection.
     }
-    return (await detectTerminalBackgroundTheme({ ui, timeoutMs, env })).theme;
+    return (await backgroundThemePromise).theme;
 }
 export function getDefaultTheme() {
     return detectTerminalBackgroundFromEnv().theme;