@xynogen/pix-pretty 1.1.0 → 1.3.0

package/src/thinking.test.ts

@@ -1,190 +1,181 @@
 /**
- * Tests for thinking tag rendering
+ * Tests for leaked-reasoning splitting into native content blocks.
+ *
+ * splitThinking() turns leaked `<think>`/`<thinking>` spans into real
+ * `thinking` content blocks (rendered dim + italic by pi's native
+ * `thinkingText` styling) while keeping surrounding answer text as `text`
+ * blocks.
  */
 
 import { describe, expect, it } from "bun:test";
-import { renderThinking, stripPartialTailTag } from "./thinking";
+import { splitThinking, stripPartialTailTag } from "./thinking";
 
-describe("thinking tag rendering", () => {
+type Block = { type: string; text?: string; thinking?: string };
+
+function texts(blocks: Block[]): string[] {
+	return blocks.filter((b) => b.type === "text").map((b) => b.text ?? "");
+}
+function thinkings(blocks: Block[]): string[] {
+	return blocks
+		.filter((b) => b.type === "thinking")
+		.map((b) => b.thinking ?? "");
+}
+
+describe("splitThinking", () => {
 	describe("closed thinking blocks", () => {
-		it("renders basic <thinking> block as blockquote", () => {
-			const input = "<thinking>This is reasoning</thinking>";
-			const output = renderThinking(input);
-			expect(output).toBe(`> This is reasoning\n\n`);
+		it("turns a <thinking> span into a thinking block", () => {
+			const out = splitThinking("<thinking>This is reasoning</thinking>");
+			expect(out).toEqual([
+				{ type: "thinking", thinking: "This is reasoning" },
+			]);
 		});
 
-		it("renders basic <think> block as blockquote", () => {
-			const input = "<think>This is reasoning</think>";
-			const output = renderThinking(input);
-			expect(output).toBe(`> This is reasoning\n\n`);
+		it("turns a <think> span into a thinking block", () => {
+			const out = splitThinking("<think>This is reasoning</think>");
+			expect(out).toEqual([
+				{ type: "thinking", thinking: "This is reasoning" },
+			]);
 		});
 
-		it("renders multi-line thinking block as blockquote", () => {
-			const input = "<thinking>Line 1\nLine 2\nLine 3</thinking>";
-			const output = renderThinking(input);
-			expect(output).toBe(`> Line 1\n> Line 2\n> Line 3\n\n`);
+		it("preserves multi-line reasoning inside one thinking block", () => {
+			const out = splitThinking("<thinking>Line 1\nLine 2\nLine 3</thinking>");
+			expect(out).toEqual([
+				{ type: "thinking", thinking: "Line 1\nLine 2\nLine 3" },
+			]);
 		});
 
-		it("renders multiple thinking blocks", () => {
-			const input =
-				"<thinking>First block</thinking> Some text <thinking>Second block</thinking>";
-			const output = renderThinking(input);
-			expect(output).toContain("First block");
-			expect(output).toContain("Second block");
-			expect(output).toContain("Some text");
-			expect(output).toContain(">");
+		it("emits one thinking block per closed span in order", () => {
+			const out = splitThinking(
+				"<thinking>First block</thinking> Some text <thinking>Second block</thinking>",
+			);
+			expect(thinkings(out)).toEqual(["First block", "Second block"]);
+			expect(texts(out)).toEqual(["Some text"]);
 		});
 
-		it("removes empty thinking blocks", () => {
-			const input = "Before <thinking></thinking> After";
-			const output = renderThinking(input);
-			expect(output).not.toContain("thinking");
-			expect(output).toContain("Before");
-			expect(output).toContain("After");
+		it("drops empty thinking spans", () => {
+			const out = splitThinking("Before <thinking></thinking> After");
+			expect(thinkings(out)).toEqual([]);
+			expect(texts(out).join(" ")).toContain("Before");
+			expect(texts(out).join(" ")).toContain("After");
 		});
 
-		it("removes thinking blocks with only whitespace", () => {
-			const input = "Before <thinking>   \n  </thinking> After";
-			const output = renderThinking(input);
-			expect(output).not.toContain(">");
-			expect(output).toContain("Before");
-			expect(output).toContain("After");
+		it("drops whitespace-only thinking spans", () => {
+			const out = splitThinking("Before <thinking>   \n  </thinking> After");
+			expect(thinkings(out)).toEqual([]);
 		});
 
 		it("trims whitespace from thinking content", () => {
-			const input = "<thinking>\n  This is reasoning  \n</thinking>";
-			const output = renderThinking(input);
-			expect(output).toBe(`> This is reasoning\n\n`);
+			const out = splitThinking(
+				"<thinking>\n  This is reasoning  \n</thinking>",
+			);
+			expect(out).toEqual([
+				{ type: "thinking", thinking: "This is reasoning" },
+			]);
 		});
 
 		it("handles mixed case tag names", () => {
-			const input =
-				"<THINKING>uppercase</THINKING> <ThInKiNg>mixedcase</ThInKiNg>";
-			const output = renderThinking(input);
-			expect(output).toContain("uppercase");
-			expect(output).toContain("mixedcase");
-			expect(output).toContain(">");
+			const out = splitThinking(
+				"<THINKING>uppercase</THINKING> <ThInKiNg>mixedcase</ThInKiNg>",
+			);
+			expect(thinkings(out)).toEqual(["uppercase", "mixedcase"]);
 		});
 	});
 
 	describe("dangling/unclosed blocks", () => {
-		it("renders dangling <thinking> block at end of text", () => {
-			const input = "Some text <thinking>Reasoning without close tag";
-			const output = renderThinking(input);
-			expect(output).toContain("Reasoning without close tag");
-			expect(output).toContain("Some text");
-			expect(output).toContain(">");
+		it("treats a trailing <thinking> as a thinking block", () => {
+			const out = splitThinking("Some text <thinking>Reasoning without close");
+			expect(texts(out)).toEqual(["Some text"]);
+			expect(thinkings(out)).toEqual(["Reasoning without close"]);
 		});
 
-		it("renders dangling <think> block at end of text", () => {
-			const input = "Some text <think>Reasoning without close tag";
-			const output = renderThinking(input);
-			expect(output).toContain("Reasoning without close tag");
-			expect(output).toContain("Some text");
-			expect(output).toContain(">");
+		it("treats a trailing <think> as a thinking block", () => {
+			const out = splitThinking("Some text <think>Reasoning without close");
+			expect(texts(out)).toEqual(["Some text"]);
+			expect(thinkings(out)).toEqual(["Reasoning without close"]);
 		});
 
-		it("does not treat mid-text unclosed tag as dangling", () => {
-			// Only dangling blocks at the END of text are processed by OPEN_TAIL_RE
-			const input = "<thinking>Unclosed\nMore text after";
-			const output = renderThinking(input);
-			expect(output).toContain(">");
+		it("captures the remainder of a leading unclosed tag as reasoning", () => {
+			const out = splitThinking("<thinking>Unclosed\nMore text after");
+			expect(thinkings(out)).toEqual(["Unclosed\nMore text after"]);
+			expect(texts(out)).toEqual([]);
 		});
 	});
 
 	describe("orphan tags", () => {
-		it("removes orphan closing tags", () => {
-			const input = "Some text </thinking> more text";
-			const output = renderThinking(input);
-			expect(output).not.toContain("</thinking>");
-			expect(output).not.toContain("<thinking>");
-			expect(output).toContain("Some text");
-			expect(output).toContain("more text");
+		it("removes orphan closing tags from text", () => {
+			const out = splitThinking("Some text </thinking> more text");
+			const joined = texts(out).join(" ");
+			expect(joined).not.toContain("</thinking>");
+			expect(joined).not.toContain("<thinking>");
+			expect(joined).toContain("Some text");
+			expect(joined).toContain("more text");
 		});
 
-		it("removes orphan opening tags after processing blocks", () => {
-			const input = "Text <think> orphan tag";
-			const output = renderThinking(input);
-			expect(output).not.toContain("<think>");
-			expect(output).toContain("Text");
+		it("treats a trailing open tag as a (possibly empty) reasoning span", () => {
+			const out = splitThinking("Text <think> orphan tag");
+			expect(texts(out)).toEqual(["Text"]);
+			expect(thinkings(out)).toEqual(["orphan tag"]);
 		});
 
-		it("removes multiple orphan tags", () => {
-			const input = "</thinking> text </think> more <thinking> stuff </think>";
-			const output = renderThinking(input);
-			// Note: <thinking> at the end is treated as dangling block, creating a blockquote
-			expect(output).not.toContain("<thinking>");
-			expect(output).not.toContain("</thinking>");
-			expect(output).not.toContain("</think>");
-			expect(output).toContain("text");
-			expect(output).toContain("stuff");
+		it("handles multiple orphan tags", () => {
+			const out = splitThinking(
+				"</thinking> text </think> more <thinking> stuff </think>",
+			);
+			const joined = texts(out).join(" ");
+			expect(joined).not.toContain("<thinking>");
+			expect(joined).not.toContain("</thinking>");
+			expect(joined).not.toContain("</think>");
+			expect(joined).toContain("text");
+			expect(thinkings(out).join(" ")).toContain("stuff");
 		});
 	});
 
 	describe("text without thinking tags", () => {
-		it("returns text unchanged when no thinking tags present", () => {
+		it("returns the original text block unchanged", () => {
 			const input = "This is regular text without any tags";
-			const output = renderThinking(input);
-			expect(output).toBe(input);
+			expect(splitThinking(input)).toEqual([{ type: "text", text: input }]);
 		});
 
-		it("preserves markdown formatting", () => {
+		it("preserves markdown formatting verbatim", () => {
 			const input = "# Header\n\n**bold** and *italic*";
-			const output = renderThinking(input);
-			expect(output).toBe(input);
-		});
-	});
-
-	describe("mixed content", () => {
-		it("preserves text before thinking block", () => {
-			const input = "Response text here\n\n<thinking>reasoning</thinking>";
-			const output = renderThinking(input);
-			expect(output).toContain("Response text here");
-			expect(output).toContain("reasoning");
-			expect(output).toContain(">");
-		});
-
-		it("preserves text after thinking block", () => {
-			const input = "<thinking>reasoning</thinking>\n\nMore response text";
-			const output = renderThinking(input);
-			expect(output).toContain("reasoning");
-			expect(output).toContain("More response text");
-			expect(output).toContain(">");
-		});
-
-		it("preserves text between multiple thinking blocks", () => {
-			const input =
-				"<thinking>first</thinking>\n\nMiddle text\n\n<thinking>second</thinking>";
-			const output = renderThinking(input);
-			expect(output).toContain("first");
-			expect(output).toContain("Middle text");
-			expect(output).toContain("second");
-			expect(output).toContain(">");
+			expect(splitThinking(input)).toEqual([{ type: "text", text: input }]);
 		});
 	});
 
-	describe("newline cleanup", () => {
-		it("reduces excessive newlines to maximum of 3", () => {
-			const input = "Text\n\n\n\n\n\nMore text";
-			const output = renderThinking(input);
-			expect(output).not.toContain("\n\n\n\n");
-			expect(output).toBe("Text\n\n\nMore text");
+	describe("mixed content order", () => {
+		it("keeps text before a thinking block", () => {
+			const out = splitThinking(
+				"Response text here\n\n<thinking>reasoning</thinking>",
+			);
+			expect(out).toEqual([
+				{ type: "text", text: "Response text here" },
+				{ type: "thinking", thinking: "reasoning" },
+			]);
 		});
 
-		it("removes leading whitespace", () => {
-			const input = "   \n  \n  Text";
-			const output = renderThinking(input);
-			expect(output).toBe("Text");
+		it("keeps text after a thinking block", () => {
+			const out = splitThinking(
+				"<thinking>reasoning</thinking>\n\nMore response text",
+			);
+			expect(out).toEqual([
+				{ type: "thinking", thinking: "reasoning" },
+				{ type: "text", text: "More response text" },
+			]);
 		});
 
-		it("preserves necessary newlines", () => {
-			const input = "Line 1\n\nLine 2";
-			const output = renderThinking(input);
-			expect(output).toBe(input);
+		it("keeps text between multiple thinking blocks in order", () => {
+			const out = splitThinking(
+				"<thinking>first</thinking>\n\nMiddle text\n\n<thinking>second</thinking>",
+			);
+			expect(out).toEqual([
+				{ type: "thinking", thinking: "first" },
+				{ type: "text", text: "Middle text" },
+				{ type: "thinking", thinking: "second" },
+			]);
 		});
 	});
 
-	describe("streaming (partial tail tags + live rendering)", () => {
+	describe("streaming (partial tail tags)", () => {
 		it("strips a half-streamed opening tag", () => {
 			expect(stripPartialTailTag("Hello <thin")).toBe("Hello ");
 			expect(stripPartialTailTag("Hello <")).toBe("Hello ");
@@ -205,63 +196,56 @@ describe("thinking tag rendering", () => {
 			expect(stripPartialTailTag("<thinking>body")).toBe("<thinking>body");
 		});
 
-		it("renders an open block as blockquote before close tag arrives", () => {
-			// Simulates mid-stream state: open tag + partial body, no close tag.
+		it("emits a thinking block for an open span before the close arrives", () => {
 			const midStream = "<thinking>I am reasoning about";
-			const output = renderThinking(stripPartialTailTag(midStream));
-			expect(output).toBe("> I am reasoning about\n\n");
+			const out = splitThinking(stripPartialTailTag(midStream));
+			expect(out).toEqual([
+				{ type: "thinking", thinking: "I am reasoning about" },
+			]);
 		});
 
-		it("renders progressively without flashing partial close tag", () => {
-			const step1 = renderThinking(stripPartialTailTag("<think>step one"));
-			const step2 = renderThinking(
+		it("renders progressively without flashing a partial close tag", () => {
+			const step1 = splitThinking(stripPartialTailTag("<think>step one"));
+			const step2 = splitThinking(
 				stripPartialTailTag("<think>step one and two</thi"),
 			);
-			const step3 = renderThinking(
+			const step3 = splitThinking(
 				stripPartialTailTag("<think>step one and two</think>\n\nAnswer"),
 			);
-			expect(step1).toBe("> step one\n\n");
-			expect(step2).toBe("> step one and two\n\n");
-			expect(step3).toContain("> step one and two");
-			expect(step3).toContain("Answer");
-			expect(step3).not.toContain("<think>");
+			expect(step1).toEqual([{ type: "thinking", thinking: "step one" }]);
+			expect(step2).toEqual([
+				{ type: "thinking", thinking: "step one and two" },
+			]);
+			expect(step3).toEqual([
+				{ type: "thinking", thinking: "step one and two" },
+				{ type: "text", text: "Answer" },
+			]);
 		});
 	});
 
 	describe("edge cases", () => {
-		it("handles empty string", () => {
-			const input = "";
-			const output = renderThinking(input);
-			expect(output).toBe("");
-		});
-
-		it("handles string with only whitespace", () => {
-			const input = "   \n  \n  ";
-			const output = renderThinking(input);
-			expect(output).toBe("");
+		it("returns a single text block for an empty string", () => {
+			expect(splitThinking("")).toEqual([{ type: "text", text: "" }]);
 		});
 
-		it("handles nested-looking tags (not actually nested in HTML sense)", () => {
-			const input =
-				"<thinking>outer <thinking>inner</thinking> outer</thinking>";
-			const output = renderThinking(input);
-			// Regex will match first <thinking>...</thinking> pair
-			expect(output).toContain(">");
+		it("collapses an all-empty reasoning message to one empty text block", () => {
+			expect(splitThinking("<thinking></thinking>")).toEqual([
+				{ type: "text", text: "" },
+			]);
 		});
 
 		it("handles thinking content with special characters", () => {
-			const input = "<thinking>Special chars: $@#%^&*()</thinking>";
-			const output = renderThinking(input);
-			expect(output).toContain("Special chars: $@#%^&*()");
-			expect(output).toContain(">");
+			const out = splitThinking(
+				"<thinking>Special chars: $@#%^&*()</thinking>",
+			);
+			expect(thinkings(out)).toEqual(["Special chars: $@#%^&*()"]);
 		});
 
 		it("handles thinking content with code-like syntax", () => {
-			const input = "<thinking>const x = 5;\nreturn x + 1;</thinking>";
-			const output = renderThinking(input);
-			expect(output).toContain("const x = 5;");
-			expect(output).toContain("return x + 1;");
-			expect(output).toContain(">");
+			const out = splitThinking(
+				"<thinking>const x = 5;\nreturn x + 1;</thinking>",
+			);
+			expect(thinkings(out)).toEqual(["const x = 5;\nreturn x + 1;"]);
 		});
 	});
 });