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

package/src/main.ts

@@ -281,7 +281,7 @@ async function runInteractiveMode(
 		})
 		.catch(() => {});
 
-	mode.renderInitialMessages();
+	mode.renderInitialMessages(undefined, { preserveExistingChat: true });
 
 	for (const notify of notifs) {
 		if (!notify) {

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

@@ -92,9 +92,26 @@ interface MenuRoleAction {
 	role: string; // now accepts custom role strings
 }
 
+interface ProviderTabState {
+	id: string;
+	label: string;
+	providerId?: string;
+}
 const ALL_TAB = "ALL";
 const CANONICAL_TAB = "CANONICAL";
 
+const STATIC_PROVIDER_TABS: ProviderTabState[] = [
+	{ id: ALL_TAB, label: ALL_TAB },
+	{ id: CANONICAL_TAB, label: CANONICAL_TAB },
+];
+
+function formatProviderTabLabel(providerId: string): string {
+	return providerId.replace(/[-_]+/g, " ").toUpperCase();
+}
+
+function createProviderTab(providerId: string): ProviderTabState {
+	return { id: providerId, label: formatProviderTabLabel(providerId), providerId };
+}
 /**
  * Component that renders a model selector with provider tabs and context menu.
  * - Tab/Arrow Left/Right: Switch between provider tabs
@@ -126,7 +143,7 @@ export class ModelSelectorComponent extends Container {
 	#menuRoleActions: MenuRoleAction[] = [];
 
 	// Tab state
-	#providers: string[] = [ALL_TAB];
+	#providers: ProviderTabState[] = STATIC_PROVIDER_TABS;
 	#activeTabIndex: number = 0;
 
 	// Context menu state
@@ -432,23 +449,29 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	#buildProviderTabs(): void {
+		const activeTabId = this.#getActiveTab().id;
 		const providerSet = new Set<string>();
 		for (const item of this.#allModels) {
-			providerSet.add(item.provider.toUpperCase());
+			providerSet.add(item.provider);
 		}
 		for (const provider of this.#modelRegistry.getDiscoverableProviders()) {
-			providerSet.add(provider.toUpperCase());
+			providerSet.add(provider);
 		}
-		const sortedProviders = Array.from(providerSet).sort();
-		this.#providers = [ALL_TAB, CANONICAL_TAB, ...sortedProviders];
+		const sortedProviderIds = Array.from(providerSet).sort((left, right) =>
+			formatProviderTabLabel(left).localeCompare(formatProviderTabLabel(right)),
+		);
+		this.#providers = [...STATIC_PROVIDER_TABS, ...sortedProviderIds.map(createProviderTab)];
+		const activeIndex = this.#providers.findIndex(tab => tab.id === activeTabId);
+		this.#activeTabIndex =
+			activeIndex >= 0 ? activeIndex : Math.min(this.#activeTabIndex, this.#providers.length - 1);
 	}
 
 	async #refreshSelectedProvider(): Promise<void> {
-		const activeProvider = this.#getActiveProvider();
-		if (this.#scopedModels.length > 0 || activeProvider === ALL_TAB || activeProvider === CANONICAL_TAB) {
+		const providerId = this.#getActiveProviderId();
+		if (this.#scopedModels.length > 0 || !providerId) {
 			return;
 		}
-		await this.#modelRegistry.refreshProvider(activeProvider.toLowerCase());
+		await this.#modelRegistry.refreshProvider(providerId);
 		await this.#loadModels();
 		this.#buildProviderTabs();
 		this.#updateTabBar();
@@ -459,7 +482,7 @@ export class ModelSelectorComponent extends Container {
 	#updateTabBar(): void {
 		this.#headerContainer.clear();
 
-		const tabs: Tab[] = this.#providers.map(provider => ({ id: provider, label: provider }));
+		const tabs: Tab[] = this.#providers.map(provider => ({ id: provider.id, label: provider.label }));
 		const tabBar = new TabBar("Models", tabs, getTabBarTheme(), this.#activeTabIndex);
 		tabBar.onTabChange = (_tab, index) => {
 			this.#activeTabIndex = index;
@@ -475,29 +498,38 @@ export class ModelSelectorComponent extends Container {
 		this.#headerContainer.addChild(tabBar);
 	}
 
-	#getActiveProvider(): string {
-		return this.#providers[this.#activeTabIndex] ?? ALL_TAB;
+	#getActiveTab(): ProviderTabState {
+		return this.#providers[this.#activeTabIndex] ?? STATIC_PROVIDER_TABS[0]!;
+	}
+
+	#getActiveTabId(): string {
+		return this.#getActiveTab().id;
+	}
+
+	#getActiveProviderId(): string | undefined {
+		return this.#getActiveTab().providerId;
 	}
 
 	#isCanonicalTab(): boolean {
-		return this.#getActiveProvider() === CANONICAL_TAB;
+		return this.#getActiveTabId() === CANONICAL_TAB;
 	}
 
 	#filterModels(query: string): void {
-		const activeProvider = this.#getActiveProvider();
-		const isCanonicalTab = activeProvider === CANONICAL_TAB;
+		const activeTabId = this.#getActiveTabId();
+		const activeProviderId = this.#getActiveProviderId();
+		const isCanonicalTab = activeTabId === CANONICAL_TAB;
 
 		// Start with all models or filter by provider/canonical view
 		let baseModels = this.#allModels;
 		const baseCanonicalModels = this.#canonicalModels;
-		if (!isCanonicalTab && activeProvider !== ALL_TAB) {
-			baseModels = this.#allModels.filter(m => m.provider.toUpperCase() === activeProvider);
+		if (activeProviderId) {
+			baseModels = this.#allModels.filter(m => m.provider === activeProviderId);
 		}
 
 		// Apply fuzzy filter if query is present
 		if (query.trim()) {
 			// If user is searching from a provider tab, auto-switch to ALL to show global provider results.
-			if (activeProvider !== ALL_TAB && !isCanonicalTab) {
+			if (activeProviderId && !isCanonicalTab) {
 				this.#activeTabIndex = 0;
 				if (this.#tabBar && this.#tabBar.getActiveIndex() !== 0) {
 					this.#tabBar.setActiveIndex(0);
@@ -577,11 +609,11 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	#getProviderEmptyStateMessage(): string | undefined {
-		const activeProvider = this.#getActiveProvider();
-		if (activeProvider === ALL_TAB || activeProvider === CANONICAL_TAB || this.#searchInput.getValue().trim()) {
+		const activeProviderId = this.#getActiveProviderId();
+		if (!activeProviderId || this.#searchInput.getValue().trim()) {
 			return undefined;
 		}
-		const state = this.#modelRegistry.getProviderDiscoveryState(activeProvider.toLowerCase());
+		const state = this.#modelRegistry.getProviderDiscoveryState(activeProviderId);
 		if (!state) {
 			return undefined;
 		}
@@ -619,8 +651,7 @@ export class ModelSelectorComponent extends Container {
 		);
 		const endIndex = Math.min(startIndex + maxVisible, visibleItems.length);
 
-		const activeProvider = this.#getActiveProvider();
-		const showProvider = activeProvider === ALL_TAB;
+		const showProvider = this.#getActiveTabId() === ALL_TAB;
 
 		// Show visible slice of filtered models
 		for (let i = startIndex; i < endIndex; i++) {

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

@@ -760,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

@@ -691,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 {
@@ -1876,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;
 		}
@@ -1889,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);
 	}
 
@@ -2312,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/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 {

package/src/prompts/agents/frontmatter.md

@@ -6,5 +6,6 @@ description: {{jsonStringify description}}
 {{/if}}{{#if model}}model: {{jsonStringify model}}
 {{/if}}{{#if thinkingLevel}}thinking-level: {{jsonStringify thinkingLevel}}
 {{/if}}{{#if blocking}}blocking: true
+{{/if}}{{#if autoloadSkills}}autoloadSkills: {{jsonStringify autoloadSkills}}
 {{/if}}---
 {{body}}