@oh-my-pi/pi-tui 18.2.4 → 18.2.6

package/src/overlays/rewind-selector.ts

@@ -0,0 +1,499 @@
+/**
+ * Fullscreen esc-esc rewind selector.
+ *
+ * Replays the current session's branch with {@link ChatTranscriptBuilder} on
+ * the alternate screen (`ui.showOverlay(..., { fullscreen: true })`) and moves
+ * a dotted outline over the rendered transcript block the rewind would land
+ * on, instead of listing user messages in a detached picker. Entries that
+ * render nothing (notices, hidden custom messages, tool results folded into
+ * their call cards) are never outlined: results fold into the turn that
+ * rendered their call so rewinding a turn keeps its tool output, and the rest
+ * are skipped entirely.
+ *
+ * When the outlined turn has sibling branches in the session tree, the region
+ * below the divergence renders as a horizontal strip of half-width columns —
+ * the current path first, each alternate branch beside it — and Left/Right
+ * slide between them with an eased camera animation. Sibling columns are
+ * fully rendered transcripts of that branch's most-recent path, built lazily
+ * and cached per divergence.
+ *
+ * Keys: Up/Down step through rendered items in transcript order (within the
+ * active column when a strip is open), Left/Right slide between branch
+ * variants at a fork and jump between user turns elsewhere, Enter rewinds to
+ * the outlined item, Esc cancels.
+ */
+import type { AgentTool } from "@oh-my-pi/pi-agent-core";
+import {
+	type Component,
+	matchesKey,
+	padding,
+	routeSgrMouseInput,
+	sliceByColumn,
+	type TUI,
+	truncateToWidth,
+} from "../index";
+import type { MessageRenderer } from "../chat/extension-types";
+import type { TranscriptEntryLike as TranscriptEntry } from "../chat/transcript-entry";
+import { theme } from "../theme/theme";
+import { matchesAppToolsExpand, matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../keybinding-matchers";
+import { ChatTranscriptBuilder } from "../chat/chat-transcript-builder";
+import { TranscriptBrowser, type TranscriptBrowserFrame } from "../chat/transcript-browser";
+import { padToWidth } from "../render/utils";
+import {
+	appendOutlineEntries,
+	type ComposedColumn,
+	composeOutlineColumn,
+	type OutlineTarget,
+	isUserTurnEntry,
+	outlineVisibility,
+	positionRail,
+	userTurnLabel,
+} from "../chat/transcript-outline";
+
+/** One alternate branch at a divergence: its root and message path root → most-recent leaf. */
+export interface BranchVariantPath {
+	rootId: string;
+	entries: TranscriptEntry[];
+}
+
+export interface RewindSelectorDeps {
+	ui: TUI;
+	getTool?: (name: string) => AgentTool | undefined;
+	/** Whether the active registry entry came from a built-in factory. */
+	isBuiltInTool?: (name: string) => boolean;
+	getMessageRenderer?: (customType: string) => MessageRenderer | undefined;
+	cwd: string;
+	hideThinkingBlock?: () => boolean;
+	proseOnlyThinking?: () => boolean;
+	linkTargets?: ReadonlyMap<string, string>;
+	requestRender: () => void;
+	/** Sibling branch paths of `entryId`'s turn (excluding the turn itself). */
+	siblingPaths?: (entryId: string) => BranchVariantPath[];
+	/** Rewind the session to `entryId` (a message entry anywhere in the tree). */
+	onSelect: (entryId: string) => void;
+	onCancel: () => void;
+}
+
+/** Lazily built transcript column for one alternate branch. */
+interface SiblingColumn {
+	rootId: string;
+	builder: ChatTranscriptBuilder;
+	targets: OutlineTarget[];
+	/** Short label for the column header: the branch's first user prompt. */
+	label: string;
+}
+
+/** Blank columns between branch-strip columns. */
+const STRIP_GAP = 2;
+/** Duration of the branch-swap camera slide. */
+const SLIDE_MS = 160;
+
+export class RewindSelectorComponent implements Component {
+	#builder: ChatTranscriptBuilder;
+	#browser: TranscriptBrowser;
+	#targets: OutlineTarget[] = [];
+	#selected = 0;
+	/** Per-main-target "renders at least one non-blank row", refreshed each frame. */
+	#mainVisible: boolean[] | undefined;
+	/** Same, for the active sibling column. */
+	#siblingVisible: boolean[] | undefined;
+	#expanded = false;
+
+	// Branch strip: present when the selected turn has sibling branches.
+	// Column 0 is the current path; siblings follow in tree order.
+	#variantCache = new Map<string, SiblingColumn[]>();
+	/** 0 = current path column; 1..n = sibling column index + 1. */
+	#activeVariant = 0;
+	/** Selected target within the active sibling column. */
+	#siblingSelected = 0;
+	/** Camera slide between variant positions (fractional column index). */
+	#slide: { from: number; to: number; startedAt: number } | undefined;
+	#slideTimer: NodeJS.Timeout | undefined;
+
+	constructor(
+		entries: TranscriptEntry[],
+		private readonly deps: RewindSelectorDeps,
+	) {
+		this.#builder = this.#newBuilder();
+		this.#targets = appendOutlineEntries(this.#builder, entries);
+		this.#selected = Math.max(0, this.#targets.length - 1);
+		this.#browser = new TranscriptBrowser({
+			getHeight: () => this.deps.ui.terminal?.rows || process.stdout.rows || 40,
+			frame: context => this.#frame(context.contentWidth),
+		});
+	}
+
+	/** Number of selectable rewind points on the current path; hosts skip mounting when zero. */
+	get targetCount(): number {
+		return this.#targets.length;
+	}
+
+	#newBuilder(): ChatTranscriptBuilder {
+		return new ChatTranscriptBuilder({
+			ui: this.deps.ui,
+			getTool: this.deps.getTool,
+			isBuiltInTool: this.deps.isBuiltInTool,
+			getMessageRenderer: this.deps.getMessageRenderer,
+			cwd: this.deps.cwd,
+			hideThinkingBlock: this.deps.hideThinkingBlock,
+			proseOnlyThinking: this.deps.proseOnlyThinking,
+			linkTargets: this.deps.linkTargets,
+			requestRender: this.deps.requestRender,
+		});
+	}
+
+	invalidate(): void {
+		this.#builder.container.invalidate();
+		for (const columns of this.#variantCache.values()) {
+			for (const column of columns) column.builder.container.invalidate();
+		}
+		this.#browser.invalidate();
+	}
+
+	dispose(): void {
+		this.#stopSlide();
+		this.#builder.dispose();
+		for (const columns of this.#variantCache.values()) {
+			for (const column of columns) column.builder.dispose();
+		}
+		this.#variantCache.clear();
+	}
+
+	// ========================================================================
+	// Branch strip
+	// ========================================================================
+
+	/** Sibling columns for the selected turn, built lazily and cached per divergence. */
+	#stripColumns(): SiblingColumn[] {
+		const target = this.#targets[this.#selected];
+		if (!target || !this.deps.siblingPaths) return [];
+		const cached = this.#variantCache.get(target.turnId);
+		if (cached) return cached;
+		const columns: SiblingColumn[] = [];
+		for (const sibling of this.deps.siblingPaths(target.turnId)) {
+			if (sibling.entries.length === 0) continue;
+			const builder = this.#newBuilder();
+			builder.setExpanded(this.#expanded);
+			const targets = appendOutlineEntries(builder, sibling.entries);
+			const firstUser = sibling.entries.find(isUserTurnEntry);
+			const label = (firstUser && userTurnLabel(firstUser)) || sibling.rootId;
+			columns.push({ rootId: sibling.rootId, builder, targets, label });
+		}
+		this.#variantCache.set(target.turnId, columns);
+		return columns;
+	}
+
+	/** The target the dotted outline currently rests on. */
+	#outlinedTarget(): OutlineTarget | undefined {
+		if (this.#activeVariant > 0) {
+			return this.#stripColumns()[this.#activeVariant - 1]?.targets[this.#siblingSelected];
+		}
+		return this.#targets[this.#selected];
+	}
+
+	#slideTo(variant: number): void {
+		const now = Date.now();
+		const from = this.#slidePosition(now);
+		this.#slide = { from, to: variant, startedAt: now };
+		this.#activeVariant = variant;
+		this.#slideTimer ??= setInterval(() => {
+			if (!this.#slide || Date.now() - this.#slide.startedAt >= SLIDE_MS) this.#stopSlide();
+			this.deps.requestRender();
+		}, 16);
+		this.deps.requestRender();
+	}
+
+	#stopSlide(): void {
+		this.#slide = undefined;
+		if (this.#slideTimer !== undefined) {
+			clearInterval(this.#slideTimer);
+			this.#slideTimer = undefined;
+		}
+	}
+
+	/** Fractional variant position of the camera at `now` (eased). */
+	#slidePosition(now: number): number {
+		if (!this.#slide) return this.#activeVariant;
+		const t = Math.min(1, (now - this.#slide.startedAt) / SLIDE_MS);
+		const eased = 1 - (1 - t) ** 3;
+		return this.#slide.from + (this.#slide.to - this.#slide.from) * eased;
+	}
+
+	// ========================================================================
+	// Input
+	// ========================================================================
+
+	handleInput(data: string): void {
+		if (data.startsWith("\x1b[<")) {
+			routeSgrMouseInput(data, event => {
+				if (event.wheel !== null) {
+					// A wheel notch at either end moves nothing: repainting it
+					// anyway makes the frame twitch under a fast wheel.
+					if (this.#browser.scroll(event.wheel * 3)) this.deps.requestRender();
+				}
+				return true;
+			});
+			return;
+		}
+		if (matchesSelectCancel(data) || matchesKey(data, "escape")) {
+			this.deps.onCancel();
+			return;
+		}
+		if (matchesAppToolsExpand(data)) {
+			this.#expanded = !this.#expanded;
+			this.#builder.setExpanded(this.#expanded);
+			for (const columns of this.#variantCache.values()) {
+				for (const column of columns) column.builder.setExpanded(this.#expanded);
+			}
+			this.deps.requestRender();
+			return;
+		}
+		if (matchesSelectUp(data)) {
+			this.#moveVertical(-1);
+			return;
+		}
+		if (matchesSelectDown(data)) {
+			this.#moveVertical(1);
+			return;
+		}
+		if (matchesKey(data, "left")) {
+			if (this.#activeVariant > 0) this.#slideTo(this.#activeVariant - 1);
+			else this.#move(-1, target => target.isUserTurn);
+			return;
+		}
+		if (matchesKey(data, "right")) {
+			const columns = this.#stripColumns();
+			if (this.#activeVariant < columns.length) {
+				this.#siblingSelected = 0;
+				this.#slideTo(this.#activeVariant + 1);
+			} else if (this.#activeVariant === 0) {
+				this.#move(1, target => target.isUserTurn);
+			}
+			return;
+		}
+		if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
+			const target = this.#outlinedTarget();
+			if (target) this.deps.onSelect(target.entryId);
+			return;
+		}
+		// Page/home/end/shift+arrow scrolling without moving the selection.
+		if (this.#browser.handleScrollKey(data)) {
+			this.deps.requestRender();
+		}
+	}
+
+	/** Up/Down: step within the active column; leaving a sibling column's top exits the strip. */
+	#moveVertical(delta: -1 | 1): void {
+		if (this.#activeVariant > 0) {
+			const targets = this.#stripColumns()[this.#activeVariant - 1]?.targets ?? [];
+			let index = this.#siblingSelected + delta;
+			while (index >= 0 && index < targets.length && this.#siblingVisible?.[index] === false) index += delta;
+			if (index >= 0 && index < targets.length) {
+				this.#siblingSelected = index;
+				this.deps.requestRender();
+			} else if (delta === -1) {
+				// Off the top of an alternate: return to the current path above the fork.
+				this.#activeVariant = 0;
+				this.#siblingSelected = 0;
+				this.#stopSlide();
+				this.#move(-1, () => true);
+			}
+			return;
+		}
+		this.#move(delta, () => true);
+	}
+
+	/** Step the main selection by `delta` to the nearest visible target passing `accept`. */
+	#move(delta: -1 | 1, accept: (target: OutlineTarget) => boolean): void {
+		let index = this.#selected + delta;
+		while (index >= 0 && index < this.#targets.length) {
+			if (this.#isMainSelectable(index) && accept(this.#targets[index]!)) {
+				this.#selected = index;
+				this.#activeVariant = 0;
+				this.#siblingSelected = 0;
+				this.#stopSlide();
+				this.deps.requestRender();
+				return;
+			}
+			index += delta;
+		}
+	}
+
+	#isMainSelectable(index: number): boolean {
+		return this.#mainVisible?.[index] ?? true;
+	}
+
+	// ========================================================================
+	// Render
+	// ========================================================================
+
+	render(width: number): readonly string[] {
+		return this.#browser.render(width);
+	}
+
+	#frame(contentWidth: number): TranscriptBrowserFrame {
+		// The outline consumes two columns each side ("┆ " / " ┆"), unselected
+		// rows a matching two-column left gutter so blocks never shift while stepping.
+		const children = this.#builder.container.children;
+		const prepared = this.#browser.prepareOutline(children, this.#targets, this.#selected, contentWidth);
+		this.#mainVisible = prepared.visible;
+		if (prepared.selected !== this.#selected) {
+			// The current target collapsed (e.g. expansion toggle): rest on the
+			// nearest visible one and leave the strip.
+			this.#selected = prepared.selected;
+			this.#activeVariant = 0;
+			this.#siblingSelected = 0;
+		}
+
+		const columns = this.#stripColumns();
+		const composed =
+			columns.length > 0
+				? this.#renderStrip(prepared.childRows, columns, contentWidth)
+				: this.#browser.composeOutline({
+						children,
+						targets: this.#targets,
+						selected: this.#selected,
+						columnWidth: contentWidth,
+						prepared,
+					}).column;
+		const position = this.#targets.length > 0 ? `${this.#selected + 1}/${this.#targets.length}  ` : "";
+		const lateral = columns.length > 0 ? "←/→ branches" : "←/→ user turns";
+		return {
+			header: [
+				`${theme.icon.rewind} ${theme.bold("Rewind")}${theme.sep.dot}${theme.fg("dim", "pick the point to continue from")}`,
+			],
+			body: {
+				lines: composed.lines,
+				anchor: this.#outlineAnchor(composed),
+			},
+			footer: [theme.fg("dim", `${position}↑/↓ step  ${lateral}  enter rewind  ctrl+o expand  esc cancel`)],
+		};
+	}
+
+	/** Selection anchor keyed by the outlined turn/sibling identity plus its composed range. */
+	#outlineAnchor(composed: ComposedColumn): { id: string; start: number; end: number } | undefined {
+		if (composed.selStart < 0) return undefined;
+		const outlined = this.#outlinedTarget();
+		const id =
+			this.#activeVariant > 0
+				? `rewind:sibling:${this.#stripColumns()[this.#activeVariant - 1]?.rootId ?? this.#activeVariant}:${outlined?.entryId ?? this.#siblingSelected}`
+				: `rewind:main:${outlined?.turnId ?? this.#selected}`;
+		return { id, start: composed.selStart, end: composed.selEnd };
+	}
+
+	/**
+	 * Shared prefix at full width, then the divergence as a camera-positioned
+	 * strip of half-width branch columns (current path first, siblings after).
+	 */
+	#renderStrip(mainRows: (readonly string[])[], columns: SiblingColumn[], contentWidth: number): ComposedColumn {
+		const anchor = this.#targets[this.#selected]!;
+		const colWidth = Math.max(24, Math.floor((contentWidth - STRIP_GAP) / 2));
+		const count = columns.length + 1;
+
+		// Shared history above the fork, full width, never outlined.
+		const prefix = composeOutlineColumn(mainRows, 0, anchor.start, [], -1, contentWidth, undefined);
+
+		// Column 0: the current path from the fork down, re-rendered at column width.
+		const suffixRows = this.#browser.renderOutlineRows(
+			this.#builder.container.children.slice(anchor.start),
+			colWidth,
+		);
+		const suffixTargets = this.#targets.slice(this.#selected).map(target => ({
+			...target,
+			start: target.start - anchor.start,
+			end: target.end - anchor.start,
+		}));
+		const composedColumns: ComposedColumn[] = [
+			composeOutlineColumn(
+				suffixRows,
+				0,
+				suffixRows.length,
+				suffixTargets,
+				this.#activeVariant === 0 ? 0 : -1,
+				colWidth,
+				this.#columnHeader(0, count, "current", colWidth),
+			),
+		];
+		for (let index = 0; index < columns.length; index++) {
+			const column = columns[index]!;
+			const rows = this.#browser.renderOutlineRows(column.builder.container.children, colWidth);
+			if (this.#activeVariant === index + 1) {
+				this.#siblingVisible = outlineVisibility(rows, column.targets);
+			}
+			composedColumns.push(
+				composeOutlineColumn(
+					rows,
+					0,
+					rows.length,
+					column.targets,
+					this.#activeVariant === index + 1 ? this.#siblingSelected : -1,
+					colWidth,
+					this.#columnHeader(index + 1, count, column.label, colWidth),
+				),
+			);
+		}
+
+		// Camera over the strip: keep the active (possibly mid-slide) column centered.
+		const stride = colWidth + STRIP_GAP;
+		const totalWidth = count * colWidth + (count - 1) * STRIP_GAP;
+		const cameraAt = (position: number) =>
+			Math.max(
+				0,
+				Math.min(position * stride - (contentWidth - colWidth) / 2, Math.max(0, totalWidth - contentWidth)),
+			);
+		const position = this.#slidePosition(Date.now());
+		const camera = cameraAt(position);
+
+		const height = Math.max(...composedColumns.map(column => column.lines.length));
+		const lines = prefix.lines;
+		// With more branches than the window fits, a dot rail tracks the active
+		// column and dim ellipses flag content beyond the visible edge.
+		// Edge markers follow the slide's destination, not the eased camera,
+		// so they flip in step with the dot rail.
+		if (count > 2) {
+			const settled = cameraAt(this.#activeVariant);
+			lines.push(
+				positionRail(
+					count,
+					this.#activeVariant,
+					settled > 0.5,
+					settled + contentWidth < totalWidth - 0.5,
+					contentWidth,
+				),
+				"",
+			);
+		}
+		const active = composedColumns[this.#activeVariant]!;
+		const selStart = active.selStart >= 0 ? lines.length + active.selStart : -1;
+		const selEnd = active.selEnd >= 0 ? lines.length + active.selEnd : -1;
+		for (let row = 0; row < height; row++) {
+			let line = "";
+			let filled = 0;
+			for (let index = 0; index < count; index++) {
+				const x0 = index * stride - camera;
+				const x1 = x0 + colWidth;
+				const visible0 = Math.max(0, x0);
+				const visible1 = Math.min(contentWidth, x1);
+				if (visible1 <= visible0) continue;
+				const source = colWidth > 0 ? padToWidth(composedColumns[index]!.lines[row] ?? "", colWidth) : "";
+				const slice = sliceByColumn(source, visible0 - x0, visible1 - visible0, true);
+				line +=
+					padding(Math.max(0, visible0 - filled)) +
+					(visible1 - visible0 > 0 ? padToWidth(slice, visible1 - visible0) : "");
+				filled = visible1;
+			}
+			lines.push(line);
+		}
+		return { lines, selStart, selEnd };
+	}
+
+	/** Two caption rows leading a strip column: `⎇ i/n · label` plus a spacer. */
+	#columnHeader(index: number, count: number, label: string, columnWidth: number): string[] {
+		const caption = truncateToWidth(
+			`${theme.icon.branch} ${index + 1}/${count} ${theme.sep.dot} ${label}`,
+			columnWidth - 2,
+		);
+		const active = index === this.#activeVariant;
+		return [` ${theme.fg(active ? "accent" : "dim", caption)}`, ""];
+	}
+}

package/src/overlays/running-subagent-badge.ts

@@ -0,0 +1,19 @@
+import type { AgentHubRegistry } from "./agent-hub-types";
+
+export interface RunningSubagentRegistrySource<T extends AgentHubRegistry = AgentHubRegistry> {
+	agentRegistry: T;
+}
+
+export function getRunningSubagentBadgeRegistry<T extends AgentHubRegistry>(
+	collabGuest: RunningSubagentRegistrySource<T> | undefined,
+	localRegistry: T,
+): T {
+	return collabGuest?.agentRegistry ?? localRegistry;
+}
+
+export function getRunningSubagentBadgeAgentIds(registry: AgentHubRegistry): string[] {
+	return registry
+		.list()
+		.filter(ref => ref.kind === "sub" && ref.status === "running")
+		.map(ref => ref.id);
+}

package/src/overlays/session-account-selector.ts

@@ -0,0 +1,68 @@
+import { type SelectItem, SelectList, type SgrMouseEvent } from "../index";
+import { getSelectListTheme } from "../theme/theme";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { routeSelectListMouseWithTopBorder } from "../chrome/select-list-mouse-routing";
+
+const ACCOUNT_SELECTOR_MAX_VISIBLE = 10;
+
+/** Stored account identity rendered and matched by the session account picker. */
+export interface SessionPinAccount {
+	position: number;
+	credentialId: number;
+	accountId?: string;
+	email?: string;
+	projectId?: string;
+	enterpriseUrl?: string;
+	orgId?: string;
+	orgName?: string;
+	active: boolean;
+	label: string;
+}
+
+/** Account picker opened by `/session pin` for the current model provider. */
+export class SessionAccountSelectorComponent extends OverlayPanel {
+	#selectList: SelectList;
+
+	constructor(
+		providerName: string,
+		accounts: readonly SessionPinAccount[],
+		onSelect: (account: SessionPinAccount) => void,
+		onCancel: () => void,
+	) {
+		super(`Select a ${providerName} account for this session`);
+		const accountsByValue = new Map<string, SessionPinAccount>();
+		const items: SelectItem[] = accounts.map(account => {
+			const value = String(account.credentialId);
+			accountsByValue.set(value, account);
+			return {
+				value,
+				label: account.label,
+				description: account.active ? "active for this session" : undefined,
+			};
+		});
+
+		this.#selectList = new SelectList(
+			items,
+			Math.min(Math.max(items.length, 1), ACCOUNT_SELECTOR_MAX_VISIBLE),
+			getSelectListTheme(),
+		);
+		const activeIndex = accounts.findIndex(account => account.active);
+		if (activeIndex >= 0) this.#selectList.setSelectedIndex(activeIndex);
+		this.#selectList.onSelect = item => {
+			const account = accountsByValue.get(item.value);
+			if (account) onSelect(account);
+		};
+		this.#selectList.onCancel = onCancel;
+		this.addChild(this.#selectList);
+	}
+
+	/** Forward keyboard navigation and cancellation when the wrapper owns focus. */
+	handleInput(keyData: string): void {
+		this.#selectList.handleInput(keyData);
+	}
+
+	/** Route mouse selection through the title rows into the account list. */
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		routeSelectListMouseWithTopBorder(this.#selectList, event, line, col);
+	}
+}

package/src/overlays/session-info-overlay.ts

@@ -0,0 +1,96 @@
+import { type Component, Ellipsis, matchesKey, ScrollView, Text, truncateToWidth } from "../index";
+import { theme } from "../theme/theme";
+import { matchesSelectCancel } from "../keybinding-matchers";
+import { OverlayPanel, PanelDivider, PanelRows } from "../chrome/overlay-box";
+
+const FOOTER_HINT = "↑/↓ scroll · Esc close";
+const PANEL_CHROME_ROWS = 4;
+
+/** Terminal surface needed to size the session info viewport. */
+export interface SessionInfoOverlayHost {
+	readonly terminal: {
+		readonly rows: number;
+	};
+}
+
+/** Focused, dismissible `/session` information panel. */
+export class SessionInfoOverlay implements Component {
+	readonly #host: SessionInfoOverlayHost;
+	readonly #onClose: () => void;
+	readonly #panel: OverlayPanel;
+	readonly #info: Text;
+	readonly #scrollView: ScrollView;
+	readonly #footer: PanelRows;
+	#lastInfoWidth: number | undefined;
+	#lastInfoLines: readonly string[] | undefined;
+	#lastHeight: number | undefined;
+
+	constructor(host: SessionInfoOverlayHost, info: string, onClose: () => void) {
+		this.#host = host;
+		this.#onClose = onClose;
+		this.#info = new Text(info, 0, 0);
+		this.#scrollView = new ScrollView([], {
+			height: 0,
+			scrollbar: "auto",
+			ellipsis: Ellipsis.Omit,
+			theme: {
+				track: text => theme.fg("dim", text),
+				thumb: text => theme.fg("accent", text),
+			},
+		});
+		this.#footer = new PanelRows();
+		this.#footer.setHeight(1);
+		this.#panel = new OverlayPanel("Session Info");
+		this.#panel.addChild(this.#scrollView);
+		this.#panel.addChild(new PanelDivider());
+		this.#panel.addChild(this.#footer);
+	}
+
+	handleInput(data: string): void {
+		if (matchesSelectCancel(data) || matchesKey(data, "escape") || matchesKey(data, "esc")) {
+			this.#onClose();
+			return;
+		}
+		this.#scrollView.handleScrollKey(data);
+	}
+
+	invalidate(): void {
+		this.#info.invalidate();
+		this.#lastInfoWidth = undefined;
+		this.#lastInfoLines = undefined;
+		this.#lastHeight = undefined;
+		this.#panel.invalidate();
+	}
+
+	setIgnoreTight(ignore: boolean): this {
+		this.#info.setIgnoreTight(ignore);
+		this.#panel.setIgnoreTight(ignore);
+		return this;
+	}
+
+	dispose(): void {
+		this.#panel.dispose();
+	}
+
+	render(width: number): readonly string[] {
+		const innerWidth = Math.max(1, width - 4);
+		this.#footer.setLines([theme.fg("dim", truncateToWidth(FOOTER_HINT, innerWidth))]);
+
+		const maxBodyHeight = Math.max(1, this.#host.terminal.rows - PANEL_CHROME_ROWS);
+		const fullWidthInfoLines = this.#info.render(innerWidth);
+		const infoWidth = fullWidthInfoLines.length > maxBodyHeight ? Math.max(1, innerWidth - 1) : innerWidth;
+		const infoLines = infoWidth === innerWidth ? fullWidthInfoLines : this.#info.render(infoWidth);
+		if (this.#lastInfoWidth !== infoWidth || this.#lastInfoLines !== infoLines) {
+			this.#scrollView.setLines(infoLines);
+			this.#lastInfoWidth = infoWidth;
+			this.#lastInfoLines = infoLines;
+		}
+
+		const height = Math.max(1, Math.min(infoLines.length, maxBodyHeight));
+		if (this.#lastHeight !== height) {
+			this.#scrollView.setHeight(height);
+			this.#lastHeight = height;
+		}
+		return this.#panel.render(width);
+	}
+}