fix(tui): free syntax styles after theme pins drop them

SyntaxStyle.destroy frees the native style and nothing finalizes it.
Destroying on cache overwrite use-after-frees a style the rows or
prompt still paint, so the previous style stays queued until they
drop it.

Author: TheGreatAxios

src/tui/runner/settings-theme.test.ts

@@ -11,13 +11,16 @@
  */
 
 import { afterEach, describe, expect, test } from "bun:test";
-import { RGBA, type CapturedSpan } from "@opentui/core";
+import { RGBA, SyntaxStyle, type CapturedSpan } from "@opentui/core";
 
 import { corbitsDark, corbitsLight, setTheme, UI } from "../theme.js";
 import { transcriptSyntaxStyle } from "../stream.js";
 import { withTestRenderer, type Harness } from "../harness.js";
+import { settleSpans } from "../test-helpers.js";
 import { appendStreamRow } from "../shell/chrome.js";
 import { createAppShell } from "../shell/index.js";
+import { setPromptRecognitionSource } from "../shell/internals.js";
+import { syncPromptHighlights } from "../shell/prompt.js";
 import { applyThemePinLive, repaintShellForTheme } from "./settings.js";
 
 afterEach(() => {
@@ -31,34 +34,20 @@ function registryHeadingFg(h: Harness): RGBA | undefined {
     .get("markup.heading.1")?.fg;
 }
 
-function painted(spans: CapturedSpan[], text: string, fg: RGBA): boolean {
-  return spans.some((s) => s.text.includes(text) && s.fg.equals(fg));
-}
-
-/** 0.6.x leases a session buffer around each presented frame; a capture
- * landing inside that window throws OutputBusy. The poll retries on the
- * next round anyway, so a losing capture keeps polling instead of
- * throwing — the ready predicate, never the trace, decides the outcome. */
-function readSpans(h: Harness): CapturedSpan[] {
+/** `destroy()` frees the native style and there is no finalizer; a later
+ * read throws instead of returning a palette. */
+function syntaxStyleAlive(style: SyntaxStyle): boolean {
   try {
-    return h.captureSpans().lines.flatMap((line) => line.spans);
+    style.getStyleCount();
+    return true;
   } catch (err) {
-    if (err instanceof Error && err.message.includes("OutputBusy")) return [];
+    if (err instanceof Error && err.message.includes("destroyed")) return false;
     throw err;
   }
 }
 
-async function settleSpans(
-  h: Harness,
-  ready: (spans: CapturedSpan[]) => boolean,
-): Promise<CapturedSpan[]> {
-  let spans = readSpans(h);
-  for (let i = 0; i < 400 && !ready(spans); i++) {
-    await h.renderOnce();
-    await new Promise((resolve) => setTimeout(resolve, 25));
-    spans = readSpans(h);
-  }
-  return spans;
+function painted(spans: CapturedSpan[], text: string, fg: RGBA): boolean {
+  return spans.some((s) => s.text.includes(text) && s.fg.equals(fg));
 }
 
 describe("applyThemePinLive", () => {
@@ -153,4 +142,109 @@ describe("applyThemePinLive", () => {
       expect(registryHeadingFg(h)?.equals(RGBA.fromHex(UI.heading))).toBe(true);
     });
   });
+
+  test("a second pin destroys the transcript style the rows dropped", async () => {
+    await withTestRenderer(
+      async (h) => {
+        setTheme("corbits-dark");
+        const shell = createAppShell(h.renderer, {
+          terminal: { columns: 80, rows: 40 },
+          wireKeys: false,
+        });
+        try {
+          appendStreamRow(shell, { role: "assistant", text: "# pin cycle" });
+          const first = transcriptSyntaxStyle(h.renderer);
+          applyThemePinLive("light", () => repaintShellForTheme(shell));
+          const second = transcriptSyntaxStyle(h.renderer);
+          expect(second).not.toBe(first);
+          expect(syntaxStyleAlive(first)).toBe(false);
+          expect(syntaxStyleAlive(second)).toBe(true);
+
+          applyThemePinLive("dark", () => repaintShellForTheme(shell));
+          const third = transcriptSyntaxStyle(h.renderer);
+          expect(third).not.toBe(second);
+          expect(syntaxStyleAlive(second)).toBe(false);
+          expect(syntaxStyleAlive(third)).toBe(true);
+        } finally {
+          shell.dispose();
+          setTheme("corbits-dark");
+        }
+      },
+      { width: 80, height: 40 },
+    );
+  });
+
+  test("refreshing the transcript cache leaves a style rows still paint", async () => {
+    await withTestRenderer(
+      async (h) => {
+        setTheme("corbits-dark");
+        const shell = createAppShell(h.renderer, {
+          terminal: { columns: 80, rows: 40 },
+          wireKeys: false,
+        });
+        try {
+          appendStreamRow(shell, { role: "assistant", text: "# pin cycle" });
+          const painted = transcriptSyntaxStyle(h.renderer);
+          setTheme("corbits-light");
+          const rebuilt = transcriptSyntaxStyle(h.renderer);
+          expect(rebuilt).not.toBe(painted);
+          expect(syntaxStyleAlive(painted)).toBe(true);
+          repaintShellForTheme(shell);
+          expect(syntaxStyleAlive(painted)).toBe(false);
+          expect(syntaxStyleAlive(transcriptSyntaxStyle(h.renderer))).toBe(
+            true,
+          );
+        } finally {
+          shell.dispose();
+          setTheme("corbits-dark");
+        }
+      },
+      { width: 80, height: 40 },
+    );
+  });
+
+  test("a pin destroys the prompt style only after the prompt drops it", async () => {
+    await withTestRenderer(
+      async (h) => {
+        setTheme("corbits-dark");
+        const shell = createAppShell(h.renderer, {
+          terminal: { columns: 80, rows: 40 },
+          wireKeys: false,
+        });
+        setPromptRecognitionSource(shell, () => ({
+          commandNames: ["implement"],
+        }));
+        const originalDestroy = SyntaxStyle.prototype.destroy;
+        let destroyedWhileHeld = false;
+        try {
+          shell.prompt.value = "/implement";
+          syncPromptHighlights(shell);
+          const painted = shell.prompt.syntaxStyle;
+          expect(painted).not.toBeNull();
+          if (painted === null) return;
+          SyntaxStyle.prototype.destroy = function destroy(this: SyntaxStyle) {
+            if (this === painted && shell.prompt.syntaxStyle === painted) {
+              destroyedWhileHeld = true;
+            }
+            return originalDestroy.call(this);
+          };
+          applyThemePinLive("light", () => repaintShellForTheme(shell));
+          expect(shell.prompt.syntaxStyle).toBe(painted);
+          expect(syntaxStyleAlive(painted)).toBe(true);
+          syncPromptHighlights(shell);
+          expect(destroyedWhileHeld).toBe(false);
+          expect(shell.prompt.syntaxStyle).not.toBe(painted);
+          expect(syntaxStyleAlive(painted)).toBe(false);
+          const current = shell.prompt.syntaxStyle;
+          expect(current).not.toBeNull();
+          if (current !== null) expect(syntaxStyleAlive(current)).toBe(true);
+        } finally {
+          SyntaxStyle.prototype.destroy = originalDestroy;
+          shell.dispose();
+          setTheme("corbits-dark");
+        }
+      },
+      { width: 80, height: 40 },
+    );
+  });
 });

src/tui/shell/chrome.ts

@@ -143,6 +143,7 @@ import {
   transcriptRowChildren,
   transcriptRowLayout,
   transcriptRowOffset,
+  releaseRetiredTranscriptSyntaxStyles,
 } from "./transcript.js";
 
 function syncPending(shell: AppShell): void {
@@ -1411,6 +1412,7 @@ export function repaintTranscriptWindow(shell: AppShell): void {
       ),
     );
   });
+  releaseRetiredTranscriptSyntaxStyles(shell);
 }
 
 /** Tear the landing down on the first transcript row. The prompt box jumps

src/tui/shell/prompt.ts

@@ -36,6 +36,10 @@ import {
   interrupt,
 } from "../delivery-queue.js";
 import { UI, onThemeChange } from "../theme.js";
+import {
+  destroyUnpaintedSyntaxStyles,
+  syntaxStyleForGeneration,
+} from "../syntax-style-cache.js";
 
 import {
   type AppShell,
@@ -180,12 +184,15 @@ export function setPromptCostContext(
 
 /** 0.6.x native styles must name their owning Context — the live renderer's
  * native scene — so the style is keyed per renderer instead of a module
- * global; `promptStyleGeneration` invalidates it like the old cache did. */
+ * global; `promptStyleGeneration` invalidates it like the old cache did.
+ * The previous style stays queued until the prompt assignment drops it. */
 const promptStylesByRenderer = new WeakMap<
   ShellRenderer,
   { generation: number; style: SyntaxStyle }
 >();
 
+const retiredPromptStyles = new WeakMap<ShellRenderer, SyntaxStyle[]>();
+
 let promptStyleGeneration = 0;
 
 const promptHighlightGenerations = new WeakMap<AppShell, number>();
@@ -199,19 +206,17 @@ onThemeChange(() => {
  * render lib.
  */
 function promptStyleFor(renderer: ShellRenderer): SyntaxStyle {
-  const cached = promptStylesByRenderer.get(renderer);
-  if (cached !== undefined && cached.generation === promptStyleGeneration) {
-    return cached.style;
-  }
-  const style = SyntaxStyle.fromStyles(
-    { recognized: { fg: UI.action } },
-    renderer.nativeScene,
+  return syntaxStyleForGeneration(
+    promptStylesByRenderer,
+    retiredPromptStyles,
+    renderer,
+    promptStyleGeneration,
+    () =>
+      SyntaxStyle.fromStyles(
+        { recognized: { fg: UI.action } },
+        renderer.nativeScene,
+      ),
   );
-  promptStylesByRenderer.set(renderer, {
-    generation: promptStyleGeneration,
-    style,
-  });
-  return style;
 }
 
 const promptHighlightedValue = new WeakMap<AppShell, string>();
@@ -235,6 +240,11 @@ export function syncPromptHighlights(shell: AppShell): void {
   const style = promptStyleFor(shell.renderer);
   const styleId = style.resolveStyleId("recognized") ?? 0;
   shell.prompt.syntaxStyle = style;
+  destroyUnpaintedSyntaxStyles(
+    retiredPromptStyles,
+    shell.renderer,
+    (pending) => shell.prompt.syntaxStyle === pending,
+  );
   shell.prompt.clearAllHighlights();
   const matcher = resolvePromptRecognitionMatcher(source);
   for (const span of resolvePromptHighlightSpans(value, matcher)) {

src/tui/shell/transcript.ts

@@ -9,6 +9,7 @@ import {
   StyledText,
   type BaseRenderable,
   type CliRenderer,
+  type SyntaxStyle,
 } from "@opentui/core";
 import { stringWidth } from "../view/height.js";
 import { viewToTableContent, type McpStructuredView } from "../mcp-view.js";
@@ -37,6 +38,7 @@ import {
   toolRowLines,
   toolSentenceLines,
   transcriptSyntaxStyle,
+  dropRetiredTranscriptSyntaxStyles,
   type PaintedStreamLine,
   type RowLayout,
   type StreamRow,
@@ -464,6 +466,27 @@ function createMarkdownBody(
   return column;
 }
 
+/** Markdown bodies still holding a syntax style. A theme pin must not free
+ * a style that one of these nodes is still painting. */
+function paintedMarkdownSyntaxStyles(node: BaseRenderable): Set<SyntaxStyle> {
+  const painted = new Set<SyntaxStyle>();
+  const walk = (current: BaseRenderable): void => {
+    if (current instanceof MarkdownRenderable) {
+      painted.add(current.syntaxStyle);
+    }
+    for (const child of current.getChildren()) walk(child);
+  };
+  walk(node);
+  return painted;
+}
+
+/** After the transcript rows have been rebuilt, free styles they dropped. */
+export function releaseRetiredTranscriptSyntaxStyles(shell: AppShell): void {
+  dropRetiredTranscriptSyntaxStyles(shell.renderer as CliRenderer, () =>
+    paintedMarkdownSyntaxStyles(shell.renderer.root as BaseRenderable),
+  );
+}
+
 /** Gutter + one pre-coloured text line per body row (a diff, expanded tool
  * arguments); wraps land under the body. */
 function createStyledLinesRowRenderable(

src/tui/stream.ts

@@ -12,6 +12,10 @@ import {
   type Thought,
 } from "./thinking.js";
 import { UI, onThemeChange } from "./theme.js";
+import {
+  syntaxStyleForGeneration,
+  destroyUnpaintedSyntaxStyles,
+} from "./syntax-style-cache.js";
 import { pastTenseToolLabel } from "./tool-formatter.js";
 
 /** One pre-coloured body line (an expanded call's structured args). */
@@ -776,30 +780,42 @@ function markdownStyles() {
 /** 0.6.x native styles must name the Context that owns them; the owner is the
  * live renderer, so the shared style is keyed per renderer instead of held in
  * a module global. A theme pin bumps the generation; the next reader rebuilds
- * from the new `UI` colors, matching the old invalidation. */
+ * from the new `UI` colors, matching the old invalidation. The previous
+ * style stays alive until rows drop it (`dropRetiredTranscriptSyntaxStyles`). */
 const transcriptStylesByRenderer = new WeakMap<
   CliRenderer,
   { generation: number; style: SyntaxStyle }
 >();
 
+const retiredTranscriptStyles = new WeakMap<CliRenderer, SyntaxStyle[]>();
+
 let transcriptStyleGeneration = 0;
 
 /** Shared transcript SyntaxStyle for `ctx`, built lazily — the native render
  * lib is unreachable until a renderer exists. */
 export function transcriptSyntaxStyle(ctx: CliRenderer): SyntaxStyle {
-  const cached = transcriptStylesByRenderer.get(ctx);
-  if (cached !== undefined && cached.generation === transcriptStyleGeneration) {
-    return cached.style;
-  }
-  const style = SyntaxStyle.fromStyles(
-    { ...markdownStyles() },
-    ctx.nativeScene,
+  return syntaxStyleForGeneration(
+    transcriptStylesByRenderer,
+    retiredTranscriptStyles,
+    ctx,
+    transcriptStyleGeneration,
+    () => SyntaxStyle.fromStyles({ ...markdownStyles() }, ctx.nativeScene),
+  );
+}
+
+/** Destroy transcript styles this renderer no longer paints. `painted` runs
+ * only when a previous style is queued, and only after rows have been
+ * rebuilt — a style the thunk still reports stays queued. */
+export function dropRetiredTranscriptSyntaxStyles(
+  ctx: CliRenderer,
+  painted: () => ReadonlySet<SyntaxStyle>,
+): void {
+  const pending = retiredTranscriptStyles.get(ctx);
+  if (pending === undefined || pending.length === 0) return;
+  const held = painted();
+  destroyUnpaintedSyntaxStyles(retiredTranscriptStyles, ctx, (style) =>
+    held.has(style),
   );
-  transcriptStylesByRenderer.set(ctx, {
-    generation: transcriptStyleGeneration,
-    style,
-  });
-  return style;
 }
 
 onThemeChange(() => {