@oh-my-pi/pi-coding-agent 15.5.13 → 15.6.0

package/src/modes/components/footer.ts

@@ -7,7 +7,7 @@ import type { AgentSession } from "../../session/agent-session";
 import { shortenPath } from "../../tools/render-utils";
 import * as git from "../../utils/git";
 import { sanitizeStatusText } from "../shared";
-import { getContextUsageLevel, getContextUsageThemeColor } from "./status-line/context-thresholds";
+import { formatContextUsage, getContextUsageLevel, getContextUsageThemeColor } from "./status-line/context-thresholds";
 
 /**
  * Footer component that shows pwd, token stats, and context usage
@@ -136,7 +136,6 @@ export class FooterComponent implements Component {
 		const contextUsage = this.session.getContextUsage();
 		const contextWindow = contextUsage?.contextWindow ?? state.model?.contextWindow ?? 0;
 		const contextPercentValue = contextUsage?.percent ?? 0;
-		const contextPercent = contextUsage?.percent !== null ? contextPercentValue.toFixed(1) : "?";
 
 		// Replace home directory with ~
 		let pwd = shortenPath(getProjectDir());
@@ -180,10 +179,10 @@ export class FooterComponent implements Component {
 		// Colorize context percentage based on usage
 		let contextPercentStr: string;
 		const autoIndicator = this.#autoCompactEnabled ? " (auto)" : "";
-		const contextPercentDisplay =
-			contextPercent === "?"
-				? `?/${formatNumber(contextWindow)}${autoIndicator}`
-				: `${contextPercent}%/${formatNumber(contextWindow)}${autoIndicator}`;
+		const contextPercentDisplay = `${formatContextUsage(
+			contextUsage?.percent === null ? null : contextPercentValue,
+			contextWindow,
+		)}${autoIndicator}`;
 		if (contextUsage?.percent !== null && contextUsage?.percent !== undefined) {
 			const color = getContextUsageThemeColor(getContextUsageLevel(contextPercentValue, contextWindow));
 			contextPercentStr =

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

@@ -11,7 +11,7 @@ import {
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
-import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
+import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import type { HistoryEntry, HistoryStorage } from "../../session/history-storage";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -116,14 +116,14 @@ export class HistorySearchComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
-		if (matchesKey(keyData, "up")) {
+		if (matchesSelectUp(keyData)) {
 			if (this.#results.length === 0) return;
 			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
 			this.#resultsList.setSelectedIndex(this.#selectedIndex);
 			return;
 		}
 
-		if (matchesKey(keyData, "down")) {
+		if (matchesSelectDown(keyData)) {
 			if (this.#results.length === 0) return;
 			this.#selectedIndex = Math.min(this.#results.length - 1, this.#selectedIndex + 1);
 			this.#resultsList.setSelectedIndex(this.#selectedIndex);

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

@@ -15,11 +15,43 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
-import { matchesAppExternalEditor, matchesSelectCancel } from "../../modes/utils/keybinding-matchers";
+import { getMarkdownTheme, type ThemeColor, theme } from "../../modes/theme/theme";
+import {
+	matchesAppExternalEditor,
+	matchesSelectCancel,
+	matchesSelectDown,
+	matchesSelectUp,
+} from "../../modes/utils/keybinding-matchers";
 import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
 
+/** One segment of a {@link HookSelectorSlider} — a label, its accent color, and
+ *  an optional detail line (e.g. the resolved model name) shown beneath the
+ *  track while the segment is active. */
+export interface HookSelectorSliderSegment {
+	label: string;
+	/** Theme color for the segment label; defaults to `accent`. */
+	color?: ThemeColor;
+	/** Secondary line rendered under the track when this segment is selected. */
+	detail?: string;
+}
+
+/**
+ * A horizontal left/right selector rendered above the option list. Unlike the
+ * up/down option cursor, the slider is moved with the left/right arrows from
+ * any list position, letting the caller capture an orthogonal choice (e.g. the
+ * model tier to continue execution with) alongside the selected option.
+ */
+export interface HookSelectorSlider {
+	/** Dim caption rendered before the slider track (e.g. "continue with"). */
+	caption?: string;
+	segments: HookSelectorSliderSegment[];
+	/** Initially highlighted segment index. */
+	index: number;
+	/** Invoked with the new index whenever the slider moves. */
+	onChange?: (index: number) => void;
+}
+
 export interface HookSelectorOptions {
 	tui?: TUI;
 	timeout?: number;
@@ -31,6 +63,7 @@ export interface HookSelectorOptions {
 	onRight?: () => void;
 	onExternalEditor?: () => void;
 	helpText?: string;
+	slider?: HookSelectorSlider;
 }
 
 class OutlinedList extends Container {
@@ -69,6 +102,9 @@ export class HookSelectorComponent extends Container {
 	#onLeftCallback: (() => void) | undefined;
 	#onRightCallback: (() => void) | undefined;
 	#onExternalEditorCallback: (() => void) | undefined;
+	#slider: HookSelectorSlider | undefined;
+	#sliderIndex: number = 0;
+	#sliderComponent: Text | undefined;
 	constructor(
 		title: string,
 		options: string[],
@@ -87,6 +123,10 @@ export class HookSelectorComponent extends Container {
 		this.#onLeftCallback = opts?.onLeft;
 		this.#onRightCallback = opts?.onRight;
 		this.#onExternalEditorCallback = opts?.onExternalEditor;
+		if (opts?.slider && opts.slider.segments.length > 0) {
+			this.#slider = opts.slider;
+			this.#sliderIndex = Math.max(0, Math.min(opts.slider.index, opts.slider.segments.length - 1));
+		}
 
 		this.addChild(new DynamicBorder());
 		this.addChild(new Spacer(1));
@@ -95,6 +135,12 @@ export class HookSelectorComponent extends Container {
 		this.addChild(this.#titleComponent);
 		this.addChild(new Spacer(1));
 
+		if (this.#slider) {
+			this.#sliderComponent = new Text(this.#renderSliderLine(), 1, 0);
+			this.addChild(this.#sliderComponent);
+			this.addChild(new Spacer(1));
+		}
+
 		if (opts?.timeout && opts.timeout > 0 && opts.tui) {
 			this.#countdown = new CountdownTimer(
 				opts.timeout,
@@ -160,23 +206,63 @@ export class HookSelectorComponent extends Container {
 		}
 	}
 
+	/** Render the slider block: the track (dim caption, edge arrows that brighten
+	 *  while there is room to move, one styled segment per option — active = bold
+	 *  in its color, the rest dim, joined by `›`) plus, when the active segment
+	 *  carries a `detail`, a muted second line beneath it (e.g. the resolved model
+	 *  name). Returns one or two `\n`-joined lines. */
+	#renderSliderLine(): string {
+		const slider = this.#slider;
+		if (!slider) return "";
+		const segments = slider.segments;
+		const sep = theme.fg("dim", " › ");
+		const track = segments
+			.map((segment, i) =>
+				i === this.#sliderIndex
+					? theme.bold(theme.fg(segment.color ?? "accent", segment.label))
+					: theme.fg("dim", segment.label),
+			)
+			.join(sep);
+		const leftArrow = theme.fg(this.#sliderIndex > 0 ? "accent" : "dim", "◂");
+		const rightArrow = theme.fg(this.#sliderIndex < segments.length - 1 ? "accent" : "dim", "▸");
+		const caption = slider.caption ? `${theme.fg("dim", slider.caption)}  ` : "";
+		const trackLine = `${caption}${leftArrow} ${theme.fg("dim", "[")} ${track} ${theme.fg("dim", "]")} ${rightArrow}`;
+		const detail = segments[this.#sliderIndex]?.detail;
+		if (!detail) return trackLine;
+		return `${trackLine}\n  ${theme.fg("dim", "↳")} ${theme.fg("muted", detail)}`;
+	}
+
+	/** Move the slider by `delta`, clamped to the segment range, refresh the
+	 *  rendered track, and notify the caller only when the index actually moves. */
+	#moveSlider(delta: number): void {
+		const slider = this.#slider;
+		if (!slider) return;
+		const next = Math.max(0, Math.min(slider.segments.length - 1, this.#sliderIndex + delta));
+		if (next === this.#sliderIndex) return;
+		this.#sliderIndex = next;
+		this.#sliderComponent?.setText(this.#renderSliderLine());
+		slider.onChange?.(next);
+	}
+
 	handleInput(keyData: string): void {
 		// Reset countdown on any interaction
 		this.#countdown?.reset();
 
-		if (matchesKey(keyData, "up") || keyData === "k") {
+		if (matchesSelectUp(keyData) || keyData === "k") {
 			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
 			this.#updateList();
-		} else if (matchesKey(keyData, "down") || keyData === "j") {
+		} else if (matchesSelectDown(keyData) || keyData === "j") {
 			this.#selectedIndex = Math.min(this.#options.length - 1, this.#selectedIndex + 1);
 			this.#updateList();
 		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selected = this.#options[this.#selectedIndex];
 			if (selected) this.#onSelectCallback(selected);
-		} else if (matchesKey(keyData, "left")) {
-			this.#onLeftCallback?.();
-		} else if (matchesKey(keyData, "right")) {
-			this.#onRightCallback?.();
+		} else if (matchesKey(keyData, "left") || (this.#slider && keyData === "h")) {
+			if (this.#slider) this.#moveSlider(-1);
+			else this.#onLeftCallback?.();
+		} else if (matchesKey(keyData, "right") || (this.#slider && keyData === "l")) {
+			if (this.#slider) this.#moveSlider(1);
+			else this.#onRightCallback?.();
 		} else if (this.#onExternalEditorCallback && matchesAppExternalEditor(keyData)) {
 			this.#onExternalEditorCallback();
 		} else if (matchesSelectCancel(keyData)) {

package/src/modes/components/index.ts

@@ -26,6 +26,7 @@ export * from "./show-images-selector";
 export * from "./status-line";
 export * from "./theme-selector";
 export * from "./thinking-selector";
+export * from "./tiny-title-download-progress";
 export * from "./todo-reminder";
 export * from "./tool-execution";
 export * from "./tree-selector";

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

@@ -19,7 +19,7 @@ import { analyzeAuthError, discoverOAuthEndpoints } from "../../mcp/oauth-discov
 import type { MCPHttpServerConfig, MCPServerConfig, MCPSseServerConfig, MCPStdioServerConfig } from "../../mcp/types";
 import { shortenPath } from "../../tools/render-utils";
 import { theme } from "../theme/theme";
-import { matchesAppInterrupt } from "../utils/keybinding-matchers";
+import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../utils/keybinding-matchers";
 import { DynamicBorder } from "./dynamic-border";
 
 type TransportType = "stdio" | "http" | "sse";
@@ -501,11 +501,11 @@ export class MCPAddWizard extends Container {
 		}
 
 		// Handle up/down arrows for selectors
-		if (matchesKey(keyData, "up")) {
+		if (matchesSelectUp(keyData)) {
 			this.#moveSelection(-1);
 			return;
 		}
-		if (matchesKey(keyData, "down")) {
+		if (matchesSelectDown(keyData)) {
 			this.#moveSelection(1);
 			return;
 		}

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

@@ -18,6 +18,7 @@ import { getKnownRoleIds, getRoleInfo, MODEL_ROLE_IDS, MODEL_ROLES } from "../..
 import { resolveModelRoleValue } from "../../config/model-resolver";
 import type { Settings } from "../../config/settings";
 import { type ThemeColor, theme } from "../../modes/theme/theme";
+import { matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import { getThinkingLevelMetadata } from "../../thinking";
 import { getTabBarTheme } from "../shared";
 import { DynamicBorder } from "./dynamic-border";
@@ -105,6 +106,8 @@ const STATIC_PROVIDER_TABS: ProviderTabState[] = [
 	{ id: CANONICAL_TAB, label: CANONICAL_TAB },
 ];
 
+const MODEL_TAB_REFRESH_DEBOUNCE_MS = 120;
+
 function formatProviderTabLabel(providerId: string): string {
 	return providerId.replace(/[-_]+/g, " ").toUpperCase();
 }
@@ -145,6 +148,10 @@ export class ModelSelectorComponent extends Container {
 	// Tab state
 	#providers: ProviderTabState[] = STATIC_PROVIDER_TABS;
 	#activeTabIndex: number = 0;
+	#refreshingProviders: Set<string> = new Set();
+	#scheduledProviderRefreshes: Map<string, ReturnType<typeof setTimeout>> = new Map();
+	#refreshSpinnerFrame: number = 0;
+	#refreshSpinnerInterval?: NodeJS.Timeout;
 
 	// Context menu state
 	#isMenuOpen: boolean = false;
@@ -371,10 +378,8 @@ export class ModelSelectorComponent extends Container {
 		});
 	}
 
-	async #loadModels(): Promise<void> {
+	#loadModelsFromCurrentRegistryState(): void {
 		let models: ModelItem[];
-
-		// Use scoped models if provided via --models flag
 		if (this.#scopedModels.length > 0) {
 			models = this.#scopedModels.map(scoped => ({
 				kind: "provider",
@@ -384,10 +389,6 @@ export class ModelSelectorComponent extends Container {
 				selector: `${scoped.model.provider}/${scoped.model.id}`,
 			}));
 		} else {
-			// Reload config and cached discovery state without blocking on live provider refresh
-			await this.#modelRegistry.refresh("offline");
-
-			// Check for models.json errors
 			const loadError = this.#modelRegistry.getError();
 			if (loadError) {
 				this.#errorMessage = loadError;
@@ -395,7 +396,6 @@ export class ModelSelectorComponent extends Container {
 				this.#errorMessage = undefined;
 			}
 
-			// Load available models (built-in models still work even if models.json failed)
 			try {
 				const availableModels = this.#modelRegistry.getAvailable();
 				models = availableModels.map((model: Model) => ({
@@ -415,15 +415,16 @@ export class ModelSelectorComponent extends Container {
 			}
 		}
 
+		const candidates = models.map(item => item.model);
 		const canonicalRecords = this.#modelRegistry.getCanonicalModels({
 			availableOnly: this.#scopedModels.length === 0,
-			candidates: models.map(item => item.model),
+			candidates,
 		});
 		const canonicalModels = canonicalRecords
 			.map(record => {
 				const selectedModel = this.#modelRegistry.resolveCanonicalModel(record.id, {
 					availableOnly: this.#scopedModels.length === 0,
-					candidates: models.map(item => item.model),
+					candidates,
 				});
 				if (!selectedModel) return undefined;
 				const searchText = [
@@ -457,6 +458,14 @@ export class ModelSelectorComponent extends Container {
 		this.#selectedIndex = Math.min(this.#selectedIndex, Math.max(0, models.length - 1));
 	}
 
+	async #loadModels(): Promise<void> {
+		if (this.#scopedModels.length === 0) {
+			// Reload config and cached discovery state without blocking on live provider refresh
+			await this.#modelRegistry.refresh("offline");
+		}
+		this.#loadModelsFromCurrentRegistryState();
+	}
+
 	#buildProviderTabs(): void {
 		const activeTabId = this.#getActiveTab().id;
 		const providerSet = new Set<string>();
@@ -475,17 +484,100 @@ export class ModelSelectorComponent extends Container {
 			activeIndex >= 0 ? activeIndex : Math.min(this.#activeTabIndex, this.#providers.length - 1);
 	}
 
-	async #refreshSelectedProvider(): Promise<void> {
+	#getActiveProviderRefreshStatusText(): string | undefined {
+		const providerId = this.#getActiveProviderId();
+		if (!providerId || !this.#refreshingProviders.has(providerId)) {
+			return undefined;
+		}
+		const spinnerFrames = theme.spinnerFrames;
+		const spinner =
+			spinnerFrames.length > 0
+				? spinnerFrames[this.#refreshSpinnerFrame % spinnerFrames.length]
+				: theme.status.pending;
+		return theme.fg("warning", `  ${spinner} Refreshing ${formatProviderTabLabel(providerId)} in background...`);
+	}
+
+	#startRefreshSpinner(): void {
+		if (this.#refreshSpinnerInterval) {
+			return;
+		}
+		this.#refreshSpinnerInterval = setInterval(() => {
+			const frameCount = theme.spinnerFrames.length;
+			if (frameCount > 0) {
+				this.#refreshSpinnerFrame = (this.#refreshSpinnerFrame + 1) % frameCount;
+			}
+			this.#updateTabBar();
+			this.#tui.requestRender();
+		}, 80);
+	}
+
+	#stopRefreshSpinner(): void {
+		if (this.#refreshingProviders.size > 0) {
+			return;
+		}
+		if (this.#refreshSpinnerInterval) {
+			clearInterval(this.#refreshSpinnerInterval);
+			this.#refreshSpinnerInterval = undefined;
+		}
+		this.#refreshSpinnerFrame = 0;
+	}
+
+	#setProviderRefreshing(providerId: string, refreshing: boolean): void {
+		if (refreshing) {
+			this.#refreshingProviders.add(providerId);
+			this.#startRefreshSpinner();
+		} else {
+			this.#refreshingProviders.delete(providerId);
+			this.#stopRefreshSpinner();
+		}
+	}
+
+	#cancelScheduledProviderRefreshesExcept(keepProviderId?: string): void {
+		for (const [providerId, timer] of this.#scheduledProviderRefreshes) {
+			if (providerId === keepProviderId) {
+				continue;
+			}
+			clearTimeout(timer);
+			this.#scheduledProviderRefreshes.delete(providerId);
+			this.#setProviderRefreshing(providerId, false);
+		}
+	}
+
+	#scheduleSelectedProviderRefresh(): void {
 		const providerId = this.#getActiveProviderId();
 		if (this.#scopedModels.length > 0 || !providerId) {
 			return;
 		}
-		await this.#modelRegistry.refreshProvider(providerId);
-		await this.#loadModels();
-		this.#buildProviderTabs();
-		this.#updateTabBar();
-		this.#applyTabFilter();
-		this.#tui.requestRender();
+		if (this.#scheduledProviderRefreshes.has(providerId) || this.#refreshingProviders.has(providerId)) {
+			return;
+		}
+		this.#setProviderRefreshing(providerId, true);
+		const timer = setTimeout(() => {
+			this.#scheduledProviderRefreshes.delete(providerId);
+			void this.#refreshProviderInBackground(providerId);
+		}, MODEL_TAB_REFRESH_DEBOUNCE_MS);
+		this.#scheduledProviderRefreshes.set(providerId, timer);
+	}
+
+	async #refreshProviderInBackground(providerId: string): Promise<void> {
+		try {
+			await this.#modelRegistry.refreshProvider(providerId, "online");
+			// Provider refresh already updated the registry snapshot. Re-reading it
+			// here must stay purely in-memory — do not call modelRegistry.refresh()
+			// again or tab switches will pay an extra whole-registry reload after the
+			// network round-trip completes.
+			this.#loadModelsFromCurrentRegistryState();
+			this.#buildProviderTabs();
+			this.#updateTabBar();
+			this.#applyTabFilter();
+		} catch (error) {
+			this.#errorMessage = error instanceof Error ? error.message : String(error);
+			this.#updateList();
+		} finally {
+			this.#setProviderRefreshing(providerId, false);
+			this.#updateTabBar();
+			this.#tui.requestRender();
+		}
 	}
 
 	#updateTabBar(): void {
@@ -496,15 +588,21 @@ export class ModelSelectorComponent extends Container {
 		tabBar.onTabChange = (_tab, index) => {
 			this.#activeTabIndex = index;
 			this.#selectedIndex = 0;
+			this.#cancelScheduledProviderRefreshesExcept(this.#getActiveProviderId());
 			this.#applyTabFilter();
-			void this.#refreshSelectedProvider().catch(error => {
-				this.#errorMessage = error instanceof Error ? error.message : String(error);
-				this.#updateList();
-				this.#tui.requestRender();
-			});
+			this.#scheduleSelectedProviderRefresh();
+			this.#updateTabBar();
+			// Let TUI's normal post-input render paint the new tab immediately.
+			// The live refresh is debounced onto a later timer so tab cycling never
+			// shares a stack frame with provider refresh work.
+			this.#tui.requestRender();
 		};
 		this.#tabBar = tabBar;
 		this.#headerContainer.addChild(tabBar);
+		const refreshStatusText = this.#getActiveProviderRefreshStatusText();
+		if (refreshStatusText) {
+			this.#headerContainer.addChild(new Text(refreshStatusText, 0, 0));
+		}
 	}
 
 	#getActiveTab(): ProviderTabState {
@@ -874,7 +972,7 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		// Up arrow - navigate list (wrap to bottom when at top)
-		if (matchesKey(keyData, "up")) {
+		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;
@@ -883,7 +981,7 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		// Down arrow - navigate list (wrap to top when at bottom)
-		if (matchesKey(keyData, "down")) {
+		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;
@@ -925,13 +1023,13 @@ export class ModelSelectorComponent extends Container {
 				: this.#menuRoleActions.length;
 		if (optionCount === 0) return;
 
-		if (matchesKey(keyData, "up")) {
+		if (matchesSelectUp(keyData)) {
 			this.#menuSelectedIndex = (this.#menuSelectedIndex - 1 + optionCount) % optionCount;
 			this.#updateMenu();
 			return;
 		}
 
-		if (matchesKey(keyData, "down")) {
+		if (matchesSelectDown(keyData)) {
 			this.#menuSelectedIndex = (this.#menuSelectedIndex + 1) % optionCount;
 			this.#updateMenu();
 			return;

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

@@ -2,7 +2,7 @@ import { getOAuthProviders } from "@oh-my-pi/pi-ai/utils/oauth";
 import type { OAuthProviderInfo } from "@oh-my-pi/pi-ai/utils/oauth/types";
 import { Container, matchesKey, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
-import { matchesSelectCancel } from "../../modes/utils/keybinding-matchers";
+import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import type { AuthStorage } from "../../session/auth-storage";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -193,7 +193,7 @@ export class OAuthSelectorComponent extends Container {
 	}
 	handleInput(keyData: string): void {
 		// Up arrow
-		if (matchesKey(keyData, "up")) {
+		if (matchesSelectUp(keyData)) {
 			if (this.#allProviders.length > 0) {
 				this.#selectedIndex = this.#selectedIndex === 0 ? this.#allProviders.length - 1 : this.#selectedIndex - 1;
 			}
@@ -201,7 +201,7 @@ export class OAuthSelectorComponent extends Container {
 			this.#updateList();
 		}
 		// Down arrow
-		else if (matchesKey(keyData, "down")) {
+		else if (matchesSelectDown(keyData)) {
 			if (this.#allProviders.length > 0) {
 				this.#selectedIndex = this.#selectedIndex === this.#allProviders.length - 1 ? 0 : this.#selectedIndex + 1;
 			}

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

@@ -25,7 +25,9 @@ import { PREVIEW_LIMITS, replaceTabs, TRUNCATE_LENGTHS, truncateToWidth } from "
 import { toPathList } from "../../tools/search";
 import type { ObservableSession, SessionObserverRegistry } from "../session-observer-registry";
 import { getMarkdownTheme, theme } from "../theme/theme";
+import { matchesSelectDown, matchesSelectUp } from "../utils/keybinding-matchers";
 import { DynamicBorder } from "./dynamic-border";
+import { formatContextUsage } from "./status-line/context-thresholds";
 
 /** Max thinking characters in collapsed state */
 const MAX_THINKING_CHARS_COLLAPSED = 200;
@@ -266,23 +268,27 @@ export class SessionObserverOverlayComponent extends Container {
 		const progress = session?.progress;
 		if (!progress) return "";
 		const stats: string[] = [];
-		if (progress.toolCount > 0) stats.push(`${formatNumber(progress.toolCount)} tools`);
-		// Current per-turn context — what the user reads as "how full is the context".
-		// Falls back to cumulative billing volume (Σ-prefixed) when context size is unknown.
+		// Current per-turn context — match the status line's `<pct>%/<window>` gauge (e.g. `5.1%/1M`).
 		if (progress.contextTokens && progress.contextTokens > 0) {
 			const ctx =
 				progress.contextWindow && progress.contextWindow > 0
-					? `${formatNumber(progress.contextTokens)}/${formatNumber(progress.contextWindow)} ctx`
-					: `${formatNumber(progress.contextTokens)} ctx`;
+					? formatContextUsage((progress.contextTokens / progress.contextWindow) * 100, progress.contextWindow)
+					: `${formatNumber(progress.contextTokens)}`;
 			stats.push(ctx);
-			if (progress.tokens > 0) stats.push(`Σ${formatNumber(progress.tokens)}`);
-		} else if (progress.tokens > 0) {
-			stats.push(`Σ${formatNumber(progress.tokens)}`);
 		}
-		if (progress.durationMs > 0) stats.push(formatDuration(progress.durationMs));
+		if (progress.durationMs > 0) {
+			stats.push(formatDuration(progress.durationMs));
+		}
 		const parts: string[] = [];
-		if (stats.length > 0) parts.push(theme.fg("dim", stats.join(theme.sep.dot)));
-		if (progress.cost > 0) parts.push(theme.fg("statusLineCost", `$${progress.cost.toFixed(2)}`));
+		if (stats.length > 0 || progress.toolCount > 0) {
+			const toolCountStat =
+				progress.toolCount > 0 ? `${formatNumber(progress.toolCount)} ${theme.icon.extensionTool}` : undefined;
+			const statSegments = [toolCountStat, ...stats].filter((segment): segment is string => Boolean(segment));
+			parts.push(theme.fg("dim", statSegments.join(theme.sep.dot)));
+		}
+		if (progress.cost > 0) {
+			parts.push(theme.fg("statusLineCost", `$${progress.cost.toFixed(2)}`));
+		}
 		return parts.join(theme.sep.dot);
 	}
 
@@ -660,7 +666,7 @@ export class SessionObserverOverlayComponent extends Container {
 		}
 
 		// j / down — move selection down
-		if (keyData === "j" || matchesKey(keyData, "down")) {
+		if (keyData === "j" || matchesSelectDown(keyData)) {
 			if (entryCount > 0) {
 				this.#selectedEntryIndex = Math.min(this.#selectedEntryIndex + 1, entryCount - 1);
 			}
@@ -669,7 +675,7 @@ export class SessionObserverOverlayComponent extends Container {
 		}
 
 		// k / up — move selection up
-		if (keyData === "k" || matchesKey(keyData, "up")) {
+		if (keyData === "k" || matchesSelectUp(keyData)) {
 			if (entryCount > 0) {
 				this.#selectedEntryIndex = Math.max(this.#selectedEntryIndex - 1, 0);
 			}

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

@@ -13,7 +13,7 @@ import {
 } from "@oh-my-pi/pi-tui";
 import { formatBytes } from "@oh-my-pi/pi-utils";
 import { theme } from "../../modes/theme/theme";
-import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
+import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import type { SessionInfo } from "../../session/session-manager";
 import { DynamicBorder } from "./dynamic-border";
 import { HookSelectorComponent } from "./hook-selector";
@@ -192,12 +192,12 @@ class SessionList implements Component {
 		}
 
 		// Up arrow
-		if (matchesKey(keyData, "up")) {
+		if (matchesSelectUp(keyData)) {
 			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
 			return;
 		}
 		// Down arrow
-		if (matchesKey(keyData, "down")) {
+		if (matchesSelectDown(keyData)) {
 			this.#selectedIndex = Math.min(this.#filteredSessions.length - 1, this.#selectedIndex + 1);
 			return;
 		}

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

@@ -79,6 +79,13 @@ const CONDITIONS: Record<string, () => boolean> = {
 			return false;
 		}
 	},
+	mnemosyneActive: () => {
+		try {
+			return Settings.instance.get("memory.backend") === "mnemosyne";
+		} catch {
+			return false;
+		}
+	},
 };
 
 // ═══════════════════════════════════════════════════════════════════════════

package/src/modes/components/status-line/context-thresholds.ts

@@ -1,3 +1,4 @@
+import { formatNumber } from "@oh-my-pi/pi-utils";
 import type { ThemeColor } from "../../../modes/theme/theme";
 
 export type ContextUsageLevel = "normal" | "warning" | "purple" | "error";
@@ -54,6 +55,16 @@ export function getContextUsageLevel(contextPercent: number, contextWindow: numb
 	return "normal";
 }
 
+/**
+ * Format context usage as `<percent>%/<window>` (e.g. `5.1%/1M`), matching the
+ * status line's context gauge so subagent and footer renderers stay in sync.
+ * A `null`/`undefined` percent (unknown, e.g. right after compaction) renders as `?`.
+ */
+export function formatContextUsage(contextPercent: number | null | undefined, contextWindow: number): string {
+	const pct = contextPercent === null || contextPercent === undefined ? "?" : `${contextPercent.toFixed(1)}%`;
+	return `${pct}/${formatNumber(contextWindow)}`;
+}
+
 export function getContextUsageThemeColor(level: ContextUsageLevel): ThemeColor {
 	switch (level) {
 		case "error":

package/src/modes/components/status-line/presets.ts

@@ -36,6 +36,7 @@ export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 		leftSegments: ["pi", "hostname", "model", "mode", "path", "git", "pr", "subagents"],
 		rightSegments: [
 			"session_name",
+			"cache_hit",
 			"token_in",
 			"token_out",
 			"token_rate",