@oh-my-pi/pi-tui 18.4.2 → 18.4.4

package/src/chat/served-model-marker.ts

@@ -86,6 +86,14 @@ export class ServedModelMarkerComponent extends MessageDividerComponent {
 			labelColor: "warning",
 			ruleColor: "dim",
 			ruleWidth: 10,
+			role: "omp.marker.served-model",
+			native: {
+				icon: "warn",
+				label: () => {
+					const via = info.upstreamProvider ? `${info.provider}/${info.upstreamProvider}` : info.provider;
+					return `Served ${info.served} · requested ${info.requested} · via ${via}`;
+				},
+			},
 		});
 	}
 }

package/src/chat/skill-message.ts

@@ -1,3 +1,4 @@
+import { pathToFileURL } from "node:url";
 import type { TextContent } from "@oh-my-pi/pi-ai";
 import { type Component } from "../tui";
 import { Box } from "../components/box";
@@ -11,6 +12,10 @@ import type { CustomMessage, SkillPromptDetails } from "./messages";
 import { fileHyperlink } from "../render";
 import { collapseSkillTokens, skillChipLabel, skillChipStyle, skillToken } from "../prompt/composer-attachments";
 import { type UserBubbleOptions, UserMessageComponent, userBubbleColor } from "./user-message";
+import type { TspSpan } from "@oh-my-pi/pi-wire";
+import { card, md, node, span, text } from "../native/describe";
+import { type NativeChild, type NativeNode, type NativeUiEvent, rootToggleExpanded } from "../native/node";
+import { Memo } from "../native/memo";
 
 /**
  * Transcript row for a user-invoked skill. Two layouts, chosen by where the
@@ -41,6 +46,8 @@ export class SkillMessageComponent extends Container {
 
 	readonly #message: CustomMessage<SkillPromptDetails>;
 	readonly #imageLinks?: readonly (string | undefined)[];
+	#expanded = false;
+	readonly #native = new Memo();
 
 	constructor(message: CustomMessage<SkillPromptDetails>, imageLinks?: readonly (string | undefined)[]) {
 		super();
@@ -51,9 +58,65 @@ export class SkillMessageComponent extends Container {
 	}
 
 	setExpanded(expanded: boolean): void {
+		this.#expanded = expanded;
 		this.#disclosure?.setExpanded(expanded);
 	}
 
+	handleNativeEvent(event: NativeUiEvent): void {
+		const expanded = rootToggleExpanded(event);
+		if (expanded !== undefined) this.setExpanded(expanded);
+	}
+
+	/**
+	 * A user-toned card (role `omp.skill`): the skill chip (linked to its
+	 * SKILL.md) and prompt size in the head, the user's draft as markdown, and
+	 * the loaded skill prompt, described only while expanded because it can
+	 * be large.
+	 */
+	override describe(): NativeNode {
+		return this.#native.get([this.#expanded], () => {
+			const details = this.#message.details;
+			const name = details?.name?.trim() || "unknown";
+			const token = skillToken(name);
+			const prompt = details?.prompt ?? (details?.args ? `${token} ${details.args}` : token);
+			const display = collapseSkillTokens(
+				prompt,
+				candidate => candidate === name,
+				() => {},
+			);
+			const label = skillChipLabel(name);
+			const leading = display.startsWith(label) && /^\s*$/.test(display.charAt(label.length));
+			const draft = leading ? display.slice(label.length).trim() : display;
+			const head: TspSpan[] = [
+				span(
+					label,
+					"customMessageLabel strong",
+					details?.path ? { href: pathToFileURL(details.path).href } : undefined,
+				),
+			];
+			if (typeof details?.lineCount === "number") {
+				head.push(span(`  ${details.lineCount} ${details.lineCount === 1 ? "line" : "lines"}`, "muted"));
+			}
+			const children: NativeChild[] = [];
+			if (draft) children.push(md(draft));
+			const promptText = this.#expanded ? this.#extractText() : "";
+			if (promptText) {
+				children.push(
+					node(
+						"section",
+						{ head: [span("prompt", "muted")], role: "omp.skill.prompt" },
+						[md(promptText)],
+						"prompt",
+					),
+				);
+			}
+			return card(
+				{ role: "omp.skill", tone: "user", head, collapsible: true, collapsed: !this.#expanded },
+				children.length > 0 ? children : [text([span(label, "muted")])],
+			);
+		});
+	}
+
 	/**
 	 * Transcript finalization contract (see `FinalizableBlock`): an optimistic
 	 * `/skill:` row reports `false` so the container keeps it live and removable

package/src/chat/stripped-tool-calls-placeholder.ts

@@ -1,5 +1,7 @@
 import { Text } from "../components/text";
 import { theme } from "../theme";
+import { span, text } from "../native/describe";
+import type { NativeNode } from "../native/node";
 
 /**
  * Dim transcript marker for tool calls stripped from the resolved branch
@@ -8,26 +10,32 @@ import { theme } from "../theme";
  */
 export class StrippedToolCallsPlaceholder extends Text {
 	#toolActivityVisible: boolean;
+	readonly #label: string;
+	#native: NativeNode | undefined;
 
 	constructor(strippedToolCalls: number, toolActivityVisible: boolean) {
-		super(
-			theme.fg(
-				"dim",
-				theme.italic(
-					`${strippedToolCalls} tool call${strippedToolCalls === 1 ? "" : "s"} elided — no result on this branch`,
-				),
-			),
-			1,
-			0,
-		);
+		const label = `${strippedToolCalls} tool call${strippedToolCalls === 1 ? "" : "s"} elided — no result on this branch`;
+		super(theme.fg("dim", theme.italic(label)), 1, 0);
+		this.#label = label;
 		this.#toolActivityVisible = toolActivityVisible;
 	}
 
 	setToolActivityVisible(visible: boolean): void {
 		this.#toolActivityVisible = visible;
+		this.#native = undefined;
 		this.invalidate();
 	}
 
+	/** A dim italic note, mounted but hidden while tool activity is hidden. */
+	override describe(): NativeNode {
+		this.#native ??= text([span(this.#label, "dim em")], {
+			wrap: "word",
+			role: "omp.tool.elided",
+			hidden: this.#toolActivityVisible ? undefined : true,
+		});
+		return this.#native;
+	}
+
 	override render(width: number): readonly string[] {
 		if (!this.#toolActivityVisible) return [];
 		return super.render(width);

package/src/chat/thinking-display.ts

@@ -1,13 +1,16 @@
 import type { AgentMessage } from "@oh-my-pi/pi-agent-core";
 import { FENCE_RE } from "../render/render-utils";
 
-// Single-slot-per-mode memo for formatThinkingForDisplay. During a streaming
+// Small per-mode MRU memo for formatThinkingForDisplay. During a streaming
 // tick the same growing thinking text is formatted up to three times (reveal
 // count, reveal slice, component render); this collapses them to one
 // computation. Prose and raw modes produce different output for the same text,
-// so each mode keeps its own slot. One entry per mode is enough for the common
-// case of one active thinking block and never regresses (a miss recomputes
-// exactly as before).
+// so each mode keeps its own slots. A message routinely holds several thinking
+// blocks (thinking → text → thinking), and every tick formats each of them, so
+// one slot per mode would thrash between blocks and turn every append into a
+// full refold; {@link DISPLAY_CACHE_SLOTS} slots keep one checkpoint per live
+// block. A miss recomputes exactly as before and evicts the least recently
+// used slot.
 //
 // Each slot also carries the fold state for incremental extension: when the
 // incoming text is an append of the previously formatted text (streaming only
@@ -85,8 +88,69 @@ function freshDisplayCache(): DisplayCache {
 	return { text: "", value: "", hadComment: false, startLineByte: 0, state: freshFoldState(), resumable: true };
 }
 
-const proseCache = freshDisplayCache();
-const rawCache = freshDisplayCache();
+/** Slots per mode: enough for the thinking blocks of one streaming message. */
+const DISPLAY_CACHE_SLOTS = 4;
+// Most recently used first.
+const proseSlots: DisplayCache[] = [];
+const rawSlots: DisplayCache[] = [];
+
+/** Drop every memo slot so the next call recomputes from scratch. Tests only. */
+export function resetThinkingDisplayCacheForTests(): void {
+	proseSlots.length = 0;
+	rawSlots.length = 0;
+}
+
+/**
+ * Pick the slot to format `text` into and move it to the front: an exact memo
+ * hit, else the resumable slot holding the longest verbatim prefix of `text`
+ * (an append). A miss overwrites a non-resumable slot holding a prefix of
+ * `text` — the same stream's retired checkpoint, e.g. the raw identity
+ * shortcut — so such a stream never evicts the other blocks' checkpoints;
+ * otherwise the least recently used slot (or a new one below the cap).
+ * Append detection runs here once so the caller never re-verifies.
+ */
+function acquireDisplayCache(
+	slots: DisplayCache[],
+	text: string,
+): { cache: DisplayCache; match: "hit" | "append" | "miss" } {
+	// Identity pass first: the repeated renders of one streaming tick must not
+	// pay any prefix verification against the other blocks' slots.
+	let index = slots.findIndex(slot => slot.text === text);
+	let match: "hit" | "append" | "miss" = index === -1 ? "miss" : "hit";
+	if (index === -1) {
+		let appendLength = 0;
+		let retired = -1;
+		let retiredLength = 0;
+		for (let i = 0; i < slots.length; i++) {
+			const slot = slots[i]!;
+			const length = slot.text.length;
+			if (length <= (slot.resumable ? appendLength : retiredLength) || !isAppend(slot, text)) continue;
+			if (slot.resumable) {
+				index = i;
+				match = "append";
+				appendLength = length;
+			} else {
+				retired = i;
+				retiredLength = length;
+			}
+		}
+		if (index === -1) index = retired;
+	}
+	if (index === -1) {
+		if (slots.length < DISPLAY_CACHE_SLOTS) {
+			const cache = freshDisplayCache();
+			slots.unshift(cache);
+			return { cache, match };
+		}
+		index = slots.length - 1;
+	}
+	const cache = slots[index]!;
+	if (index > 0) {
+		slots.splice(index, 1);
+		slots.unshift(cache);
+	}
+	return { cache, match };
+}
 
 export function canonicalizeMessage(text: string | null | undefined): string {
 	if (!text) return "";
@@ -190,14 +254,12 @@ function renderFold(state: FoldState): string {
  */
 export function formatThinkingForDisplay(text: string, proseOnly: boolean): string {
 	if (!text) return text;
-	const cache = proseOnly ? proseCache : rawCache;
-	// Identity memo first: the 2nd and 3rd renders of one streaming tick pass
-	// the same text and must not pay the prefix verification below.
-	if (text === cache.text) return cache.value;
+	const { cache, match } = acquireDisplayCache(proseOnly ? proseSlots : rawSlots, text);
+	if (match === "hit") return cache.value;
 	let hasComment: boolean;
 	let fromByte: number;
 	let state: FoldState;
-	if (cache.resumable && isAppend(cache, text)) {
+	if (match === "append") {
 		// Append: a `<!--` introduced by the suffix flips the noise gate, and a
 		// marker straddling the seam can start at most 3 bytes back — identical
 		// to rescanning the full text, at O(delta).

package/src/chat/todo-reminder.ts

@@ -2,7 +2,9 @@ import { Text } from "../components/text";
 import { Container } from "../tui";
 import { MessageNoticeComponent } from "../chrome/message-notice";
 import { theme } from "../theme";
-import type { TodoItem } from "../tools/todo";
+import { type TodoItem, todoChecklistPhases } from "../tools/todo";
+import { node, span, withHidden } from "../native/describe";
+import type { DescribeContext, NativeNode } from "../native/node";
 
 /**
  * Component that renders a todo completion reminder notification, committed into
@@ -12,22 +14,50 @@ import type { TodoItem } from "../tools/todo";
  */
 export class TodoReminderComponent extends Container {
 	readonly #notice: MessageNoticeComponent;
+	readonly #todos: TodoItem[];
+	readonly #note: string;
+	#hidden = false;
 
 	constructor(todos: TodoItem[], attempt: number, maxAttempts: number) {
 		super();
+		this.#todos = todos;
+		this.#note = `reminder ${attempt}/${maxAttempts}`;
+		const count = todos.length;
+		const header = `${count} incomplete ${count === 1 ? "todo" : "todos"} - reminder ${attempt}/${maxAttempts}`;
 		this.#notice = new MessageNoticeComponent({
 			presentation: () => {
-				const count = todos.length;
-				const label = count === 1 ? "todo" : "todos";
-				const header = `${count} incomplete ${label} - reminder ${attempt}/${maxAttempts}`;
 				const todoList = todos.map(todo => `  ${theme.checkbox.unchecked} ${todo.content}`).join("\n");
 				return { icon: theme.icon.warning, header, body: new Text(theme.italic(todoList), 0, 0) };
 			},
+			nativePresentation: () => ({
+				head: [span(`${theme.icon.warning} ${header}`)],
+				body: [
+					node(
+						"list",
+						{},
+						todos.map((todo, index) =>
+							node("item", { label: [span(todo.content, "em")], tone: "pending" }, [], `t${index}`),
+						),
+					),
+				],
+			}),
+			role: "omp.notice.todo",
 		});
 		this.addChild(this.#notice);
 	}
 
 	setToolActivityVisible(visible: boolean): void {
+		this.#hidden = !visible;
 		this.#notice.setToolActivityVisible(visible);
 	}
+
+	/** A `checklist` reminder of the open items where the terminal lists the kind (§7.5); else the notice card. */
+	override describe(cx?: DescribeContext): NativeNode {
+		if (cx?.supports("checklist") !== true) return this.#notice.describe();
+		const phases = todoChecklistPhases([{ name: "", tasks: this.#todos }]);
+		return withHidden(
+			node("checklist", { mode: "reminder", phases, note: this.#note, role: "omp.notice.todo" }),
+			this.#hidden,
+		);
+	}
 }