pi-cc-extensions 0.8.25 → 0.8.27

package/extensions/context.ts

@@ -2,14 +2,9 @@ import {
 	type ExtensionAPI,
 	type ExtensionCommandContext,
 	estimateTokens,
+	getMarkdownTheme,
 } from "@earendil-works/pi-coding-agent";
-import {
-	Key,
-	matchesKey,
-	truncateToWidth,
-	visibleWidth,
-	wrapTextWithAnsi,
-} from "@earendil-works/pi-tui";
+import { Key, Markdown, matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 
 export type ContextPart = {
 	label: string;
@@ -33,24 +28,18 @@ function normalizePreviewText(text: string): string {
 		.replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g, "");
 }
 
-export function createWrappedTextCache(content: string): {
-	get(width: number): string[];
-	invalidate(): void;
-} {
-	let cachedWidth: number | undefined;
-	let cachedLines: string[] | undefined;
+export type DialogBounds = { left: number; top: number; width: number };
 
+/** 1-based terminal hitbox of the [esc] close button on the dialog title row (row 2 of the box). */
+export function escCloseHitbox(bounds: DialogBounds): {
+	row: number;
+	startCol: number;
+	endCol: number;
+} {
 	return {
-		get(width: number): string[] {
-			if (cachedLines !== undefined && cachedWidth === width) return cachedLines;
-			cachedLines = wrapTextWithAnsi(content, width);
-			cachedWidth = width;
-			return cachedLines;
-		},
-		invalidate(): void {
-			cachedWidth = undefined;
-			cachedLines = undefined;
-		},
+		row: bounds.top + 2,
+		startCol: bounds.left + bounds.width - 5,
+		endCol: bounds.left + bounds.width - 1,
 	};
 }
 
@@ -65,7 +54,8 @@ export async function showTextPreview(
 			let scrollOffset = 0;
 			let pageSize = 1;
 			let totalLines = 1;
-			const wrappedContent = createWrappedTextCache(content);
+			let escHitbox: { row: number; startCol: number; endCol: number } | undefined;
+			const markdownView = new Markdown(content, 0, 0, getMarkdownTheme());
 
 			const scrollTo = (nextOffset: number): void => {
 				scrollOffset = Math.max(0, Math.min(nextOffset, Math.max(0, totalLines - pageSize)));
@@ -74,7 +64,7 @@ export async function showTextPreview(
 
 			return {
 				invalidate() {
-					wrappedContent.invalidate();
+					markdownView.invalidate();
 				},
 				handleInput(data: string) {
 					if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
@@ -91,12 +81,24 @@ export async function showTextPreview(
 						const mouse = parseSgrMousePacket(data);
 						if (mouse?.final !== "M") return;
 						const button = mouseBaseButton(mouse.code);
+						if (button === 0 && (mouse.code & 32) === 0) {
+							if (
+								escHitbox &&
+								mouse.row === escHitbox.row &&
+								mouse.col >= escHitbox.startCol &&
+								mouse.col <= escHitbox.endCol
+							) {
+								done(undefined);
+								return;
+							}
+						}
 						if (button === 64) scrollTo(scrollOffset - 3);
 						else if (button === 65) scrollTo(scrollOffset + 3);
 					}
 				},
 				render(width: number) {
 					const inner = Math.max(1, width - 2);
+					const escWidth = visibleWidth("[esc]");
 					const bodyInner = Math.max(1, inner - 1);
 					const bodyWidth = Math.max(1, bodyInner - 1);
 					const terminalHeight = Math.max(1, tui.terminal.rows);
@@ -107,9 +109,13 @@ export async function showTextPreview(
 						availableHeight,
 					);
 					pageSize = Math.max(1, viewportHeight - 6);
-					const wrapped = wrappedContent.get(bodyWidth);
+					const wrapped = markdownView.render(bodyWidth);
 					totalLines = wrapped.length;
 					scrollOffset = Math.min(scrollOffset, Math.max(0, totalLines - pageSize));
+					// Centered overlay with margin 2: mirror TUI resolveOverlayLayout for anchor "center".
+					const overlayTop = 2 + Math.floor((availableHeight - viewportHeight) / 2);
+					const overlayLeft = Math.floor((Math.max(1, tui.terminal.columns) - width) / 2);
+					escHitbox = escCloseHitbox({ left: overlayLeft, top: overlayTop, width });
 					const visible = wrapped.slice(scrollOffset, scrollOffset + pageSize);
 					const border = (text: string) => theme.fg("border", text);
 					const padLine = (text: string, lineWidth = inner): string => {
@@ -136,11 +142,11 @@ export async function showTextPreview(
 					});
 					const start = totalLines === 0 ? 0 : scrollOffset + 1;
 					const end = Math.min(totalLines, scrollOffset + pageSize);
-					const status = `${start}-${end} / ${totalLines} lines · ↑↓ PgUp/PgDn Home/End · Esc close`;
+					const status = `${start}-${end} / ${totalLines} lines · ↑↓ PgUp/PgDn Home/End · [esc] close`;
 
 					return [
 						border(`╭${"─".repeat(inner)}╮`),
-						`${border("│")}${padLine(` ${theme.bold(theme.fg("accent", title))}`)}${border("│")}`,
+						`${border("│")}${padLine(` ${theme.bold(theme.fg("accent", title))}`, inner - escWidth)}${theme.fg("muted", "[esc]")}${border("│")}`,
 						`${border("├")}${border("─".repeat(inner))}${border("┤")}`,
 						...bodyRows,
 						`${border("├")}${border("─".repeat(inner))}${border("┤")}`,
@@ -392,6 +398,7 @@ export default function contextUsageExtension(pi: ExtensionAPI) {
 							startCol: number;
 							endCol: number;
 						}> = [];
+						let escHitbox: { row: number; startCol: number; endCol: number } | undefined;
 
 						const padLine = (text: string, width: number): string => {
 							const truncated = truncateToWidth(text, width, "…");
@@ -428,6 +435,15 @@ export default function contextUsageExtension(pi: ExtensionAPI) {
 									(mouse.code & 32) !== 0
 								)
 									return;
+								if (
+									escHitbox &&
+									mouse.row === escHitbox.row &&
+									mouse.col >= escHitbox.startCol &&
+									mouse.col <= escHitbox.endCol
+								) {
+									done(undefined);
+									return;
+								}
 								const hitbox = previewHitboxes.find(
 									(candidate) =>
 										mouse.row === candidate.row &&
@@ -444,6 +460,7 @@ export default function contextUsageExtension(pi: ExtensionAPI) {
 							},
 							render(width: number) {
 								const inner = Math.max(1, width - 2);
+								const escWidth = visibleWidth("[esc]");
 								const percent = contextWindow > 0 ? (used / contextWindow) * 100 : 0;
 								const title = theme.bold(theme.fg("accent", "Context Usage"));
 								const subtitle = `${formatTokens(used)} / ${formatTokens(contextWindow)} tokens (${percent.toFixed(1)}%)`;
@@ -480,13 +497,13 @@ export default function contextUsageExtension(pi: ExtensionAPI) {
 								const border = (text: string) => theme.fg("border", text);
 								const lines = [
 									border(`╭${"─".repeat(inner)}╮`),
-									`${border("│")}${padLine(` ${title}  ${theme.fg("muted", subtitle)}`, inner)}${border("│")}`,
+									`${border("│")}${padLine(` ${title}  ${theme.fg("muted", subtitle)}`, inner - escWidth)}${theme.fg("muted", "[esc]")}${border("│")}`,
 									`${border("├")}${border("─".repeat(inner))}${border("┤")}`,
 									`${border("│")}${padLine(` ${segments}`, inner)}${border("│")}`,
 									`${border("│")}${" ".repeat(inner)}${border("│")}`,
 									...partRows.map((row) => `${border("│")}${row}${border("│")}`),
 									`${border("├")}${border("─".repeat(inner))}${border("┤")}`,
-									`${border("│")}${padLine(theme.fg("dim", " ↑↓ select · Click / Enter to preview · Esc to close"), inner)}${border("│")}`,
+									`${border("│")}${padLine(theme.fg("dim", " ↑↓ select · Click / Enter to preview · [esc] close"), inner)}${border("│")}`,
 									border(`╰${"─".repeat(inner)}╯`),
 								];
 
@@ -499,6 +516,7 @@ export default function contextUsageExtension(pi: ExtensionAPI) {
 								const overlayTop =
 									1 + Math.floor((Math.max(1, terminalHeight - 2) - visibleHeight) / 2);
 								const overlayLeft = Math.floor((Math.max(1, tui.terminal.columns) - width) / 2);
+								escHitbox = escCloseHitbox({ left: overlayLeft, top: overlayTop, width });
 								previewHitboxes = visiblePreviews.flatMap((preview) => {
 									const partIndex = allParts.findIndex((part) => part.label === preview.label);
 									const line = 5 + partIndex;

package/extensions/index.ts

@@ -0,0 +1,20 @@
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import agentAutocomplete from "./agent-autocomplete.ts";
+import askUserQuestion from "./ask-user-question/index.ts";
+import claudeCodeStyle from "./claude-code-style.ts";
+import context from "./context.ts";
+import piAliases from "./pi-aliases.ts";
+import piStartupHeader from "./pi-startup-header.ts";
+import sessionReference from "./session-reference.ts";
+import subagentNotification from "./subagent-notification.ts";
+
+export default function (pi: ExtensionAPI): void {
+	piAliases(pi);
+	piStartupHeader(pi);
+	claudeCodeStyle(pi);
+	subagentNotification(pi);
+	context(pi);
+	sessionReference(pi);
+	agentAutocomplete(pi);
+	askUserQuestion(pi);
+}

package/extensions/subagent-notification.ts

@@ -0,0 +1,114 @@
+import { CustomMessageComponent, type ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+
+const PATCH_KEY = Symbol.for("pi.ccstyle.subagent-notification-patch");
+const ANSI_RE = /\x1b\[[0-?]*[ -/]*[@-~]/g;
+
+type Patch = {
+	active: boolean;
+	prototype: any;
+	originalRender: (width: number) => string[];
+	installedRender: (width: number) => string[];
+};
+
+function plain(line: string): string {
+	return line.replace(ANSI_RE, "");
+}
+
+function trimBlankLines(lines: string[]): string[] {
+	let start = 0;
+	let end = lines.length;
+	while (start < end && !plain(lines[start]!).trim()) start++;
+	while (end > start && !plain(lines[end - 1]!).trim()) end--;
+	return lines.slice(start, end);
+}
+
+function normalizeStatusGlyph(line: string): string {
+	return line.replace(
+		/^((?:\x1b\[[0-?]*[ -/]*[@-~]|[ \t]|[├└│─])*)[✓✔]((?:\x1b\[[0-?]*[ -/]*[@-~])*)(?=\s)/,
+		"$1●$2",
+	);
+}
+
+function isHeader(line: string): boolean {
+	return /^[✓✔✗■●]\s+/.test(plain(line).trimStart());
+}
+
+function isDetail(line: string): boolean {
+	const text = plain(line).trimStart();
+	return (
+		text.startsWith("⎿") ||
+		text.startsWith("transcript:") ||
+		text === "No output." ||
+		/^(?:Done|Wrapped up|Stopped|Error:|Aborted)\b/.test(text)
+	);
+}
+
+function cleanDetail(line: string): string {
+	const marker = line.indexOf("⎿");
+	if (marker >= 0) return line.slice(marker + 1).replace(/^\s+/, "");
+	return line.replace(/^\s+/, "");
+}
+
+function formatGroup(lines: string[]): string[] {
+	if (!lines.length) return [];
+	const header = normalizeStatusGlyph(lines[0]!);
+	const rest = lines.slice(1);
+	const detailStart = rest.findIndex(isDetail);
+	if (detailStart < 0) return [header, ...rest];
+	const metadata = rest.slice(0, detailStart);
+	const details = rest
+		.slice(detailStart)
+		.map(cleanDetail)
+		.filter((line) => plain(line).trim());
+	return [
+		header,
+		...metadata,
+		...details.map((line, index) => `${index === details.length - 1 ? "└" : "├"} ${line}`),
+	];
+}
+
+export function formatSubagentNotificationLines(lines: string[], width: number): string[] {
+	const groups: string[][] = [];
+	for (const line of trimBlankLines(lines)) {
+		if (isHeader(line) && groups.length && groups.at(-1)!.length) groups.push([]);
+		if (!groups.length) groups.push([]);
+		groups.at(-1)!.push(line);
+	}
+	return groups.flatMap((group, index) => {
+		const formatted = formatGroup(group).map((line) =>
+			truncateToWidth(line ? ` ${line}` : line, Math.max(1, width), ""),
+		);
+		return index ? ["", ...formatted] : formatted;
+	});
+}
+
+export default function subagentNotificationExtension(pi: ExtensionAPI): void {
+	const prototype = CustomMessageComponent.prototype as any;
+	const host = globalThis as any;
+	const previous = host[PATCH_KEY] as Patch | undefined;
+	if (previous) previous.active = false;
+	const originalRender =
+		previous && prototype.render === previous.installedRender
+			? previous.originalRender
+			: prototype.render;
+	const patch = {
+		active: true,
+		prototype,
+		originalRender,
+		installedRender: undefined as any,
+	} satisfies Patch;
+	patch.installedRender = function (this: any, width: number): string[] {
+		const lines = originalRender.call(this, width);
+		if (!patch.active || this?.message?.customType !== "subagent-notification") return lines;
+		return formatSubagentNotificationLines(lines, width);
+	};
+	prototype.render = patch.installedRender;
+	host[PATCH_KEY] = patch;
+
+	pi.on("session_shutdown", async () => {
+		if (!patch.active) return;
+		patch.active = false;
+		if (prototype.render === patch.installedRender) prototype.render = originalRender;
+	});
+}

package/extensions/tool-diff/diff-renderer.ts

@@ -30,8 +30,10 @@ import {
 	resolveDiffPresentationMode,
 	type DiffPresentationMode,
 } from "./diff-presentation.ts";
+import { sanitizeToolResultText } from "../tool-result-sanitize.ts";
 import { pluralize, sanitizeAnsiForThemedOutput } from "./render-utils.ts";
 import { splitWriteContentLines } from "./write-display-utils.ts";
+import { MAX_HL_CHARS, shikiHighlightCache } from "./shiki-highlight.ts";
 import {
 	DEFAULT_TOOL_DISPLAY_CONFIG,
 	type DiffIndicatorMode,
@@ -119,9 +121,10 @@ interface DiffRenderOptions {
 	previousContent?: string;
 	fileExistedBeforeWrite?: boolean;
 	headerLabel?: string;
+	invalidate?: () => void;
 }
 
-type CodeLineHighlighter = (line: string) => string;
+type CodeLineHighlighter = (line: string, entry: DiffLineEntry) => string;
 
 const CANONICAL_LINE_PATTERN = /^([+\- ])(\s*\d+)\|(.*)$/;
 const HASHLINE_ANCHOR_LINE_PATTERN = /^([+\- ])(\s*\d+)#([A-Za-z0-9]+| {2}):(.*)$/;
@@ -277,41 +280,75 @@ function resolveLanguageFromPath(rawPath: string | undefined): string | undefine
 	}
 }
 
-const MAX_CODE_HIGHLIGHT_CACHE_ENTRIES = 2048;
+function resolveShikiTheme(theme: DiffTheme): string {
+	if (process.env.DIFF_THEME) return process.env.DIFF_THEME;
+	const background =
+		parseAnsiColorCode(readThemeAnsi(theme, "bg", "toolSuccessBg")) ??
+		parseAnsiColorCode(readThemeAnsi(theme, "bg", "toolPendingBg")) ??
+		parseAnsiColorCode(readThemeAnsi(theme, "bg", "userMessageBg"));
+	if (!background) return "github-dark";
+	const luminance = (background.r * 299 + background.g * 587 + background.b * 114) / 1000;
+	return luminance >= 128 ? "github-light" : "github-dark";
+}
 
-function createCodeLineHighlighter(language: string | undefined): CodeLineHighlighter {
-	if (!language) {
-		return (line) => sanitizeAnsiForThemedOutput(line);
-	}
+function cleanCodeLine(line: string): string {
+	return sanitizeToolResultText(line).replace(/\n/g, "");
+}
+
+export function shouldHighlightCodeBlock(code: string): boolean {
+	return code.length <= MAX_HL_CHARS;
+}
 
-	// Insertion-order Map used as a small LRU so large diffs cannot retain every unique line.
-	const cache = new Map<string, string>();
-	const remember = (line: string, value: string): string => {
-		if (cache.has(line)) cache.delete(line);
-		cache.set(line, value);
-		if (cache.size > MAX_CODE_HIGHLIGHT_CACHE_ENTRIES) {
-			const oldest = cache.keys().next().value;
-			if (oldest !== undefined) cache.delete(oldest);
+function createCodeLineHighlighter(
+	language: string | undefined,
+	theme: DiffTheme,
+	entries: readonly ParsedDiffEntry[],
+	invalidate?: () => void,
+): CodeLineHighlighter {
+	const codeEntries = entries.filter((entry): entry is DiffLineEntry => entry.kind === "line");
+	const cleanLines = codeEntries.map((entry) =>
+		cleanCodeLine(normalizeCodeWhitespace(entry.content)),
+	);
+	const code = cleanLines.join("\n");
+	const shouldHighlight = !!language && shouldHighlightCodeBlock(code);
+	const fallbackLines = shouldHighlight
+		? (() => {
+				try {
+					return highlightCode(code, language).map(sanitizeAnsiForThemedOutput);
+				} catch {
+					return cleanLines.map(sanitizeAnsiForThemedOutput);
+				}
+			})()
+		: cleanLines.map(sanitizeAnsiForThemedOutput);
+	const fallbackByEntry = new WeakMap(
+		codeEntries.map((entry, index) => [entry, fallbackLines[index] ?? cleanLines[index] ?? ""]),
+	);
+	if (!shouldHighlight) return (_line, entry) => fallbackByEntry.get(entry) ?? "";
+
+	const shikiTheme = resolveShikiTheme(theme);
+	let highlightedByEntry: WeakMap<DiffLineEntry, string> | undefined;
+	const resolveHighlighted = () => {
+		if (highlightedByEntry) return;
+		const highlighted = shikiHighlightCache.get(
+			code,
+			language,
+			shikiTheme,
+			fallbackLines,
+			invalidate,
+		);
+		if (highlighted) {
+			highlightedByEntry = new WeakMap(
+				codeEntries.map((entry, index) => [
+					entry,
+					sanitizeAnsiForThemedOutput(highlighted[index] ?? fallbackByEntry.get(entry) ?? ""),
+				]),
+			);
 		}
-		return value;
 	};
-	return (line) => {
-		if (!line) {
-			return line;
-		}
-		const cached = cache.get(line);
-		if (cached !== undefined) {
-			// Refresh recency for LRU.
-			cache.delete(line);
-			cache.set(line, cached);
-			return cached;
-		}
-		try {
-			const highlighted = highlightCode(line, language)[0] ?? line;
-			return remember(line, sanitizeAnsiForThemedOutput(highlighted));
-		} catch {
-			return remember(line, sanitizeAnsiForThemedOutput(line));
-		}
+	resolveHighlighted();
+	return (_line, entry) => {
+		resolveHighlighted();
+		return highlightedByEntry?.get(entry) ?? fallbackByEntry.get(entry) ?? "";
 	};
 }
 
@@ -1104,6 +1141,10 @@ function parseAnsiColorCode(ansi: string | undefined): RgbColor | null {
 		}
 	}
 
+	const basicMatch = /\x1b\[(?:3|4)([0-7])m/.exec(ansi);
+	if (basicMatch) return ansi256ToRgb(Number(basicMatch[1]));
+	const brightMatch = /\x1b\[(?:9|10)([0-7])m/.exec(ansi);
+	if (brightMatch) return ansi256ToRgb(Number(brightMatch[1]) + 8);
 	return null;
 }
 
@@ -1696,7 +1737,7 @@ function highlightDiffLine(
 	highlightLine: CodeLineHighlighter,
 	containerBgAnsi: string | undefined,
 ): { highlighted: string; rowBg: string | undefined } {
-	const syntaxHighlighted = highlightLine(codeText);
+	const syntaxHighlighted = highlightLine(codeText, entry);
 	const rowBg = getLineBackground(entry.lineKind, palette, false);
 	const emphasisBg = getLineBackground(entry.lineKind, palette, true);
 	const inlineSpans = inlineHighlights.get(entry) ?? [];
@@ -2133,15 +2174,7 @@ function renderHeaderRows(
 		return [{ text: stabilizeBackgroundResets(truncateToWidth(summary, width)), hunkIndex: null }];
 	}
 
-	const summaryPieces =
-		mode === "split"
-			? [...buildDiffSummaryBasePieces(stats, theme), theme.fg("muted", mode)]
-			: [
-					...buildDiffSummaryBasePieces(stats, theme),
-					theme.fg("muted", `${stats.hunks} ${pluralize(stats.hunks, "hunk")}`),
-					theme.fg("muted", `${stats.files} ${pluralize(stats.files, "file")}`),
-					theme.fg("muted", mode),
-				];
+	const summaryPieces = [...buildDiffSummaryBasePieces(stats, theme), theme.fg("muted", mode)];
 
 	const summary = summaryPieces.join(mode === "split" ? " " : theme.fg("muted", " • "));
 	const meter = renderDiffStatBar(stats, width, theme);
@@ -2421,12 +2454,13 @@ export function renderEditDiffResult(
 	theme: DiffTheme,
 	fallbackText: string,
 ): Component {
-	const diffText = safeGetDiff(details);
+	const diffText = sanitizeToolResultText(safeGetDiff(details));
+	const safeFallbackText = sanitizeToolResultText(fallbackText);
 	if (!diffText.trim()) {
-		if (!fallbackText.trim()) {
+		if (!safeFallbackText.trim()) {
 			return new Text(theme.fg("muted", "↳ edit completed (no diff payload)"), 0, 0);
 		}
-		return new Text(theme.fg("toolOutput", fallbackText), 0, 0);
+		return new Text(theme.fg("toolOutput", safeFallbackText), 0, 0);
 	}
 
 	let parsed: ParsedDiff;
@@ -2451,9 +2485,11 @@ export function renderEditDiffResult(
 	// separator cannot leak toolSuccessBg across the entire new column.
 	const containerBgAnsi = undefined;
 	const language = resolveLanguageFromPath(options.filePath);
-	const highlightLine = createCodeLineHighlighter(language);
-
 	const cache = createDiffRenderCache();
+	const highlightLine = createCodeLineHighlighter(language, theme, parsed.entries, () => {
+		cache.invalidate();
+		options.invalidate?.();
+	});
 
 	return {
 		render(width: number): string[] {
@@ -2795,18 +2831,19 @@ export function renderWriteDiffResult(
 	theme: DiffTheme,
 	fallbackText: string,
 ): Component {
+	const safeFallbackText = sanitizeToolResultText(fallbackText);
 	if (typeof content !== "string") {
-		if (!fallbackText.trim()) {
+		if (!safeFallbackText.trim()) {
 			return new Text(theme.fg("muted", "↳ write completed"), 0, 0);
 		}
-		return new Text(theme.fg("toolOutput", fallbackText), 0, 0);
+		return new Text(theme.fg("toolOutput", safeFallbackText), 0, 0);
 	}
 
 	const filePath = options.filePath?.trim() || "(unknown path)";
-	const lines = splitWriteContentLines(content);
+	const lines = splitWriteContentLines(sanitizeToolResultText(content));
 	const previousLines =
 		typeof options.previousContent === "string"
-			? splitWriteContentLines(options.previousContent)
+			? splitWriteContentLines(sanitizeToolResultText(options.previousContent))
 			: [];
 	const hasComparablePrevious =
 		options.fileExistedBeforeWrite === true && typeof options.previousContent === "string";
@@ -2819,10 +2856,9 @@ export function renderWriteDiffResult(
 	// Keep the panel transparent; changed rows and inline spans retain their own highlights.
 	const containerBgAnsi = undefined;
 	const language = resolveLanguageFromPath(filePath);
-	const highlightLine = createCodeLineHighlighter(language);
-
-	let detailedData: WriteDiffData | undefined;
 	const cache = createDiffRenderCache();
+	let highlightLine: CodeLineHighlighter | undefined;
+	let detailedData: WriteDiffData | undefined;
 
 	function getDetailedData(): WriteDiffData {
 		if (detailedData) {
@@ -2832,6 +2868,10 @@ export function renderWriteDiffResult(
 			? buildWriteOverwriteEntries(previousLines, lines)
 			: buildWriteEntries(lines);
 		detailedData = buildWriteDiffData(entries);
+		highlightLine = createCodeLineHighlighter(language, theme, entries, () => {
+			cache.invalidate();
+			options.invalidate?.();
+		});
 		return detailedData;
 	}
 
@@ -2921,7 +2961,7 @@ export function renderWriteDiffResult(
 				theme,
 				inlineHighlights,
 				palette,
-				highlightLine,
+				highlightLine: highlightLine!,
 				containerBgAnsi,
 				wordWrap,
 				indicatorMode,

package/extensions/tool-diff/index.ts

@@ -47,7 +47,7 @@ export function renderRichToolResult(
 	if (toolName === "edit") {
 		return renderEditDiffResult(
 			result?.details,
-			{ expanded, filePath },
+			{ expanded, filePath, invalidate: () => context?.invalidate?.() },
 			displayConfig,
 			theme,
 			resultText(result),
@@ -69,6 +69,7 @@ export function renderRichToolResult(
 			filePath,
 			previousContent: metadata.previousContent,
 			fileExistedBeforeWrite: metadata.fileExistedBeforeWrite,
+			invalidate: () => context?.invalidate?.(),
 		},
 		displayConfig,
 		theme,

package/extensions/tool-diff/shiki-highlight.ts

@@ -0,0 +1,90 @@
+export const MAX_HL_CHARS = 32_000;
+const MAX_CACHE_ENTRIES = 48;
+
+type CodeToAnsi = (code: string, lang: any, theme: any) => Promise<string>;
+type Loader = () => Promise<CodeToAnsi>;
+type Subscriber = { fallback: readonly string[]; invalidate: () => void };
+type Pending = { work: Promise<void>; subscribers: Set<Subscriber> };
+
+let defaultLoad: Promise<CodeToAnsi> | undefined;
+const loadDefault: Loader = () => {
+	if (!defaultLoad) {
+		defaultLoad = import("@shikijs/cli")
+			.then((module) => module.codeToANSI as CodeToAnsi)
+			.catch((error) => {
+				defaultLoad = undefined;
+				throw error;
+			});
+	}
+	return defaultLoad;
+};
+
+function differs(lines: readonly string[], fallback: readonly string[]): boolean {
+	return lines.length !== fallback.length || lines.some((line, index) => line !== fallback[index]);
+}
+
+export class ShikiHighlightCache {
+	private readonly cache = new Map<string, string[]>();
+	private readonly pending = new Map<string, Pending>();
+	private readonly loader: Loader;
+
+	constructor(loader: Loader = loadDefault) {
+		this.loader = loader;
+	}
+
+	get(
+		code: string,
+		lang: string | undefined,
+		theme: string,
+		fallback: readonly string[],
+		invalidate?: () => void,
+	): string[] | undefined {
+		if (!lang || code.length > MAX_HL_CHARS) return undefined;
+		const key = `${theme}\0${lang}\0${code}`;
+		const cached = this.cache.get(key);
+		if (cached) {
+			this.cache.delete(key);
+			this.cache.set(key, cached);
+			return cached;
+		}
+
+		const existing = this.pending.get(key);
+		if (existing) {
+			if (invalidate && ![...existing.subscribers].some((item) => item.invalidate === invalidate)) {
+				existing.subscribers.add({ fallback, invalidate });
+			}
+			return undefined;
+		}
+
+		const pending: Pending = { work: undefined as never, subscribers: new Set() };
+		if (invalidate) pending.subscribers.add({ fallback, invalidate });
+		pending.work = this.loader()
+			.then((highlight) => highlight(code, lang, theme))
+			.then((ansi) => {
+				const lines = ansi.replace(/\r/g, "").replace(/\n$/, "").split("\n");
+				this.cache.set(key, lines);
+				while (this.cache.size > MAX_CACHE_ENTRIES) {
+					const oldest = this.cache.keys().next().value;
+					if (oldest !== undefined) this.cache.delete(oldest);
+				}
+				for (const subscriber of pending.subscribers) {
+					if (!differs(lines, subscriber.fallback)) continue;
+					try {
+						subscriber.invalidate();
+					} catch {
+						// One component must not prevent the other subscribers from repainting.
+					}
+				}
+			})
+			.catch(() => {})
+			.finally(() => this.pending.delete(key));
+		this.pending.set(key, pending);
+		return undefined;
+	}
+
+	clear(): void {
+		this.cache.clear();
+	}
+}
+
+export const shikiHighlightCache = new ShikiHighlightCache();