@oh-my-pi/pi-coding-agent 15.2.3 → 15.3.0

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

@@ -460,6 +460,58 @@ const sessionNameSegment: StatusLineSegment = {
 	},
 };
 
+function pickUsageColor(percent: number): "muted" | "warning" | "error" {
+	if (percent >= 80) return "error";
+	if (percent >= 50) return "warning";
+	return "muted";
+}
+
+function formatUsageReset(value: number, unit: "m" | "h"): string {
+	if (unit === "m") {
+		// total minutes (5h window: max 300)
+		if (value < 60) return `${value}m`;
+		const hours = Math.floor(value / 60);
+		const mins = value % 60;
+		return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+	}
+	// total hours (7d window: max 168)
+	if (value < 24) return `${value}h`;
+	const days = Math.floor(value / 24);
+	const hours = value % 24;
+	return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
+}
+
+const usageSegment: StatusLineSegment = {
+	id: "usage",
+	render(ctx) {
+		const u = ctx.usage;
+		if (!u || (!u.fiveHour && !u.sevenDay)) {
+			return { content: "", visible: false };
+		}
+		const parts: string[] = [];
+		if (u.fiveHour) {
+			const pct = u.fiveHour.percent;
+			const pctText = theme.fg(pickUsageColor(pct), `${Math.round(pct)}%`);
+			const reset =
+				u.fiveHour.resetMinutes !== undefined
+					? theme.fg("muted", ` (${formatUsageReset(u.fiveHour.resetMinutes, "m")})`)
+					: "";
+			parts.push(`5h ${pctText}${reset}`);
+		}
+		if (u.sevenDay) {
+			const pct = u.sevenDay.percent;
+			const pctText = theme.fg(pickUsageColor(pct), `${Math.round(pct)}%`);
+			const reset =
+				u.sevenDay.resetHours !== undefined
+					? theme.fg("muted", ` (${formatUsageReset(u.sevenDay.resetHours, "h")})`)
+					: "";
+			parts.push(`7d ${pctText}${reset}`);
+		}
+		const content = withIcon(theme.icon.time, parts.join(theme.sep.dot));
+		return { content, visible: true };
+	},
+};
+
 // ═══════════════════════════════════════════════════════════════════════════
 // Segment Registry
 // ═══════════════════════════════════════════════════════════════════════════
@@ -486,6 +538,7 @@ export const SEGMENTS: Record<StatusLineSegmentId, StatusLineSegment> = {
 	cache_read: cacheReadSegment,
 	cache_write: cacheWriteSegment,
 	session_name: sessionNameSegment,
+	usage: usageSegment,
 };
 
 export function renderSegment(id: StatusLineSegmentId, ctx: SegmentContext): RenderedSegment {

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

@@ -51,6 +51,10 @@ export interface SegmentContext {
 		status: { staged: number; unstaged: number; untracked: number } | null;
 		pr: { number: number; url: string } | null;
 	};
+	usage: {
+		fiveHour?: { percent: number; resetMinutes?: number };
+		sevenDay?: { percent: number; resetHours?: number };
+	} | null;
 }
 
 export interface RenderedSegment {

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

@@ -1,4 +1,5 @@
 import * as fs from "node:fs";
+import { estimateTokens } from "@oh-my-pi/pi-agent-core/compaction";
 import { type Component, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
 import { formatCount, getProjectDir } from "@oh-my-pi/pi-utils";
 import { $ } from "bun";
@@ -9,7 +10,7 @@ import type { AgentSession } from "../../session/agent-session";
 import * as git from "../../utils/git";
 import { getSessionAccentAnsi, getSessionAccentHex } from "../../utils/session-color";
 import { sanitizeStatusText } from "../shared";
-import { computeContextBreakdown } from "../utils/context-usage";
+import { computeNonMessageTokens } from "../utils/context-usage";
 import {
 	canReuseCachedPr,
 	createPrCacheContext,
@@ -73,9 +74,30 @@ export class StatusLineComponent implements Component {
 	#lastTokensPerSecond: number | null = null;
 	#lastTokensPerSecondTimestamp: number | null = null;
 
-	// Context breakdown caching (2s TTL — aligns with /context command output)
+	// Anthropic usage caching (5-min TTL, OAuth/sub only)
+	#cachedUsage: {
+		fiveHour?: { percent: number; resetMinutes?: number };
+		sevenDay?: { percent: number; resetHours?: number };
+	} | null = null;
+	#usageFetchedAt = 0;
+	#usageInFlight = false;
+	// Context breakdown — incremental cache. Replaces the previous 2-second
+	// TTL design (which re-walked every message on each refresh and produced
+	// ~1.1 s sync freezes on 2,000+ message sessions because `updateEditorTopBorder`
+	// is called on every agent event in event-controller). The new scheme
+	// exploits the fact that `session.messages` is append-only during a turn
+	// and only shrinks on compaction.
 	#cachedBreakdown: { usedTokens: number; contextWindow: number } | null = null;
-	#breakdownFetchedAt = 0;
+	// Per-message token counts indexed by `session.messages` position. Entries
+	// here are immutable: a message at index `i` is finalized (its content
+	// no longer mutates) once index `i+1` exists. We therefore cache all but
+	// the LAST message (which may still be growing during streaming).
+	#messageTokenCache: number[] = [];
+	// Cached non-message total (system prompt + tools + skills). Invalidated
+	// when the inputs-identity fingerprint changes (model swap, skill toggle,
+	// tool registration).
+	#nonMessageTokensCache: number | undefined;
+	#nonMessageInputsKey: string | undefined;
 
 	constructor(private readonly session: AgentSession) {
 		this.#settings = {
@@ -309,22 +331,134 @@ export class StatusLineComponent implements Component {
 		return null;
 	}
 
-	#getCachedContextBreakdown(): { usedTokens: number; contextWindow: number } {
+	#refreshUsageInBackground(): void {
 		const now = Date.now();
-		if (!this.#cachedBreakdown || now - this.#breakdownFetchedAt > 2_000) {
-			const breakdown = computeContextBreakdown(this.session);
-			this.#cachedBreakdown = {
-				usedTokens: breakdown.usedTokens,
-				contextWindow: breakdown.contextWindow,
-			};
-			this.#breakdownFetchedAt = now;
+		if (this.#usageInFlight) return;
+		if (this.#usageFetchedAt > 0 && now - this.#usageFetchedAt < 5 * 60_000) return;
+		const fetcher = (this.session as { fetchUsageReports?: () => Promise<unknown> }).fetchUsageReports;
+		if (typeof fetcher !== "function") return;
+		this.#usageInFlight = true;
+		void fetcher
+			.call(this.session)
+			.then(reports => {
+				this.#cachedUsage = this.#normalizeUsageReports(reports);
+				this.#usageFetchedAt = Date.now();
+			})
+			.catch(() => {
+				/* keep last known data on error */
+			})
+			.finally(() => {
+				this.#usageInFlight = false;
+			});
+	}
+
+	#normalizeUsageReports(reports: unknown): {
+		fiveHour?: { percent: number; resetMinutes?: number };
+		sevenDay?: { percent: number; resetHours?: number };
+	} | null {
+		if (!Array.isArray(reports)) return null;
+		let fiveHour: { percent: number; resetMinutes?: number } | undefined;
+		let sevenDay: { percent: number; resetHours?: number } | undefined;
+		const now = Date.now();
+		for (const report of reports) {
+			if (!report || typeof report !== "object") continue;
+			const limits = (report as { limits?: unknown }).limits;
+			if (!Array.isArray(limits)) continue;
+			for (const limit of limits) {
+				if (!limit || typeof limit !== "object") continue;
+				const l = limit as {
+					scope?: { windowId?: string; tier?: string };
+					window?: { resetsAt?: number };
+					amount?: { usedFraction?: number };
+				};
+				const fraction = l.amount?.usedFraction;
+				if (typeof fraction !== "number") continue;
+				const windowId = l.scope?.windowId;
+				const tier = l.scope?.tier;
+				const resetsAt = l.window?.resetsAt;
+				if (windowId === "5h" && !tier && !fiveHour) {
+					fiveHour = {
+						percent: fraction * 100,
+						resetMinutes:
+							typeof resetsAt === "number" ? Math.max(0, Math.round((resetsAt - now) / 60_000)) : undefined,
+					};
+				} else if (windowId === "7d" && !tier && !sevenDay) {
+					sevenDay = {
+						percent: fraction * 100,
+						resetHours:
+							typeof resetsAt === "number" ? Math.max(0, Math.round((resetsAt - now) / 3_600_000)) : undefined,
+					};
+				}
+			}
+		}
+		if (!fiveHour && !sevenDay) return null;
+		return { fiveHour, sevenDay };
+	}
+
+	/**
+	 * Compute the (cached) used-tokens / context-window totals for the
+	 * status-line context% segment. Exposed (non-private) so unit tests can
+	 * verify the incremental-cache invariants; not part of any external
+	 * API.
+	 */
+	getCachedContextBreakdown(): { usedTokens: number; contextWindow: number } {
+		const messages = this.session.messages ?? [];
+		const contextWindow = this.session.model?.contextWindow ?? 0;
+
+		// 1) Non-message tokens (system prompt + tools + skills). Refresh only
+		//    when the inputs identity fingerprint changes — usually never
+		//    during a streaming turn. ~10-30 ms when it does refresh.
+		const inputsKey = this.#computeNonMessageInputsKey();
+		if (this.#nonMessageTokensCache === undefined || this.#nonMessageInputsKey !== inputsKey) {
+			this.#nonMessageTokensCache = computeNonMessageTokens(this.session);
+			this.#nonMessageInputsKey = inputsKey;
+		}
+
+		// 2) Message tokens — incremental.
+		//    Compaction handling: if messages.length shrank, the array was
+		//    truncated. Reset cache; the next iteration rebuilds from scratch.
+		if (this.#messageTokenCache.length > Math.max(0, messages.length - 1)) {
+			this.#messageTokenCache.length = 0;
+		}
+		//    Cache all but the last message. The last message may still be
+		//    growing during streaming (assistant delta blocks append to the
+		//    existing message); recomputing it each refresh is one
+		//    `estimateTokens` call (~0.5 ms) and stays correct.
+		while (this.#messageTokenCache.length < Math.max(0, messages.length - 1)) {
+			const idx = this.#messageTokenCache.length;
+			this.#messageTokenCache.push(estimateTokens(messages[idx]));
+		}
+		let messagesTokens = 0;
+		for (const t of this.#messageTokenCache) messagesTokens += t;
+		if (messages.length > 0) {
+			messagesTokens += estimateTokens(messages[messages.length - 1]);
 		}
+
+		const usedTokens = this.#nonMessageTokensCache + messagesTokens;
+		this.#cachedBreakdown = { usedTokens, contextWindow };
 		return this.#cachedBreakdown;
 	}
 
+	/**
+	 * Build an identity fingerprint for the non-message inputs (system prompt,
+	 * tools, skills). When this changes, the non-message token cache must be
+	 * recomputed. Cheap: just lengths + first-string-length. Doesn't need to
+	 * be cryptographically unique — only stable for the same inputs.
+	 */
+	#computeNonMessageInputsKey(): string {
+		const sp = this.session.systemPrompt ?? [];
+		const tools = this.session.agent?.state?.tools ?? [];
+		const skills = this.session.skills ?? [];
+		const modelId = this.session.model?.id ?? "";
+		return `${modelId}|${sp.length}:${sp[0]?.length ?? 0}|${tools.length}|${skills.length}`;
+	}
+
 	#buildSegmentContext(width: number): SegmentContext {
 		const state = this.session.state;
 
+		// Trigger background fetch (5-min TTL); render uses cached value
+		this.#refreshUsageInBackground();
+
 		// Get usage statistics
 		const aggregateUsageStats = this.session.sessionManager?.getUsageStatistics() ?? {
 			input: 0,
@@ -340,7 +474,7 @@ export class StatusLineComponent implements Component {
 		};
 
 		// Context usage — aligned with /context command so both surfaces report the same value
-		const breakdown = this.#getCachedContextBreakdown();
+		const breakdown = this.getCachedContextBreakdown();
 		const contextTokens = breakdown.usedTokens;
 		const contextWindow = breakdown.contextWindow || state.model?.contextWindow || 0;
 		const contextPercent = contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
@@ -363,6 +497,7 @@ export class StatusLineComponent implements Component {
 				status: this.#getGitStatus(),
 				pr: this.#lookupPr(),
 			},
+			usage: this.#cachedUsage,
 		};
 	}
 

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

@@ -395,6 +395,15 @@ export class CommandController {
 		info += `${theme.fg("dim", "Tool Calls:")} ${stats.toolCalls}\n`;
 		info += `${theme.fg("dim", "Tool Results:")} ${stats.toolResults}\n`;
 		info += `${theme.fg("dim", "Total:")} ${stats.totalMessages}\n\n`;
+		// Append-only context
+		{
+			const setting = this.ctx.settings.get("provider.appendOnlyContext") ?? "auto";
+			const provider = this.ctx.session.model?.provider;
+			const mode = setting === "on" ? true : setting === "off" ? false : provider === "deepseek";
+			const activeLabel = mode ? theme.fg("success", "active") : theme.fg("dim", "inactive");
+			const settingLabel = setting === "auto" ? `${setting} (${provider ?? "?"})` : setting;
+			info += `${theme.fg("dim", "Append-Only:")} ${activeLabel} (setting: ${settingLabel})\n`;
+		}
 		info += `${theme.bold("Tokens")}\n`;
 		info += `${theme.fg("dim", "Input:")} ${stats.tokens.input.toLocaleString()}\n`;
 		info += `${theme.fg("dim", "Output:")} ${stats.tokens.output.toLocaleString()}\n`;

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

@@ -18,6 +18,7 @@ import type { PlanApprovalDetails } from "../../plan-mode/approved-plan";
 import type { AgentSessionEvent } from "../../session/agent-session";
 import { isSilentAbort, readPendingDisplayTag } from "../../session/messages";
 import type { ResolveToolDetails } from "../../tools/resolve";
+import { interruptHint } from "../shared";
 
 type AgentSessionEventKind = AgentSessionEvent["type"];
 
@@ -133,7 +134,7 @@ export class EventController {
 		const trimmed = intent.trim();
 		if (!trimmed || trimmed === this.#lastIntent) return;
 		this.#lastIntent = trimmed;
-		this.ctx.setWorkingMessage(`${trimmed} (esc to interrupt)`);
+		this.ctx.setWorkingMessage(`${trimmed}${interruptHint()}`);
 	}
 
 	subscribeToAgent(): void {
@@ -759,6 +760,14 @@ export class EventController {
 		if (this.ctx.isBackgrounded === false) return;
 		const notify = settings.get("completion.notify");
 		if (notify === "off") return;
+
+		// Skip when the turn was aborted (e.g. ask cancelled with Ctrl+C) or
+		// errored — those are not "Task complete" events. Mirrors the gate
+		// already used by #currentContextTokens, #handleMessageEnd, and the
+		// retry / TTSR / compaction skip paths across agent-session.ts.
+		const last = this.ctx.session.getLastAssistantMessage?.();
+		if (last?.stopReason === "aborted" || last?.stopReason === "error") return;
+
 		const title = this.ctx.sessionManager.getSessionName();
 		const message = title ? `${title}: Complete` : "Complete";
 		TERMINAL.sendNotification(message);

package/src/modes/interactive-mode.ts

@@ -26,7 +26,7 @@ import {
 	TUI,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
-import { APP_NAME, getProjectDir, hsvToRgb, isEnoent, logger, postmortem, prompt } from "@oh-my-pi/pi-utils";
+import { APP_NAME, adjustHsv, getProjectDir, hsvToRgb, isEnoent, logger, postmortem, prompt } from "@oh-my-pi/pi-utils";
 import chalk from "chalk";
 import { KeybindingsManager } from "../config/keybindings";
 import { isSettingsInitialized, Settings, settings } from "../config/settings";
@@ -98,6 +98,7 @@ import {
 } from "./loop-limit";
 import { OAuthManualInputManager } from "./oauth-manual-input";
 import { SessionObserverRegistry } from "./session-observer-registry";
+import { interruptHint } from "./shared";
 import { type ShimmerPalette, shimmerSegments, shimmerText } from "./theme/shimmer";
 import type { Theme } from "./theme/theme";
 import {
@@ -111,18 +112,43 @@ import {
 import type { CompactionQueuedMessage, InteractiveModeContext, SubmittedUserInput, TodoItem, TodoPhase } from "./types";
 import { UiHelpers } from "./utils/ui-helpers";
 
-const WORKING_INTERRUPT_HINT = " (esc to interrupt)";
-
 const HINT_SHIMMER_PALETTE: ShimmerPalette = {
 	low: "dim",
 	mid: "muted",
 	high: "borderAccent",
 };
 
-function renderWorkingMessage(message: string): string {
-	if (!message.endsWith(WORKING_INTERRUPT_HINT)) return shimmerText(message, theme);
-	const header = message.slice(0, -WORKING_INTERRUPT_HINT.length);
-	return shimmerSegments([{ text: header }, { text: WORKING_INTERRUPT_HINT, palette: HINT_SHIMMER_PALETTE }], theme);
+interface WorkingMessageAccent {
+	main: string;
+	dim: string;
+}
+
+function renderWorkingMessage(message: string, accent?: WorkingMessageAccent): string {
+	const palette = accent
+		? ({
+				low: "dim",
+				mid: { ansi: accent.main },
+				high: { ansi: accent.main },
+				bold: true,
+			} satisfies ShimmerPalette)
+		: undefined;
+	const hint = interruptHint();
+	if (!message.endsWith(hint)) return shimmerText(message, theme, palette);
+	const header = message.slice(0, -hint.length);
+	const hintPalette = accent
+		? ({
+				low: "dim",
+				mid: { ansi: accent.dim },
+				high: { ansi: accent.dim },
+			} satisfies ShimmerPalette)
+		: HINT_SHIMMER_PALETTE;
+	return shimmerSegments(
+		[
+			{ text: header, palette },
+			{ text: hint, palette: hintPalette },
+		],
+		theme,
+	);
 }
 
 const EDITOR_MAX_HEIGHT_MIN = 6;
@@ -232,7 +258,9 @@ export class InteractiveMode implements InteractiveModeContext {
 	autoCompactionLoader: Loader | undefined = undefined;
 	retryLoader: Loader | undefined = undefined;
 	#pendingWorkingMessage: string | undefined;
-	readonly #defaultWorkingMessage = `Working… (esc to interrupt)`;
+	get #defaultWorkingMessage(): string {
+		return `Working…${interruptHint()}`;
+	}
 	autoCompactionEscapeHandler?: () => void;
 	retryEscapeHandler?: () => void;
 	unsubscribe?: () => void;
@@ -663,7 +691,7 @@ export class InteractiveMode implements InteractiveModeContext {
 	}
 
 	#isLoopAutoSubmitBlocked(): boolean {
-		return this.session.isStreaming || this.session.isCompacting;
+		return this.session.isStreaming || this.session.isCompacting || this.session.hasPostPromptWork;
 	}
 
 	#submitLoopPromptWhenReady(prompt: string): void {
@@ -1848,12 +1876,23 @@ export class InteractiveMode implements InteractiveModeContext {
 		}
 	}
 
-	async #handleGoalSetSubcommand(rest: string): Promise<void> {
-		if (this.goalModeEnabled) {
-			this.showStatus("Goal mode is already active. Use /goal drop to start over.");
-			return;
+	async #replaceGoalFromObjective(objective: string): Promise<void> {
+		const state = await this.session.goalRuntime.replaceGoal({ objective });
+		this.session.setGoalModeState(state);
+		this.goalModeEnabled = true;
+		this.goalModePaused = false;
+		this.#resetGoalContinuationSuppression();
+		this.#updateGoalModeStatus();
+		if (this.session.isStreaming) {
+			await this.session.sendGoalModeContext({ deliverAs: "steer" });
 		}
-		if (this.#getPausedGoalState()) {
+		if (this.onInputCallback) {
+			this.onInputCallback(this.startPendingSubmission({ text: objective }));
+		}
+	}
+
+	async #handleGoalSetSubcommand(rest: string): Promise<void> {
+		if (!this.goalModeEnabled && this.#getPausedGoalState()) {
 			this.showWarning("Resume the current goal first, or drop it before setting a new objective.");
 			return;
 		}
@@ -1861,6 +1900,10 @@ export class InteractiveMode implements InteractiveModeContext {
 			? rest.trim()
 			: (await this.showHookEditor("Goal objective", undefined, undefined, { promptStyle: true }))?.trim();
 		if (!objective) return;
+		if (this.goalModeEnabled) {
+			await this.#replaceGoalFromObjective(objective);
+			return;
+		}
 		await this.#startGoalFromObjective(objective);
 	}
 
@@ -2189,13 +2232,26 @@ export class InteractiveMode implements InteractiveModeContext {
 		this.ui.requestRender();
 	}
 
+	#getWorkingMessageAccent(): WorkingMessageAccent | undefined {
+		const accentEnabled = !isSettingsInitialized() || settings.get("statusLine.sessionAccent") !== false;
+		const sessionName = accentEnabled ? this.sessionManager.getSessionName() : undefined;
+		if (!sessionName) return undefined;
+		const hex = getSessionAccentHex(sessionName);
+		const main = getSessionAccentAnsi(hex);
+		const dim = getSessionAccentAnsi(adjustHsv(hex, { s: 0.55, v: 0.65 }));
+		return main && dim ? { main, dim } : undefined;
+	}
+
 	ensureLoadingAnimation(): void {
 		if (!this.loadingAnimation) {
 			this.statusContainer.clear();
 			this.loadingAnimation = new Loader(
 				this.ui,
-				spinner => theme.fg("accent", spinner),
-				renderWorkingMessage,
+				spinner => {
+					const accent = this.#getWorkingMessageAccent();
+					return accent ? `${accent.main}${spinner}\x1b[39m` : theme.fg("accent", spinner);
+				},
+				message => renderWorkingMessage(message, this.#getWorkingMessageAccent()),
 				this.#defaultWorkingMessage,
 				getSymbolTheme().spinnerFrames,
 			);
@@ -2271,8 +2327,8 @@ export class InteractiveMode implements InteractiveModeContext {
 		this.#uiHelpers.renderSessionContext(sessionContext, options);
 	}
 
-	renderInitialMessages(prebuiltContext?: SessionContext): void {
-		this.#uiHelpers.renderInitialMessages(prebuiltContext);
+	renderInitialMessages(prebuiltContext?: SessionContext, options?: { preserveExistingChat?: boolean }): void {
+		this.#uiHelpers.renderInitialMessages(prebuiltContext, options);
 	}
 
 	getUserMessageText(message: Message): string {

package/src/modes/shared.ts

@@ -36,4 +36,20 @@ export function getTabBarTheme(): TabBarTheme {
 	};
 }
 
+// ═══════════════════════════════════════════════════════════════════════════
+// Working-message hint
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Suffix appended to the loader's working message to remind users they can
+ * abort with Esc. Rendered with the active theme's bracket glyphs so it stays
+ * visually consistent with badges and other bracketed UI affordances.
+ *
+ * The leading space separates the hint from the message body and is consumed
+ * by `endsWith`/`slice` matching in the loader renderer.
+ */
+export function interruptHint(): string {
+	return ` ${theme.format.bracketLeft}esc${theme.format.bracketRight}`;
+}
+
 export { parseCommandArgs } from "../utils/command-args";

package/src/modes/theme/shimmer.ts

@@ -24,14 +24,20 @@ const BOLD_CLOSE = "\x1b[22m";
 type ShimmerTheme = Pick<Theme, "bold" | "fg" | "getFgAnsi">;
 type ShimmerMode = "classic" | "kitt" | "disabled";
 
+type ShimmerPaletteTier = ThemeColor | { ansi: string };
+
+function resolveTierAnsi(theme: ShimmerTheme, tier: ShimmerPaletteTier): string {
+	return typeof tier === "string" ? theme.getFgAnsi(tier) : tier.ansi;
+}
+
 /** Three-tier color stack a shimmer character cycles through as the band sweeps. */
 export interface ShimmerPalette {
 	/** Color for chars outside / at the edge of the band (intensity < ~0.22). */
-	low: ThemeColor;
+	low: ShimmerPaletteTier;
 	/** Color for chars approaching the crest (~0.22 ≤ intensity < ~0.65). */
-	mid: ThemeColor;
+	mid: ShimmerPaletteTier;
 	/** Color at the band's crest (intensity ≥ ~0.65). */
-	high: ThemeColor;
+	high: ShimmerPaletteTier;
 	/** Whether to bold the crest tier. Default `false`. */
 	bold?: boolean;
 }
@@ -78,11 +84,14 @@ function compile(theme: ShimmerTheme, palette: ShimmerPalette): CompiledPalette
 	const p = palette as ShimmerPalette & PaletteCache;
 	const cached = p[kCompiled];
 	if (cached && p[kCompiledFor] === theme) return cached;
-	const highOpen = palette.bold ? `${BOLD_OPEN}${theme.getFgAnsi(palette.high)}` : theme.getFgAnsi(palette.high);
+	const lowOpen = resolveTierAnsi(theme, palette.low);
+	const midOpen = resolveTierAnsi(theme, palette.mid);
+	const highColorOpen = resolveTierAnsi(theme, palette.high);
+	const highOpen = palette.bold ? `${BOLD_OPEN}${highColorOpen}` : highColorOpen;
 	const highClose = palette.bold ? `${BOLD_CLOSE}${FG_RESET}` : FG_RESET;
 	const out: CompiledPalette = {
-		low: { open: theme.getFgAnsi(palette.low), close: FG_RESET },
-		mid: { open: theme.getFgAnsi(palette.mid), close: FG_RESET },
+		low: { open: lowOpen, close: FG_RESET },
+		mid: { open: midOpen, close: FG_RESET },
 		high: { open: highOpen, close: highClose },
 	};
 	p[kCompiledFor] = theme;

package/src/modes/theme/theme.ts

@@ -295,7 +295,7 @@ const UNICODE_SYMBOLS: SymbolMap = {
 	"thinking.low": "◑ low",
 	"thinking.medium": "◒ med",
 	"thinking.high": "◕ high",
-	"thinking.xhigh": "◉ xhi",
+	"thinking.xhigh": "◉ xhigh",
 	// Checkboxes
 	"checkbox.checked": "☑",
 	"checkbox.unchecked": "☐",

package/src/modes/types.ts

@@ -186,7 +186,7 @@ export interface InteractiveModeContext {
 		sessionContext: SessionContext,
 		options?: { updateFooter?: boolean; populateHistory?: boolean },
 	): void;
-	renderInitialMessages(prebuiltContext?: SessionContext): void;
+	renderInitialMessages(prebuiltContext?: SessionContext, options?: { preserveExistingChat?: boolean }): void;
 	getUserMessageText(message: Message): string;
 	findLastAssistantMessage(): AssistantMessage | undefined;
 	extractAssistantText(message: AssistantMessage): string;

package/src/modes/utils/context-usage.ts

@@ -37,7 +37,7 @@ export interface ContextBreakdown {
 	freeTokens: number;
 }
 
-function estimateSkillsTokens(skills: readonly Skill[]): number {
+export function estimateSkillsTokens(skills: readonly Skill[]): number {
 	const fragments: string[] = [];
 	for (const skill of skills) {
 		// "- name: description\n" wire framing tokenizes ~identically to the
@@ -47,7 +47,9 @@ function estimateSkillsTokens(skills: readonly Skill[]): number {
 	return countTokens(fragments);
 }
 
-function estimateToolSchemaTokens(tools: ReadonlyArray<Pick<Tool, "name" | "description" | "parameters">>): number {
+export function estimateToolSchemaTokens(
+	tools: ReadonlyArray<Pick<Tool, "name" | "description" | "parameters">>,
+): number {
 	const fragments: string[] = [];
 	for (const tool of tools) {
 		fragments.push(tool.name, tool.description);
@@ -60,6 +62,27 @@ function estimateToolSchemaTokens(tools: ReadonlyArray<Pick<Tool, "name" | "desc
 	return countTokens(fragments);
 }
 
+/**
+ * Compute just the NON-MESSAGE token total: system prompt (with its skills
+ * section subtracted, since skills are tokenized separately) + system context
+ * (the rest of the system-prompt array) + tools + skills.
+ *
+ * Exposed so callers like `StatusLineComponent` can cache the non-message
+ * total separately from the message total. Non-message inputs (skills,
+ * tools, system prompt) change rarely; the message list grows on every
+ * streaming turn. Splitting the two lets the caller refresh each on its own
+ * cadence — non-message recomputed only when the inputs identity changes,
+ * messages walked incrementally as new entries append.
+ */
+export function computeNonMessageTokens(session: AgentSession): number {
+	const skillsTokens = estimateSkillsTokens(session.skills ?? []);
+	const toolsTokens = estimateToolSchemaTokens(session.agent?.state?.tools ?? []);
+	const systemPromptParts = session.systemPrompt ?? [];
+	const systemContextTokens = countTokens(systemPromptParts.slice(1));
+	const systemPromptTokens = Math.max(0, countTokens(systemPromptParts[0] ?? "") - skillsTokens);
+	return systemPromptTokens + systemContextTokens + toolsTokens + skillsTokens;
+}
+
 /**
  * Compute a breakdown of estimated context usage by category for the active
  * session and model.

package/src/modes/utils/ui-helpers.ts

@@ -29,6 +29,9 @@ import type { SessionContext } from "../../session/session-manager";
 import { formatBytes, formatDuration } from "../../tools/render-utils";
 
 type TextBlock = { type: "text"; text: string };
+interface RenderInitialMessagesOptions {
+	preserveExistingChat?: boolean;
+}
 
 type QueuedMessages = {
 	steering: string[];
@@ -459,9 +462,10 @@ export class UiHelpers {
 		this.ctx.ui.requestRender();
 	}
 
-	renderInitialMessages(prebuiltContext?: SessionContext): void {
+	renderInitialMessages(prebuiltContext?: SessionContext, options: RenderInitialMessagesOptions = {}): void {
 		// This path is used to rebuild the visible chat transcript (e.g. after custom/debug UI).
 		// Clear existing rendered chat first to avoid duplicating the full session in the container.
+		const preservedChatChildren = options.preserveExistingChat ? this.ctx.chatContainer.children : undefined;
 		this.ctx.chatContainer.clear();
 		this.ctx.pendingMessagesContainer.clear();
 		this.ctx.pendingBashComponents = [];
@@ -486,6 +490,12 @@ export class UiHelpers {
 			const times = compactionCount === 1 ? "1 time" : `${compactionCount} times`;
 			this.ctx.showStatus(`Session compacted ${times}`);
 		}
+		if (preservedChatChildren && preservedChatChildren.length > 0) {
+			for (const child of preservedChatChildren) {
+				this.ctx.chatContainer.addChild(child);
+			}
+			this.ctx.ui.requestRender();
+		}
 	}
 
 	clearEditor(): void {