Fix syntax highlighting stderr spam with malformed markdown, fixes #274

packages/coding-agent/test/streaming-render-debug.ts

@@ -0,0 +1,97 @@
+/**
+ * Debug script to reproduce streaming rendering issues.
+ * Uses real fixture data that caused the bug.
+ * Run with: npx tsx test/streaming-render-debug.ts
+ */
+
+import type { AssistantMessage } from "@mariozechner/pi-ai";
+import { ProcessTerminal, TUI } from "@mariozechner/pi-tui";
+import { readFileSync } from "fs";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+import { AssistantMessageComponent } from "../src/modes/interactive/components/assistant-message.js";
+import { initTheme } from "../src/modes/interactive/theme/theme.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Initialize dark theme with full color support
+process.env.COLORTERM = "truecolor";
+initTheme("dark");
+
+// Load the real fixture that caused the bug
+const fixtureMessage: AssistantMessage = JSON.parse(
+	readFileSync(join(__dirname, "fixtures/assistant-message-with-thinking-code.json"), "utf-8"),
+);
+
+// Extract thinking and text content
+const thinkingContent = fixtureMessage.content.find((c) => c.type === "thinking");
+const textContent = fixtureMessage.content.find((c) => c.type === "text");
+
+if (!thinkingContent || thinkingContent.type !== "thinking") {
+	console.error("No thinking content in fixture");
+	process.exit(1);
+}
+
+const fullThinkingText = thinkingContent.thinking;
+const fullTextContent = textContent && textContent.type === "text" ? textContent.text : "";
+
+async function sleep(ms: number): Promise<void> {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function main() {
+	const terminal = new ProcessTerminal();
+	const tui = new TUI(terminal);
+
+	// Start with empty message
+	const message = {
+		role: "assistant",
+		content: [{ type: "thinking", thinking: "" }],
+	} as AssistantMessage;
+
+	const component = new AssistantMessageComponent(message, false);
+	tui.addChild(component);
+	tui.start();
+
+	// Simulate streaming thinking content
+	let thinkingBuffer = "";
+	const chunkSize = 10; // characters per "token"
+
+	for (let i = 0; i < fullThinkingText.length; i += chunkSize) {
+		thinkingBuffer += fullThinkingText.slice(i, i + chunkSize);
+
+		// Update message content
+		const updatedMessage = {
+			role: "assistant",
+			content: [{ type: "thinking", thinking: thinkingBuffer }],
+		} as AssistantMessage;
+
+		component.updateContent(updatedMessage);
+		tui.requestRender();
+
+		await sleep(15); // Simulate token delay
+	}
+
+	// Now add the text content
+	await sleep(500);
+
+	const finalMessage = {
+		role: "assistant",
+		content: [
+			{ type: "thinking", thinking: fullThinkingText },
+			{ type: "text", text: fullTextContent },
+		],
+	} as AssistantMessage;
+
+	component.updateContent(finalMessage);
+	tui.requestRender();
+
+	// Keep alive for a moment to see the result
+	await sleep(3000);
+
+	tui.stop();
+	process.exit(0);
+}
+
+main().catch(console.error);