@oh-my-pi/pi-coding-agent 15.5.15 → 15.7.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,10 +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";
+import { renderSegmentTrack } from "./segment-track";
+
+/** 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;
@@ -31,6 +64,7 @@ export interface HookSelectorOptions {
 	onRight?: () => void;
 	onExternalEditor?: () => void;
 	helpText?: string;
+	slider?: HookSelectorSlider;
 }
 
 class OutlinedList extends Container {
@@ -69,6 +103,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 +124,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 +136,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 +207,60 @@ export class HookSelectorComponent extends Container {
 		}
 	}
 
+	/** Render the slider block in the style of the status line: each option is a
+	 *  distinctly colored segment, the active one filled as a powerline chip
+	 *  (its accent as the background, a luminance-matched label, flanked by
+	 *  triangle caps) and the rest shown as plain colored labels joined by a thin
+	 *  separator. Edge arrows brighten while there is room to move. When the
+	 *  active segment carries a `detail` (e.g. the resolved model name) a muted
+	 *  second line is appended. Returns one or two `\n`-joined lines. */
+	#renderSliderLine(): string {
+		const slider = this.#slider;
+		if (!slider) return "";
+		const segments = slider.segments;
+		const active = this.#sliderIndex;
+		const track = renderSegmentTrack(segments, active);
+
+		const leftArrow = theme.fg(active > 0 ? "accent" : "dim", "◂");
+		const rightArrow = theme.fg(active < segments.length - 1 ? "accent" : "dim", "▸");
+		const caption = slider.caption ? `${theme.fg("dim", slider.caption)}  ` : "";
+		const trackLine = `${caption}${leftArrow}  ${track}  ${rightArrow}`;
+		const detail = segments[active]?.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

@@ -20,12 +20,14 @@ export * from "./model-selector";
 export * from "./oauth-selector";
 export * from "./queue-mode-selector";
 export * from "./read-tool-group";
+export * from "./segment-track";
 export * from "./session-selector";
 export * from "./settings-selector";
 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";
@@ -971,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;
@@ -980,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;
@@ -1022,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/segment-track.ts

@@ -0,0 +1,52 @@
+/**
+ * Shared renderer for a horizontal row of colored "segments" styled after the
+ * status line: each segment shows in its own accent, the active one is filled
+ * as a powerline chip (its accent as the background, a luminance-matched label,
+ * flanked by triangle caps) and the rest are plain colored labels joined by a
+ * thin separator.
+ *
+ * Used by the plan-mode model-tier slider ({@link HookSelectorComponent}) and
+ * the ctrl+p role-cycle status so both surfaces read identically.
+ */
+import { type ThemeColor, theme } from "../theme/theme";
+
+export interface TrackSegment {
+	label: string;
+	/** Theme color for the segment; defaults to `accent`. */
+	color?: ThemeColor;
+}
+
+const FG_RESET = "\x1b[39m";
+const BG_RESET = "\x1b[49m";
+
+/**
+ * Render `segments` as a colored chip track with `activeIndex` filled. Returns
+ * a single line of styled text with no surrounding caption or arrows — callers
+ * frame it as they need.
+ */
+export function renderSegmentTrack(segments: TrackSegment[], activeIndex: number): string {
+	// Powerline triangles point *into* the chip so the colored caps merge with
+	// the filled body: left cap points left, right cap points right.
+	const capLeft = theme.sep.powerlineRight;
+	const capRight = theme.sep.powerlineLeft;
+	const thinSep = theme.fg("statusLineSep", theme.sep.powerlineThin);
+
+	let track = "";
+	segments.forEach((segment, i) => {
+		if (i > 0) {
+			// A thin separator reads cleanly only between two plain labels; the chip
+			// caps already delimit the active segment, so pad around it instead.
+			track += i === activeIndex || i - 1 === activeIndex ? "  " : ` ${thinSep} `;
+		}
+		const color = segment.color ?? "accent";
+		const fg = theme.getFgAnsi(color);
+		if (i !== activeIndex) {
+			track += `${fg}${segment.label}${FG_RESET}`;
+			return;
+		}
+		const bg = fg.replace("\x1b[38;", "\x1b[48;");
+		const label = `${bg}${theme.getContrastFgAnsi(color)}\x1b[1m ${segment.label} \x1b[22m${BG_RESET}`;
+		track += `${fg}${capLeft}${label}${fg}${capRight}${FG_RESET}`;
+	});
+	return track;
+}

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/segments.ts

@@ -7,7 +7,7 @@ import { type ThemeColor, theme } from "../../../modes/theme/theme";
 import { shortenPath } from "../../../tools/render-utils";
 import { getSessionAccentAnsi, getSessionAccentHex } from "../../../utils/session-color";
 import { sanitizeStatusText } from "../../shared";
-import { getContextUsageLevel, getContextUsageThemeColor } from "./context-thresholds";
+import { formatContextUsage, getContextUsageLevel, getContextUsageThemeColor } from "./context-thresholds";
 import type { RenderedSegment, SegmentContext, StatusLineSegment, StatusLineSegmentId } from "./types";
 
 export type { SegmentContext } from "./types";
@@ -350,7 +350,7 @@ const contextPctSegment: StatusLineSegment = {
 		const window = ctx.contextWindow;
 
 		const autoIcon = ctx.autoCompactEnabled && theme.icon.auto ? ` ${theme.icon.auto}` : "";
-		const text = `${pct.toFixed(1)}%/${formatNumber(window)}${autoIcon}`;
+		const text = `${formatContextUsage(pct, window)}${autoIcon}`;
 
 		const color = getContextUsageThemeColor(getContextUsageLevel(pct, window));
 		const content = withIcon(theme.icon.context, theme.fg(color, text));

package/src/modes/components/tiny-title-download-progress.ts

@@ -0,0 +1,90 @@
+import { type Component, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import { formatBytes } from "@oh-my-pi/pi-utils";
+import { getTinyTitleModelSpec, type TinyTitleLocalModelKey } from "../../tiny/models";
+import type { TinyTitleProgressEvent } from "../../tiny/title-protocol";
+import { theme } from "../theme/theme";
+
+const DEFAULT_BAR_WIDTH = 24;
+
+function padLine(line: string, width: number): string {
+	const visible = visibleWidth(line);
+	return visible >= width ? truncateToWidth(line, width) : `${line}${" ".repeat(width - visible)}`;
+}
+
+function progressBar(progress: number | undefined, width: number): string {
+	const barWidth = Math.max(8, Math.min(DEFAULT_BAR_WIDTH, width));
+	if (progress === undefined) return theme.fg("muted", "░".repeat(barWidth));
+	const ratio = Math.max(0, Math.min(1, progress / 100));
+	const filled = Math.round(ratio * barWidth);
+	return `${theme.fg("accent", "█".repeat(filled))}${theme.fg("muted", "░".repeat(barWidth - filled))}`;
+}
+
+function currentFile(event: TinyTitleProgressEvent | undefined): string | undefined {
+	if (!event) return undefined;
+	if (event.file) return event.file.split("/").at(-1) ?? event.file;
+	if (event.files) {
+		let largestFile: string | undefined;
+		let largestLoaded = -1;
+		for (const file in event.files) {
+			const state = event.files[file];
+			if (state.loaded <= largestLoaded || state.loaded >= state.total) continue;
+			largestFile = file;
+			largestLoaded = state.loaded;
+		}
+		return largestFile?.split("/").at(-1) ?? largestFile;
+	}
+	return undefined;
+}
+
+function statusLabel(event: TinyTitleProgressEvent | undefined): string {
+	if (!event) return "Preparing";
+	if (event.status === "error") return "Failed";
+	if (event.status === "ready") return "Ready";
+	if (event.status === "done") return "Downloaded";
+	if (event.status === "download") return "Downloading";
+	if (event.status === "progress" || event.status === "progress_total") return "Downloading";
+	return "Preparing";
+}
+
+function byteLabel(event: TinyTitleProgressEvent | undefined): string | undefined {
+	if (!event?.loaded || !event.total) return undefined;
+	return `${formatBytes(event.loaded)} / ${formatBytes(event.total)}`;
+}
+
+export class TinyTitleDownloadProgressComponent implements Component {
+	#modelKey: TinyTitleLocalModelKey;
+	#event: TinyTitleProgressEvent | undefined;
+
+	constructor(modelKey: TinyTitleLocalModelKey) {
+		this.#modelKey = modelKey;
+	}
+
+	update(event: TinyTitleProgressEvent): void {
+		this.#event = event;
+	}
+
+	isComplete(): boolean {
+		return this.#event?.status === "ready" || this.#event?.status === "error";
+	}
+
+	invalidate(): void {
+		// No cached state.
+	}
+
+	render(width: number): string[] {
+		width = Math.max(1, width);
+		const spec = getTinyTitleModelSpec(this.#modelKey);
+		const border = theme.fg("border", theme.boxSharp.horizontal.repeat(width));
+		const status = statusLabel(this.#event);
+		const file = currentFile(this.#event);
+		const pct =
+			this.#event?.progress === undefined ? "" : `${Math.floor(this.#event.progress).toString().padStart(3, " ")}%`;
+		const bytes = byteLabel(this.#event);
+		const title = `${theme.fg("accent", "Tiny model")} ${theme.fg("muted", status)} ${spec.label}`;
+		const details = [progressBar(this.#event?.progress, Math.max(8, width - 36)), pct, bytes, file]
+			.filter((part): part is string => Boolean(part))
+			.join(" ");
+
+		return [border, padLine(` ${title}`, width), padLine(` ${details}`, width), border];
+	}
+}

package/src/modes/components/tips.txt

@@ -0,0 +1,13 @@
+Tired of typing "keep going"? Just send a '.'
+You can /btw to ask a side question
+Ctrl+D can be used to exit, but with your draft saved!
+Find out which model you emotionally abuse the most with `omp stats`
+Try task isolation to create CoW worktrees
+Your LLM can call an LLM using `llm(x...)`. Have a big batch of tasks? Ask clanker to use it!
+Next time you see spaghet try: "omp, create a TTSR rule that will prevent this pattern, use omp://"
+Did you know? Each kitty/tmux split keeps its own session — `omp -c` resumes the right one
+Drop the word `ultrathink` in your message for harder multi-step reasoning — watch it glow rainbow as you type
+Say `orchestrate` in your message to drive a multi-phase task with parallel subagents — watch it glow as you type
+Log in to several accounts of the same provider — `/login` again — and omp load-balances across them automatically
+Run `omp auth-broker serve` once and every machine pulls live tokens over the wire — refresh keys never leave the host; `omp auth-gateway` fronts it as a drop-in proxy any OpenAI-compatible client can hit
+Press alt+p (or /switch) to switch provider, and ctrl+p to cycle role models smol -> slow -> etc