@oh-my-pi/pi-coding-agent 15.12.3 → 15.13.0

package/src/modes/components/compaction-summary-message.ts

@@ -1,22 +1,18 @@
 import { Box, type Component, Markdown } from "@oh-my-pi/pi-tui";
 import { getMarkdownTheme, theme } from "../../modes/theme/theme";
-import type { CompactionSummaryMessage } from "../../session/messages";
+import type { CompactionSummaryMessage, CustomMessage } from "../../session/messages";
 
-/**
- * Compaction point in the transcript, rendered as a slim horizontal divider:
- *
- *   ──────── 📷 compacted · ctrl+o ────────
- *
- * The conversation above the divider stays visible (display transcript keeps
- * full history); only the LLM context was reset. Expanding (ctrl+o) reveals
- * the compaction summary below the divider.
- */
-export class CompactionSummaryMessageComponent implements Component {
+interface SummaryDividerOptions {
+	label: () => string;
+	detailMarkdown: () => string;
+}
+
+class SummaryDividerComponent implements Component {
 	#expanded = false;
 	#cache?: { width: number; lines: string[] };
 	#detail?: Box;
 
-	constructor(private readonly message: CompactionSummaryMessage) {}
+	constructor(private readonly options: SummaryDividerOptions) {}
 
 	setExpanded(expanded: boolean): void {
 		if (this.#expanded === expanded) return;
@@ -44,7 +40,7 @@ export class CompactionSummaryMessageComponent implements Component {
 
 	#divider(width: number): string {
 		const rule = theme.tree.horizontal;
-		const label = `${theme.icon.camera} compacted`;
+		const label = this.options.label();
 		// sep.dot ships pre-padded (" · "); trim so the hint joins with single spaces.
 		const hint = `${theme.sep.dot.trim()} ctrl+o`;
 		const plainWidth = Bun.stringWidth(`${label} ${hint}`, { countAnsiEscapeCodes: false });
@@ -66,22 +62,125 @@ export class CompactionSummaryMessageComponent implements Component {
 	#detailBox(): Box {
 		if (this.#detail) return this.#detail;
 		const box = new Box(1, 1, t => theme.bg("customMessageBg", t));
-		const tokenStr = this.message.tokensBefore.toLocaleString();
-		const frameCount = this.message.images?.length ?? 0;
-		const frameNote =
-			frameCount > 0 ? `\n\n_${frameCount} snapcompact frame${frameCount === 1 ? "" : "s"} attached_` : "";
 		box.addChild(
-			new Markdown(
-				`**Compacted from ${tokenStr} tokens**\n\n${this.message.summary}${frameNote}`,
-				0,
-				0,
-				getMarkdownTheme(),
-				{
-					color: (text: string) => theme.fg("customMessageText", text),
-				},
-			),
+			new Markdown(this.options.detailMarkdown(), 0, 0, getMarkdownTheme(), {
+				color: (text: string) => theme.fg("customMessageText", text),
+			}),
 		);
 		this.#detail = box;
 		return box;
 	}
 }
+
+/**
+ * Compaction point in the transcript, rendered as a slim horizontal divider:
+ *
+ *   ──────── 📷 compacted · ctrl+o ────────
+ *
+ * The conversation above the divider stays visible (display transcript keeps
+ * full history); only the LLM context was reset. Expanding (ctrl+o) reveals
+ * the compaction summary below the divider.
+ */
+export class CompactionSummaryMessageComponent implements Component {
+	#divider: SummaryDividerComponent;
+
+	constructor(private readonly message: CompactionSummaryMessage) {
+		this.#divider = new SummaryDividerComponent({
+			label: () => `${theme.icon.camera} compacted`,
+			detailMarkdown: () => this.#detailMarkdown(),
+		});
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.#divider.setExpanded(expanded);
+	}
+
+	invalidate(): void {
+		this.#divider.invalidate();
+	}
+
+	render(width: number): readonly string[] {
+		return this.#divider.render(width);
+	}
+
+	#detailMarkdown(): string {
+		const tokenStr = this.message.tokensBefore.toLocaleString();
+		const frameCount = this.message.images?.length ?? 0;
+		const frameNote =
+			frameCount > 0 ? `\n\n_${frameCount} snapcompact frame${frameCount === 1 ? "" : "s"} attached_` : "";
+		return `**Compacted from ${tokenStr} tokens**\n\n${this.message.summary}${frameNote}`;
+	}
+}
+
+/**
+ * Handoff is a compaction strategy too, but it is persisted as a custom message
+ * so the LLM sees the handoff-specific developer context. Render it with the
+ * same divider affordance as `/compact` instead of the generic `[handoff]` box.
+ */
+export class HandoffSummaryMessageComponent implements Component {
+	#divider: SummaryDividerComponent;
+
+	constructor(private readonly message: CustomMessage<unknown>) {
+		this.#divider = new SummaryDividerComponent({
+			label: () => `${theme.icon.context} handoff`,
+			detailMarkdown: () => this.#detailMarkdown(),
+		});
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.#divider.setExpanded(expanded);
+	}
+
+	invalidate(): void {
+		this.#divider.invalidate();
+	}
+
+	render(width: number): readonly string[] {
+		return this.#divider.render(width);
+	}
+
+	#detailMarkdown(): string {
+		const document = extractHandoffDocument(getCustomMessageText(this.message));
+		return `**Handoff context**\n\n${document || "_No handoff content._"}`;
+	}
+}
+
+export function createHandoffSummaryMessageComponent(
+	message: CustomMessage<unknown>,
+	expanded: boolean,
+): HandoffSummaryMessageComponent | undefined {
+	if (message.customType !== "handoff" || !message.display) return undefined;
+	const component = new HandoffSummaryMessageComponent(message);
+	component.setExpanded(expanded);
+	return component;
+}
+
+function getCustomMessageText(message: CustomMessage<unknown>): string {
+	if (typeof message.content === "string") return message.content;
+	let firstText: string | undefined;
+	let parts: string[] | undefined;
+	for (const content of message.content) {
+		if (content.type !== "text") continue;
+		if (firstText === undefined) {
+			firstText = content.text;
+			continue;
+		}
+		if (parts === undefined) {
+			parts = [firstText];
+		}
+		parts.push(content.text);
+	}
+	return parts === undefined ? (firstText ?? "") : parts.join("\n");
+}
+
+function extractHandoffDocument(text: string): string {
+	const openTag = "<handoff-context>";
+	const closeTag = "</handoff-context>";
+	const openIndex = text.indexOf(openTag);
+	if (openIndex === -1) return text.trim();
+
+	const contentStart = openIndex + openTag.length;
+	const closeIndex = text.indexOf(closeTag, contentStart);
+	const document = closeIndex === -1 ? text.slice(contentStart) : text.slice(contentStart, closeIndex);
+	return document.trim();
+}

package/src/modes/components/custom-editor.test.ts

@@ -0,0 +1,96 @@
+import { afterEach, beforeAll, describe, expect, it, vi } from "bun:test";
+import { $ } from "bun";
+import { getEditorTheme, initTheme } from "../theme/theme";
+import { CustomEditor, SPACE_HOLD_RELEASE_MS, SPACE_HOLD_THRESHOLD } from "./custom-editor";
+
+function makeEditor() {
+	const editor = new CustomEditor(getEditorTheme());
+	const events: string[] = [];
+	editor.sttHoldEnabled = () => true;
+	editor.onSpaceHoldStart = () => events.push("start");
+	editor.onSpaceHoldEnd = () => events.push("end");
+	return { editor, events };
+}
+
+function holdSpace(editor: CustomEditor, count: number): void {
+	for (let i = 0; i < count; i++) editor.handleInput(" ");
+}
+
+async function decorateInFreshProcess(text: string): Promise<string> {
+	const customEditorUrl = new URL("./custom-editor.ts", import.meta.url).href;
+	const script = `
+import { CustomEditor } from ${JSON.stringify(customEditorUrl)};
+const editor = new CustomEditor({});
+process.stdout.write(editor.decorateText(${JSON.stringify(text)}));
+`;
+	const child = await $`bun -e ${script}`.quiet().nothrow();
+	const stdout = child.stdout.toString();
+	const stderr = child.stderr.toString();
+	if (child.exitCode !== 0) throw new Error(stderr || stdout || `decorate subprocess exited with ${child.exitCode}`);
+	return stdout;
+}
+
+describe("CustomEditor placeholder decoration", () => {
+	it("renders paste placeholders before theme initialization", async () => {
+		const output = await decorateInFreshProcess("[Paste #1, +30 lines]");
+		expect(output).toBe("[Paste #1, +30 lines]");
+	});
+
+	it("renders image placeholders before theme initialization", async () => {
+		const output = await decorateInFreshProcess("[Image #1]");
+		expect(output).toBe("[Image #1]");
+	});
+});
+
+describe("CustomEditor space-hold push-to-talk", () => {
+	beforeAll(async () => {
+		await initTheme();
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	it("inserts spaces normally below the hold threshold", () => {
+		const { editor, events } = makeEditor();
+		holdSpace(editor, SPACE_HOLD_THRESHOLD);
+		expect(editor.getText()).toBe(" ".repeat(SPACE_HOLD_THRESHOLD));
+		expect(events).toEqual([]);
+	});
+
+	it("tracks back the space burst and drives the hold lifecycle", () => {
+		vi.useFakeTimers();
+		const { editor, events } = makeEditor();
+		editor.handleInput("h");
+		editor.handleInput("i");
+		// Crossing the threshold deletes the optimistically-inserted spaces and starts recording,
+		// leaving only the pre-burst text behind.
+		holdSpace(editor, SPACE_HOLD_THRESHOLD + 1);
+		expect(editor.getText()).toBe("hi");
+		expect(events).toEqual(["start"]);
+		// Continued auto-repeat while the bar is held is swallowed: no spam, no re-trigger.
+		holdSpace(editor, 5);
+		expect(editor.getText()).toBe("hi");
+		expect(events).toEqual(["start"]);
+		// An idle gap with no further repeats means the bar was released -> stop + transcribe.
+		vi.advanceTimersByTime(SPACE_HOLD_RELEASE_MS + 1);
+		expect(events).toEqual(["start", "end"]);
+	});
+
+	it("does not trigger when a non-space breaks the run", () => {
+		const { editor, events } = makeEditor();
+		holdSpace(editor, SPACE_HOLD_THRESHOLD);
+		editor.handleInput("x");
+		holdSpace(editor, SPACE_HOLD_THRESHOLD);
+		expect(events).toEqual([]);
+		expect(editor.getText()).toBe(`${" ".repeat(SPACE_HOLD_THRESHOLD)}x${" ".repeat(SPACE_HOLD_THRESHOLD)}`);
+	});
+
+	it("leaves the space bar typing normally when the gesture is disabled", () => {
+		const { editor, events } = makeEditor();
+		editor.sttHoldEnabled = () => false;
+		holdSpace(editor, SPACE_HOLD_THRESHOLD + 5);
+		expect(editor.getText()).toBe(" ".repeat(SPACE_HOLD_THRESHOLD + 5));
+		expect(events).toEqual([]);
+	});
+});

package/src/modes/components/custom-editor.ts

@@ -1,8 +1,9 @@
 import { addKeyAliases, canonicalKeyId, Editor, type KeyId, parseKey, parseKittySequence } from "@oh-my-pi/pi-tui";
 import type { AppKeybinding } from "../../config/keybindings";
+import { isSettingsInitialized, settings } from "../../config/settings";
 import { imageReferenceHyperlink, PLACEHOLDER_REGEX, renderPlaceholders } from "../image-references";
-import { highlightMagicKeywords } from "../magic-keywords";
-import { theme } from "../theme/theme";
+import { hasMagicKeyword, highlightMagicKeywords } from "../magic-keywords";
+import { fgOrPlain } from "../theme/theme";
 
 type ConfigurableEditorAction = Extract<
 	AppKeybinding,
@@ -61,6 +62,14 @@ const BRACKETED_IMAGE_PATH_REGEX = /\.(?:png|jpe?g|gif|webp)$/i;
 const BRACKETED_IMAGE_PATH_BOUNDARY_REGEX = /\.(?:png|jpe?g|gif|webp)(?=$|["']?\s)/gi;
 const SHELL_ESCAPED_PATH_CHAR_REGEX = /\\([\\\s'"()[\]{}&;<>|?*!$`])/g;
 
+/** Plain spaces from one auto-repeat run that trigger the space-hold push-to-talk STT gesture.
+ *  Holding the space bar makes the terminal emit a burst of spaces; once more than this many land
+ *  in the editor we treat it as "space held", track them back out, and start recording. */
+export const SPACE_HOLD_THRESHOLD = 5;
+/** Idle gap (ms) after the last repeated space that counts as the space bar being released, ending
+ *  the push-to-talk recording. Must comfortably exceed the OS key-repeat interval. */
+export const SPACE_HOLD_RELEASE_MS = 250;
+
 function isPastedPathSeparator(char: string | undefined): boolean {
 	return char === undefined || char === " " || char === "\t" || char === "\r" || char === "\n";
 }
@@ -136,19 +145,85 @@ export class CustomEditor extends Editor {
 	 *  instead of corrupting `[Paste #1, +30 lines]` into plain text. */
 	override atomicTokenPattern = PLACEHOLDER_REGEX;
 
+	/** Magic-keyword shimmer cadence — drives one editor repaint every 70 ms while
+	 *  a keyword is on screen and the prompt is focused. ~14 frames/s is smooth
+	 *  without flooding the renderer. */
+	static readonly SHIMMER_FRAME_MS = 70;
+	/** Time for the gradient to sweep one full cycle across each keyword. */
+	static readonly SHIMMER_PERIOD_MS = 1800;
+
+	/** Per-render scratch flag: did any layout line in this render contain a magic
+	 *  keyword that should shimmer? Reset by {@link #scheduleShimmerIfNeeded} each
+	 *  time a frame is queued. */
+	#shimmerTimer: ReturnType<typeof setTimeout> | undefined;
+	/** Repaint hook the host wires once at construction. Called from the shimmer
+	 *  timer to request the next animation frame. Undefined when nobody is
+	 *  listening (tests, headless callers); the timer chain still self-cleans. */
+	#requestShimmerRepaint: (() => void) | undefined;
+
 	/** Gradient-highlight the "ultrathink" / "orchestrate" / "workflowz" keywords as the user types
 	 *  them, skipping any occurrence inside code spans, fenced blocks, or XML sections. Also make
-	 *  pasted image placeholders visually distinct and hyperlink them once their blob file exists. */
-	decorateText = (text: string): string =>
-		renderPlaceholders(text, {
-			renderText: value => highlightMagicKeywords(value),
+	 *  pasted image placeholders visually distinct and hyperlink them once their blob file exists.
+	 *  When the editor is focused, the buffer contains a magic keyword, and `magicKeywords.enabled`
+	 *  is on, the gradient shifts every frame to produce a Claude-Code-style shimmer; each render
+	 *  schedules the next frame, so losing focus, deleting the keyword, or flipping the setting
+	 *  stops the animation on its own. The static glow itself runs even when shimmering is gated
+	 *  off, matching existing behavior for the editor and sent bubbles. */
+	decorateText = (text: string): string => {
+		const animated = this.focused && this.#shimmerEnabled() && hasMagicKeyword(this.getText());
+		const phase = animated ? (Date.now() % CustomEditor.SHIMMER_PERIOD_MS) / CustomEditor.SHIMMER_PERIOD_MS : 0;
+		if (animated) this.#scheduleShimmerFrame();
+		return renderPlaceholders(text, {
+			renderText: value => highlightMagicKeywords(value, undefined, phase),
 			renderReference: (value, kind, index) =>
 				kind === "image"
 					? imageReferenceHyperlink(value, index, this.imageLinks, label =>
-							theme.fg("accent", `\x1b[1m\x1b[4m${label}\x1b[24m\x1b[22m`),
+							fgOrPlain("accent", label, `\x1b[1m\x1b[4m${label}\x1b[24m\x1b[22m`),
 						)
-					: theme.fg("accent", `\x1b[1m${value}\x1b[22m`),
+					: fgOrPlain("accent", value, `\x1b[1m${value}\x1b[22m`),
 		});
+	};
+
+	/** Optional test/host override for the magic-keyword shimmer gate. When
+	 *  defined, takes precedence over the global `magicKeywords.enabled` setting,
+	 *  letting tests assert the gating behaviour without mutating the
+	 *  process-wide Settings singleton (which races with parallel test files —
+	 *  see issue #2582). Production wires this through the host's Settings
+	 *  reader and updates it on the relevant setting change. */
+	magicKeywordsEnabledOverride: boolean | undefined;
+
+	/** Whether the shimmer should advance this frame. Defaults to "on" before
+	 *  settings have initialised (tests, early boot) so the animation does not
+	 *  silently disappear during a race; settings disabling the feature wins
+	 *  once they are loaded. An explicit `magicKeywordsEnabledOverride` overrides
+	 *  both paths. */
+	#shimmerEnabled(): boolean {
+		if (this.magicKeywordsEnabledOverride !== undefined) return this.magicKeywordsEnabledOverride;
+		return isSettingsInitialized() ? settings.get("magicKeywords.enabled") : true;
+	}
+
+	/** Bind the host's render request callback. Idempotent — the host wires this
+	 *  once after construction (and again after `setEditorComponent` swaps the
+	 *  editor). Passing `undefined` clears any pending frame. */
+	setShimmerRepaintHandler(handler: (() => void) | undefined): void {
+		this.#requestShimmerRepaint = handler;
+		if (!handler && this.#shimmerTimer) {
+			clearTimeout(this.#shimmerTimer);
+			this.#shimmerTimer = undefined;
+		}
+	}
+
+	/** Schedule one shimmer frame if none is already pending. The next render
+	 *  decides whether to schedule another, so the chain stops by itself when
+	 *  `focused` flips off or the keyword leaves the buffer. */
+	#scheduleShimmerFrame(): void {
+		if (this.#shimmerTimer || !this.#requestShimmerRepaint) return;
+		this.#shimmerTimer = setTimeout(() => {
+			this.#shimmerTimer = undefined;
+			this.#requestShimmerRepaint?.();
+		}, CustomEditor.SHIMMER_FRAME_MS);
+		this.#shimmerTimer.unref?.();
+	}
 	onEscape?: () => void;
 	onClear?: () => void;
 	onExit?: () => void;
@@ -178,9 +253,25 @@ export class CustomEditor extends Editor {
 	/** Called when left-arrow is pressed while the editor is empty (cursor necessarily at start). */
 	onLeftAtStart?: () => void;
 
+	/** Fired when a sustained space-bar hold is recognized — the push-to-talk STT start. The
+	 *  optimistically-typed spaces have already been deleted by the time this runs. */
+	onSpaceHoldStart?: () => void;
+	/** Fired when the held space bar is released (detected as an idle gap with no further repeated
+	 *  spaces) — the push-to-talk STT stop. */
+	onSpaceHoldEnd?: () => void;
+	/** Gate for the space-hold gesture. Returns false to keep the space bar inserting spaces
+	 *  normally; wired to `stt.enabled` so disabling STT restores plain space behavior. */
+	sttHoldEnabled?: () => boolean;
+
 	/** Custom key handlers from extensions and non-built-in app actions. */
 	#customKeyHandlers = new Map<KeyId, () => void>();
 	#customMatchKeys = new Map<string, () => void>();
+	/** Consecutive plain spaces inserted in the current run; any other key resets it. */
+	#spaceRunInserted = 0;
+	/** True while a recognized space-hold push-to-talk recording is in progress. */
+	#spaceHoldActive = false;
+	/** Idle timer that fires `onSpaceHoldEnd` once repeated spaces stop arriving. */
+	#spaceHoldTimer: NodeJS.Timeout | undefined;
 	#actionKeys = new Map<ConfigurableEditorAction, KeyId[]>(
 		Object.entries(DEFAULT_ACTION_KEYS).map(([action, keys]) => [action as ConfigurableEditorAction, [...keys]]),
 	);
@@ -238,6 +329,68 @@ export class CustomEditor extends Editor {
 		this.#rebuildCustomMatchKeys();
 	}
 
+	#spaceHoldGestureEnabled(): boolean {
+		return this.onSpaceHoldStart !== undefined && (this.sttHoldEnabled?.() ?? false) && !this.isShowingAutocomplete();
+	}
+
+	/** Drive the space-hold push-to-talk state machine. Returns true when the gesture consumed the
+	 *  input so it must not reach normal editing. Holding the space bar makes the terminal emit a
+	 *  burst of auto-repeat spaces; once more than {@link SPACE_HOLD_THRESHOLD} of them land we treat
+	 *  it as a hold, delete the spam, and start recording until the repeats stop. */
+	#handleSpaceHold(data: string, canonical: string | undefined): boolean {
+		const isSpace = canonical === "space";
+		if (this.#spaceHoldActive) {
+			if (isSpace) {
+				// Auto-repeat while held: swallow it and keep the release timer alive.
+				this.#armSpaceHoldReleaseTimer();
+				return true;
+			}
+			// Any non-space means the bar was released — stop recording, then let the key through.
+			this.#endSpaceHold();
+			return false;
+		}
+		if (!isSpace) {
+			this.#spaceRunInserted = 0;
+			return false;
+		}
+		if (!this.#spaceHoldGestureEnabled()) return false;
+		// A short tap should still type a normal space, so insert optimistically and count the run.
+		super.handleInput(data);
+		this.#spaceRunInserted++;
+		if (this.#spaceRunInserted > SPACE_HOLD_THRESHOLD) {
+			this.deleteBeforeCursor(this.#spaceRunInserted);
+			this.#spaceRunInserted = 0;
+			this.#beginSpaceHold();
+		}
+		return true;
+	}
+
+	#beginSpaceHold(): void {
+		this.#spaceHoldActive = true;
+		this.#armSpaceHoldReleaseTimer();
+		this.onSpaceHoldStart?.();
+	}
+
+	#armSpaceHoldReleaseTimer(): void {
+		if (this.#spaceHoldTimer) clearTimeout(this.#spaceHoldTimer);
+		this.#spaceHoldTimer = setTimeout(() => {
+			this.#spaceHoldTimer = undefined;
+			this.#endSpaceHold();
+		}, SPACE_HOLD_RELEASE_MS);
+		this.#spaceHoldTimer.unref?.();
+	}
+
+	#endSpaceHold(): void {
+		if (!this.#spaceHoldActive) return;
+		this.#spaceHoldActive = false;
+		this.#spaceRunInserted = 0;
+		if (this.#spaceHoldTimer) {
+			clearTimeout(this.#spaceHoldTimer);
+			this.#spaceHoldTimer = undefined;
+		}
+		this.onSpaceHoldEnd?.();
+	}
+
 	handleInput(data: string): void {
 		const kittyParsed = parseKittySequence(data);
 		if (kittyParsed && (kittyParsed.modifier & 64) !== 0 && this.onCapsLock) {
@@ -267,6 +420,9 @@ export class CustomEditor extends Editor {
 			return;
 		}
 
+		// Space-hold push-to-talk: a sustained space bar starts/stops STT instead of typing spaces.
+		if (this.#handleSpaceHold(data, canonical)) return;
+
 		if (canonical !== undefined) {
 			// Intercept configured image paste (async - fires and handles result)
 			if (this.#matchesAction(canonical, "app.clipboard.pasteImage") && this.onPasteImage) {

package/src/modes/components/index.ts

@@ -16,6 +16,7 @@ export * from "./hook-message";
 export * from "./hook-selector";
 export * from "./keybinding-hints";
 export * from "./login-dialog";
+export * from "./logout-account-selector";
 export * from "./model-selector";
 export * from "./oauth-selector";
 export * from "./queue-mode-selector";

package/src/modes/components/logout-account-selector.ts

@@ -0,0 +1,130 @@
+import { Container, 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 { LogoutAccount } from "../../slash-commands/helpers/logout";
+import { DynamicBorder } from "./dynamic-border";
+
+const LOGOUT_SELECTOR_MAX_VISIBLE = 10;
+
+/** Account picker for `/logout` after the provider has been selected. */
+export class LogoutAccountSelectorComponent extends Container {
+	#listContainer: Container;
+	#accounts: LogoutAccount[];
+	#selectedIndex = 0;
+	#statusMessage: string | undefined;
+	#onSelectCallback: (account: LogoutAccount) => void;
+	#onCancelCallback: () => void;
+
+	constructor(
+		providerName: string,
+		accounts: LogoutAccount[],
+		onSelect: (account: LogoutAccount) => void,
+		onCancel: () => void,
+	) {
+		super();
+		this.#accounts = accounts;
+		this.#onSelectCallback = onSelect;
+		this.#onCancelCallback = onCancel;
+		const activeIndex = accounts.findIndex(account => account.active);
+		this.#selectedIndex = activeIndex >= 0 ? activeIndex : 0;
+
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+		this.addChild(new TruncatedText(theme.bold(`Select ${providerName} account to log out:`)));
+		this.addChild(new Spacer(1));
+		this.#listContainer = new Container();
+		this.addChild(this.#listContainer);
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+		this.#updateList();
+	}
+
+	#updateList(): void {
+		this.#listContainer.clear();
+
+		const total = this.#accounts.length;
+		const maxVisible = LOGOUT_SELECTOR_MAX_VISIBLE;
+		const startIndex =
+			total <= maxVisible
+				? 0
+				: 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 account = this.#accounts[i];
+			if (!account) continue;
+			const activeTag = account.active ? theme.fg("muted", " (active)") : "";
+			const detail = account.detail ? theme.fg("dim", `  ${account.detail}`) : "";
+			if (i === this.#selectedIndex) {
+				rows.push(`${theme.fg("accent", `${theme.nav.cursor} ${account.label}`)}${activeTag}${detail}`);
+			} else {
+				rows.push(`  ${account.label}${activeTag}${detail}`);
+			}
+		}
+
+		if (rows.length > 0) {
+			const sv = new ScrollView(rows, {
+				height: rows.length,
+				scrollbar: "auto",
+				totalRows: total,
+				theme: { track: text => theme.fg("muted", text), thumb: text => theme.fg("accent", text) },
+			});
+			sv.setScrollOffset(startIndex);
+			this.#listContainer.addChild(sv);
+		}
+
+		if (total === 0) {
+			this.#listContainer.addChild(new TruncatedText(theme.fg("muted", "  No stored accounts to log out"), 0, 0));
+		}
+
+		this.#listContainer.addChild(
+			new TruncatedText(theme.fg("muted", "  ↑/↓ select · ↵ log out account · Esc cancel"), 0, 0),
+		);
+
+		if (this.#statusMessage) {
+			this.#listContainer.addChild(new Spacer(1));
+			this.#listContainer.addChild(new TruncatedText(theme.fg("warning", `  ${this.#statusMessage}`), 0, 0));
+		}
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesSelectCancel(keyData)) {
+			this.#onCancelCallback();
+			return;
+		}
+
+		if (matchesSelectUp(keyData)) {
+			if (this.#accounts.length > 0) {
+				this.#selectedIndex = this.#selectedIndex === 0 ? this.#accounts.length - 1 : this.#selectedIndex - 1;
+			}
+			this.#statusMessage = undefined;
+			this.#updateList();
+		} else if (matchesSelectDown(keyData)) {
+			if (this.#accounts.length > 0) {
+				this.#selectedIndex = this.#selectedIndex === this.#accounts.length - 1 ? 0 : this.#selectedIndex + 1;
+			}
+			this.#statusMessage = undefined;
+			this.#updateList();
+		} else if (matchesKey(keyData, "pageUp")) {
+			if (this.#accounts.length > 0) {
+				this.#selectedIndex = Math.max(0, this.#selectedIndex - LOGOUT_SELECTOR_MAX_VISIBLE);
+			}
+			this.#statusMessage = undefined;
+			this.#updateList();
+		} else if (matchesKey(keyData, "pageDown")) {
+			if (this.#accounts.length > 0) {
+				this.#selectedIndex = Math.min(
+					this.#accounts.length - 1,
+					this.#selectedIndex + LOGOUT_SELECTOR_MAX_VISIBLE,
+				);
+			}
+			this.#statusMessage = undefined;
+			this.#updateList();
+		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const account = this.#accounts[this.#selectedIndex];
+			if (!account) return;
+			this.#onSelectCallback(account);
+		}
+	}
+}

package/src/modes/components/mcp-add-wizard.ts

@@ -262,7 +262,7 @@ export class MCPAddWizard extends Container {
 		}
 
 		this.#contentContainer.addChild(
-			new Text(theme.fg("muted", "[Only letters, numbers, dash, underscore, dot]"), 0, 0),
+			new Text(theme.fg("muted", "[Only letters, numbers, dash, underscore, dot, colon]"), 0, 0),
 		);
 		this.#contentContainer.addChild(new Text(theme.fg("muted", "[Enter to continue, Esc to cancel]"), 0, 0));
 	}

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

@@ -711,7 +711,7 @@ export class ModelSelectorComponent extends Container {
 		if (!this.#isModelOverContextLimit(model)) {
 			return "";
 		}
-		return ` ${theme.status.disabled} context>${formatNumber(model.contextWindow).toLowerCase()}`;
+		return ` ${theme.status.disabled} context>${formatNumber(model.contextWindow ?? 0).toLowerCase()}`;
 	}
 
 	#getVisibleItems(): ReadonlyArray<ModelItem | CanonicalModelItem> {
@@ -1016,7 +1016,7 @@ export class ModelSelectorComponent extends Container {
 			const limitWarning = this.#isItemDisabled(selected)
 				? theme.fg(
 						"dim",
-						` — current context ${formatNumber(this.#currentContextTokens).toLowerCase()} > ${formatNumber(selected.model.contextWindow).toLowerCase()} limit`,
+						` — current context ${formatNumber(this.#currentContextTokens).toLowerCase()} > ${formatNumber(selected.model.contextWindow ?? 0).toLowerCase()} limit`,
 					)
 				: "";
 			this.#listContainer.addChild(

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

@@ -15,7 +15,7 @@ import {
 import { formatBytes } from "@oh-my-pi/pi-utils";
 import { theme } from "../../modes/theme/theme";
 import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
-import type { SessionInfo, SessionStatus } from "../../session/session-manager";
+import type { SessionInfo, SessionStatus } from "../../session/session-listing";
 import { shortenPath } from "../../tools/render-utils";
 import { DynamicBorder } from "./dynamic-border";
 import { HookSelectorComponent } from "./hook-selector";