@oh-my-pi/pi-coding-agent 15.11.6 → 15.11.7

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

@@ -6,6 +6,7 @@ import {
 	fuzzyFilter,
 	matchesKey,
 	ScrollView,
+	type SgrMouseEvent,
 	Spacer,
 	TruncatedText,
 } from "@oh-my-pi/pi-tui";
@@ -16,6 +17,12 @@ import { DynamicBorder } from "./dynamic-border";
 
 const OAUTH_SELECTOR_MAX_VISIBLE = 10;
 
+/**
+ * Rendered lines before the provider rows: top border, spacer, title, spacer
+ * (must mirror the constructor's addChild order).
+ */
+const LIST_ROW_OFFSET = 4;
+
 /** Compact, human-readable tag for each credential-origin leg. */
 const ORIGIN_LABELS: Record<CredentialOriginKind, string> = {
 	runtime: "--api-key",
@@ -34,6 +41,10 @@ export class OAuthSelectorComponent extends Container {
 	#filteredProviders: OAuthProviderInfo[] = [];
 	#searchQuery = "";
 	#selectedIndex: number = 0;
+	#hoveredIndex: number | null = null;
+	/** First provider index of the visible ScrollView window (last #updateList). */
+	#scrollStart = 0;
+	#visibleCount = 0;
 	#mode: "login" | "logout";
 	#authStorage: AuthStorage;
 	#onSelectCallback: (providerId: string) => void;
@@ -252,6 +263,8 @@ export class OAuthSelectorComponent extends Container {
 				? 0
 				: Math.max(0, Math.min(this.#selectedIndex - Math.floor(maxVisible / 2), total - maxVisible));
 		const endIndex = Math.min(startIndex + maxVisible, total);
+		this.#scrollStart = startIndex;
+		this.#visibleCount = endIndex - startIndex;
 
 		const rows: string[] = [];
 		for (let i = startIndex; i < endIndex; i++) {
@@ -270,6 +283,9 @@ export class OAuthSelectorComponent extends Container {
 				const text = isAvailable ? `  ${provider.name}` : theme.fg("dim", `  ${provider.name}`);
 				line = text + statusIndicator;
 			}
+			if (!isSelected && i === this.#hoveredIndex) {
+				line = theme.bg("selectedBg", line);
+			}
 			rows.push(line);
 		}
 
@@ -354,15 +370,59 @@ export class OAuthSelectorComponent extends Container {
 		}
 		// Enter
 		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
-			const selectedProvider = this.#filteredProviders[this.#selectedIndex];
-			if (selectedProvider?.available) {
-				this.#statusMessage = undefined;
-				this.stopValidation();
-				this.#onSelectCallback(selectedProvider.id);
-			} else if (selectedProvider) {
-				this.#statusMessage = "Provider unavailable in this environment.";
+			this.#confirmSelection();
+		}
+	}
+
+	/** Confirm the selected provider (Enter or mouse click). */
+	#confirmSelection(): void {
+		const selectedProvider = this.#filteredProviders[this.#selectedIndex];
+		if (selectedProvider?.available) {
+			this.#statusMessage = undefined;
+			this.stopValidation();
+			this.#onSelectCallback(selectedProvider.id);
+		} else if (selectedProvider) {
+			this.#statusMessage = "Provider unavailable in this environment.";
+			this.#updateList();
+		}
+	}
+
+	/** Move the selection one step for a wheel notch (clamped, no wrap). */
+	handleWheel(delta: -1 | 1): void {
+		if (this.#filteredProviders.length === 0) return;
+		const next = Math.max(0, Math.min(this.#selectedIndex + delta, this.#filteredProviders.length - 1));
+		if (next === this.#selectedIndex) return;
+		this.#selectedIndex = next;
+		this.#statusMessage = undefined;
+		this.#updateList();
+	}
+
+	/**
+	 * Route an SGR mouse report at component-local coordinates. Provider rows
+	 * start LIST_ROW_OFFSET lines into the render; the ScrollView window shows
+	 * #visibleCount rows from #scrollStart. Wheel moves the selection, motion
+	 * drives the hover band, and a left click selects and confirms like Enter.
+	 */
+	routeMouse(event: SgrMouseEvent, line: number, _col: number): void {
+		if (event.wheel !== null) {
+			this.handleWheel(event.wheel);
+			return;
+		}
+		const localRow = line - LIST_ROW_OFFSET;
+		const index = localRow >= 0 && localRow < this.#visibleCount ? this.#scrollStart + localRow : undefined;
+		const target = index !== undefined && index < this.#filteredProviders.length ? index : null;
+		if (event.motion) {
+			if (target !== this.#hoveredIndex) {
+				this.#hoveredIndex = target;
 				this.#updateList();
 			}
+			return;
+		}
+		if (!event.leftClick || target === null) return;
+		if (target !== this.#selectedIndex) {
+			this.#selectedIndex = target;
+			this.#statusMessage = undefined;
 		}
+		this.#confirmSelection();
 	}
 }

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

@@ -7,6 +7,7 @@ import {
 	fuzzyRank,
 	getKeybindings,
 	getSettingItemFilterText,
+	type ImageBudget,
 	Input,
 	matchesKey,
 	parseSgrMouse,
@@ -22,6 +23,7 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
+import type { ShapeTarget } from "@oh-my-pi/snapcompact";
 import { getDefault, type SettingPath, settings } from "../../config/settings";
 import type {
 	SettingTab,
@@ -36,6 +38,7 @@ import { getTabBarTheme } from "../shared";
 import { bottomBorder, divider, row, topBorder } from "./overlay-box";
 import { handleInputOrEscape, PluginSettingsComponent } from "./plugin-settings";
 import { getSettingDef, getSettingsForTab, type SettingDef } from "./settings-defs";
+import { SnapcompactShapePreview } from "./snapcompact-shape-preview";
 import { getPreset } from "./status-line/presets";
 
 /**
@@ -97,6 +100,7 @@ class SelectSubmenu extends Container {
 		onCancel: () => void,
 		onSelectionChange?: (value: string) => void | Promise<void>,
 		private readonly getPreview?: () => string,
+		footer?: Component,
 	) {
 		super();
 
@@ -158,6 +162,13 @@ class SelectSubmenu extends Container {
 		// Hint
 		this.addChild(new Spacer(1));
 		this.addChild(new Text(theme.fg("dim", "  Enter to select · Esc to go back"), 0, 0));
+
+		// Footer (e.g. the snapcompact shape preview) below the interactive rows,
+		// so the list never shifts while browsing.
+		if (footer) {
+			this.addChild(new Spacer(1));
+			this.addChild(footer);
+		}
 	}
 
 	#updatePreview(): void {
@@ -249,6 +260,12 @@ export interface SettingsRuntimeContext {
 	availableThemes: string[];
 	/** Working directory for plugins tab */
 	cwd: string;
+	/** Active model (api + id); resolves what the snapcompact `auto` shape maps to. */
+	model?: ShapeTarget;
+	/** Shared TUI image budget (graphics ids + transmit-once) for image previews. */
+	imageBudget?: ImageBudget;
+	/** Schedules a re-render after async preview work completes. */
+	requestRender?: () => void;
 }
 
 /** Status line settings subset for preview */
@@ -758,6 +775,7 @@ export class SettingsSelectorComponent implements Component {
 		// Preview handlers
 		let onPreview: ((value: string) => void | Promise<void>) | undefined;
 		let onPreviewCancel: (() => void) | undefined;
+		let footer: Component | undefined;
 
 		const activeThemeBeforePreview = getCurrentThemeName() ?? currentValue;
 		if (def.path === "theme.dark" || def.path === "theme.light") {
@@ -797,6 +815,14 @@ export class SettingsSelectorComponent implements Component {
 				const separator = settings.get("statusLine.separator");
 				this.callbacks.onStatusLinePreview?.({ separator });
 			};
+		} else if (def.path === "snapcompact.shape") {
+			const shapePreview = new SnapcompactShapePreview(currentValue, {
+				model: this.context.model,
+				imageBudget: this.context.imageBudget,
+				requestRender: this.context.requestRender,
+			});
+			onPreview = value => shapePreview.setValue(value);
+			footer = shapePreview;
 		}
 
 		// Provide status line preview for theme selection
@@ -819,6 +845,7 @@ export class SettingsSelectorComponent implements Component {
 			},
 			onPreview,
 			getPreview,
+			footer,
 		);
 	}
 

package/src/modes/components/snapcompact-shape-preview-doc.md

@@ -0,0 +1,11 @@
+[User]: Fix the settings overlay crash. Wheeling past the last row throws.
+
+[Assistant tool calls]: read(path="src/select-list.ts:140-180")
+
+[Tool result]: 162: const index = Math.floor(line / rowHeight); index is never checked against bounds.
+
+[Assistant]: Found it. The hit test indexes past the filtered list; clamping to the last row fixes the crash.
+
+[User]: Does the fix survive filtering?
+
+[Assistant]: Yes. The clamp applies after the filter pass, so a narrowed list keeps the hit map in sync. Added a regression test that wheels past the last row with a filter active and asserts no throw.

package/src/modes/components/snapcompact-shape-preview.ts

@@ -0,0 +1,192 @@
+/**
+ * Live preview for the `snapcompact.shape` setting: renders a sample session
+ * transcript through the real snapcompact rasterizer as a miniature page and
+ * shows it zoomed, so cell size, ink hues, highlight bands, and dim tool-result
+ * spans are legible at terminal scale.
+ *
+ * The mini-frame (a {@link SRC_FRAME_PX}px page) is upscaled with
+ * nearest-neighbor so the glyph pixels stay crisp when the terminal scales the
+ * placement box. Graphics display requires the Kitty unicode-placeholder path —
+ * `renderImage` returning `lines` is the gate — because the bordered settings
+ * frame re-fits every row, which direct cursor-positioned placements (iTerm2,
+ * Sixel, Kitty `a=p`) do not survive. Everything else falls back to the stats
+ * line plus a dim notice.
+ */
+import { type Component, type ImageBudget, renderImage, TERMINAL } from "@oh-my-pi/pi-tui";
+import {
+	DIM_OFF,
+	DIM_ON,
+	geometry,
+	isShapeVariantName,
+	normalize,
+	renderMany,
+	resolveShape,
+	SHAPE_VARIANT_NAMES,
+	SHAPE_VARIANTS,
+	type Shape,
+	type ShapeTarget,
+	type ShapeVariantName,
+} from "@oh-my-pi/snapcompact";
+import { theme } from "../theme/theme";
+import sampleDoc from "./snapcompact-shape-preview-doc.md" with { type: "text" };
+
+/** Mini-frame edge in px — a small page from the real rasterizer ≈ a zoomed crop. */
+const SRC_FRAME_PX = 128;
+/** Nearest-neighbor upscale factor; keeps glyph pixels crisp on HiDPI cell boxes. */
+const ZOOM_SCALE = 4;
+/** Display box in terminal cells (square-ish at the typical 1:2 cell aspect). */
+const MAX_IMAGE_COLS = 28;
+const MAX_IMAGE_ROWS = 14;
+
+/** Sample transcript with `[Tool result]:` bodies wrapped in dim-ink toggles. */
+const PREVIEW_TEXT = sampleDoc
+	.trim()
+	.replace(/\[Tool result\]: ([^[]*)/g, (_match, body: string) => `[Tool result]: ${DIM_ON}${body}${DIM_OFF}`);
+
+type PreviewEntry =
+	| { state: "rendering" }
+	| { state: "failed" }
+	| { state: "ready"; data: string; edgePx: number; imageId: number; transmitted: boolean };
+
+export interface SnapcompactShapePreviewOptions {
+	/** Active model (api + id); resolves what `auto` maps to for this reader. */
+	model?: ShapeTarget;
+	/** Shared TUI image budget: stable graphics ids, transmit-once, exit cleanup. */
+	imageBudget?: ImageBudget;
+	/** Schedules a re-render once an async sample render completes. */
+	requestRender?: () => void;
+}
+
+export class SnapcompactShapePreview implements Component {
+	#model: ShapeTarget | undefined;
+	#budget: ImageBudget | undefined;
+	#requestRender: () => void;
+	#variant: ShapeVariantName | "auto" = "auto";
+	#entries = new Map<ShapeVariantName, PreviewEntry>();
+
+	constructor(currentValue: string, options: SnapcompactShapePreviewOptions = {}) {
+		this.#model = options.model;
+		this.#budget = options.imageBudget;
+		this.#requestRender = options.requestRender ?? (() => {});
+		this.setValue(currentValue);
+	}
+
+	/** Track the highlighted option; the next render reflects it. */
+	setValue(value: string): void {
+		this.#variant = isShapeVariantName(value) ? value : "auto";
+	}
+
+	render(width: number): readonly string[] {
+		const shape = resolveShape(this.#model, this.#variant);
+		const name = resolvedVariantName(shape);
+		const geo = geometry(shape);
+		const label = this.#variant === "auto" ? `auto → ${name}` : name;
+		const chars = geo.capacity >= 1000 ? `${(geo.capacity / 1000).toFixed(1)}k` : String(geo.capacity);
+		const tokens =
+			shape.frameTokenEstimate >= 1000
+				? `${(shape.frameTokenEstimate / 1000).toFixed(1)}k`
+				: String(shape.frameTokenEstimate);
+		const stats = `full frame ${geo.cols}×${geo.rows} cells ≈ ${chars} chars ≈ ${tokens} tokens`;
+		const lines: string[] = [theme.fg("muted", `  Sample (zoomed) · ${label} · ${stats}`), ""];
+
+		if (!this.#budget || !TERMINAL.imageProtocol) {
+			lines.push(theme.fg("dim", "  (graphic sample needs a Kitty-graphics terminal)"));
+			return lines;
+		}
+
+		const entry = this.#ensureEntry(name, shape);
+		if (entry.state === "rendering") {
+			lines.push(theme.fg("dim", "  rendering sample…"));
+			return lines;
+		}
+		if (entry.state === "failed") {
+			lines.push(theme.fg("dim", "  (sample render failed)"));
+			return lines;
+		}
+
+		const result = renderImage(
+			entry.data,
+			{ widthPx: entry.edgePx, heightPx: entry.edgePx },
+			{
+				maxWidthCells: Math.max(8, Math.min(MAX_IMAGE_COLS, width - 4)),
+				maxHeightCells: MAX_IMAGE_ROWS,
+				imageId: entry.imageId,
+				includeTransmit: !entry.transmitted,
+			},
+		);
+		// Only the unicode-placeholder path returns text-cell `lines`; cursor-moving
+		// placements would corrupt the bordered settings frame, so skip them.
+		if (!result?.lines) {
+			lines.push(theme.fg("dim", "  (graphic sample needs Kitty unicode-placeholder graphics)"));
+			return lines;
+		}
+		if (result.transmit) {
+			this.#budget.enqueueTransmit(entry.imageId, result.transmit);
+			entry.transmitted = true;
+		}
+		for (const line of result.lines) {
+			lines.push(`  ${line}`);
+		}
+		return lines;
+	}
+
+	#ensureEntry(name: ShapeVariantName, shape: Shape): PreviewEntry {
+		let entry = this.#entries.get(name);
+		if (!entry) {
+			entry = { state: "rendering" };
+			this.#entries.set(name, entry);
+			void this.#buildEntry(name, shape);
+		}
+		return entry;
+	}
+
+	async #buildEntry(name: ShapeVariantName, shape: Shape): Promise<void> {
+		try {
+			// Fill the mini-page so every variant shows a fully inked window.
+			const capacity = geometry(shape, SRC_FRAME_PX).capacity;
+			let text = PREVIEW_TEXT;
+			while (normalize(text).length < capacity) {
+				text += ` ${PREVIEW_TEXT}`;
+			}
+			const frame = renderMany(text, { shape, frameSize: SRC_FRAME_PX, maxFrames: 1 })[0];
+			if (!frame) throw new Error("empty sample frame");
+			const edgePx = SRC_FRAME_PX * ZOOM_SCALE;
+			const zoomed = await new Bun.Image(Buffer.from(frame.data, "base64"))
+				.resize(edgePx, edgePx, { filter: "nearest" })
+				.png()
+				.bytes();
+			this.#entries.set(name, {
+				state: "ready",
+				data: zoomed.toBase64(),
+				edgePx,
+				// Keyed id: reopening settings reuses the id, so data already in the
+				// terminal store is never re-transmitted (enqueueTransmit no-ops).
+				imageId: this.#budget?.acquireId(`snapshape:${name}:${edgePx}`) ?? 0,
+				transmitted: false,
+			});
+		} catch {
+			this.#entries.set(name, { state: "failed" });
+		}
+		this.#requestRender();
+	}
+}
+
+/** Research name of the concrete geometry `resolveShape` picked (for `auto`). */
+function resolvedVariantName(shape: Shape): ShapeVariantName {
+	for (const name of SHAPE_VARIANT_NAMES) {
+		const candidate = SHAPE_VARIANTS[name];
+		if (
+			candidate.font === shape.font &&
+			candidate.cellWidth === shape.cellWidth &&
+			candidate.cellHeight === shape.cellHeight &&
+			candidate.variant === shape.variant &&
+			candidate.lineRepeat === shape.lineRepeat &&
+			candidate.frameSize === shape.frameSize
+		) {
+			return name;
+		}
+	}
+	// resolveShape only hands out table geometries; the legacy shape is the
+	// conservative label if that invariant ever changes.
+	return "5x8-sent";
+}

package/src/modes/components/tool-execution.ts

@@ -591,20 +591,28 @@ export class ToolExecutionComponent extends Container {
 
 	/**
 	 * Whether this still-live block's settled rows may enter native scrollback
-	 * (see `FinalizableBlock.isTranscriptBlockCommitStable`). A pending
-	 * collapsed preview is provisional: the tail-window streaming views
-	 * (edit/bash/eval caps) are re-anchored top-first by the result render, so
-	 * promoting their visually static head — e.g. an edit preview idling on
-	 * its last frame while the apply + LSP pass runs — would strand a stale
-	 * copy of the call box above the final block the moment the result lands.
-	 * Expanded pending blocks stream top-anchored append-shaped content whose
-	 * rows the result render preserves byte-stable (the over-tall write/eval
-	 * scrollback contract), so they stay commit-eligible. Displaceable waiting
+	 * (see `FinalizableBlock.isTranscriptBlockCommitStable`). Classification is
+	 * per renderer (`ToolRenderer.provisionalPendingPreview`): tail-window
+	 * streaming views (edit's streamed-diff tail, bash/ssh command caps, eval
+	 * cells) are re-anchored top-first by the result render, so promoting
+	 * their visually static head — e.g. an edit preview idling on its last
+	 * frame while the apply + LSP pass runs — would strand a stale copy of
+	 * the call box above the final block the moment the result lands. Every
+	 * other pending preview streams top-anchored append-shaped rows the
+	 * result render preserves (a task call's context/assignment markdown, a
+	 * write's content), so it stays commit-eligible — a call taller than the
+	 * viewport scrolls into native history mid-stream instead of reading as
+	 * cut off until the result. Expanded blocks always stream top-anchored
+	 * (the over-tall write/eval scrollback contract). Displaceable waiting
 	 * polls are removed wholesale by the next poll and must never commit.
 	 */
 	isTranscriptBlockCommitStable(): boolean {
 		if (this.#displaceable) return false;
-		return this.#expanded || this.isTranscriptBlockFinalized();
+		if (this.#expanded || this.isTranscriptBlockFinalized()) return true;
+		if ((this.#tool as { provisionalPendingPreview?: boolean } | undefined)?.provisionalPendingPreview) {
+			return false;
+		}
+		return !toolRenderers[this.#toolName]?.provisionalPendingPreview;
 	}
 
 	/**

package/src/modes/controllers/input-controller.ts

@@ -4,6 +4,7 @@ import type { AutocompleteProvider, SlashCommand } from "@oh-my-pi/pi-tui";
 import { $env, logger, sanitizeText } from "@oh-my-pi/pi-utils";
 import { getRoleInfo } from "../../config/model-roles";
 import { isSettingsInitialized, settings } from "../../config/settings";
+import { AssistantMessageComponent } from "../../modes/components/assistant-message";
 import { renderSegmentTrack } from "../../modes/components/segment-track";
 import { TinyTitleDownloadProgressComponent } from "../../modes/components/tiny-title-download-progress";
 import { expandEmoticons } from "../../modes/emoji-autocomplete";
@@ -1039,18 +1040,19 @@ export class InputController {
 
 	toggleThinkingBlockVisibility(): void {
 		this.ctx.hideThinkingBlock = !this.ctx.hideThinkingBlock;
-		settings.set("hideThinkingBlock", this.ctx.hideThinkingBlock);
+		this.ctx.settings.set("hideThinkingBlock", this.ctx.hideThinkingBlock);
 		this.ctx.session.agent.hideThinkingSummary = this.ctx.hideThinkingBlock;
 
-		// Rebuild chat from session messages
-		this.ctx.chatContainer.clear();
-		this.ctx.rebuildChatFromMessages();
+		for (const child of this.ctx.chatContainer.children) {
+			if (child instanceof AssistantMessageComponent) {
+				child.setHideThinkingBlock(this.ctx.hideThinkingBlock);
+				child.invalidate();
+			}
+		}
 
-		// If streaming, re-add the streaming component with updated visibility and re-render
 		if (this.ctx.streamingComponent && this.ctx.streamingMessage) {
 			this.ctx.streamingComponent.setHideThinkingBlock(this.ctx.hideThinkingBlock);
 			this.ctx.streamingComponent.updateContent(this.ctx.streamingMessage);
-			this.ctx.chatContainer.addChild(this.ctx.streamingComponent);
 		}
 
 		this.ctx.showStatus(`Thinking blocks: ${this.ctx.hideThinkingBlock ? "hidden" : "visible"}`);

package/src/modes/controllers/selector-controller.ts

@@ -114,6 +114,9 @@ export class SelectorController {
 					thinkingLevel: this.ctx.session.thinkingLevel,
 					availableThemes,
 					cwd: getProjectDir(),
+					model: this.ctx.session.model,
+					imageBudget: this.ctx.ui.imageBudget,
+					requestRender: () => this.ctx.ui.requestRender(),
 				},
 				{
 					onChange: (id, value) => this.handleSettingChange(id, value),
@@ -313,10 +316,9 @@ export class SelectorController {
 				for (const child of this.ctx.chatContainer.children) {
 					if (child instanceof AssistantMessageComponent) {
 						child.setHideThinkingBlock(value as boolean);
+						child.invalidate();
 					}
 				}
-				this.ctx.chatContainer.clear();
-				this.ctx.rebuildChatFromMessages();
 				break;
 			case "theme": {
 				setTheme(value as string, true).then(result => {

package/src/modes/interactive-mode.ts

@@ -1162,6 +1162,30 @@ export class InteractiveMode implements InteractiveModeContext {
 		// of restarting the visible conversation (the LLM context still resets).
 		const context = this.session.buildTranscriptSessionContext();
 		this.renderSessionContext(context);
+		// During the pre-streaming window — after `startPendingSubmission` has
+		// optimistically rendered the user's message but before the user
+		// `message_start` event lands it in `session` entries — any rebuild
+		// (e.g. Ctrl+T toggleThinkingBlockVisibility, theme selector) would
+		// otherwise erase the user's just-submitted message until the first
+		// assistant token arrived (#2372). Once `message_start` fires the
+		// signature is cleared by `EventController`, so this replay is a no-op
+		// post-streaming and cannot duplicate.
+		this.#replayOptimisticUserMessage();
+	}
+
+	#replayOptimisticUserMessage(): void {
+		if (!this.optimisticUserMessageSignature) return;
+		const submission = this.#pendingSubmittedInput;
+		if (!submission || submission.cancelled || submission.customType) return;
+		this.addMessageToChat(
+			{
+				role: "user",
+				content: [{ type: "text", text: submission.text }, ...(submission.images ?? [])],
+				attribution: "user",
+				timestamp: Date.now(),
+			},
+			{ imageLinks: submission.imageLinks },
+		);
 	}
 
 	#formatTodoLine(todo: TodoItem, prefix: string, matched: boolean): string {

package/src/modes/setup-wizard/index.ts

@@ -82,6 +82,7 @@ export async function runSetupWizard(
 		maxHeight: "100%",
 		anchor: "top-left",
 		margin: 0,
+		fullscreen: true,
 	});
 	try {
 		await component.run();

package/src/modes/setup-wizard/scenes/glyph.ts

@@ -1,4 +1,4 @@
-import { type SelectItem, SelectList } from "@oh-my-pi/pi-tui";
+import { type SelectItem, SelectList, type SgrMouseEvent } from "@oh-my-pi/pi-tui";
 import { getSelectListTheme, type SymbolPreset, setSymbolPreset, theme } from "../../theme/theme";
 import type { SetupScene, SetupSceneController, SetupSceneHost } from "./types";
 
@@ -29,6 +29,8 @@ class GlyphSceneController implements SetupSceneController {
 	#selectList: SelectList;
 	#previewRequest = 0;
 	#committing = false;
+	/** Render line where the select list begins. */
+	#listRowStart = 0;
 
 	constructor(private readonly host: SetupSceneHost) {
 		this.#selectList = new SelectList(GLYPH_ITEMS, GLYPH_ITEMS.length, getSelectListTheme());
@@ -60,12 +62,28 @@ class GlyphSceneController implements SetupSceneController {
 		this.#selectList.handleInput(data);
 	}
 
+	/** Wheel moves the highlight (live preview); hover lights the row under the pointer; click confirms it. */
+	routeMouse(event: SgrMouseEvent, line: number, _col: number): void {
+		if (this.#committing) return;
+		if (event.wheel !== null) {
+			this.#selectList.handleWheel(event.wheel);
+			return;
+		}
+		const index = this.#selectList.hitTest(line - this.#listRowStart);
+		if (event.motion) {
+			this.#selectList.setHoverIndex(index ?? null);
+			return;
+		}
+		if (event.leftClick && index !== undefined) {
+			this.#selectList.clickItem(index);
+		}
+	}
+
 	render(width: number): readonly string[] {
-		return [
-			theme.fg("muted", "If a row shows boxes, tofu, or misaligned icons, pick another."),
-			"",
-			...this.#selectList.render(width),
-		];
+		const lines = [theme.fg("muted", "If a row shows boxes, tofu, or misaligned icons, pick another."), ""];
+		this.#listRowStart = lines.length;
+		lines.push(...this.#selectList.render(width));
+		return lines;
 	}
 
 	async #commit(preset: SymbolPreset): Promise<void> {

package/src/modes/setup-wizard/scenes/providers.ts

@@ -1,4 +1,4 @@
-import { TabBar } from "@oh-my-pi/pi-tui";
+import { type SgrMouseEvent, TabBar } from "@oh-my-pi/pi-tui";
 import { getTabBarTheme } from "../../shared";
 import { SignInTab } from "./sign-in";
 import type { SetupScene, SetupSceneController, SetupSceneHost, SetupTab } from "./types";
@@ -16,6 +16,8 @@ class ProvidersSceneController implements SetupSceneController {
 
 	#tabs: SetupTab[];
 	#tabBar: TabBar;
+	/** Lines the tab bar occupied in the last render (body starts one blank line below). */
+	#tabRowCount = 1;
 
 	constructor(host: SetupSceneHost) {
 		this.#tabs = [new SignInTab(host), new WebSearchTab(host)];
@@ -52,8 +54,40 @@ class ProvidersSceneController implements SetupSceneController {
 		tab.handleInput(data);
 	}
 
+	/**
+	 * Hit-test mouse reports against the last render: rows inside the tab bar
+	 * hover/switch tabs (suppressed while the active panel is modal, matching
+	 * keyboard tab cycling); everything else forwards to the active panel at
+	 * panel-local coordinates. Wheel always goes to the panel so scrolling
+	 * works regardless of pointer position.
+	 */
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		const tab = this.#activeTab();
+		if (event.wheel === null && line >= 0 && line < this.#tabRowCount) {
+			if (tab.modal) return;
+			const hit = this.#tabBar.tabAt(line, col);
+			if (event.motion) {
+				this.#tabBar.setHoverTab(hit && !hit.muted ? hit.id : null);
+			} else if (event.leftClick && hit) {
+				this.#tabBar.selectTab(hit.id);
+			}
+			return;
+		}
+		if (event.motion) this.#tabBar.setHoverTab(null);
+		const bodyLine = line - this.#tabRowCount - 1;
+		if (tab.routeMouse) {
+			tab.routeMouse(event, bodyLine, col);
+			return;
+		}
+		if (event.wheel !== null && !tab.modal) {
+			tab.handleInput(event.wheel === -1 ? "\x1b[A" : "\x1b[B");
+		}
+	}
+
 	render(width: number): readonly string[] {
-		return [...this.#tabBar.render(width), "", ...this.#activeTab().render(width)];
+		const tabLines = this.#tabBar.render(width);
+		this.#tabRowCount = tabLines.length;
+		return [...tabLines, "", ...this.#activeTab().render(width)];
 	}
 
 	dispose(): void {