@underactive/pi-topping 0.11.1 → 0.12.0

package/README.md

@@ -2,15 +2,15 @@
 
 We garnish our pies. It seemed rude not to extend Pi the same courtesy. This is a [Pi](https://github.com/earendil-works/pi-coding-agent) extension that adds some quality of life improvements to Pi's UX, while looking good in the process:
 
-**User Prompt** — high-vis bordered prompt box with configurable border color and style, pi icon toggle, timestamp, and provider/model label. The box, timestamp, and provider/model label are display-only; Pi sends your prompt text unchanged to the model, so they do not affect LLM prompt caching. Prompts submitted while Pi is working (steer / `Alt+Enter` follow-up) are left undecorated so Pi's native `Steering:` / `Follow-up:` queue rows still render.
+**User Prompt** — high-vis bordered prompt box with configurable border color and style, pi icon toggle, timestamp, and provider/model label. The box, timestamp, and provider/model label do not change the prompt Pi sends to the model, so they do not affect LLM prompt caching. Explicit `/skill:name` invocations also get a display-only box while Pi expands the skill natively; Pi's `[skill]` entry remains visible beside it. Prompts submitted while Pi is working (steer / `Alt+Enter` follow-up) are left undecorated so Pi's native `Steering:` / `Follow-up:` queue rows still render.
 
 ![Example of pi-topping's decorated user prompt](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo_user_prompt.png)
 
-**“Working” Loader** — animated spinner (with color choice), randomized activity word, optional word packs, shimmer, token activity monitor with an adjustable full-scale rate, elapsed timer, output token display, live output-token rate, and the response model when it meaningfully differs from the selected model — all arrangeable left to right. For raw Responses-API stream events, it can also include Ramp Router's gateway backend as `<model> via <backend>`, or just `via <backend>` when the served model restates the selection (requires Pi ≥0.99.0). Under a Pi virtual model such as pi-topping-routesense's `routesense/auto`, the response model is the routed physical model. During a blocking extension prompt, the loader switches to a stable dim waiting line with a pulsing indicator, then resumes afterward.
+**“Working” Loader** — animated spinner (with color choice), randomized activity word, optional word packs, shimmer, token activity monitor with an adjustable full-scale rate, elapsed timer, output token display, live output-token rate, and the response model when it meaningfully differs from the selected model — all arrangeable left to right. For raw Responses-API stream events, it can also include Ramp Router's gateway backend as `<model> via <backend>`, or just `via <backend>` when the served model restates the selection. Under a Pi virtual model such as pi-topping-routesense's `routesense/auto`, the response model is the routed physical model. During a blocking extension prompt, the loader switches to a stable dim waiting line with a pulsing indicator, then resumes afterward.
 
 ![Demo of pi-topping's shimmering activity word, scrolling activity meter, elapsed timer, token count, and token rate](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo.gif)
 
-**Completion Marker** — end-of-turn marker with icon, randomized verb (or `Worked`; matching past tense when Randomize "Worked" text is on), token consumption display, and optional marker-style, border-style, and border-color decorations spanning the full terminal width. It can append the response model when it differs from the selected model, with its own color option. It can also append per-call service-tier counts (e.g. `flex tier ×3`), but only for calls whose provider reports a tier; this requires Pi ≥0.99.0. The default `elite` style trails the summary with tapering dashes; `bookend` fills the remaining width to a closing corner glyph. Hooks into Pi's `agent_settled` event. On Pi ≥1.1.0, a cancelled run (for example, one stopped with Escape) shows `Interrupted` instead of the random verb, with the word and any border in the warning color; time, tokens, and other enabled details still appear. **Show completion marker** also controls this marker. Older Pi versions show the normal marker for cancelled runs.
+**Completion Marker** — end-of-turn marker with icon, randomized verb (or `Worked`; matching past tense when Randomize "Worked" text is on), token consumption display, and optional marker-style, border-style, and border-color decorations spanning the full terminal width. It can append the response model when it differs from the selected model, with its own color option. It can also append per-call service-tier counts (e.g. `flex tier ×3`), but only for calls whose provider reports a tier. The default `elite` style trails the summary with tapering dashes; `bookend` fills the remaining width to a closing corner glyph. Hooks into Pi's `agent_settled` event. A cancelled run (for example, one stopped with Escape) shows `Interrupted` instead of the random verb, with the word and any border in the warning color; time, tokens, and other enabled details still appear. **Show completion marker** also controls this marker.
 
 ![Example of pi-topping's completion marker](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo_completion_marker.png)
 
@@ -167,14 +167,12 @@ restarts the cycle.
 
 The token activity monitor reaches full `⣿` at or above its configurable upper bound (80 tps by default), with lower levels scaled proportionally to that bound. In `/topping-settings`, `←`/`→` cycle through presets spanning 10–1000 tps, and `␣` (Space) lets you enter any whole number from 10–1000. Invalid typed entries show an inline error and keep the editor open without changing the current value; invalid hand-edited `meterUpperBoundTps` values in `settings.json` revert to 80 on load.
 
-The response model is captured from assistant responses and raw Responses-API stream events (Pi ≥0.99.0), displayed as its sanitized value with no label only when it meaningfully differs from the selected model, and defaults to the final loader detail after output tokens. When Ramp Router reports a gateway backend in the raw event, the label can include it as `<model> via <backend>`, or `via <backend>` alone when the served model restates the selection. Under a Pi virtual model such as pi-topping-routesense's `routesense/auto`, it is the routed physical model: taken from the router's `pi-topping-routesense:routed-model` announcement when present, which arrives before the first token (announcements for `direct` routes such as compaction are ignored), and otherwise from the assistant message's model. There only a failed route, which reports the virtual model itself, is hidden, and a bare routed id never displaces a provider-reported decorated form of itself such as a dated name. While pi-topping-statusline embeds the loader in its status bar, the model slides out tail first from behind its separator over 0.3 seconds when it first appears in a run, like that bar's embedded status; elsewhere it appears at once, and a different model replacing it always swaps in place. Equivalent local paths and decorated filenames are suppressed. Its loader display can be hidden, recolored, permanently dimmed, or reordered. The independent **Response model footer** option is disabled by default; when enabled, the final model appears under the editor after settlement, remains visible for 3 seconds, fades through five theme-aware shades over 0.5 seconds, then clears. New work cancels the pending fade. When the active provider is `switchyard`, the loader and footer hold/fade use NVIDIA green (`#84c51a`, matching pi-topping-statusline) regardless of the configured Response model color; the dim setting still applies.
+The response model is captured from assistant responses and raw Responses-API stream events, displayed as its sanitized value with no label only when it meaningfully differs from the selected model, and defaults to the final loader detail after output tokens. When Ramp Router reports a gateway backend in the raw event, the label can include it as `<model> via <backend>`, or `via <backend>` alone when the served model restates the selection. Under a Pi virtual model such as pi-topping-routesense's `routesense/auto`, it is the routed physical model: taken from the router's `pi-topping-routesense:routed-model` announcement when present, which arrives before the first token (announcements for `direct` routes such as compaction are ignored), and otherwise from the assistant message's model. There only a failed route, which reports the virtual model itself, is hidden, and a bare routed id never displaces a provider-reported decorated form of itself such as a dated name. While pi-topping-statusline embeds the loader in its status bar, the model slides out tail first from behind its separator over 0.3 seconds when it first appears in a run, like that bar's embedded status; elsewhere it appears at once, and a different model replacing it always swaps in place. Equivalent local paths and decorated filenames are suppressed, as is the selected model's id or display name written with other case and separators; trailing parenthesized notes in the display name, such as `(Local)`, are ignored. Its loader display can be hidden, recolored, permanently dimmed, or reordered. The independent **Response model footer** option is disabled by default; when enabled, the final model appears under the editor after settlement, remains visible for 3 seconds, fades through five theme-aware shades over 0.5 seconds, then clears. New work cancels the pending fade. When the active provider is `switchyard`, the loader and footer hold/fade use NVIDIA green (`#84c51a`, matching pi-topping-statusline) regardless of the configured Response model color; the dim setting still applies.
 
 ## Requirements
 
-- [Pi](https://github.com/earendil-works/pi-coding-agent). Pi ≥0.84.4 is required for the waiting-for-input loader state; older Pi versions keep the animated loader.
-- Output styles need a Pi version that exposes structured system-prompt sections (tested on Pi 1.0.3 and 1.1.0); on older hosts the style setting has no effect.
-- Pi ≥1.1.0 shows `Interrupted` for cancelled runs; older versions show the normal completion marker.
-- On Pi ≥0.85.0, the working indicator is embedded in the default editor border and long loaders are truncated to the border width instead of wrapping; custom editors that do not opt in keep the standalone wrapping indicator.
+- [Pi](https://github.com/earendil-works/pi-coding-agent) ≥1.2.0. Output styles rely on Pi running the agent-start hook for the run that the decorated prompt starts, which Pi 1.2.0 added. On an older host pi-topping shows a one-time warning at session start, and output styles do not reach decorated prompts.
+- The working indicator is embedded in the default editor border and long loaders are truncated to the border width instead of wrapping; custom editors that do not opt in keep the standalone wrapping indicator.
 - Node.js ≥22.19.0
 
 ## Development
@@ -192,8 +190,7 @@ Tests cover the word/shimmer rendering, prompt box and completion marker renderi
 - Token counts are a streaming word-count estimate, not an exact tokenizer count — they self-correct when each message finishes, so you'll see a small jump at that point.
 - Elapsed time normally starts when you submit a prompt; for auto-continuations without that event, it starts slightly later instead.
 - If another extension also customizes the working message, whichever one runs last wins.
-- Service-tier details and Responses-API served-model/backend labels depend on Pi's `provider_stream_event`; raw events require Pi ≥0.99.0 and are unavailable on older Pi hosts and SDK adapters that do not expose them.
-- Output styles have no effect on hosts without structured system-prompt sections (see Requirements).
+- Service-tier details and Responses-API served-model/backend labels depend on Pi's `provider_stream_event`; SDK adapters that do not expose raw events show neither.
 
 ## Author
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underactive/pi-topping",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "A Pi extension that adds quality of life improvements to Pi's UX: a high-vis user prompt, a shimmering working loader with token activity meter and elapsed timer, an end-of-turn completion marker, and selectable output styles",
   "keywords": ["pi-package", "pi-extension"],
   "license": "MIT",
@@ -30,8 +30,8 @@
     "@earendil-works/pi-tui": "*"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "1.1.0",
-    "@earendil-works/pi-tui": "1.1.0",
+    "@earendil-works/pi-coding-agent": "1.3.0",
+    "@earendil-works/pi-tui": "1.3.0",
     "@types/node": "^24.0.0",
     "typescript": "^5.9.3"
   },

package/src/output-style.ts

@@ -170,31 +170,3 @@ export function applyOutputStyle(
 		},
 	};
 }
-
-/**
- * Section value to send when the transcript's folded `output_style` text is `current`.
- * `null` removes the section. `undefined` means the transcript already matches `id`.
- */
-export function outputStyleSectionPatch(current: string | undefined, id: OutputStyleId): string | null | undefined {
-	const sections: Record<string, string> = {};
-	if (current !== undefined) sections[OUTPUT_STYLE_SECTION] = current;
-	applyOutputStyle(sections, id);
-	const next = sections[OUTPUT_STYLE_SECTION];
-	if (next === current) return undefined;
-	return next ?? null;
-}
-
-/** Last `output_style` section after replaying system messages. A `null` value clears it. */
-export function foldedOutputStyleSection(
-	messages: readonly { role: string; sections?: Record<string, string | null> }[],
-): string | undefined {
-	let current: string | undefined;
-	for (const message of messages) {
-		if (message.role !== "system") continue;
-		const sections = message.sections;
-		if (!sections || !Object.prototype.hasOwnProperty.call(sections, OUTPUT_STYLE_SECTION)) continue;
-		const value = sections[OUTPUT_STYLE_SECTION];
-		current = value === null ? undefined : value;
-	}
-	return current;
-}

package/src/prompt-decorator.ts

@@ -1,10 +1,11 @@
-import type { MessageRenderer, ThemeColor } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import type { EntryRenderer, MessageRenderer, Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi, type Component } from "@earendil-works/pi-tui";
 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";
+export const PROMPT_BOX_ENTRY_TYPE = "pi-topping-prompt-entry";
 
 const BORDER_GLYPHS: Record<BorderStyle, { tl: string; tr: string; bl: string; br: string; h: string; v: string }> = {
 	double: { tl: "╔", tr: "╗", bl: "╚", br: "╝", h: "═", v: "║" },
@@ -34,6 +35,11 @@ export interface PromptBoxDetails {
 	thinkingLevel?: ThinkingLevel;
 }
 
+export interface PromptBoxEntryData {
+	content: string;
+	details: PromptBoxDetails;
+}
+
 type PromptTheme = {
 	fg(color: string, text: string): string;
 	getThinkingBorderColor(level: ThinkingLevel): (text: string) => string;
@@ -150,16 +156,15 @@ export function buildPromptBoxLines(
 	return lines;
 }
 
-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;
+function createPromptBoxComponent(content: string, details: PromptBoxDetails, theme: Theme): Component {
+	const safeContent = content.replace(/(?![\n\t])[\p{Cc}\p{Cf}]/gu, "");
 	let cachedWidth: number | undefined;
 	let cachedLines: string[] | undefined;
 	return {
 		render(width: number): string[] {
 			if (cachedWidth !== width) {
 				cachedWidth = width;
-				cachedLines = buildPromptBoxLines(content, details.submittedAt, width, theme, details);
+				cachedLines = buildPromptBoxLines(safeContent, details.submittedAt, width, theme, details);
 			}
 			return cachedLines!;
 		},
@@ -168,4 +173,16 @@ export const promptBoxRenderer: MessageRenderer<PromptBoxDetails> = (message, _o
 			cachedLines = undefined;
 		},
 	};
+}
+
+export const promptBoxRenderer: MessageRenderer<PromptBoxDetails> = (message, _options, theme) => {
+	const content = typeof message.content === "string" ? message.content : "";
+	const details = (message.details ?? {}) as PromptBoxDetails;
+	return createPromptBoxComponent(content, details, theme);
+};
+
+export const promptBoxEntryRenderer: EntryRenderer<PromptBoxEntryData> = (entry, _options, theme) => {
+	const data = entry.data;
+	if (!data || typeof data.content !== "string") return undefined;
+	return createPromptBoxComponent(data.content, data.details ?? {}, theme);
 };

package/src/session.ts

@@ -14,6 +14,7 @@ import type {
 	SessionStartEvent,
 	Theme,
 } from "@earendil-works/pi-coding-agent";
+import { VERSION } from "@earendil-works/pi-coding-agent";
 import { Text, type Component } from "@earendil-works/pi-tui";
 import { ActivityMeter, rateToLevel, TokRateTracker } from "./activity-meter.ts";
 import { ROUTED_MODEL_CHANNEL, routedModelAnnouncement } from "./routesense-feed.ts";
@@ -42,15 +43,24 @@ import {
 } from "./format.ts";
 import { buildLoaderMessage } from "./loader-message.ts";
 import { showMenu } from "./menu.ts";
-import { applyOutputStyle, foldedOutputStyleSection, OUTPUT_STYLE_MESSAGE_TYPE, OUTPUT_STYLE_SECTION, OUTPUT_STYLES, outputStyleSectionPatch } from "./output-style.ts";
+import { applyOutputStyle, OUTPUT_STYLES } from "./output-style.ts";
 import { getResponseModelColorizer } from "./nvidia-green.ts";
 import { registerSetupCommand } from "./setup-command.ts";
 import { applyMenuResult, buildMenuSections, loadSettings, saveSettings, type ThinkingLevelColor } from "./settings.ts";
 import { announcesEmbedded, STATUSLINE_EMBED_CHANNEL } from "./statusline-embed.ts";
 import { announceMissingToppingsOnce, type MissingToppingsEntryData, renderMissingToppingsEntry, SETUP_ENTRY_TYPE } from "./toppings.ts";
 import { PreviewRenderer } from "./preview.ts";
-import { buildCompletionMarkerContent, buildCompletionMarkerLine, PROMPT_BOX_TYPE, promptBoxRenderer, type PromptBoxDetails } from "./prompt-decorator.ts";
-import { isPlainObject, modelsResemble, sanitizedText, stripControlChars } from "./util.ts";
+import {
+	buildCompletionMarkerContent,
+	buildCompletionMarkerLine,
+	PROMPT_BOX_ENTRY_TYPE,
+	PROMPT_BOX_TYPE,
+	promptBoxEntryRenderer,
+	promptBoxRenderer,
+	type PromptBoxDetails,
+	type PromptBoxEntryData,
+} from "./prompt-decorator.ts";
+import { hostBelow, isPlainObject, modelsResemble, modelsSpelledAlike, sanitizedText, stripControlChars } from "./util.ts";
 import { formatServiceTierSummary, recordServiceTierCall, serviceTierCountsOf, serviceTierOf, type ServiceTierCount } from "./service-tier.ts";
 import { servedModelOf } from "./served-model.ts";
 import { loadBundledWordPacks, loadUserWordPacks, pickWorkingTextSelection, type WorkingTextSelection, type WordPack } from "./word-packs.ts";
@@ -61,10 +71,14 @@ type MessageEndEvent = Extract<ExtensionEvent, { type: "message_end" }>;
 type ToolExecutionStartEvent = Extract<ExtensionEvent, { type: "tool_execution_start" }>;
 type UIPromptStartEvent = Extract<ExtensionEvent, { type: "ui_prompt_start" }>;
 type UIPromptEndEvent = Extract<ExtensionEvent, { type: "ui_prompt_end" }>;
-type ContextWithSystemEvent = Extract<ExtensionEvent, { type: "context_with_system" }>;
 type ProviderStreamEvent = Extract<ExtensionEvent, { type: "provider_stream_event" }>;
 type UIPromptKind = UIPromptStartEvent["kind"];
 
+/**
+ * Oldest Pi this extension supports. Pi 1.2.0 runs before_agent_start for the run that a custom
+ * message starts, which is how the output style reaches a decorated prompt.
+ */
+export const MIN_HOST_VERSION = "1.2.0";
 const DONE_ENTRY_TYPE = "pi-topping-done";
 const RESPONSE_MODEL_STATUS_KEY = "pi-topping-response-model";
 /** Pi's `VIRTUAL_MODEL_API` for extension-registered virtual models; Pi does not export it from its public index. */
@@ -203,10 +217,14 @@ export class SessionManager {
 	#currentCtx: ExtensionContext | null = null;
 	/** Whether pi-topping-statusline last announced that its status bar hosts the loader; kept across sessions. */
 	#loaderInStatusline = false;
+	/** Whether this instance showed the old-host warning. */
+	#warnedOldHost = false;
 	readonly #pi: ExtensionAPI;
+	readonly #hostVersion: string;
 
-	constructor(pi: ExtensionAPI) {
+	constructor(pi: ExtensionAPI, hostVersion: string = VERSION) {
 		this.#pi = pi;
+		this.#hostVersion = hostVersion;
 	}
 
 	#onSessionStart = async (_e: SessionStartEvent, ctx: ExtensionContext): Promise<void> => {
@@ -223,37 +241,20 @@ export class SessionManager {
 		if (this.usable(ctx)) {
 			this.applyIndicator(ctx);
 			announceMissingToppingsOnce(this.#pi);
+			this.warnOldHostOnce(ctx);
 		}
 	};
 
-	/** Unlike the UI handlers, this runs in every mode: the output style shapes the model's prompt. */
-	#onBeforeAgentStart = (event: BeforeAgentStartEvent): BeforeAgentStartEventResult | undefined =>
-		applyOutputStyle(event.systemPromptOptions?.sections, this.#settings.outputStyle);
-
 	/**
-	 * A decorated prompt is a custom message, so Pi does not run before_agent_start for it.
-	 * Put the missing prompt section on the request. A matching transcript section is left alone.
+	 * Unlike the UI handlers, this runs in every mode: the output style shapes the model's prompt.
+	 * The prompt section applies to every run. The hidden reminder belongs to a user prompt: one Pi
+	 * submitted (`messageType: "user"`), or one that pi-topping re-sent as its prompt box, which
+	 * starts the run as a custom message. A run that another extension's custom message starts gets
+	 * the section only.
 	 */
-	#onContextWithSystem = (event: ContextWithSystemEvent): { messages: ContextWithSystemEvent["messages"] } | undefined => {
-		const patch = outputStyleSectionPatch(foldedOutputStyleSection(event.messages), this.#settings.outputStyle);
-		if (patch === undefined) return undefined;
-		const messages = event.messages.slice();
-		let index = messages.length;
-		for (let i = messages.length - 1; i >= 0; i--) {
-			const message = messages[i];
-			if (!message) continue;
-			if (message.role === "user" || (message.role === "custom" && message.customType === PROMPT_BOX_TYPE)) {
-				index = i;
-				break;
-			}
-		}
-		messages.splice(index, 0, {
-			role: "system",
-			content: "",
-			sections: { [OUTPUT_STYLE_SECTION]: patch },
-			timestamp: Date.now(),
-		});
-		return { messages };
+	#onBeforeAgentStart = (event: BeforeAgentStartEvent): BeforeAgentStartEventResult | undefined => {
+		const result = applyOutputStyle(event.systemPromptOptions?.sections, this.#settings.outputStyle);
+		return event.messageType !== "custom" || event.message.customType === PROMPT_BOX_TYPE ? result : undefined;
 	};
 
 	#onInput = async (event: InputEvent, ctx: ExtensionContext): Promise<InputEventResult | void> => {
@@ -262,40 +263,24 @@ export class SessionManager {
 
 		if (!event.streamingBehavior && !this.#state.busy) this.resetTurn(Date.now());
 		else if (event.streamingBehavior && event.source !== "extension") this.#state.midTurnInputs++;
+		if (this.#settings.decorations.decorateUserPrompt && this.shouldDecorateSkill(event)) {
+			this.#pi.appendEntry<PromptBoxEntryData>(PROMPT_BOX_ENTRY_TYPE, {
+				content: event.text,
+				details: this.promptBoxDetails(ctx),
+			});
+		}
 		if (this.#settings.decorations.decorateUserPrompt && this.shouldDecorate(event)) {
 			try {
-				const stylePrompt = OUTPUT_STYLES[this.#settings.outputStyle].prompt;
-				await this.#pi.sendMessage<PromptBoxDetails>(
+				// The prompt box starts the run; before_agent_start adds the output style's section and reminder to it.
+				this.#pi.sendMessage<PromptBoxDetails>(
 					{
 						customType: PROMPT_BOX_TYPE,
 						content: event.text,
 						display: true,
-						details: {
-							submittedAt: Date.now(),
-							showIcon: this.#settings.decorations.promptIcon,
-							showTimestamp: this.#settings.decorations.promptTimestamp,
-							showProvider: this.#settings.decorations.promptProvider,
-							showModel: this.#settings.decorations.promptModel,
-							icon: this.#settings.decorations.useNerdFont ? "" : "π",
-							provider: ctx.model?.provider,
-							model: ctx.model?.id,
-							borderColor: this.#settings.decorations.borderColor,
-							borderStyle: this.#settings.decorations.borderStyle,
-							thinkingLevel: ctx.thinkingLevel,
-						},
+						details: this.promptBoxDetails(ctx),
 					},
-					{ triggerTurn: stylePrompt === undefined },
+					{ triggerTurn: true },
 				);
-				if (stylePrompt) {
-					await this.#pi.sendMessage(
-						{
-							customType: OUTPUT_STYLE_MESSAGE_TYPE,
-							content: stylePrompt.reminder,
-							display: false,
-						},
-						{ triggerTurn: true },
-					);
-				}
 				return { action: "handled" };
 			} catch {
 				ctx.ui.notify("Failed to submit prompt", "error");
@@ -495,7 +480,6 @@ export class SessionManager {
 	install(): void {
 		this.#pi.on("session_start", this.#onSessionStart);
 		this.#pi.on("before_agent_start", this.#onBeforeAgentStart);
-		this.#pi.on("context_with_system", this.#onContextWithSystem);
 		this.#pi.on("input", this.#onInput);
 		this.#pi.on("agent_start", this.#onAgentStart);
 		this.#pi.on("message_start", this.#onMessageStart);
@@ -519,6 +503,7 @@ export class SessionManager {
 		});
 		this.#pi.registerEntryRenderer<DoneEntryData>(DONE_ENTRY_TYPE, (entry, _o, theme) => this.#renderDoneEntry(entry, theme));
 		this.#pi.registerEntryRenderer<MissingToppingsEntryData>(SETUP_ENTRY_TYPE, (entry, _o, theme) => renderMissingToppingsEntry(entry, theme));
+		this.#pi.registerEntryRenderer<PromptBoxEntryData>(PROMPT_BOX_ENTRY_TYPE, promptBoxEntryRenderer);
 		this.#pi.registerMessageRenderer<PromptBoxDetails>(PROMPT_BOX_TYPE, promptBoxRenderer);
 		this.#pi.registerCommand("topping-settings", {
 			description: "Configure the prompt box, working loader, completion marker, word packs, and output style.",
@@ -531,11 +516,49 @@ export class SessionManager {
 		return !!ctx.hasUI && ctx.mode !== "print";
 	}
 
+	private warnOldHostOnce(ctx: ExtensionContext): void {
+		if (this.#warnedOldHost || !hostBelow(this.#hostVersion, MIN_HOST_VERSION)) return;
+		this.#warnedOldHost = true;
+		ctx.ui.notify(
+			`Pi Topping needs Pi ${MIN_HOST_VERSION} or later; this is Pi ${this.#hostVersion}. Output styles will not apply to decorated prompts.`,
+			"warning",
+		);
+	}
+
 	/**
 	 * Mid-stream inputs (steer/follow-up) must pass through untouched: re-sending them via
 	 * sendMessage(deliverAs) bypasses Pi's queue state, so the "Steering:"/"Follow-up:" rows
 	 * below the editor never render (issue #2).
 	 */
+	private promptBoxDetails(ctx: ExtensionContext): PromptBoxDetails {
+		return {
+			submittedAt: Date.now(),
+			showIcon: this.#settings.decorations.promptIcon,
+			showTimestamp: this.#settings.decorations.promptTimestamp,
+			showProvider: this.#settings.decorations.promptProvider,
+			showModel: this.#settings.decorations.promptModel,
+			icon: this.#settings.decorations.useNerdFont ? "" : "π",
+			provider: ctx.model?.provider,
+			model: ctx.model?.id,
+			borderColor: this.#settings.decorations.borderColor,
+			borderStyle: this.#settings.decorations.borderStyle,
+			thinkingLevel: ctx.thinkingLevel,
+		};
+	}
+
+	private shouldDecorateSkill(event: InputEvent): boolean {
+		if (
+			event.streamingBehavior ||
+			event.source === "extension" ||
+			!event.text.trim() ||
+			event.images?.length ||
+			!event.text.startsWith("/")
+		) return false;
+
+		const commandName = event.text.slice(1).split(" ", 1)[0]!;
+		return this.#pi.getCommands().some((command) => command.source === "skill" && command.name === commandName);
+	}
+
 	private shouldDecorate(event: InputEvent): boolean {
 		return (
 			!event.streamingBehavior &&
@@ -600,7 +623,8 @@ export class SessionManager {
 	}
 
 	/**
-	 * Whether a response model merely restates the selected model. Under a virtual selection
+	 * Whether a response model merely restates the selected model: a decorated form of its id,
+	 * or its id or display name written with other case and separators. Under a virtual selection
 	 * the routed model is always another model, so only a failed route, which leaves the
 	 * virtual model itself on the message, is hidden; a resemblance check would also hide a
 	 * routed model whose id contains the virtual id, such as openrouter's `auto`.
@@ -609,7 +633,7 @@ export class SessionManager {
 		const selected = this.#currentCtx?.model;
 		if (!selected) return false;
 		if (selected.api === VIRTUAL_MODEL_API) return report.provider === selected.provider && responseModel === selected.id;
-		return modelsResemble(selected.id, responseModel);
+		return modelsResemble(selected.id, responseModel) || modelsSpelledAlike(selected, responseModel);
 	}
 
 	private updateResponseModel(report: ResponseModelReport | undefined): void {

package/src/util.ts

@@ -12,6 +12,25 @@ export function sanitizedText(value: unknown): string {
 	return typeof value === "string" ? stripControlChars(value).trim() : "";
 }
 
+/**
+ * True when `version` is a release older than `minimum`, both read as `major.minor.patch`.
+ * A value that does not start with three numbers cannot be compared and counts as new enough;
+ * a pre-release suffix is ignored.
+ */
+export function hostBelow(version: string, minimum: string): boolean {
+	const parse = (text: string): number[] | undefined => {
+		const match = /^(\d+)\.(\d+)\.(\d+)/.exec(text.trim());
+		return match ? [Number(match[1]), Number(match[2]), Number(match[3])] : undefined;
+	};
+	const actual = parse(version);
+	const floor = parse(minimum);
+	if (!actual || !floor) return false;
+	for (let i = 0; i < 3; i++) {
+		if (actual[i] !== floor[i]) return actual[i]! < floor[i]!;
+	}
+	return false;
+}
+
 /** True when a reported response model appears to be a decorated form of the selected model. */
 export function modelsResemble(selectedModel?: string, responseModel?: string): boolean {
 	if (!selectedModel || !responseModel) return false;
@@ -20,3 +39,24 @@ export function modelsResemble(selectedModel?: string, responseModel?: string):
 	const normalizedResponse = responseModel.toLowerCase();
 	return selectedTokens.length > 0 && selectedTokens.every((token) => normalizedResponse.includes(token));
 }
+
+/** Lowercase letters and digits only, so names that differ just in case and separators compare equal. */
+function spelling(text: string): string {
+	return text.toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "");
+}
+
+/**
+ * True when a reported response model is the selected model's id, or its display name with or
+ * without trailing parenthesized notes, written with other case and separators: a model named
+ * `Qwen3.8 Flash (Local)` matches `qwen3.8-flash`. Every digit counts, so `qwen3-flash` does not,
+ * and nothing else may differ, so an id with a suffix such as `256k` does not match a response without it.
+ */
+export function modelsSpelledAlike(selected: { id: string; name?: string }, responseModel?: string): boolean {
+	if (!responseModel) return false;
+	const lastSegment = (model: string): string => model.split(/[\\/]/).at(-1) ?? "";
+	const response = spelling(lastSegment(responseModel));
+	if (!response) return false;
+	const name = selected.name ?? "";
+	const candidates = [lastSegment(selected.id), name, name.replace(/(?:\s*\([^()]*\))+\s*$/, "")];
+	return candidates.some((candidate) => spelling(candidate) === response);
+}