@xynogen/pix-pretty 1.0.0

package/src/thinking.test.ts

@@ -0,0 +1,223 @@
+/**
+ * Tests for thinking tag rendering
+ */
+
+import { describe, it, expect } from "bun:test";
+import { renderThinking } from "./thinking";
+
+describe("thinking tag rendering", () => {
+	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("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("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("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("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("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("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`);
+		});
+
+		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(">");
+		});
+	});
+
+	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("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("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(">");
+		});
+	});
+
+	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 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("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");
+		});
+	});
+
+	describe("text without thinking tags", () => {
+		it("returns text unchanged when no thinking tags present", () => {
+			const input = "This is regular text without any tags";
+			const output = renderThinking(input);
+			expect(output).toBe(input);
+		});
+
+		it("preserves markdown formatting", () => {
+			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(">");
+		});
+	});
+
+	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");
+		});
+
+		it("removes leading whitespace", () => {
+			const input = "   \n  \n  Text";
+			const output = renderThinking(input);
+			expect(output).toBe("Text");
+		});
+
+		it("preserves necessary newlines", () => {
+			const input = "Line 1\n\nLine 2";
+			const output = renderThinking(input);
+			expect(output).toBe(input);
+		});
+	});
+
+	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("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("handles thinking content with special characters", () => {
+			const input = "<thinking>Special chars: $@#%^&*()</thinking>";
+			const output = renderThinking(input);
+			expect(output).toContain("Special chars: $@#%^&*()");
+			expect(output).toContain(">");
+		});
+
+		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(">");
+		});
+	});
+});

package/src/thinking.ts

@@ -0,0 +1,100 @@
+/**
+ * Render leaked reasoning tags as styled, visually distinct blocks.
+ *
+ * Some openai-compatible providers leak raw <think>/<thinking> tags into the
+ * visible assistant `content[].text` (the real reasoning travels the proper
+ * `reasoning_content` channel). Instead of stripping them, we render them
+ * with clear visual styling so they're useful for debugging but don't
+ * interfere with the actual response.
+ *
+ * Approach:
+ *   - Do nothing during streaming (no live mutation, no polling, no races).
+ *   - On `message_end`, extract and reformat every reasoning block with
+ *     visual markers, then return the styled message via the supported
+ *     replacement channel.
+ *
+ * `content[].text` is MARKDOWN rendered by pi's TUI Markdown component.
+ * The TUI does NOT parse HTML — <details>/<summary> would render as literal
+ * junk text. We use a Markdown BLOCKQUOTE instead, which the TUI renders
+ * natively via the `mdQuote`/`mdQuoteBorder` theme tokens.
+ *
+ * To add a new tag variant, append to TAG_NAMES below.
+ */
+
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+
+// Reasoning tag names to render. Add new variants here.
+const TAG_NAMES = ["think", "thinking"] as const;
+const TAG_ALT = TAG_NAMES.join("|");
+
+// Closed block: <think>...</think>
+const CLOSED_BLOCK_RE = new RegExp(`<(${TAG_ALT})>([\\s\\S]*?)<\\/\\1>`, "gi");
+// Dangling open block with no close (stream cut off, or close never emitted)
+const OPEN_TAIL_RE = new RegExp(`<(${TAG_ALT})>([\\s\\S]*)$`, "i");
+// Any orphan tags left over.
+const ORPHAN_TAG_RE = new RegExp(`<\\/?(${TAG_ALT})>`, "gi");
+
+interface TextBlock {
+	type: "text";
+	text: string;
+}
+type Block = TextBlock | { type: string; [k: string]: unknown };
+interface Msg {
+	role?: string;
+	content?: Block[];
+}
+
+// Render a reasoning body as a markdown blockquote.
+function asQuote(body: string, _label: string): string {
+	const lines = body.split("\n");
+	const quoted = lines.map((line) => `> ${line}`).join("\n");
+	return `\n\n${quoted}\n\n`;
+}
+
+function renderThinking(text: string): string {
+	// Replace closed blocks with a clearly-marked blockquote
+	text = text.replace(CLOSED_BLOCK_RE, (_match, _tag, content) => {
+		const trimmed = content.trim();
+		if (!trimmed) return "";
+		return asQuote(trimmed, "⚙ Reasoning");
+	});
+
+	// Replace dangling open blocks (stream cut off before close tag)
+	text = text.replace(OPEN_TAIL_RE, (_match, _tag, content) => {
+		const trimmed = content.trim();
+		if (!trimmed) return "";
+		return asQuote(trimmed, "⚙ Reasoning (incomplete)");
+	});
+
+	// Clean up any orphan tags
+	text = text.replace(ORPHAN_TAG_RE, "");
+
+	// Clean up excessive newlines
+	return text.replace(/\n{4,}/g, "\n\n\n").replace(/^\s+/, "");
+}
+
+// Export for testing
+export { renderThinking };
+
+export default function thinkingExtension(pi: ExtensionAPI) {
+	pi.on("message_end", (event) => {
+		const msg = (event as { message?: Msg }).message;
+		if (!msg || msg.role !== "assistant" || !Array.isArray(msg.content)) return;
+
+		let changed = false;
+		for (const block of msg.content) {
+			if (block.type !== "text") continue;
+			const tb = block as TextBlock;
+			if (typeof tb.text !== "string") continue;
+			if (!TAG_NAMES.some((t) => tb.text.includes(`<${t}`))) continue;
+			const rendered = renderThinking(tb.text);
+			if (rendered !== tb.text) {
+				tb.text = rendered;
+				changed = true;
+			}
+		}
+
+		// Return the replacement so the styled message is what gets persisted.
+		if (changed) return { message: msg as unknown as never };
+	});
+}

package/src/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"noEmit": true,
+		"types": ["node"],
+		"allowImportingTsExtensions": true
+	},
+	"include": ["*.ts", "*.d.ts", "../_types/**/*.d.ts"]
+}

package/src/types-diff.d.ts

@@ -0,0 +1,41 @@
+// Minimal ambient shim for the `diff` npm package (v7) — only the surface the
+// vendored pretty extension's diff renderer uses. diff@7 ships no bundled types
+// and @types/diff is not installed into pi's npm root; this keeps the local
+// editor/LSP quiet without vendoring node_modules in-repo.
+
+declare module "diff" {
+	export interface StructuredPatchHunk {
+		oldStart: number;
+		oldLines: number;
+		newStart: number;
+		newLines: number;
+		lines: string[];
+	}
+
+	export interface StructuredPatch {
+		hunks: StructuredPatchHunk[];
+	}
+
+	export function structuredPatch(
+		oldFileName: string,
+		newFileName: string,
+		oldStr: string,
+		newStr: string,
+		oldHeader?: string,
+		newHeader?: string,
+		options?: { context?: number },
+	): StructuredPatch;
+
+	export interface Change {
+		value: string;
+		added?: boolean;
+		removed?: boolean;
+		count?: number;
+	}
+
+	export function diffWords(
+		oldStr: string,
+		newStr: string,
+		options?: unknown,
+	): Change[];
+}

package/src/types-fff.d.ts

@@ -0,0 +1,80 @@
+// Minimal ambient shim for @ff-labs/fff-node — only the surface the vendored
+// pretty extension uses. The real types ship with the runtime package; this
+// keeps the local editor/LSP quiet without installing node_modules in-repo.
+
+declare module "@ff-labs/fff-node" {
+	export interface FileItem {
+		relativePath: string;
+		[k: string]: unknown;
+	}
+	export interface SearchResult {
+		items: FileItem[];
+		totalMatched: number;
+		[k: string]: unknown;
+	}
+	export interface GrepMatch {
+		relativePath: string;
+		lineNumber: number;
+		lineContent: string;
+		contextBefore?: string[];
+		contextAfter?: string[];
+		[k: string]: unknown;
+	}
+	export interface GrepCursor {
+		[k: string]: unknown;
+	}
+	export interface GrepResult {
+		items: GrepMatch[];
+		nextCursor?: GrepCursor | null;
+		regexFallbackError?: string | null;
+		[k: string]: unknown;
+	}
+
+	type Ok<T> = { ok: true; value: T };
+	type Err = { ok: false; error: string };
+	type Result<T> = Ok<T> | Err;
+
+	export class FileFinder {
+		static create(opts: {
+			basePath: string;
+			frecencyDbPath: string;
+			historyDbPath: string;
+			aiMode?: boolean;
+		}): Result<FileFinder>;
+		readonly isDestroyed: boolean;
+		waitForScan(timeoutMs: number): Promise<Result<boolean>>;
+		fileSearch(query: string, opts: { pageSize: number }): Result<SearchResult>;
+		grep(
+			query: string,
+			opts: {
+				mode: "plain" | "regex";
+				smartCase: boolean;
+				maxMatchesPerFile: number;
+				cursor: GrepCursor | null;
+				beforeContext: number;
+				afterContext: number;
+			},
+		): Result<GrepResult>;
+		multiGrep(opts: {
+			patterns: string[];
+			maxMatchesPerFile: number;
+			smartCase: boolean;
+			cursor: GrepCursor | null;
+			beforeContext: number;
+			afterContext: number;
+		}): Result<GrepResult>;
+		healthCheck(): Result<{
+			version: string;
+			git: { repositoryFound: boolean; workdir?: string };
+			filePicker: { initialized: boolean; indexedFiles?: number };
+			frecency: { initialized: boolean };
+			queryTracker: { initialized: boolean };
+		}>;
+		getScanProgress(): Result<{
+			isScanning: boolean;
+			scannedFilesCount: number;
+		}>;
+		scanFiles(): Result<unknown>;
+		destroy(): void;
+	}
+}