@underactive/pi-topping 0.6.4 → 0.7.0

package/src/prompt-decorator.ts

@@ -1,6 +1,7 @@
-import type { MessageRenderer, ThemeColor } from "@earendil-works/pi-coding-agent";
+import type { MessageRenderer } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
-import { DEFAULT_SETTINGS, isBorderStyle, isSettingColor, type BorderStyle, type DoneMarkerBorderStyle, type DoneMarkerStyle, type SettingColor } from "./settings.ts";
+import { getThinkingLevelColorizer, isThinkingLevel, type ThinkingLevel } from "./format.ts";
+import { DEFAULT_SETTINGS, isBorderStyle, isPromptBorderColor, type BorderStyle, type DoneMarkerBorderColor, type DoneMarkerBorderStyle, type DoneMarkerStyle, type PromptBorderColor } from "./settings.ts";
 import { stripControlChars } from "./util.ts";
 
 export const PROMPT_BOX_TYPE = "pi-topping-prompt";
@@ -25,11 +26,15 @@ export interface PromptBoxDetails {
 	icon?: string;
 	provider?: string;
 	model?: string;
-	borderColor?: ThemeColor;
+	borderColor?: PromptBorderColor;
 	borderStyle?: BorderStyle;
+	thinkingLevel?: ThinkingLevel;
 }
 
-type PromptTheme = { fg(color: string, text: string): string };
+type PromptTheme = {
+	fg(color: string, text: string): string;
+	getThinkingBorderColor(level: ThinkingLevel): (text: string) => string;
+};
 
 const COMPLETION_MARKER_TRAIL_RUNS = [6, 4, 2, 1] as const;
 
@@ -51,15 +56,16 @@ export function buildCompletionMarkerLine(
 	width: number,
 	theme: PromptTheme,
 	borderStyle: DoneMarkerBorderStyle,
-	borderColor: SettingColor,
+	borderColor: DoneMarkerBorderColor,
 	markerStyle: DoneMarkerStyle = DEFAULT_SETTINGS.decorations.doneMarkerStyle,
+	thinkingLevel?: ThinkingLevel,
 ): string {
 	const safeWidth = Math.max(0, Math.floor(width));
 	if (safeWidth === 0) return "";
 	if (borderStyle === "none") return truncateToWidth(content, safeWidth);
 
 	const g = BORDER_GLYPHS[borderStyle];
-	const border = (text: string) => theme.fg(borderColor, text);
+	const border = getThinkingLevelColorizer(theme, borderColor, thinkingLevel);
 	const prefix = `${g.bl}${g.h.repeat(2)} `;
 
 	const suffix = markerStyle === "bookend"
@@ -81,8 +87,10 @@ export function buildPromptBoxLines(
 
 	const borderStyle = isBorderStyle(options.borderStyle) ? options.borderStyle : "double";
 	const g = BORDER_GLYPHS[borderStyle];
-	const borderColor = isSettingColor(options.borderColor) ? options.borderColor : DEFAULT_SETTINGS.decorations.borderColor;
-	const border = (text: string) => theme.fg(borderColor, text);
+	const borderColor = isPromptBorderColor(options.borderColor) ? options.borderColor : DEFAULT_SETTINGS.decorations.borderColor;
+	const thinkingLevel = isThinkingLevel(options.thinkingLevel) ? options.thinkingLevel : undefined;
+	const border = getThinkingLevelColorizer(theme, borderColor, thinkingLevel);
+	const iconColor = (text: string) => theme.fg("text", text);
 	const label = (text: string) => theme.fg("customMessageLabel", text);
 	const muted = (text: string) => theme.fg("dim", text);
 	const bodyText = (text: string) => theme.fg("customMessageText", text);
@@ -113,7 +121,7 @@ export function buildPromptBoxLines(
 	const titleLength = icon ? visibleWidth(`${g.h}${g.h} ${icon} `) : 0;
 	const timeLength = time ? time.length + 3 : 0; // time + right-side " ═"
 	const topFill = Math.max(0, innerWidth - titleLength - timeLength);
-	const iconSeg = icon ? `${border(`${g.h}${g.h} `)}${label(icon)}${border(" ")}` : "";
+	const iconSeg = icon ? `${border(`${g.h}${g.h} `)}${iconColor(icon)}${border(" ")}` : "";
 	const timeSeg = time ? `${border(" ")}${muted(time)}${border(` ${g.h}`)}` : "";
 	const topLine = border(g.tl) + iconSeg + border(g.h.repeat(topFill)) + timeSeg + border(g.tr);
 	const lines = [visibleWidth(topLine) > width ? truncateToWidth(topLine, width) : topLine];
@@ -138,16 +146,19 @@ export function buildPromptBoxLines(
 export const promptBoxRenderer: MessageRenderer<PromptBoxDetails> = (message, _options, theme) => {
 	const content = typeof message.content === "string" ? message.content.replace(/(?![\n\t])[\p{Cc}\p{Cf}]/gu, "") : "";
 	const details = (message.details ?? {}) as PromptBoxDetails;
-	const linesByWidth = new Map<number, string[]>();
+	let cachedWidth: number | undefined;
+	let cachedLines: string[] | undefined;
 	return {
 		render(width: number): string[] {
-			let lines = linesByWidth.get(width);
-			if (!lines) {
-				lines = buildPromptBoxLines(content, details.submittedAt, width, theme, details);
-				linesByWidth.set(width, lines);
+			if (cachedWidth !== width) {
+				cachedWidth = width;
+				cachedLines = buildPromptBoxLines(content, details.submittedAt, width, theme, details);
 			}
-			return lines;
+			return cachedLines!;
+		},
+		invalidate() {
+			cachedWidth = undefined;
+			cachedLines = undefined;
 		},
-		invalidate() { linesByWidth.clear(); },
 	};
 };

package/src/session.ts

@@ -18,6 +18,8 @@ import {
 	buildWorkingMessage,
 	DEFAULT_WORKING_WORD,
 	dimAttribute,
+	getThinkingLevelColorizer,
+	isThinkingLevel,
 	ELAPSED_INTERVAL_MS,
 	fadeThemeColorString,
 	formatElapsed,
@@ -34,15 +36,16 @@ import {
 	TOKEN_RATE_FADE_SHADE_COUNT,
 	TOKEN_RATE_PLACEHOLDER,
 	StreamingWordCounter,
+	type ThinkingLevel,
 } from "./format.ts";
 import { isSiblingSetupEnabled } from "./flags.ts";
 import { showMenu } from "./menu.ts";
 import { registerSetupCommand } from "./setup-command.ts";
-import { applyMenuResult, buildMenuSections, loadSettings, saveSettings, type SettingColor } from "./settings.ts";
+import { applyMenuResult, buildMenuSections, loadSettings, saveSettings, type ThinkingLevelColor } from "./settings.ts";
 import { notifyMissingToppingsOnce } from "./toppings.ts";
 import { PreviewRenderer } from "./preview.ts";
 import { buildCompletionMarkerContent, buildCompletionMarkerLine, PROMPT_BOX_TYPE, promptBoxRenderer, type PromptBoxDetails } from "./prompt-decorator.ts";
-import { stripControlChars } from "./util.ts";
+import { modelsResemble, stripControlChars } from "./util.ts";
 import { loadBundledWordPacks, loadUserWordPacks, pickWorkingTextSelection, type WorkingTextSelection, type WordPack } from "./word-packs.ts";
 
 type MessageStartEvent = Extract<ExtensionEvent, { type: "message_start" }>;
@@ -73,6 +76,7 @@ interface DoneEntryData {
 	elapsedMs: number;
 	tokens?: number;
 	midTurnInputs?: number;
+	thinkingLevel?: ThinkingLevel;
 }
 
 interface SessionState {
@@ -86,6 +90,8 @@ interface SessionState {
 	lastTokenRateSampledAt: number;
 	lastTokenRateTotal: number;
 	responseModel: string;
+	/** Last raw responseModel value seen, or the NOT_SENT sentinel before the first call. */
+	lastResponseModelRaw: unknown;
 	responseModelHoldTimer: ReturnType<typeof setTimeout> | null;
 	responseModelFadeTimer: ReturnType<typeof setInterval> | null;
 	responseModelFadeGeneration: number;
@@ -123,6 +129,7 @@ function makeFreshState(): SessionState {
 		lastTokenRateSampledAt: 0,
 		lastTokenRateTotal: 0,
 		responseModel: "",
+		lastResponseModelRaw: NOT_SENT,
 		responseModelHoldTimer: null,
 		responseModelFadeTimer: null,
 		responseModelFadeGeneration: 0,
@@ -148,6 +155,7 @@ export class SessionManager {
 	#settings = loadSettings();
 	#userPacks: WordPack[] = [];
 	#bundledPacks = loadBundledWordPacks();
+	#allPacks: WordPack[] = [...this.#bundledPacks];
 	#currentCtx: ExtensionContext | null = null;
 	readonly #pi: ExtensionAPI;
 
@@ -163,6 +171,7 @@ export class SessionManager {
 		this.#state = makeFreshState();
 		this.#settings = loadSettings();
 		this.#userPacks = loadUserWordPacks();
+		this.#allPacks = [...this.#bundledPacks, ...this.#userPacks];
 		this.#state.activityMeter.setDirection(this.#settings.decorations.meterDirection);
 		if (this.usable(ctx)) {
 			this.applyIndicator(ctx);
@@ -194,6 +203,7 @@ export class SessionManager {
 							model: ctx.model?.id,
 							borderColor: this.#settings.decorations.borderColor,
 							borderStyle: this.#settings.decorations.borderStyle,
+							thinkingLevel: ctx.thinkingLevel,
 						},
 					},
 					{ triggerTurn: true },
@@ -212,6 +222,7 @@ export class SessionManager {
 		if (!this.usable(ctx)) return;
 		if (!this.#state.startTime) this.resetTurn(Date.now());
 		this.#state.busy = true;
+		if (!this.#state.waiting) this.applyIndicator(ctx);
 		this.startTimer();
 		this.tick();
 	};
@@ -227,19 +238,17 @@ export class SessionManager {
 
 	#onMessageUpdate = async (event: MessageUpdateEvent, ctx: ExtensionContext): Promise<void> => {
 		this.#currentCtx = ctx;
+		if (!this.usable(ctx)) return;
 		const assistantEvent = event.assistantMessageEvent;
 		if (
-			this.usable(ctx) &&
 			assistantEvent &&
 			(assistantEvent.type === "text_delta" || assistantEvent.type === "thinking_delta")
 		) {
 			this.#state.liveTokens += this.#counter.count(assistantEvent.delta, assistantEvent.type);
 		}
-		if (this.usable(ctx)) {
-			const rawResponseModel = (assistantEvent as { partial?: { responseModel?: unknown } } | undefined)?.partial?.responseModel
-				?? (event.message as { responseModel?: unknown } | undefined)?.responseModel;
-			this.updateResponseModel(rawResponseModel);
-		}
+		const rawResponseModel = (assistantEvent as { partial?: { responseModel?: unknown } } | undefined)?.partial?.responseModel
+			?? (event.message as { responseModel?: unknown } | undefined)?.responseModel;
+		this.updateResponseModel(rawResponseModel);
 	};
 
 	#onMessageEnd = async (event: MessageEndEvent, ctx: ExtensionContext): Promise<void> => {
@@ -314,6 +323,7 @@ export class SessionManager {
 				elapsedMs,
 				tokens: this.#state.confirmTokens,
 				midTurnInputs: this.#state.midTurnInputs,
+				thinkingLevel: ctx.thinkingLevel,
 			});
 		}
 		this.#currentCtx = null;
@@ -331,8 +341,8 @@ export class SessionManager {
 		const elapsedMs = typeof entry.data.elapsedMs === "number" && Number.isFinite(entry.data.elapsedMs) ? entry.data.elapsedMs : 0;
 		const features = this.#settings.features;
 		const details: string[] = [];
-		if (features.doneMarkerTokens && typeof entry.data.tokens === "number") details.push(`↓ ${formatTokens(entry.data.tokens)} tokens`);
-		if (features.doneMarkerInputs && typeof entry.data.midTurnInputs === "number" && entry.data.midTurnInputs) {
+		if (features.doneMarkerTokens && typeof entry.data.tokens === "number" && Number.isFinite(entry.data.tokens) && entry.data.tokens >= 0) details.push(`↓ ${formatTokens(entry.data.tokens)} tokens`);
+		if (features.doneMarkerInputs && typeof entry.data.midTurnInputs === "number" && Number.isInteger(entry.data.midTurnInputs) && entry.data.midTurnInputs > 0) {
 			details.push(`${entry.data.midTurnInputs} mid-turn input${entry.data.midTurnInputs === 1 ? "" : "s"}`);
 		}
 		const icon = features.doneMarkerIcon ? theme.fg("text", this.#settings.decorations.useNerdFont ? "" : "π") : "";
@@ -340,6 +350,7 @@ export class SessionManager {
 		const borderStyle = this.#settings.decorations.doneMarkerBorderStyle;
 		const borderColor = this.#settings.decorations.doneMarkerBorderColor;
 		const markerStyle = this.#settings.decorations.doneMarkerStyle;
+		const thinkingLevel = isThinkingLevel(entry.data.thinkingLevel) ? entry.data.thinkingLevel : undefined;
 		if (borderStyle === "none") return new Text(markerContent);
 
 		let cachedWidth: number | undefined;
@@ -348,7 +359,7 @@ export class SessionManager {
 			render(width: number): string[] {
 				if (cachedWidth !== width) {
 					cachedWidth = width;
-					cachedLines = ["", buildCompletionMarkerLine(markerContent, width, theme, borderStyle, borderColor, markerStyle), ""];
+					cachedLines = ["", buildCompletionMarkerLine(markerContent, width, theme, borderStyle, borderColor, markerStyle, thinkingLevel), ""];
 				}
 				return cachedLines!;
 			},
@@ -407,11 +418,6 @@ export class SessionManager {
 		return this.#settings.decorations.animatedSpinner && this.#settings.loaderOrder[0] !== "spinner";
 	}
 
-	private spinnerColor(): SettingColor {
-		const decorations = this.#settings.decorations;
-		return decorations.spinnerColorEnabled ? decorations.spinnerColor : "accent";
-	}
-
 	private indicatorFingerprint(): string {
 		const decorations = this.#settings.decorations;
 		return `${decorations.animatedSpinner}:${decorations.spinnerColor}:${decorations.spinnerColorEnabled}:${this.#settings.loaderOrder[0]}`;
@@ -430,12 +436,10 @@ export class SessionManager {
 			return;
 		}
 
-		const color = this.spinnerColor();
-		if (color === "accent") {
-			ctx.ui.setWorkingIndicator(undefined);
-			return;
-		}
-		ctx.ui.setWorkingIndicator({ frames: SPINNER_FRAMES.map((frame) => ctx.ui.theme.fg(color, frame)) });
+		const color = this.#settings.decorations.spinnerColor;
+		ctx.ui.setWorkingIndicator({
+			frames: SPINNER_FRAMES.map((frame) => getThinkingLevelColorizer(ctx.ui.theme, color, ctx.thinkingLevel)(frame)),
+		});
 	}
 
 	private stopTimer(): void {
@@ -446,7 +450,17 @@ export class SessionManager {
 	}
 
 	private updateResponseModel(raw: unknown): void {
+		if (raw === this.#state.lastResponseModelRaw) return;
+		this.#state.lastResponseModelRaw = raw;
 		const responseModel = typeof raw === "string" ? stripControlChars(raw).trim() : "";
+		const selectedModel = this.#currentCtx?.model?.id;
+		if (responseModel && modelsResemble(selectedModel, responseModel)) {
+			if (this.#state.responseModel) {
+				this.#state.responseModel = "";
+				this.tick();
+			}
+			return;
+		}
 		if (responseModel && responseModel !== this.#state.responseModel) {
 			this.#state.responseModel = responseModel;
 			this.tick();
@@ -470,13 +484,19 @@ export class SessionManager {
 		}
 	}
 
-	private startResponseModelFade(ctx: ExtensionContext, model: string, color: SettingColor, dimmed: boolean): void {
+	private startResponseModelFade(ctx: ExtensionContext, model: string, color: ThinkingLevelColor, dimmed: boolean): void {
 		this.cancelResponseModelFade(ctx);
 		const generation = this.#state.responseModelFadeGeneration;
+		const colorizer = getThinkingLevelColorizer(ctx.ui.theme, color, ctx.thinkingLevel);
 		const render = (shade?: number): void => {
 			const colored = shade === undefined
-				? ctx.ui.theme.fg(color, model)
-				: fadeThemeColorString(model, shade, ctx.ui.theme, color);
+				? colorizer(model)
+				: fadeThemeColorString(
+					model,
+					shade,
+					ctx.ui.theme,
+					colorizer,
+				);
 			const responseModel = dimmed ? dimAttribute(colored) : colored;
 			ctx.ui.setStatus(RESPONSE_MODEL_STATUS_KEY, responseModel);
 		};
@@ -511,7 +531,7 @@ export class SessionManager {
 	}
 
 	private pickWorkingWord(): WorkingTextSelection {
-		return pickWorkingTextSelection(this.#settings.wordPacks, [...this.#bundledPacks, ...this.#userPacks]);
+		return pickWorkingTextSelection(this.#settings.wordPacks, this.#allPacks);
 	}
 
 	private resetTurn(now: number): void {
@@ -523,6 +543,7 @@ export class SessionManager {
 		state.confirmTokens = 0;
 		state.liveTokens = 0;
 		state.responseModel = "";
+		state.lastResponseModelRaw = NOT_SENT;
 		state.activityMeter.reset();
 		resetTokenRateState(state);
 		state.midTurnInputs = 0;
@@ -557,10 +578,10 @@ export class SessionManager {
 			state.lastTokenRateSampledAt = now;
 		}
 		const spinner = this.spinnerInMessage()
-			? ctx.ui.theme.fg(this.spinnerColor(), SPINNER_FRAMES[Math.floor(now / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!)
+			? getThinkingLevelColorizer(ctx.ui.theme, decorations.spinnerColor, ctx.thinkingLevel)(SPINNER_FRAMES[Math.floor(now / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!)
 			: "";
 		const responseModelColored = features.responseModel && state.responseModel
-			? ctx.ui.theme.fg(decorations.responseModelColor, state.responseModel)
+			? getThinkingLevelColorizer(ctx.ui.theme, decorations.responseModelColor, ctx.thinkingLevel)(state.responseModel)
 			: "";
 		const responseModel = responseModelColored && decorations.responseModelDimmed ? dimAttribute(responseModelColored) : responseModelColored;
 		if (isFullyDefaultAppearance(features, decorations)) {
@@ -578,17 +599,13 @@ export class SessionManager {
 		const styled = decorations.shimmer
 			? shimmerString(word, now - state.shimmerOrigin, ctx.ui.theme, decorations.shimmerDirection, decorations.shimmerSpeed, decorations.shimmerInverted)
 			: ctx.ui.theme.fg("text", word);
-		const meter = decorations.tokenActivityMonitor
-			? state.activityMeter.render((level, char) =>
-				ActivityMeter.colorizeCell(
-					level,
-					char,
-					ctx.ui.theme,
-					decorations.meterColorEnabled ? decorations.meterColor : "accent",
-					decorations.meterDimmed,
-				),
-			)
-			: "";
+		let meter = "";
+		if (decorations.tokenActivityMonitor) {
+			const meterColorizer = getThinkingLevelColorizer(ctx.ui.theme, decorations.meterColor, ctx.thinkingLevel);
+			meter = state.activityMeter.render((level, char) =>
+				ActivityMeter.colorizeCell(level, char, ctx.ui.theme, meterColorizer, decorations.meterDimmed),
+			);
+		}
 		let tokenRateText = "";
 		if (features.tokenRate) {
 			const latestTokenRate = formatTokenRate(state.rateTracker.tokenRate);
@@ -600,18 +617,22 @@ export class SessionManager {
 			}
 			tokenRateText = state.tokenRateText;
 		}
-		const tokenRateSegment = !features.tokenRate
-			? ""
-			: !tokenRateText
-				? ctx.ui.theme.fg("dim", TOKEN_RATE_PLACEHOLDER)
-				: now < state.tokenRateFadeStartsAt
-					? ctx.ui.theme.fg(decorations.tokenRateColor, tokenRateText)
+		let tokenRateSegment = "";
+		if (features.tokenRate) {
+			if (!tokenRateText) {
+				tokenRateSegment = ctx.ui.theme.fg("dim", TOKEN_RATE_PLACEHOLDER);
+			} else {
+				const tokenRateColorizer = getThinkingLevelColorizer(ctx.ui.theme, decorations.tokenRateColor, ctx.thinkingLevel);
+				tokenRateSegment = now < state.tokenRateFadeStartsAt
+					? tokenRateColorizer(tokenRateText)
 					: fadeThemeColorString(
 						tokenRateText,
 						Math.floor((now - state.tokenRateFadeStartsAt) / (TOKEN_RATE_FADE_MS / TOKEN_RATE_FADE_SHADE_COUNT)),
 						ctx.ui.theme,
-						decorations.tokenRateColor,
+						tokenRateColorizer,
 					);
+			}
+		}
 		const tokenRateStyled = tokenRateSegment && decorations.tokenRateDimmed ? dimAttribute(tokenRateSegment) : tokenRateSegment;
 		const msg = buildWorkingMessage(
 			ctx.ui.theme,
@@ -639,8 +660,9 @@ export class SessionManager {
 		}
 
 		this.#userPacks = loadUserWordPacks();
+		this.#allPacks = [...this.#bundledPacks, ...this.#userPacks];
 		const before = this.indicatorFingerprint();
-		const preview = new PreviewRenderer(ctx, [...this.#bundledPacks, ...this.#userPacks]);
+		const preview = new PreviewRenderer(ctx, this.#allPacks);
 		const result = await showMenu<Record<string, boolean | string>>(ctx, {
 			title: "Pi Topping: Settings",
 			maxHeight: "75%",