@oh-my-pi/pi-tui 15.9.5 → 15.10.0

package/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 ## [Unreleased]
 
+## [15.10.0] - 2026-06-06
+
+### Changed
+
+- Reworked the DEC 2026 synchronized-output default policy: a positive DECRQM mode-2026 report now **enables** sync (previously a report could only disable it), so conservatively defaulted-off hosts that actually support it — current Zellij, tmux master, foot, contour, mintty — are upgraded at runtime. The static allowlist also covers Alacritty and the VS Code terminal, honors a `TERM_FEATURES` `Sy` advertisement and `WT_SESSION` (Windows Terminal / WSL), and no longer blanket-disables SSH (DEC 2026 passes through to the outer terminal). Risky multiplexers still start off and rely on the probe. Added `synchronizedOutputUserOverride()` as the shared opt-out/force resolver.
+
+### Fixed
+
+- Fixed WSL/Windows Terminal row flicker while typing by repainting changed text rows before clearing only their stale suffix ([#2011](https://github.com/can1357/oh-my-pi/issues/2011)).
+- Fixed terminals that support DEC 2026 still tearing/flickering because the renderer ignored a positive DECRQM capability report and kept synchronized output off — most visibly WSL + Windows Terminal, Alacritty (≥0.13), and the VS Code terminal (≥1.108), which were detected yet refused sync.
+
+## [15.9.69] - 2026-06-06
+
+### Added
+
+- Added `TUI.resetDisplay()` to force an immediate full-frame replay, including native scrollback when the host can safely clear it.
+- Added `setPaddingY` to `Box` so vertical padding can be updated programmatically after creation.
+
+### Fixed
+
+- Fixed DECCARA background-fill optimization running when synchronized output is disabled, which could expose default-background gaps during rapidly updating tool-use panels ([#2000](https://github.com/can1357/oh-my-pi/issues/2000)).
+
+## [15.9.67] - 2026-06-06
+### Added
+
+- Added `setPaddingX` to `Box` so horizontal padding can be updated programmatically after creation
+- Added `ScrollView`, a fixed-height viewport component for pre-rendered lines with optional right-edge scrollbars and imperative scroll/page controls.
+- Added optional `Terminal.hasEagerEraseScrollbackRisk()` so custom/test terminal implementations can override the global ED3-risk profile without mutating the shared `TERMINAL` object.
+
+### Changed
+
+- Changed `SelectList` to render its visible window through `ScrollView`, replacing the `(N/M)` text scroll indicator with a uniform right-edge scrollbar (the type-to-search hint line is preserved).
+
+### Fixed
+
+- Fixed unknown-viewport deferred renders freezing bottom-anchored live chrome; deferred history mutations can now repaint only the active-grid bottom row with relative cursor movement, so spinner/status tails keep advancing without rewriting rows a scrolled reader can still see.
+- Fixed autocomplete popups freezing live repaint on ED3-risk macOS/POSIX terminals with unknown native viewport position; direct autocomplete shrink frames now repaint the live viewport without zero-byte deferral and preserve the old bottom anchor when padding can clear stale popup rows without duplicating committed scrollback.
+- Fixed focused Up/Down navigation on ED3-risk macOS/POSIX terminals replaying the whole transcript after dirty foreground-stream renders; selector/editor frames now repaint non-destructively instead of emitting `CSI 3 J` on every arrow-key move ([#1962](https://github.com/can1357/oh-my-pi/issues/1962)).
+- Fixed tmux (and screen/zellij) pane scrollback losing the head of a long streamed assistant reply once it grew past the visible pane, and stranding the chrome/footer in pane history after a later collapse — producing the "repeating chunks and missing sections" reporters saw when scrolling back through tmux pane history ([#1974](https://github.com/can1357/oh-my-pi/issues/1974)). The renderer's foreground-streaming cap-to-viewport branch (introduced in 15.9.2 for ED3-risk hosts that can checkpoint-rebuild later) also activated inside multiplexers, where checkpoint reconcile is a no-op (`refreshNativeScrollbackIfDirty` short-circuits because `\x1b[3J` cannot erase pane history). Every streaming frame clipped `lines` to the visible tail and reset `#scrollbackHighWater` to 0, so any row that scrolled above the viewport top was committed nowhere — pane history stayed empty until streaming ended. Meanwhile `#planLiveRegionPinnedRender` was explicitly disabled for multiplexers, but its `#emitLiveRegionPinnedRepaint` is built from the exact primitives tmux accepts (relative cursor moves, per-line `\x1b[2K`, `\r\n` to scroll the sealed prefix past the viewport bottom) and never emits `\x1b[2J`/`\x1b[3J`. The pinned planner now runs in multiplexers too, the cap branch skips them, and the diff/append path commits incrementally into pane history; the actively-mutating live tail stays in the visible viewport only.
+
 ## [15.9.5] - 2026-06-05
 
 ### Changed
@@ -13,6 +53,7 @@
 - Fixed ED3-risk foreground streaming dropping the scrolled-off head of an append-only live block that alone overflows the viewport (a long streamed assistant reply). The live-region pin again committed native scrollback only up to the live-region start, so once the live block grew past the viewport its earlier rows scrolled above the viewport top but were committed nowhere and repainted nowhere — they vanished, leaving the reply looking like a ~viewport-tall circular buffer. The `NativeScrollbackLiveRegion` seam now also reports an optional append-only `getNativeScrollbackCommitSafeEnd`, and the pinned commit boundary is the deeper of the sealed start and that append-only end: rows in `[liveRegionStart, commitSafeEnd)` above the viewport top commit to scrollback, while volatile live blocks (tool previews that collapse) omit the boundary and keep their mutable rows deferred — preserving the pending-box-above-running-box fix.
 
 ## [15.9.4] - 2026-06-05
+
 ### Added
 
 - Added `PI_TUI_SYNC_OUTPUT=0` and `PI_TUI_SYNC_OUTPUT=1` to explicitly disable or force-enable DEC 2026 synchronized-output mode, alongside `PI_FORCE_SYNC_OUTPUT=1` as a force-on alias

package/dist/types/components/box.d.ts

@@ -9,6 +9,8 @@ export declare class Box implements Component {
     addChild(component: Component): void;
     removeChild(component: Component): void;
     clear(): void;
+    setPaddingX(paddingX: number): void;
+    setPaddingY(paddingY: number): void;
     setBgFn(bgFn?: (text: string) => string): void;
     invalidate(): void;
     render(width: number): string[];

package/dist/types/components/scroll-view.d.ts

@@ -0,0 +1,40 @@
+import type { Component } from "../tui";
+type ScrollbarMode = "auto" | "always" | "never";
+export interface ScrollViewTheme {
+    track?: (text: string) => string;
+    thumb?: (text: string) => string;
+}
+export interface ScrollViewOptions {
+    height: number;
+    /** Defaults to "auto". "auto" reserves a scrollbar column only when content overflows. */
+    scrollbar?: ScrollbarMode | boolean;
+    /** Logical row count for pre-windowed line slices. Defaults to lines.length. */
+    totalRows?: number;
+    theme?: ScrollViewTheme;
+    trackChar?: string;
+    thumbChar?: string;
+}
+/**
+ * Fixed-height viewport over pre-rendered lines, with optional right-edge scrollbar.
+ *
+ * ScrollView owns only the row offset. Callers remain responsible for producing
+ * already-wrapped logical lines appropriate for the current render width.
+ */
+export declare class ScrollView implements Component {
+    #private;
+    constructor(lines: readonly string[], options: ScrollViewOptions);
+    setLines(lines: readonly string[]): void;
+    setTotalRows(totalRows: number | undefined): void;
+    setHeight(height: number): void;
+    setScrollbar(scrollbar: ScrollViewOptions["scrollbar"]): void;
+    getScrollOffset(): number;
+    getMaxScrollOffset(): number;
+    setScrollOffset(offset: number): void;
+    scroll(delta: number): void;
+    page(delta: number): void;
+    scrollToTop(): void;
+    scrollToBottom(): void;
+    invalidate(): void;
+    render(width: number): string[];
+}
+export {};

package/dist/types/index.d.ts

@@ -6,6 +6,7 @@ export * from "./components/image";
 export * from "./components/input";
 export * from "./components/loader";
 export * from "./components/markdown";
+export * from "./components/scroll-view";
 export * from "./components/select-list";
 export * from "./components/settings-list";
 export * from "./components/spacer";

package/dist/types/terminal-capabilities.d.ts

@@ -51,8 +51,29 @@ export declare function isWindowsTerminalPreviewSixelSupported(env?: NodeJS.Proc
  * outer host fronting WSL, where the same ED3 yank applies. See #1610/#1682/#1799.
  */
 export declare function detectTerminalEagerEraseScrollbackRisk(env?: NodeJS.ProcessEnv, platform?: NodeJS.Platform): boolean;
-/** Whether DEC 2026 synchronized-output wrappers should be enabled by default. */
-export declare function shouldEnableSynchronizedOutputByDefault(env?: NodeJS.ProcessEnv, platform?: NodeJS.Platform, terminalId?: TerminalId): boolean;
+/**
+ * Resolve an explicit user override for DEC 2026 synchronized output. Returns
+ * `false` for an opt-out, `true` for a force-on, or `null` when the user has
+ * expressed no preference. Shared by the static default and the runtime DECRQM
+ * probe so both honor the same precedence — an opt-out beats a force-on.
+ */
+export declare function synchronizedOutputUserOverride(env?: NodeJS.ProcessEnv): boolean | null;
+/**
+ * Whether DEC 2026 synchronized-output wrappers should be enabled by default.
+ *
+ * Policy (highest precedence first):
+ *   1. Explicit user override (`PI_NO_SYNC_OUTPUT`/`PI_TUI_SYNC_OUTPUT=0` off,
+ *      `PI_FORCE_SYNC_OUTPUT=1`/`PI_TUI_SYNC_OUTPUT=1` on).
+ *   2. Positive `TERM_FEATURES` advertisement (`Sy`) — survives SSH/mux wrapping.
+ *   3. Windows Terminal (1.24+) via `WT_SESSION`, on native win32 and the
+ *      WSL/SSH-fronted host alike.
+ *   4. Known direct terminals with confirmed support. SSH does *not* disable —
+ *      DEC 2026 passes through SSH when the outer terminal honors it.
+ *   5. Everything else starts off, including risky multiplexers; the runtime
+ *      DECRQM probe upgrades any of them when the terminal actually reports
+ *      `?2026` supported (current zellij, tmux master, foot, contour, mintty…).
+ */
+export declare function shouldEnableSynchronizedOutputByDefault(env?: NodeJS.ProcessEnv, terminalId?: TerminalId): boolean;
 /**
  * Whether the terminal applies Kitty-style DECCARA rectangular SGR changes
  * (`CSI Pt ; Pl ; Pb ; Pr ; <sgr> $ r`) extended to background color, so large

package/dist/types/terminal.d.ts

@@ -58,6 +58,11 @@ export interface Terminal {
      * (xterm.js-backed) implement this with a real answer.
      */
     isNativeViewportAtBottom?(): boolean | undefined;
+    /**
+     * Override the global terminal-profile ED3 risk decision for custom/test
+     * terminals. `undefined` falls back to the resolved `TERMINAL` profile.
+     */
+    hasEagerEraseScrollbackRisk?(): boolean | undefined;
     /**
      * Register a callback for terminal appearance (dark/light) changes.
      * Detection uses OSC 11 background color query with Mode 2031 as a change trigger.

package/dist/types/tui.d.ts

@@ -215,8 +215,9 @@ export declare class TUI extends Container {
     setClearOnShrink(enabled: boolean): void;
     /**
      * Whether DEC 2026 synchronized-output wrappers are currently emitted around
-     * paints. Starts from conservative terminal/env detection and is force-disabled
-     * at runtime if the terminal reports mode 2026 unsupported via DECRQM.
+     * paints. Starts from conservative terminal/env detection and is reconciled at
+     * runtime against the terminal's DECRQM mode-2026 report — enabled on a
+     * positive report, disabled on a negative one.
      */
     get synchronizedOutput(): boolean;
     /**
@@ -231,8 +232,8 @@ export declare class TUI extends Container {
      * (the viewport is never observable there and ConPTY hosts erase host
      * scrollback on ED3 — #1635/#1746); only the unknown POSIX case is forced to
      * rebuild. POSIX hosts known to disturb scrolled readers on xterm ED3
-     * (`CSI 3 J`, erase saved lines) also defer the eager opt-in; checkpoint and
-     * direct user-input rebuilds are unaffected.
+     * (`CSI 3 J`, erase saved lines) also defer the eager opt-in; checkpoint
+     * rebuilds are unaffected.
      *
      * Disabling stays active through one already-requested frame: the event batch
      * that ends a foreground stream both removes its UI rows (loader/status
@@ -264,5 +265,20 @@ export declare class TUI extends Container {
      * at the terminal bottom, such as after submitting a new prompt.
      */
     refreshNativeScrollbackIfDirty(_options?: NativeScrollbackRefreshOptions): boolean;
+    /**
+     * Force an immediate full replay of the current frame, including native
+     * scrollback. This is the keyboard-accessible equivalent of the resize reset:
+     * no queued diff frame or terminal scrollback probe can downgrade it to a
+     * viewport-only repaint.
+     *
+     * Invalidates every component first so the replay reflects current state. A
+     * geometry-driven reset thaws frozen scrollback snapshots implicitly (the new
+     * width misses every cached snapshot), but a same-width reset would otherwise
+     * replay stale snapshots — leaving host-frozen blocks (e.g. a transcript whose
+     * committed rows are immutable on ED3-risk terminals) showing pre-mutation
+     * content. Invalidation is the generic signal those containers use to retire
+     * their snapshots, which is exactly what a user-driven display reset wants.
+     */
+    resetDisplay(): void;
     requestRender(force?: boolean, options?: RenderRequestOptions): void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "15.9.5",
+	"version": "15.10.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://omp.sh",
 	"author": "Can Boluk",
@@ -37,8 +37,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "15.9.5",
-		"@oh-my-pi/pi-utils": "15.9.5",
+		"@oh-my-pi/pi-natives": "15.10.0",
+		"@oh-my-pi/pi-utils": "15.10.0",
 		"lru-cache": "11.5.1",
 		"marked": "^18.0.4"
 	},

package/src/components/box.ts

@@ -42,6 +42,18 @@ export class Box implements Component {
 		this.#invalidateCache();
 	}
 
+	setPaddingX(paddingX: number): void {
+		if (this.#paddingX === paddingX) return;
+		this.#paddingX = paddingX;
+		this.#invalidateCache();
+	}
+
+	setPaddingY(paddingY: number): void {
+		if (this.#paddingY === paddingY) return;
+		this.#paddingY = paddingY;
+		this.#invalidateCache();
+	}
+
 	setBgFn(bgFn?: (text: string) => string): void {
 		this.#bgFn = bgFn;
 		// Don't invalidate here - we'll detect bgFn changes by sampling output

package/src/components/scroll-view.ts

@@ -0,0 +1,166 @@
+import type { Component } from "../tui";
+import { Ellipsis, replaceTabs, truncateToWidth, visibleWidth } from "../utils";
+
+const DEFAULT_TRACK = "│";
+const DEFAULT_THUMB = "█";
+
+type ScrollbarMode = "auto" | "always" | "never";
+
+export interface ScrollViewTheme {
+	track?: (text: string) => string;
+	thumb?: (text: string) => string;
+}
+
+export interface ScrollViewOptions {
+	height: number;
+	/** Defaults to "auto". "auto" reserves a scrollbar column only when content overflows. */
+	scrollbar?: ScrollbarMode | boolean;
+	/** Logical row count for pre-windowed line slices. Defaults to lines.length. */
+	totalRows?: number;
+	theme?: ScrollViewTheme;
+	trackChar?: string;
+	thumbChar?: string;
+}
+
+function normalizeScrollbarMode(scrollbar: ScrollViewOptions["scrollbar"]): ScrollbarMode {
+	if (scrollbar === true) return "auto";
+	if (scrollbar === false) return "never";
+	return scrollbar ?? "auto";
+}
+
+function firstCellGlyph(value: string, fallback: string): string {
+	const glyph = Array.from(value)[0] ?? fallback;
+	return visibleWidth(glyph) === 1 ? glyph : fallback;
+}
+
+/**
+ * Fixed-height viewport over pre-rendered lines, with optional right-edge scrollbar.
+ *
+ * ScrollView owns only the row offset. Callers remain responsible for producing
+ * already-wrapped logical lines appropriate for the current render width.
+ */
+export class ScrollView implements Component {
+	#lines: string[];
+	#height: number;
+	#scrollOffset = 0;
+	#totalRows: number | undefined;
+	#scrollbar: ScrollbarMode;
+	#theme: Required<ScrollViewTheme>;
+	#trackChar: string;
+	#thumbChar: string;
+
+	constructor(lines: readonly string[], options: ScrollViewOptions) {
+		this.#lines = [...lines];
+		this.#height = Number.isFinite(options.height) ? Math.max(0, Math.trunc(options.height)) : 0;
+		this.#totalRows = options.totalRows === undefined ? undefined : Math.max(0, Math.trunc(options.totalRows));
+		this.#scrollbar = normalizeScrollbarMode(options.scrollbar);
+		this.#theme = {
+			track: options.theme?.track ?? (text => text),
+			thumb: options.theme?.thumb ?? (text => text),
+		};
+		this.#trackChar = firstCellGlyph(options.trackChar ?? DEFAULT_TRACK, DEFAULT_TRACK);
+		this.#thumbChar = firstCellGlyph(options.thumbChar ?? DEFAULT_THUMB, DEFAULT_THUMB);
+		this.#clampScrollOffset();
+	}
+
+	setLines(lines: readonly string[]): void {
+		this.#lines = [...lines];
+		this.#clampScrollOffset();
+	}
+
+	setTotalRows(totalRows: number | undefined): void {
+		this.#totalRows = totalRows === undefined ? undefined : Math.max(0, Math.trunc(totalRows));
+		this.#clampScrollOffset();
+	}
+
+	setHeight(height: number): void {
+		this.#height = Number.isFinite(height) ? Math.max(0, Math.trunc(height)) : 0;
+		this.#clampScrollOffset();
+	}
+
+	setScrollbar(scrollbar: ScrollViewOptions["scrollbar"]): void {
+		this.#scrollbar = normalizeScrollbarMode(scrollbar);
+	}
+
+	getScrollOffset(): number {
+		return this.#scrollOffset;
+	}
+
+	getMaxScrollOffset(): number {
+		const rowCount = this.#totalRows ?? this.#lines.length;
+		return Math.max(0, rowCount - this.#height);
+	}
+
+	setScrollOffset(offset: number): void {
+		this.#scrollOffset = Number.isFinite(offset) ? Math.trunc(offset) : 0;
+		this.#clampScrollOffset();
+	}
+
+	scroll(delta: number): void {
+		this.setScrollOffset(this.#scrollOffset + (Number.isFinite(delta) ? Math.trunc(delta) : 0));
+	}
+
+	page(delta: number): void {
+		const step = Math.max(1, this.#height - 1);
+		this.scroll(step * (Number.isFinite(delta) ? Math.trunc(delta) : 0));
+	}
+
+	scrollToTop(): void {
+		this.#scrollOffset = 0;
+	}
+
+	scrollToBottom(): void {
+		this.#scrollOffset = this.getMaxScrollOffset();
+	}
+
+	invalidate(): void {
+		// No cached layout to invalidate.
+	}
+
+	render(width: number): string[] {
+		this.#clampScrollOffset();
+		const safeWidth = Number.isFinite(width) ? Math.max(0, Math.trunc(width)) : 0;
+		if (this.#height === 0) return [];
+		const showScrollbar = safeWidth > 0 && this.#shouldRenderScrollbar();
+		const contentWidth = Math.max(0, safeWidth - (showScrollbar ? 1 : 0));
+		const thumb = showScrollbar ? this.#thumbRange() : undefined;
+		const lines: string[] = [];
+		for (let row = 0; row < this.#height; row++) {
+			const sourceIndex = this.#totalRows === undefined ? this.#scrollOffset + row : row;
+			const source = this.#lines[sourceIndex] ?? "";
+			const truncated = truncateToWidth(replaceTabs(source), contentWidth, Ellipsis.Unicode);
+			if (!showScrollbar) {
+				lines.push(truncated);
+				continue;
+			}
+			const content = `${truncated}${" ".repeat(Math.max(0, contentWidth - visibleWidth(truncated)))}`;
+			const barGlyph = thumb && row >= thumb.start && row < thumb.end ? this.#thumbChar : this.#trackChar;
+			const styledBar =
+				thumb && row >= thumb.start && row < thumb.end ? this.#theme.thumb(barGlyph) : this.#theme.track(barGlyph);
+			lines.push(`${content}${styledBar}`);
+		}
+		return lines;
+	}
+
+	#clampScrollOffset(): void {
+		this.#scrollOffset = Math.max(0, Math.min(this.#scrollOffset, this.getMaxScrollOffset()));
+	}
+
+	#shouldRenderScrollbar(): boolean {
+		if (this.#height <= 0) return false;
+		if (this.#scrollbar === "never") return false;
+		if (this.#scrollbar === "always") return true;
+		return (this.#totalRows ?? this.#lines.length) > this.#height;
+	}
+
+	#thumbRange(): { start: number; end: number } {
+		if (this.#height <= 0) return { start: 0, end: 0 };
+		const rowCount = this.#totalRows ?? this.#lines.length;
+		if (rowCount <= this.#height) return { start: 0, end: this.#height };
+		const thumbSize = Math.max(1, Math.min(Math.floor((this.#height * this.#height) / rowCount), this.#height));
+		const travel = this.#height - thumbSize;
+		const maxOffset = this.getMaxScrollOffset();
+		const start = maxOffset === 0 ? 0 : Math.round((this.#scrollOffset / maxOffset) * travel);
+		return { start, end: start + thumbSize };
+	}
+}

package/src/components/select-list.ts

@@ -4,6 +4,7 @@ import { extractPrintableText } from "../keys";
 import type { SymbolTheme } from "../symbols";
 import type { Component } from "../tui";
 import { Ellipsis, padding, replaceTabs, truncateToWidth, visibleWidth } from "../utils";
+import { ScrollView } from "./scroll-view";
 
 const DEFAULT_PRIMARY_COLUMN_WIDTH = 32;
 const PRIMARY_COLUMN_GAP = 2;
@@ -104,17 +105,29 @@ export class SelectList implements Component {
 		const endIndex = Math.min(startIndex + this.maxVisible, this.#filteredItems.length);
 
 		// Render visible items
+		const overflow = this.#filteredItems.length > this.maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+		const rows: string[] = [];
 		for (let i = startIndex; i < endIndex; i++) {
 			const item = this.#filteredItems[i];
 			if (!item) continue;
 
 			const isSelected = i === this.#selectedIndex;
 			const descriptionText = item.description ? sanitizeSingleLine(item.description) : undefined;
-			lines.push(this.#renderItem(item, isSelected, width, descriptionText, primaryColumnWidth));
+			rows.push(this.#renderItem(item, isSelected, rowWidth, descriptionText, primaryColumnWidth));
 		}
 
-		// Add scroll/search status when needed
-		if (startIndex > 0 || endIndex < this.#filteredItems.length || showSearchStatus) {
+		const sv = new ScrollView(rows, {
+			height: rows.length,
+			scrollbar: "auto",
+			totalRows: this.#filteredItems.length,
+			theme: { track: t => this.theme.scrollInfo(t), thumb: t => this.theme.selectedPrefix(t) },
+		});
+		sv.setScrollOffset(startIndex);
+		lines.push(...sv.render(width));
+
+		// Add search status when relevant (scrollbar now indicates overflow)
+		if (showSearchStatus) {
 			lines.push(this.#renderStatusLine(width));
 		}
 
@@ -247,15 +260,8 @@ export class SelectList implements Component {
 	}
 
 	#renderStatusLine(width: number): string {
-		const selectedCount = this.#filteredItems.length === 0 ? 0 : this.#selectedIndex + 1;
-		const filteredCount = this.#filteredItems.length;
-		const count =
-			this.#filterQuery.trim() && filteredCount !== this.items.length
-				? `${selectedCount}/${filteredCount} of ${this.items.length}`
-				: `${selectedCount}/${filteredCount}`;
 		const query = sanitizeSingleLine(this.#filterQuery);
-		const searchSuffix = this.#shouldRenderSearchStatus() ? (query ? `  Search: ${query}` : "  Type to search") : "";
-		const statusText = `  (${count})${searchSuffix}`;
+		const statusText = query ? `  Search: ${query}` : "  Type to search";
 		return this.theme.scrollInfo(truncateToWidth(statusText, Math.max(1, width - 2), Ellipsis.Omit));
 	}
 

package/src/components/settings-list.ts

@@ -1,6 +1,7 @@
 import { getKeybindings } from "../keybindings";
 import type { Component } from "../tui";
 import { Ellipsis, padding, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
+import { ScrollView } from "./scroll-view";
 
 export interface SettingItem {
 	/** Unique identifier for this setting */
@@ -90,6 +91,22 @@ export class SettingsList implements Component {
 		return this.#renderMainList(width);
 	}
 
+	#renderItemRow(item: SettingItem, index: number, maxLabelWidth: number, rowWidth: number): string {
+		const isSelected = index === this.#selectedIndex;
+		const prefix = isSelected ? this.#theme.cursor : "  ";
+		const prefixWidth = visibleWidth(prefix);
+		const labelPadded = item.label + padding(Math.max(0, maxLabelWidth - visibleWidth(item.label)));
+		const labelText = this.#theme.label(labelPadded, isSelected, item.changed === true);
+		const separator = "  ";
+		const valueMaxWidth = rowWidth - prefixWidth - maxLabelWidth - visibleWidth(separator) - 2;
+		const valueText = this.#theme.value(
+			truncateToWidth(item.currentValue, valueMaxWidth, Ellipsis.Omit),
+			isSelected,
+			item.changed === true,
+		);
+		return truncateToWidth(prefix + labelText + separator + valueText, Math.max(0, rowWidth));
+	}
+
 	#renderMainList(width: number): string[] {
 		const lines: string[] = [];
 
@@ -98,48 +115,29 @@ export class SettingsList implements Component {
 			return lines;
 		}
 
-		// Calculate visible range with scrolling
+		const viewportHeight = Math.min(this.#maxVisible, this.#items.length);
 		const startIndex = Math.max(
 			0,
-			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), this.#items.length - this.#maxVisible),
+			Math.min(this.#selectedIndex - Math.floor(viewportHeight / 2), this.#items.length - viewportHeight),
 		);
-		const endIndex = Math.min(startIndex + this.#maxVisible, this.#items.length);
-
-		// Calculate max label width for alignment
 		const maxLabelWidth = Math.min(30, Math.max(...this.#items.map(item => visibleWidth(item.label))));
-
-		// Render visible items
-		for (let i = startIndex; i < endIndex; i++) {
-			const item = this.#items[i];
-			if (!item) continue;
-
-			const isSelected = i === this.#selectedIndex;
-			const prefix = isSelected ? this.#theme.cursor : "  ";
-			const prefixWidth = visibleWidth(prefix);
-
-			// Pad label to align values
-			const labelPadded = item.label + padding(Math.max(0, maxLabelWidth - visibleWidth(item.label)));
-			const labelText = this.#theme.label(labelPadded, isSelected, item.changed === true);
-
-			// Calculate space for value
-			const separator = "  ";
-			const usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator);
-			const valueMaxWidth = width - usedWidth - 2;
-
-			const valueText = this.#theme.value(
-				truncateToWidth(item.currentValue, valueMaxWidth, Ellipsis.Omit),
-				isSelected,
-				item.changed === true,
-			);
-
-			lines.push(truncateToWidth(prefix + labelText + separator + valueText, width));
-		}
-
-		// Add scroll indicator if needed
-		if (startIndex > 0 || endIndex < this.#items.length) {
-			const scrollText = `  (${this.#selectedIndex + 1}/${this.#items.length})`;
-			lines.push(this.#theme.hint(truncateToWidth(scrollText, width - 2, Ellipsis.Omit)));
-		}
+		const itemRowsOverflow = this.#items.length > viewportHeight;
+		const itemRowWidth = Math.max(0, width - (itemRowsOverflow ? 1 : 0));
+		const visibleItems = this.#items.slice(startIndex, startIndex + viewportHeight);
+		const itemRows = visibleItems.map((item, index) =>
+			this.#renderItemRow(item, startIndex + index, maxLabelWidth, itemRowWidth),
+		);
+		const scrollView = new ScrollView(itemRows, {
+			height: viewportHeight,
+			scrollbar: "auto",
+			totalRows: this.#items.length,
+			theme: {
+				track: text => this.#theme.hint(text),
+				thumb: text => this.#theme.label(text, true, false),
+			},
+		});
+		scrollView.setScrollOffset(startIndex);
+		lines.push(...scrollView.render(width));
 
 		// Add description for selected item
 		const selectedItem = this.#items[this.#selectedIndex];

package/src/index.ts

@@ -10,6 +10,7 @@ export * from "./components/image";
 export * from "./components/input";
 export * from "./components/loader";
 export * from "./components/markdown";
+export * from "./components/scroll-view";
 export * from "./components/select-list";
 export * from "./components/settings-list";
 export * from "./components/spacer";