@oh-my-pi/pi-coding-agent 15.9.3 → 15.9.67

package/src/modes/components/extensions/extension-list.ts

@@ -10,6 +10,7 @@ import {
 	extractPrintableText,
 	matchesKey,
 	padding,
+	ScrollView,
 	truncateToWidth,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
@@ -134,25 +135,33 @@ export class ExtensionList implements Component {
 		const startIdx = this.#scrollOffset;
 		const endIdx = Math.min(startIdx + this.#maxVisible, this.#listItems.length);
 
+		// Reserve the rightmost column for the scrollbar when overflowing
+		const overflow = this.#listItems.length > this.#maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+
 		// Render visible items
+		const rows: string[] = [];
 		for (let i = startIdx; i < endIdx; i++) {
 			const listItem = this.#listItems[i];
 			const isSelected = this.#focused && i === this.#selectedIndex;
 
 			if (listItem.type === "master") {
-				lines.push(this.#renderMasterSwitch(listItem, isSelected, width));
+				rows.push(this.#renderMasterSwitch(listItem, isSelected, rowWidth));
 			} else if (listItem.type === "kind-header") {
-				lines.push(this.#renderKindHeader(listItem, isSelected, width));
+				rows.push(this.#renderKindHeader(listItem, isSelected, rowWidth));
 			} else {
-				lines.push(this.#renderExtensionRow(listItem.item, isSelected, width, masterDisabled));
+				rows.push(this.#renderExtensionRow(listItem.item, isSelected, rowWidth, masterDisabled));
 			}
 		}
 
-		// Scroll indicator
-		if (this.#listItems.length > this.#maxVisible) {
-			const indicator = theme.fg("muted", `  (${this.#selectedIndex + 1}/${this.#listItems.length})`);
-			lines.push(indicator);
-		}
+		const sv = new ScrollView(rows, {
+			height: rows.length,
+			scrollbar: "auto",
+			totalRows: this.#listItems.length,
+			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+		});
+		sv.setScrollOffset(this.#scrollOffset);
+		lines.push(...sv.render(width));
 
 		return lines;
 	}

package/src/modes/components/history-search.ts

@@ -5,6 +5,7 @@ import {
 	Input,
 	matchesKey,
 	padding,
+	ScrollView,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -115,15 +116,19 @@ class HistoryResultsList implements Component {
 		);
 		const endIndex = Math.min(startIndex + this.#maxVisible, this.#results.length);
 
+		const overflow = this.#results.length > this.#maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+		const rows: string[] = [];
+
 		for (let i = startIndex; i < endIndex; i++) {
 			const entry = this.#results[i];
 			const isSelected = i === this.#selectedIndex;
 
 			const timeStr = relativeTime(entry.created_at);
 			const timeWidth = visibleWidth(timeStr);
-			const showTime = width >= gutterWidth + 12 + timeWidth;
+			const showTime = rowWidth >= gutterWidth + 12 + timeWidth;
 
-			const promptBudget = Math.max(4, width - gutterWidth - (showTime ? timeWidth + 1 : 0));
+			const promptBudget = Math.max(4, rowWidth - gutterWidth - (showTime ? timeWidth + 1 : 0));
 			const normalized = entry.prompt.replace(/\s+/g, " ").trim();
 			const plain = truncateToWidth(normalized, promptBudget);
 			const highlighted = highlightTokens(plain, this.#tokens);
@@ -133,21 +138,24 @@ class HistoryResultsList implements Component {
 
 			if (showTime) {
 				// Pad the prompt region so the timestamp sits flush right with a one-cell gap.
-				line = `${truncateToWidth(line, width - timeWidth - 1, Ellipsis.Unicode, true)} ${theme.fg("dim", timeStr)}`;
+				line = `${truncateToWidth(line, rowWidth - timeWidth - 1, Ellipsis.Unicode, true)} ${theme.fg("dim", timeStr)}`;
 			}
 
-			lines.push(
+			rows.push(
 				isSelected
-					? theme.bg("selectedBg", truncateToWidth(line, width, Ellipsis.Omit, true))
-					: truncateToWidth(line, width),
+					? theme.bg("selectedBg", truncateToWidth(line, rowWidth, Ellipsis.Omit, true))
+					: truncateToWidth(line, rowWidth),
 			);
 		}
 
-		if (startIndex > 0 || endIndex < this.#results.length) {
-			const scrollText = `  ${this.#selectedIndex + 1}/${this.#results.length}`;
-			lines.push(theme.fg("muted", truncateToWidth(scrollText, width, Ellipsis.Omit)));
-		}
-
+		const sv = new ScrollView(rows, {
+			height: rows.length,
+			scrollbar: "auto",
+			totalRows: this.#results.length,
+			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+		});
+		sv.setScrollOffset(startIndex);
+		lines.push(...sv.render(width));
 		return lines;
 	}
 }

package/src/modes/components/model-selector.ts

@@ -6,6 +6,7 @@ import {
 	getKeybindings,
 	Input,
 	matchesKey,
+	ScrollView,
 	Spacer,
 	type Tab,
 	TabBar,
@@ -13,6 +14,7 @@ import {
 	type TUI,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
+import { formatNumber } from "@oh-my-pi/pi-utils";
 import type { ModelRegistry } from "../../config/model-registry";
 import { getKnownRoleIds, getRoleInfo, MODEL_ROLE_IDS, MODEL_ROLES } from "../../config/model-registry";
 import { resolveModelRoleValue } from "../../config/model-resolver";
@@ -147,6 +149,7 @@ export class ModelSelectorComponent extends Container {
 	#tui: TUI;
 	#scopedModels: ReadonlyArray<ScopedModelItem>;
 	#temporaryOnly: boolean;
+	#currentContextTokens: number;
 
 	#menuRoleActions: MenuRoleAction[] = [];
 
@@ -172,7 +175,7 @@ export class ModelSelectorComponent extends Container {
 		scopedModels: ReadonlyArray<ScopedModelItem>,
 		onSelect: RoleSelectCallback,
 		onCancel: () => void,
-		options?: { temporaryOnly?: boolean; initialSearchInput?: string },
+		options?: { temporaryOnly?: boolean; initialSearchInput?: string; currentContextTokens?: number },
 	) {
 		super();
 
@@ -183,6 +186,9 @@ export class ModelSelectorComponent extends Container {
 		this.#onSelectCallback = onSelect;
 		this.#onCancelCallback = onCancel;
 		this.#temporaryOnly = options?.temporaryOnly ?? false;
+		const currentContextTokens = options?.currentContextTokens ?? 0;
+		this.#currentContextTokens =
+			Number.isFinite(currentContextTokens) && currentContextTokens > 0 ? Math.floor(currentContextTokens) : 0;
 		const initialSearchInput = options?.initialSearchInput;
 
 		// Initialize menu role actions (built-in + custom from settings)
@@ -215,8 +221,8 @@ export class ModelSelectorComponent extends Container {
 			this.#searchInput.setValue(initialSearchInput);
 		}
 		this.#searchInput.onSubmit = () => {
-			// Enter on search input opens menu if we have a selection
-			if (this.#filteredModels[this.#selectedIndex]) {
+			// Enter on search input opens menu if we have an enabled selection
+			if (this.#getSelectedItem()) {
 				this.#openMenu();
 			}
 		};
@@ -460,7 +466,11 @@ export class ModelSelectorComponent extends Container {
 		this.#filteredModels = models;
 		this.#canonicalModels = canonicalModels;
 		this.#filteredCanonicalModels = canonicalModels;
-		this.#selectedIndex = Math.min(this.#selectedIndex, Math.max(0, models.length - 1));
+		const visibleModels = this.#isCanonicalTab() ? canonicalModels : models;
+		this.#selectedIndex = this.#coerceSelectedIndex(
+			Math.min(this.#selectedIndex, Math.max(0, visibleModels.length - 1)),
+			visibleModels,
+		);
 	}
 
 	async #loadModels(): Promise<void> {
@@ -626,6 +636,74 @@ export class ModelSelectorComponent extends Container {
 		return this.#getActiveTabId() === CANONICAL_TAB;
 	}
 
+	#isModelOverContextLimit(model: Model): boolean {
+		const contextWindow = model.contextWindow ?? 0;
+		return this.#currentContextTokens > 0 && contextWindow > 0 && this.#currentContextTokens > contextWindow;
+	}
+
+	#isItemDisabled(item: ModelItem | CanonicalModelItem): boolean {
+		return this.#isModelOverContextLimit(item.model);
+	}
+
+	#formatContextLimitSuffix(model: Model): string {
+		if (!this.#isModelOverContextLimit(model)) {
+			return "";
+		}
+		return ` ${theme.status.disabled} context>${formatNumber(model.contextWindow).toLowerCase()}`;
+	}
+
+	#getVisibleItems(): ReadonlyArray<ModelItem | CanonicalModelItem> {
+		return this.#isCanonicalTab() ? this.#filteredCanonicalModels : this.#filteredModels;
+	}
+
+	#coerceSelectedIndex(
+		index: number,
+		visibleItems: ReadonlyArray<ModelItem | CanonicalModelItem> = this.#getVisibleItems(),
+	): number {
+		const maxIndex = visibleItems.length - 1;
+		if (maxIndex < 0) {
+			return 0;
+		}
+		const clamped = Math.max(0, Math.min(index, maxIndex));
+		const clampedItem = visibleItems[clamped];
+		if (clampedItem && !this.#isItemDisabled(clampedItem)) {
+			return clamped;
+		}
+		for (let i = clamped + 1; i <= maxIndex; i++) {
+			const item = visibleItems[i];
+			if (item && !this.#isItemDisabled(item)) {
+				return i;
+			}
+		}
+		for (let i = clamped - 1; i >= 0; i--) {
+			const item = visibleItems[i];
+			if (item && !this.#isItemDisabled(item)) {
+				return i;
+			}
+		}
+		return clamped;
+	}
+
+	#moveSelection(delta: number): void {
+		const visibleItems = this.#getVisibleItems();
+		const count = visibleItems.length;
+		if (count === 0) {
+			return;
+		}
+		let index = this.#selectedIndex;
+		for (let step = 0; step < count; step++) {
+			index = (index + delta + count) % count;
+			const item = visibleItems[index];
+			if (item && !this.#isItemDisabled(item)) {
+				this.#selectedIndex = index;
+				this.#updateList();
+				return;
+			}
+		}
+		this.#selectedIndex = this.#coerceSelectedIndex(this.#selectedIndex, visibleItems);
+		this.#updateList();
+	}
+
 	#filterModels(query: string): void {
 		const activeTabId = this.#getActiveTabId();
 		const activeProviderId = this.#getActiveProviderId();
@@ -696,8 +774,11 @@ export class ModelSelectorComponent extends Container {
 			this.#filteredCanonicalModels = baseCanonicalModels;
 		}
 
-		const visibleCount = isCanonicalTab ? this.#filteredCanonicalModels.length : this.#filteredModels.length;
-		this.#selectedIndex = Math.min(this.#selectedIndex, Math.max(0, visibleCount - 1));
+		const visibleItems = isCanonicalTab ? this.#filteredCanonicalModels : this.#filteredModels;
+		this.#selectedIndex = this.#coerceSelectedIndex(
+			Math.min(this.#selectedIndex, Math.max(0, visibleItems.length - 1)),
+			visibleItems,
+		);
 		this.#updateList();
 	}
 
@@ -778,6 +859,7 @@ export class ModelSelectorComponent extends Container {
 
 		const showProvider = this.#getActiveTabId() === ALL_TAB;
 
+		const rows: string[] = [];
 		// Show visible slice of filtered models
 		for (let i = startIndex; i < endIndex; i++) {
 			const item = visibleItems[i];
@@ -786,6 +868,8 @@ export class ModelSelectorComponent extends Container {
 			const providerItem = isCanonicalTab ? undefined : (item as ModelItem);
 
 			const isSelected = i === this.#selectedIndex;
+			const isDisabled = this.#isItemDisabled(item);
+			const disabledSuffix = this.#formatContextLimitSuffix(item.model);
 
 			// Build role badges (inverted: color as background, black text)
 			const roleBadgeTokens: string[] = [];
@@ -815,34 +899,42 @@ export class ModelSelectorComponent extends Container {
 				if (isCanonicalTab) {
 					const variants = theme.fg("dim", ` [${canonicalItem?.variantCount ?? 0}]`);
 					const backing = theme.fg("dim", ` -> ${item.model.provider}/${item.model.id}`);
-					line = `${prefix}${theme.fg("accent", item.id)}${variants}${backing}${badgeText}`;
+					line = `${prefix}${theme.fg("accent", item.id)}${variants}${backing}${badgeText}${disabledSuffix}`;
 				} else if (showProvider) {
 					const providerPrefix = theme.fg("dim", `${providerItem?.provider ?? ""}/`);
-					line = `${prefix}${providerPrefix}${theme.fg("accent", providerItem?.id ?? item.id)}${badgeText}`;
+					line = `${prefix}${providerPrefix}${theme.fg("accent", providerItem?.id ?? item.id)}${badgeText}${disabledSuffix}`;
 				} else {
-					line = `${prefix}${theme.fg("accent", item.id)}${badgeText}`;
+					line = `${prefix}${theme.fg("accent", item.id)}${badgeText}${disabledSuffix}`;
 				}
 			} else {
 				const prefix = "  ";
 				if (isCanonicalTab) {
 					const variants = theme.fg("dim", ` [${canonicalItem?.variantCount ?? 0}]`);
 					const backing = theme.fg("dim", ` -> ${item.model.provider}/${item.model.id}`);
-					line = `${prefix}${item.id}${variants}${backing}${badgeText}`;
+					line = `${prefix}${item.id}${variants}${backing}${badgeText}${disabledSuffix}`;
 				} else if (showProvider) {
 					const providerPrefix = theme.fg("dim", `${providerItem?.provider ?? ""}/`);
-					line = `${prefix}${providerPrefix}${providerItem?.id ?? item.id}${badgeText}`;
+					line = `${prefix}${providerPrefix}${providerItem?.id ?? item.id}${badgeText}${disabledSuffix}`;
 				} else {
-					line = `${prefix}${item.id}${badgeText}`;
+					line = `${prefix}${item.id}${badgeText}${disabledSuffix}`;
 				}
 			}
 
-			this.#listContainer.addChild(new Text(line, 0, 0));
+			if (isDisabled) {
+				line = theme.fg("dim", Bun.stripANSI(line));
+			}
+			rows.push(line);
 		}
 
-		// Add scroll indicator if needed
-		if (startIndex > 0 || endIndex < visibleItems.length) {
-			const scrollInfo = theme.fg("muted", `  (${this.#selectedIndex + 1}/${visibleItems.length})`);
-			this.#listContainer.addChild(new Text(scrollInfo, 0, 0));
+		if (rows.length > 0) {
+			const sv = new ScrollView(rows, {
+				height: rows.length,
+				scrollbar: "auto",
+				totalRows: visibleItems.length,
+				theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+			});
+			sv.setScrollOffset(startIndex);
+			this.#listContainer.addChild(sv);
 		}
 
 		// Show error message or "no results" if empty
@@ -863,8 +955,14 @@ export class ModelSelectorComponent extends Container {
 			const suffix = isCanonicalTab
 				? ` (${selected.model.provider}/${selected.model.id}, ${(selected as CanonicalModelItem).variantCount} variants)`
 				: "";
+			const limitWarning = this.#isItemDisabled(selected)
+				? theme.fg(
+						"dim",
+						` — current context ${formatNumber(this.#currentContextTokens).toLowerCase()} > ${formatNumber(selected.model.contextWindow).toLowerCase()} limit`,
+					)
+				: "";
 			this.#listContainer.addChild(
-				new Text(theme.fg("muted", `  Model Name: ${selected.model.name}${suffix}`), 0, 0),
+				new Text(theme.fg("muted", `  Model Name: ${selected.model.name}${suffix}`) + limitWarning, 0, 0),
 			);
 		}
 	}
@@ -890,7 +988,8 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	#openMenu(): void {
-		if (!this.#getSelectedItem()) return;
+		const selectedItem = this.#getSelectedItem();
+		if (!selectedItem || this.#isItemDisabled(selectedItem)) return;
 
 		this.#isMenuOpen = true;
 		this.#menuStep = "role";
@@ -978,26 +1077,20 @@ export class ModelSelectorComponent extends Container {
 
 		// Up arrow - navigate list (wrap to bottom when at top)
 		if (matchesSelectUp(keyData)) {
-			const itemCount = this.#isCanonicalTab() ? this.#filteredCanonicalModels.length : this.#filteredModels.length;
-			if (itemCount === 0) return;
-			this.#selectedIndex = this.#selectedIndex === 0 ? itemCount - 1 : this.#selectedIndex - 1;
-			this.#updateList();
+			this.#moveSelection(-1);
 			return;
 		}
 
 		// Down arrow - navigate list (wrap to top when at bottom)
 		if (matchesSelectDown(keyData)) {
-			const itemCount = this.#isCanonicalTab() ? this.#filteredCanonicalModels.length : this.#filteredModels.length;
-			if (itemCount === 0) return;
-			this.#selectedIndex = this.#selectedIndex === itemCount - 1 ? 0 : this.#selectedIndex + 1;
-			this.#updateList();
+			this.#moveSelection(1);
 			return;
 		}
 
 		// Enter - open context menu or select directly in temporary mode
 		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selectedItem = this.#getSelectedItem();
-			if (selectedItem) {
+			if (selectedItem && !this.#isItemDisabled(selectedItem)) {
 				if (this.#temporaryOnly) {
 					// In temporary mode, skip menu and select directly
 					this.#handleSelect(selectedItem, null);
@@ -1020,7 +1113,7 @@ export class ModelSelectorComponent extends Container {
 	}
 	#handleMenuInput(keyData: string): void {
 		const selectedItem = this.#getSelectedItem();
-		if (!selectedItem) return;
+		if (!selectedItem || this.#isItemDisabled(selectedItem)) return;
 
 		const optionCount =
 			this.#menuStep === "thinking" && this.#menuSelectedRole !== null
@@ -1079,6 +1172,9 @@ export class ModelSelectorComponent extends Container {
 		role: string | null,
 		thinkingLevel?: ConfiguredThinkingLevel,
 	): void {
+		if (this.#isItemDisabled(item)) {
+			return;
+		}
 		// For temporary role, don't save to settings - just notify caller
 		if (role === null) {
 			this.#onSelectCallback(item.model, null, undefined, item.selector);

package/src/modes/components/oauth-selector.ts

@@ -1,6 +1,14 @@
 import { getOAuthProviders } from "@oh-my-pi/pi-ai/utils/oauth";
 import type { OAuthProviderInfo } from "@oh-my-pi/pi-ai/utils/oauth/types";
-import { Container, extractPrintableText, fuzzyFilter, matchesKey, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
+import {
+	Container,
+	extractPrintableText,
+	fuzzyFilter,
+	matchesKey,
+	ScrollView,
+	Spacer,
+	TruncatedText,
+} from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
 import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import type { AuthStorage } from "../../session/auth-storage";
@@ -162,14 +170,10 @@ export class OAuthSelectorComponent extends Container {
 		return this.#isSearchEnabled() || this.#searchQuery.length > 0;
 	}
 
-	#renderStatusLine(total: number): string {
-		const selectedCount = total === 0 ? 0 : this.#selectedIndex + 1;
-		const count =
-			this.#searchQuery.trim() && total !== this.#allProviders.length
-				? `${selectedCount}/${total} of ${this.#allProviders.length}`
-				: `${selectedCount}/${total}`;
-		const suffix = this.#searchQuery.trim() ? `  Search: ${this.#searchQuery}` : "  Type to search";
-		return theme.fg("muted", `  (${count})${suffix}`);
+	#renderStatusLine(_total: number): string {
+		const query = this.#searchQuery.trim();
+		const suffix = query ? `Search: ${this.#searchQuery}` : "Type to search";
+		return theme.fg("muted", `  ${suffix}`);
 	}
 
 	#getProviderSearchText(provider: OAuthProviderInfo): string {
@@ -223,6 +227,7 @@ export class OAuthSelectorComponent extends Container {
 				: Math.max(0, Math.min(this.#selectedIndex - Math.floor(maxVisible / 2), total - maxVisible));
 		const endIndex = Math.min(startIndex + maxVisible, total);
 
+		const rows: string[] = [];
 		for (let i = startIndex; i < endIndex; i++) {
 			const provider = this.#filteredProviders[i];
 			if (!provider) continue;
@@ -239,11 +244,22 @@ export class OAuthSelectorComponent extends Container {
 				const text = isAvailable ? `  ${provider.name}` : theme.fg("dim", `  ${provider.name}`);
 				line = text + statusIndicator;
 			}
-			this.#listContainer.addChild(new TruncatedText(line, 0, 0));
+			rows.push(line);
 		}
 
-		// Scroll/search indicator when list is windowed or searchable
-		if (startIndex > 0 || endIndex < total || this.#shouldRenderSearchStatus()) {
+		if (rows.length > 0) {
+			const sv = new ScrollView(rows, {
+				height: rows.length,
+				scrollbar: "auto",
+				totalRows: total,
+				theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+			});
+			sv.setScrollOffset(startIndex);
+			this.#listContainer.addChild(sv);
+		}
+
+		// Search status line (scrollbar covers overflow indication)
+		if (this.#shouldRenderSearchStatus()) {
 			this.#listContainer.addChild(new TruncatedText(this.#renderStatusLine(total), 0, 0));
 		}
 

package/src/modes/components/session-observer-overlay.ts

@@ -15,7 +15,7 @@
  *   - Enter on main session -> close overlay (jump back)
  */
 import type { ToolResultMessage } from "@oh-my-pi/pi-ai";
-import { Container, Markdown, type MarkdownTheme, matchesKey } from "@oh-my-pi/pi-tui";
+import { Container, Markdown, type MarkdownTheme, matchesKey, ScrollView } from "@oh-my-pi/pi-tui";
 import { formatDuration, formatNumber, logger } from "@oh-my-pi/pi-utils";
 import type { KeyId } from "../../config/keybindings";
 import { isSilentAbort } from "../../session/messages";
@@ -230,23 +230,21 @@ export class SessionObserverOverlayComponent extends Container {
 		lines.push(...new DynamicBorder().render(width));
 
 		// --- Scrolled content viewport ---
-		const visibleLines = this.#renderedLines.slice(this.#scrollOffset, this.#scrollOffset + this.#viewportHeight);
-		for (const vl of visibleLines) {
-			lines.push(` ${vl}`);
-		}
-		// Pad to fill viewport if content is shorter
-		const pad = this.#viewportHeight - visibleLines.length;
-		for (let i = 0; i < pad; i++) {
-			lines.push("");
-		}
+		const sv = new ScrollView(
+			this.#renderedLines.slice(this.#scrollOffset, this.#scrollOffset + this.#viewportHeight),
+			{
+				height: this.#viewportHeight,
+				scrollbar: "auto",
+				totalRows: this.#renderedLines.length,
+				theme: { track: t => theme.fg("dim", t), thumb: t => theme.fg("accent", t) },
+			},
+		);
+		sv.setScrollOffset(this.#scrollOffset);
+		for (const row of sv.render(Math.max(1, width - 1))) lines.push(` ${row}`);
 
 		// --- Footer ---
-		const scrollInfo =
-			this.#renderedLines.length > this.#viewportHeight
-				? ` ${theme.fg("dim", `[${this.#scrollOffset + 1}-${Math.min(this.#scrollOffset + this.#viewportHeight, this.#renderedLines.length)}/${this.#renderedLines.length}]`)}`
-				: "";
 		lines.push("");
-		lines.push(` ${this.#viewerFooterLines[0] ?? ""}${scrollInfo}`);
+		lines.push(` ${this.#viewerFooterLines[0] ?? ""}`);
 		for (let i = 1; i < this.#viewerFooterLines.length; i++) {
 			lines.push(` ${this.#viewerFooterLines[i]}`);
 		}

package/src/modes/components/session-selector.ts

@@ -6,6 +6,7 @@ import {
 	matchesKey,
 	padding,
 	replaceTabs,
+	ScrollView,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -247,6 +248,11 @@ class SessionList implements Component {
 		const endIndex = Math.min(startIndex + maxVisible, this.#filteredSessions.length);
 
 		// Render visible sessions (3 lines, or 4 when a title adds a preview line).
+		// Each session block is built into sessionLines, then wrapped by ScrollView
+		// so the right-edge scrollbar is proportional at the physical-line level.
+		const sessionLines: string[] = [];
+		const overflow = this.#filteredSessions.length > maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
 		for (let i = startIndex; i < endIndex; i++) {
 			const session = this.#filteredSessions[i];
 			const isSelected = i === this.#selectedIndex;
@@ -258,22 +264,22 @@ class SessionList implements Component {
 			const cursorSymbol = `${theme.nav.cursor} `;
 			const cursorWidth = visibleWidth(cursorSymbol);
 			const cursor = isSelected ? theme.fg("accent", cursorSymbol) : padding(cursorWidth);
-			const maxWidth = width - cursorWidth; // Account for cursor width
+			const maxWidth = rowWidth - cursorWidth; // Account for cursor width
 
 			if (session.title) {
 				// Has title: show title on first line, dimmed first message on second line
 				const truncatedTitle = truncateToWidth(session.title, maxWidth);
 				const titleLine = cursor + (isSelected ? theme.bold(truncatedTitle) : truncatedTitle);
-				lines.push(titleLine);
+				sessionLines.push(titleLine);
 
 				// Second line: dimmed first message preview
 				const truncatedPreview = truncateToWidth(normalizedMessage, maxWidth);
-				lines.push(`  ${theme.fg("dim", truncatedPreview)}`);
+				sessionLines.push(`  ${theme.fg("dim", truncatedPreview)}`);
 			} else {
 				// No title: show first message as main line
 				const truncatedMsg = truncateToWidth(normalizedMessage, maxWidth);
 				const messageLine = cursor + (isSelected ? theme.bold(truncatedMsg) : truncatedMsg);
-				lines.push(messageLine);
+				sessionLines.push(messageLine);
 			}
 
 			// Metadata line: date + file size + lifecycle status (+ project dir in
@@ -290,18 +296,23 @@ class SessionList implements Component {
 			if (this.#showCwd && session.cwd) {
 				metadata += ` ${dot} ${dim(shortenPath(session.cwd))}`;
 			}
-			const metadataLine = truncateToWidth(metadata, width);
+			const metadataLine = truncateToWidth(metadata, rowWidth);
 
-			lines.push(metadataLine);
-			lines.push(""); // Blank line between sessions
+			sessionLines.push(metadataLine);
+			sessionLines.push(""); // Blank line between sessions
 		}
 
-		// Add scroll indicator if needed
-		if (startIndex > 0 || endIndex < this.#filteredSessions.length) {
-			const scrollText = `  (${this.#selectedIndex + 1}/${this.#filteredSessions.length})`;
-			const scrollInfo = theme.fg("muted", truncateToWidth(scrollText, width));
-			lines.push(scrollInfo);
-		}
+		// Wrap the rendered window in a ScrollView for a proportional right-edge bar.
+		const visibleCount = endIndex - startIndex;
+		const linesPerItem = visibleCount > 0 ? sessionLines.length / visibleCount : 1;
+		const sv = new ScrollView(sessionLines, {
+			height: sessionLines.length,
+			scrollbar: "auto",
+			totalRows: Math.round(this.#filteredSessions.length * linesPerItem),
+			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+		});
+		sv.setScrollOffset(Math.round(startIndex * linesPerItem));
+		lines.push(...sv.render(width));
 
 		// Add keybinding hint
 		lines.push("");