plugsuits 1.0.0

package/dist/interaction/pi-tui-stream-renderer.test.js

@@ -0,0 +1,1314 @@
+import { describe, expect, it } from "bun:test";
+import { Container } from "@mariozechner/pi-tui";
+import { computeLineHash } from "../tools/utils/hashline";
+import { renderFullStreamWithPiTui, } from "./pi-tui-stream-renderer";
+const LARGE_BLANK_GAP_REGEX = /\n[ \t]*\n[ \t]*\n[ \t]*\n/;
+const EXECUTING_SPINNER_TEXT_REGEX = /[-\\|/] Executing\.\./;
+const tagGrepLine = (path, lineNumber, content) => {
+    return `${path}:${lineNumber}#${computeLineHash(lineNumber, content)}|${content}`;
+};
+const tagReadLine = (lineNumber, content) => {
+    return `${lineNumber}#${computeLineHash(lineNumber, content)}|${content}`;
+};
+const markdownTheme = {
+    heading: (text) => text,
+    link: (text) => text,
+    linkUrl: (text) => text,
+    code: (text) => text,
+    codeBlock: (text) => text,
+    codeBlockBorder: (text) => text,
+    quote: (text) => text,
+    quoteBorder: (text) => text,
+    hr: (text) => text,
+    listBullet: (text) => text,
+    bold: (text) => text,
+    italic: (text) => text,
+    strikethrough: (text) => text,
+    underline: (text) => text,
+};
+const renderParts = async (parts, overrides = {}) => {
+    const chatContainer = new Container();
+    let renderCalls = 0;
+    const snapshots = [];
+    const options = {
+        chatContainer,
+        markdownTheme,
+        onFirstVisiblePart: overrides.onFirstVisiblePart,
+        ui: {
+            requestRender: () => {
+                renderCalls += 1;
+                snapshots.push(chatContainer.render(120).join("\n"));
+            },
+        },
+        showReasoning: true,
+        showSteps: false,
+        showFinishReason: false,
+        showToolResults: true,
+        showRawToolIo: overrides.showRawToolIo,
+        showSources: false,
+        showFiles: false,
+    };
+    async function* stream() {
+        for (const part of parts) {
+            await Promise.resolve();
+            yield part;
+        }
+    }
+    await renderFullStreamWithPiTui(stream(), options);
+    const output = chatContainer.render(120).join("\n");
+    return { output, renderCalls, snapshots };
+};
+describe("renderFullStreamWithPiTui", () => {
+    it("calls onFirstVisiblePart exactly once", async () => {
+        let calls = 0;
+        await renderParts([
+            { type: "start" },
+            { type: "text-start", id: "text_1" },
+            { type: "text-delta", id: "text_1", text: "Hello" },
+            { type: "text-delta", id: "text_1", text: " world" },
+            { type: "text-end", id: "text_1" },
+        ], {
+            onFirstVisiblePart: () => {
+                calls += 1;
+            },
+        });
+        expect(calls).toBe(1);
+    });
+    it("does not call onFirstVisiblePart for ignored-only stream", async () => {
+        let calls = 0;
+        await renderParts([
+            { type: "start" },
+            { type: "text-end", id: "text_1" },
+            { type: "reasoning-end", id: "reason_1" },
+            { type: "abort" },
+        ], {
+            onFirstVisiblePart: () => {
+                calls += 1;
+            },
+        });
+        expect(calls).toBe(0);
+    });
+    it("streams markdown text into assistant view", async () => {
+        const { output, renderCalls } = await renderParts([
+            { type: "text-start", id: "text_1" },
+            { type: "text-delta", id: "text_1", text: "Hello" },
+            { type: "text-delta", id: "text_1", text: " world" },
+            { type: "text-end", id: "text_1" },
+        ]);
+        expect(output).toContain("Hello world");
+        expect(renderCalls).toBeGreaterThan(0);
+    });
+    it("preserves stream order between reasoning and text blocks", async () => {
+        const { output } = await renderParts([
+            { type: "reasoning-start", id: "reason_1" },
+            { type: "reasoning-delta", id: "reason_1", text: "First thought" },
+            { type: "reasoning-end", id: "reason_1" },
+            { type: "text-start", id: "text_2" },
+            { type: "text-delta", id: "text_2", text: "Final answer" },
+            { type: "text-end", id: "text_2" },
+        ]);
+        const reasoningIndex = output.indexOf("First thought");
+        const textIndex = output.indexOf("Final answer");
+        expect(reasoningIndex).toBeGreaterThan(-1);
+        expect(textIndex).toBeGreaterThan(-1);
+        expect(reasoningIndex).toBeLessThan(textIndex);
+    });
+    it("applies Pi-like muted italic styling to reasoning text", async () => {
+        const { output } = await renderParts([
+            { type: "reasoning-start", id: "reason_2" },
+            { type: "reasoning-delta", id: "reason_2", text: "styled reasoning" },
+            { type: "reasoning-end", id: "reason_2" },
+        ]);
+        expect(output).toContain("styled reasoning");
+        expect(output).toContain("\x1b[2m\x1b[3m\x1b[90m");
+    });
+    it("removes leading newlines from reasoning display", async () => {
+        const { output } = await renderParts([
+            { type: "reasoning-start", id: "reason_trim" },
+            {
+                type: "reasoning-delta",
+                id: "reason_trim",
+                text: "\n\nreasoning without top blank lines",
+            },
+            { type: "reasoning-end", id: "reason_trim" },
+        ]);
+        expect(output).toContain("reasoning without top blank lines");
+        expect(output).not.toContain("\x1b[2m\x1b[3m\x1b[90m\n");
+    });
+    it("avoids large gap between tool output and following reasoning", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_gap",
+                toolName: "bash",
+                input: {
+                    command: "pwd",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_gap",
+                toolName: "bash",
+                input: {
+                    command: "pwd",
+                },
+                output: "tool output line\n\n\n",
+            },
+            { type: "reasoning-start", id: "reason_gap" },
+            {
+                type: "reasoning-delta",
+                id: "reason_gap",
+                text: "After tool output",
+            },
+            { type: "reasoning-end", id: "reason_gap" },
+        ]);
+        const plain = output;
+        const start = plain.indexOf("tool output line");
+        const end = plain.indexOf("After tool output");
+        expect(start).toBeGreaterThan(-1);
+        expect(end).toBeGreaterThan(start);
+        const between = plain.slice(start, end);
+        expect(between).not.toMatch(LARGE_BLANK_GAP_REGEX);
+        const lines = plain.split("\n");
+        const reasoningLineIndex = lines.findIndex((line) => line.includes("After tool output"));
+        expect(reasoningLineIndex).toBeGreaterThan(-1);
+        let previousNonEmptyLineIndex = -1;
+        for (let i = reasoningLineIndex - 1; i >= 0; i -= 1) {
+            if (lines[i].trim().length > 0) {
+                previousNonEmptyLineIndex = i;
+                break;
+            }
+        }
+        expect(previousNonEmptyLineIndex).toBeGreaterThan(-1);
+        expect(reasoningLineIndex).toBe(previousNonEmptyLineIndex + 1);
+    });
+    it("renders live diff preview for edit_file tool input", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-input-start",
+                id: "call_edit",
+                toolName: "edit_file",
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_edit",
+                delta: '{"path":"src/demo.ts","old_str":"const value = 1;","new_str":"const value = 2;"}',
+            },
+            { type: "tool-input-end", id: "call_edit" },
+            {
+                type: "tool-call",
+                toolCallId: "call_edit",
+                toolName: "edit_file",
+                input: {
+                    path: "src/demo.ts",
+                    old_str: "const value = 1;",
+                    new_str: "const value = 2;",
+                },
+            },
+        ]);
+        expect(output).toContain("Live diff preview");
+        expect(output).toContain("-const value = 1;");
+        expect(output).toContain("+const value = 2;");
+    });
+    it("renders read_file output as structured markdown", async () => {
+        const readOutput = [
+            "OK - read file",
+            "path: src/demo.ts",
+            "bytes: 48",
+            "last_modified: 2026-01-19T03:33:57.520Z",
+            "lines: 5 (returned: 4)",
+            "range: L2-L5",
+            "truncated: true",
+            "",
+            "======== demo.ts L2-L5 ========",
+            "   2 | const value = 2;",
+            "   3 | export { value };",
+            "   4 | ```md",
+            "   5 | ![Image 1](./img.png)",
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_read",
+                toolName: "read_file",
+                input: {
+                    path: "src/demo.ts",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_read",
+                toolName: "read_file",
+                input: {
+                    path: "src/demo.ts",
+                },
+                output: readOutput,
+            },
+        ]);
+        expect(output).toContain("Read src/demo.ts L2-L5");
+        expect(output).toContain("2 | ");
+        expect(output).toContain("const value = 2;");
+        expect(output).toContain("![Image 1](./img.png)");
+        expect(output).toContain("... (1 more line, truncated)");
+        expect(output).not.toContain("4 | ```md");
+        expect(output).not.toContain("```md");
+        expect(output).not.toContain("Tool read_file");
+        expect(output).not.toContain("Output");
+        expect(output).not.toContain("OK - read file");
+    });
+    it("normalizes split hashline read line fragments", async () => {
+        const lineContent = "const value = 2;";
+        const lineTag = tagReadLine(2, lineContent).split("|")[0];
+        const readOutput = [
+            "OK - read file",
+            "path: src/demo.ts",
+            "bytes: 48",
+            "last_modified: 2026-01-19T03:33:57.520Z",
+            "lines: 5 (returned: 1)",
+            "range: L2-L2",
+            "truncated: false",
+            "",
+            "======== demo.ts L2-L2 ========",
+            `   ${lineTag}`,
+            "|",
+            lineContent,
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_read_split",
+                toolName: "read_file",
+                input: {
+                    path: "src/demo.ts",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_read_split",
+                toolName: "read_file",
+                input: {
+                    path: "src/demo.ts",
+                },
+                output: readOutput,
+            },
+        ]);
+        expect(output).toContain(tagReadLine(2, lineContent));
+        expect(output).not.toContain(`   ${lineTag}\n|\n${lineContent}`);
+    });
+    it("preserves intentionally empty hashline lines", async () => {
+        const headingLine = "# Code Editing Agent";
+        const paragraphLine = "A code-editing agent built with Vercel AI SDK.";
+        const readOutput = [
+            "OK - read file",
+            "path: README.md",
+            "bytes: 120",
+            "last_modified: 2026-02-23T01:00:00.000Z",
+            "lines: 3 (returned: 3)",
+            "range: L1-L3",
+            "truncated: false",
+            "",
+            "======== README.md L1-L3 ========",
+            tagReadLine(1, headingLine),
+            tagReadLine(2, ""),
+            tagReadLine(3, paragraphLine),
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_read_empty_line",
+                toolName: "read_file",
+                input: {
+                    path: "README.md",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_read_empty_line",
+                toolName: "read_file",
+                input: {
+                    path: "README.md",
+                },
+                output: readOutput,
+            },
+        ]);
+        expect(output).toContain(tagReadLine(2, ""));
+        expect(output).toContain(tagReadLine(3, paragraphLine));
+        expect(output).not.toContain(`${tagReadLine(2, "")}${tagReadLine(3, paragraphLine)}`);
+    });
+    it("omits read_file content after 10 lines", async () => {
+        const numberedLines = Array.from({ length: 12 }, (_, index) => {
+            const lineNumber = index + 1;
+            return `${lineNumber.toString().padStart(4, " ")} | line ${lineNumber}`;
+        });
+        const readOutput = [
+            "OK - read file",
+            "path: src/long.txt",
+            "bytes: 120",
+            "last_modified: 2026-02-23T01:00:00.000Z",
+            "lines: 12 (returned: 12)",
+            "range: L1-L12",
+            "truncated: false",
+            "",
+            "======== long.txt L1-L12 ========",
+            ...numberedLines,
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_long",
+                toolName: "read_file",
+                input: {
+                    path: "src/long.txt",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_long",
+                toolName: "read_file",
+                input: {
+                    path: "src/long.txt",
+                },
+                output: readOutput,
+            },
+        ]);
+        expect(output).toContain("Read src/long.txt L1-L12");
+        expect(output).toContain("10 | line 10");
+        expect(output).not.toContain("11 | line 11");
+        expect(output).toContain("... (2 more lines)");
+    });
+    it("truncates long read_file lines instead of wrapping", async () => {
+        const longTail = "X".repeat(180);
+        const readOutput = [
+            "OK - read file",
+            "path: src/wrap.txt",
+            "bytes: 999",
+            "last_modified: 2026-02-23T01:00:00.000Z",
+            "lines: 1 (returned: 1)",
+            "range: L1-L1",
+            "truncated: false",
+            "",
+            "======== wrap.txt L1-L1 ========",
+            `   1 | prefix ${longTail}`,
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_wrap",
+                toolName: "read_file",
+                input: {
+                    path: "src/wrap.txt",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_wrap",
+                toolName: "read_file",
+                input: {
+                    path: "src/wrap.txt",
+                },
+                output: readOutput,
+            },
+        ]);
+        expect(output).toContain("Read src/wrap.txt L1-L1");
+        expect(output).toContain("1 | prefix");
+        expect(output).not.toContain(longTail);
+    });
+    it("does not duplicate tool call blocks when input was streamed", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-input-start",
+                id: "call_1",
+                toolName: "write_file",
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_1",
+                delta: '{"path":"src/file.ts","content":"hello"}',
+            },
+            { type: "tool-input-end", id: "call_1" },
+            {
+                type: "tool-call",
+                toolCallId: "call_1",
+                toolName: "write_file",
+                input: {
+                    path: "src/file.ts",
+                    content: "hello",
+                },
+            },
+        ]);
+        expect(output).toContain("Write src/file.ts");
+        expect((output.match(/Write src\/file\.ts/g) ?? []).length).toBe(1);
+    });
+    it("supports toolCallId and inputTextDelta aliases", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-input-start",
+                toolCallId: "call_3",
+                toolName: "write_file",
+            },
+            {
+                type: "tool-input-delta",
+                toolCallId: "call_3",
+                inputTextDelta: '{"path":"src/big.ts","content":"chunk"}',
+            },
+            {
+                type: "tool-input-end",
+                toolCallId: "call_3",
+            },
+            {
+                type: "tool-call",
+                toolCallId: "call_3",
+                toolName: "write_file",
+                input: {
+                    path: "src/big.ts",
+                    content: "chunk",
+                },
+            },
+        ]);
+        expect(output).toContain("Write src/big.ts");
+    });
+    it("streams full write_file content without preview truncation", async () => {
+        const contentLines = Array.from({ length: 12 }, (_, index) => `line ${index + 1}`);
+        const streamedContent = contentLines.join("\n");
+        const escapedContent = contentLines.join("\\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-input-start",
+                id: "call_write_stream_full",
+                toolName: "write_file",
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_write_stream_full",
+                delta: `{"path":"src/full-stream.ts","content":"${escapedContent}`,
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_write_stream_full",
+                delta: '"}',
+            },
+            { type: "tool-input-end", id: "call_write_stream_full" },
+            {
+                type: "tool-call",
+                toolCallId: "call_write_stream_full",
+                toolName: "write_file",
+                input: {
+                    path: "src/full-stream.ts",
+                    content: streamedContent,
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_write_stream_full",
+                toolName: "write_file",
+                input: {
+                    path: "src/full-stream.ts",
+                    content: streamedContent,
+                },
+                output: "OK - created full-stream.ts\nbytes: 84, lines: 12",
+            },
+        ]);
+        expect(output).toContain("Write src/full-stream.ts");
+        expect(output).toContain("line 1");
+        expect(output).toContain("line 12");
+        expect(output).not.toContain("OK - created full-stream.ts");
+        expect(output).not.toContain("... (");
+    });
+    it("falls back to write result metadata for empty write_file content", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_write_empty",
+                toolName: "write_file",
+                input: {
+                    path: "src/empty.ts",
+                    content: "",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_write_empty",
+                toolName: "write_file",
+                input: {
+                    path: "src/empty.ts",
+                    content: "",
+                },
+                output: "OK - created empty.ts\nbytes: 0, lines: 1",
+            },
+        ]);
+        expect(output).toContain("Write src/empty.ts");
+        expect(output).toContain("OK - created empty.ts");
+    });
+    it("truncates very large write_file previews to keep rendering bounded", async () => {
+        const contentLines = Array.from({ length: 210 }, (_, index) => `line ${index + 1}`);
+        const streamedContent = contentLines.join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_write_huge",
+                toolName: "write_file",
+                input: {
+                    path: "src/huge.ts",
+                    content: streamedContent,
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_write_huge",
+                toolName: "write_file",
+                input: {
+                    path: "src/huge.ts",
+                    content: streamedContent,
+                },
+                output: "OK - created huge.ts\nbytes: 2048, lines: 210",
+            },
+        ]);
+        expect(output).toContain("Write src/huge.ts");
+        expect(output).toContain("line 1");
+        expect(output).toContain("line 200");
+        expect(output).toContain("... (10 more lines)");
+        expect(output).not.toContain("line 210");
+    });
+    it("streams read_file pretty header from partial tool-input-delta", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-input-start",
+                id: "call_stream_read",
+                toolName: "read_file",
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_stream_read",
+                delta: '{"path":"src/streamed.ts"',
+            },
+        ]);
+        expect(output).toContain("Read src/streamed.ts");
+        expect(output).toContain("Executing..");
+        expect(EXECUTING_SPINNER_TEXT_REGEX.test(output)).toBe(true);
+        expect(output).not.toContain("\x1b[100m");
+        expect(output).not.toContain("Tool read_file");
+    });
+    it("suppresses transient empty-object raw flicker during streamed tool input", async () => {
+        const { output, snapshots } = await renderParts([
+            {
+                type: "tool-input-start",
+                id: "call_stream_flicker",
+                toolName: "read_file",
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_stream_flicker",
+                delta: '{"p',
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_stream_flicker",
+                delta: 'ath":"src/no-flicker.ts"',
+            },
+        ]);
+        expect(output).toContain("Read src/no-flicker.ts");
+        expect(output).toContain("Executing..");
+        expect(output).not.toContain("Tool read_file");
+        expect(snapshots.some((frame) => frame.includes("{}"))).toBe(false);
+    });
+    it("preserves requestRender this-context for pending spinner updates", async () => {
+        const chatContainer = new Container();
+        const renderTracker = {
+            renderCalls: 0,
+            doRender() {
+                this.renderCalls += 1;
+            },
+            requestRender() {
+                this.doRender();
+            },
+        };
+        async function* stream() {
+            yield {
+                type: "tool-input-start",
+                id: "call_bound_request_render",
+                toolName: "read_file",
+            };
+            yield {
+                type: "tool-input-delta",
+                id: "call_bound_request_render",
+                delta: '{"path":"src/bound-context.ts"',
+            };
+            await new Promise((resolve) => setTimeout(resolve, 180));
+        }
+        await renderFullStreamWithPiTui(stream(), {
+            chatContainer,
+            markdownTheme,
+            ui: renderTracker,
+            showReasoning: true,
+            showSteps: false,
+            showFinishReason: false,
+            showToolResults: true,
+            showRawToolIo: false,
+            showSources: false,
+            showFiles: false,
+        });
+        const output = chatContainer.render(120).join("\n");
+        expect(output).toContain("Read src/bound-context.ts");
+        expect(output).toContain("Executing..");
+        expect(renderTracker.renderCalls).toBeGreaterThan(2);
+    });
+    it("streams shell_execute pretty header from partial tool-input-delta", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-input-start",
+                id: "call_stream_shell",
+                toolName: "shell_execute",
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_stream_shell",
+                delta: '{"command":"echo streamed"',
+            },
+        ]);
+        expect(output).toContain("Shell echo streamed");
+        expect(output).toContain("Executing..");
+        expect(EXECUTING_SPINNER_TEXT_REGEX.test(output)).toBe(true);
+        expect(output).not.toContain("Tool shell_execute");
+    });
+    it("waits to render non-raw tool input until tool name is known", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-input-delta",
+                id: "call_late_name",
+                delta: '{"path":"src/late-name.ts"}',
+            },
+            {
+                type: "tool-input-start",
+                id: "call_late_name",
+                toolName: "read_file",
+            },
+        ]);
+        expect(output).toContain("Read src/late-name.ts");
+        expect(output).toContain("Executing..");
+        expect(output).not.toContain("Tool tool");
+    });
+    it("does not render tool block on input-start before deltas in non-raw mode", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-input-start",
+                id: "call_start_only",
+                toolName: "read_file",
+            },
+        ]);
+        expect(output).toBe("");
+    });
+    it("keeps unknown-name tool input visible in raw debug mode", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-input-delta",
+                id: "call_unknown_raw",
+                delta: '{"path":"src/raw-mode.ts"}',
+            },
+        ], { showRawToolIo: true });
+        expect(output).toContain("Tool tool");
+        expect(output).toContain("src/raw-mode.ts");
+    });
+    it("keeps reasoning visible after tool blocks in stream order", async () => {
+        const { output } = await renderParts([
+            { type: "reasoning-start", id: "reason_before" },
+            { type: "reasoning-delta", id: "reason_before", text: "Before tool" },
+            { type: "reasoning-end", id: "reason_before" },
+            {
+                type: "tool-input-start",
+                id: "call_reason",
+                toolName: "bash",
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_reason",
+                delta: '{"command":"ls"}',
+            },
+            { type: "tool-input-end", id: "call_reason" },
+            {
+                type: "tool-call",
+                toolCallId: "call_reason",
+                toolName: "bash",
+                input: {
+                    command: "ls",
+                },
+            },
+            { type: "reasoning-start", id: "reason_after" },
+            { type: "reasoning-delta", id: "reason_after", text: "After tool" },
+            { type: "reasoning-end", id: "reason_after" },
+        ]);
+        const beforeIndex = output.indexOf("Before tool");
+        const toolIndex = output.indexOf("Shell ls");
+        const afterIndex = output.indexOf("After tool");
+        expect(beforeIndex).toBeGreaterThan(-1);
+        expect(toolIndex).toBeGreaterThan(-1);
+        expect(afterIndex).toBeGreaterThan(-1);
+        expect(beforeIndex).toBeLessThan(toolIndex);
+        expect(toolIndex).toBeLessThan(afterIndex);
+    });
+    it("keeps reasoning visible between two tool calls", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-input-start",
+                id: "call_a",
+                toolName: "bash",
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_a",
+                delta: '{"command":"pwd"}',
+            },
+            { type: "tool-input-end", id: "call_a" },
+            {
+                type: "tool-call",
+                toolCallId: "call_a",
+                toolName: "bash",
+                input: {
+                    command: "pwd",
+                },
+            },
+            { type: "reasoning-start", id: "reason_mid" },
+            { type: "reasoning-delta", id: "reason_mid", text: "Between tools" },
+            { type: "reasoning-end", id: "reason_mid" },
+            {
+                type: "tool-input-start",
+                id: "call_b",
+                toolName: "bash",
+            },
+            {
+                type: "tool-input-delta",
+                id: "call_b",
+                delta: '{"command":"ls"}',
+            },
+            { type: "tool-input-end", id: "call_b" },
+            {
+                type: "tool-call",
+                toolCallId: "call_b",
+                toolName: "bash",
+                input: {
+                    command: "ls",
+                },
+            },
+        ]);
+        const firstToolIndex = output.indexOf("Shell pwd");
+        const reasoningIndex = output.indexOf("Between tools");
+        const secondToolIndex = output.indexOf("Shell ls");
+        expect(firstToolIndex).toBeGreaterThan(-1);
+        expect(reasoningIndex).toBeGreaterThan(-1);
+        expect(secondToolIndex).toBeGreaterThan(-1);
+        expect(firstToolIndex).toBeLessThan(reasoningIndex);
+        expect(reasoningIndex).toBeLessThan(secondToolIndex);
+    });
+    it("keeps reasoning visible across unknown stream parts", async () => {
+        const { output } = await renderParts([
+            { type: "reasoning-start", id: "reason_unknown_before" },
+            {
+                type: "reasoning-delta",
+                id: "reason_unknown_before",
+                text: "Before unknown",
+            },
+            { type: "reasoning-end", id: "reason_unknown_before" },
+            {
+                type: "unknown-x",
+                payload: "mystery",
+            },
+            { type: "reasoning-start", id: "reason_unknown_after" },
+            {
+                type: "reasoning-delta",
+                id: "reason_unknown_after",
+                text: "After unknown",
+            },
+            { type: "reasoning-end", id: "reason_unknown_after" },
+        ]);
+        const beforeIndex = output.indexOf("Before unknown");
+        const unknownIndex = output.indexOf("[unknown part]");
+        const afterIndex = output.indexOf("After unknown");
+        expect(beforeIndex).toBeGreaterThan(-1);
+        expect(unknownIndex).toBeGreaterThan(-1);
+        expect(afterIndex).toBeGreaterThan(-1);
+        expect(beforeIndex).toBeLessThan(unknownIndex);
+        expect(unknownIndex).toBeLessThan(afterIndex);
+    });
+    it("renders glob_files output as structured markdown", async () => {
+        const globOutput = [
+            "OK - glob",
+            'pattern: "src/**/*.ts"',
+            "path: /project",
+            "respect_git_ignore: true",
+            "file_count: 12",
+            "truncated: false",
+            "sorted_by: mtime desc",
+            "",
+            "======== glob results ========",
+            "/project/file1.ts",
+            "/project/file2.ts",
+            "/project/file3.ts",
+            "/project/file4.ts",
+            "/project/file5.ts",
+            "/project/file6.ts",
+            "/project/file7.ts",
+            "/project/file8.ts",
+            "/project/file9.ts",
+            "/project/file10.ts",
+            "/project/file11.ts",
+            "/project/file12.ts",
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_glob",
+                toolName: "glob_files",
+                input: {
+                    pattern: "src/**/*.ts",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_glob",
+                toolName: "glob_files",
+                input: {
+                    pattern: "src/**/*.ts",
+                },
+                output: globOutput,
+            },
+        ]);
+        expect(output).toContain("Glob src/**/*.ts");
+        expect(output).toContain("/project/file1.ts");
+        expect(output).toContain("... (2 more lines)");
+        expect(output).not.toContain("Tool glob_files");
+        expect(output).not.toContain("Output");
+    });
+    it("renders glob_files no-match output in glob mode", async () => {
+        const globOutput = [
+            "OK - glob (no matches)",
+            'pattern: "*.xyz"',
+            "path: /project",
+            "respect_git_ignore: true",
+            "file_count: 0",
+            "truncated: false",
+            "sorted_by: mtime desc",
+            "",
+            "======== glob results ========",
+            "(no matches)",
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_glob_empty",
+                toolName: "glob_files",
+                input: {
+                    pattern: "*.xyz",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_glob_empty",
+                toolName: "glob_files",
+                input: {
+                    pattern: "*.xyz",
+                },
+                output: globOutput,
+            },
+        ]);
+        expect(output).toContain("Glob *.xyz");
+        expect(output).toContain("(no matches)");
+        expect(output).not.toContain("Tool glob_files");
+        expect(output).not.toContain("Output");
+    });
+    it("shows truncated marker for glob files when model truncates", async () => {
+        const globOutput = [
+            "OK - glob",
+            'pattern: "src/**/*.ts"',
+            "path: /project",
+            "respect_git_ignore: true",
+            "file_count: 12",
+            "truncated: true",
+            "sorted_by: mtime desc",
+            "",
+            "======== glob results ========",
+            "/project/file1.ts",
+            "/project/file2.ts",
+            "/project/file3.ts",
+            "/project/file4.ts",
+            "/project/file5.ts",
+            "/project/file6.ts",
+            "/project/file7.ts",
+            "/project/file8.ts",
+            "/project/file9.ts",
+            "/project/file10.ts",
+            "/project/file11.ts",
+            "/project/file12.ts",
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_glob_truncated",
+                toolName: "glob_files",
+                input: {
+                    pattern: "src/**/*.ts",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_glob_truncated",
+                toolName: "glob_files",
+                input: {
+                    pattern: "src/**/*.ts",
+                },
+                output: globOutput,
+            },
+        ]);
+        expect(output).toContain("... (2 more lines, truncated)");
+        expect(output).not.toContain("file_count (");
+        expect(output).not.toContain("path: ");
+    });
+    it("renders grep_files output as structured markdown", async () => {
+        const grepOutput = [
+            "OK - grep",
+            'pattern: "foo"',
+            "path: /project",
+            "include: *.ts",
+            "case_sensitive: false",
+            "fixed_strings: false",
+            "match_count: 12",
+            "truncated: false",
+            "",
+            "======== grep results ========",
+            tagGrepLine("/project/a.ts", 1, "const foo = 1;"),
+            tagGrepLine("/project/b.ts", 2, "const foo = 2;"),
+            tagGrepLine("/project/c.ts", 3, "const foo = 3;"),
+            tagGrepLine("/project/d.ts", 4, "const foo = 4;"),
+            tagGrepLine("/project/e.ts", 5, "const foo = 5;"),
+            tagGrepLine("/project/f.ts", 6, "const foo = 6;"),
+            tagGrepLine("/project/g.ts", 7, "const foo = 7;"),
+            tagGrepLine("/project/h.ts", 8, "const foo = 8;"),
+            tagGrepLine("/project/i.ts", 9, "const foo = 9;"),
+            tagGrepLine("/project/j.ts", 10, "const foo = 10;"),
+            tagGrepLine("/project/k.ts", 11, "const foo = 11;"),
+            tagGrepLine("/project/l.ts", 12, "const foo = 12;"),
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_grep",
+                toolName: "grep_files",
+                input: {
+                    pattern: "foo",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_grep",
+                toolName: "grep_files",
+                input: {
+                    pattern: "foo",
+                },
+                output: grepOutput,
+            },
+        ]);
+        expect(output).toContain("Grep foo");
+        expect(output).toContain(tagGrepLine("/project/a.ts", 1, "const foo = 1;"));
+        expect(output).toContain("... (2 more lines)");
+        expect(output).not.toContain("Tool grep_files");
+        expect(output).not.toContain("Output");
+    });
+    it("renders grep_files no-match output in grep mode", async () => {
+        const grepOutput = [
+            "OK - grep (no matches)",
+            'pattern: "foo"',
+            "path: /project",
+            "include: *.ts",
+            "case_sensitive: false",
+            "fixed_strings: false",
+            "match_count: 0",
+            "truncated: false",
+            "",
+            "======== grep results ========",
+            "(no matches)",
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_grep_empty",
+                toolName: "grep_files",
+                input: {
+                    pattern: "foo",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_grep_empty",
+                toolName: "grep_files",
+                input: {
+                    pattern: "foo",
+                },
+                output: grepOutput,
+            },
+        ]);
+        expect(output).toContain("Grep foo");
+        expect(output).toContain("(no matches)");
+        expect(output).not.toContain("Tool grep_files");
+        expect(output).not.toContain("Output");
+    });
+    it("shows truncated marker for grep files when model truncates", async () => {
+        const grepOutput = [
+            "OK - grep",
+            'pattern: "foo"',
+            "path: /project",
+            "include: *.ts",
+            "case_sensitive: false",
+            "fixed_strings: false",
+            "match_count: 40",
+            "truncated: true",
+            "",
+            "======== grep results ========",
+            tagGrepLine("/project/a.ts", 1, "const foo = 1;"),
+            tagGrepLine("/project/b.ts", 2, "const foo = 2;"),
+            tagGrepLine("/project/c.ts", 3, "const foo = 3;"),
+            tagGrepLine("/project/d.ts", 4, "const foo = 4;"),
+            tagGrepLine("/project/e.ts", 5, "const foo = 5;"),
+            tagGrepLine("/project/f.ts", 6, "const foo = 6;"),
+            tagGrepLine("/project/g.ts", 7, "const foo = 7;"),
+            tagGrepLine("/project/h.ts", 8, "const foo = 8;"),
+            tagGrepLine("/project/i.ts", 9, "const foo = 9;"),
+            tagGrepLine("/project/j.ts", 10, "const foo = 10;"),
+            tagGrepLine("/project/k.ts", 11, "const foo = 11;"),
+            tagGrepLine("/project/l.ts", 12, "const foo = 12;"),
+            "======== end ========",
+        ].join("\n");
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_grep_truncated",
+                toolName: "grep_files",
+                input: {
+                    pattern: "foo",
+                },
+            },
+            {
+                type: "tool-result",
+                toolCallId: "call_grep_truncated",
+                toolName: "grep_files",
+                input: {
+                    pattern: "foo",
+                },
+                output: grepOutput,
+            },
+        ]);
+        expect(output).toContain("... (30 more lines, truncated)");
+        expect(output).toContain("match_count (40)");
+        expect(output).toContain("truncated: true");
+    });
+    it("renders read/glob/grep tool IO in raw mode when enabled", async () => {
+        const cases = [
+            {
+                toolCallId: "call_read_raw",
+                toolName: "read_file",
+                input: { path: "src/demo.ts" },
+                output: [
+                    "OK - read file",
+                    "path: src/demo.ts",
+                    "bytes: 12",
+                    "last_modified: 2026-02-23T01:00:00.000Z",
+                    "lines: 1 (returned: 1)",
+                    "range: L1-L1",
+                    "truncated: false",
+                    "",
+                    "======== demo.ts L1-L1 ========",
+                    "   1 | const x = 1;",
+                    "======== end ========",
+                ].join("\n"),
+                prettyHeading: "Read src/demo.ts",
+            },
+            {
+                toolCallId: "call_glob_raw",
+                toolName: "glob_files",
+                input: { pattern: "src/**/*.ts" },
+                output: [
+                    "OK - glob",
+                    'pattern: "src/**/*.ts"',
+                    "path: /project",
+                    "respect_git_ignore: true",
+                    "file_count: 1",
+                    "truncated: false",
+                    "sorted_by: mtime desc",
+                    "",
+                    "======== glob results ========",
+                    "/project/file1.ts",
+                    "======== end ========",
+                ].join("\n"),
+                prettyHeading: "Glob src/**/*.ts",
+            },
+            {
+                toolCallId: "call_grep_raw",
+                toolName: "grep_files",
+                input: { pattern: "foo" },
+                output: [
+                    "OK - grep",
+                    'pattern: "foo"',
+                    "path: /project",
+                    "include: *.ts",
+                    "case_sensitive: false",
+                    "fixed_strings: false",
+                    "match_count: 1",
+                    "truncated: false",
+                    "",
+                    "======== grep results ========",
+                    tagGrepLine("/project/file1.ts", 1, "const foo = 1;"),
+                    "======== end ========",
+                ].join("\n"),
+                prettyHeading: "Grep foo",
+            },
+        ];
+        for (const testCase of cases) {
+            const { output } = await renderParts([
+                {
+                    type: "tool-call",
+                    toolCallId: testCase.toolCallId,
+                    toolName: testCase.toolName,
+                    input: testCase.input,
+                },
+                {
+                    type: "tool-result",
+                    toolCallId: testCase.toolCallId,
+                    toolName: testCase.toolName,
+                    input: testCase.input,
+                    output: testCase.output,
+                },
+            ], { showRawToolIo: true });
+            expect(output).toContain(`Tool ${testCase.toolName}`);
+            expect(output).toContain("Input");
+            expect(output).toContain("Output");
+            expect(output).toContain(testCase.output.split("\n")[0]);
+            expect(output).not.toContain(testCase.prettyHeading);
+        }
+    });
+    it("hides call id in raw shell headers", async () => {
+        const { output } = await renderParts([
+            {
+                type: "tool-call",
+                toolCallId: "call_shell_raw",
+                toolName: "bash",
+                input: {
+                    command: "pwd",
+                },
+            },
+        ], { showRawToolIo: true });
+        expect(output).toContain("Tool bash");
+        expect(output).not.toContain("call_shell_raw");
+    });
+    it("renders dedicated pretty wrappers for all other tools", async () => {
+        const cases = [
+            {
+                toolCallId: "call_shell_pretty",
+                toolName: "shell_execute",
+                input: {
+                    command: "echo hello",
+                    workdir: "/tmp",
+                    timeout_ms: 1000,
+                },
+                output: {
+                    exit_code: 0,
+                    output: "hello",
+                },
+                expectedHeading: "Shell echo hello",
+            },
+            {
+                toolCallId: "call_interact_pretty",
+                toolName: "shell_interact",
+                input: {
+                    keystrokes: "<Enter>",
+                },
+                output: {
+                    success: true,
+                    output: "sent",
+                },
+                expectedHeading: "Interact <Enter>",
+            },
+            {
+                toolCallId: "call_write_pretty",
+                toolName: "write_file",
+                input: {
+                    path: "src/new.ts",
+                    content: "const x = 1;",
+                },
+                output: "OK - created new.ts\nbytes: 12, lines: 1",
+                expectedHeading: "Write src/new.ts",
+            },
+            {
+                toolCallId: "call_edit_pretty",
+                toolName: "edit_file",
+                input: {
+                    path: "src/demo.ts",
+                    edits: [{ op: "replace", pos: "2#AB", lines: ["const x = 2;"] }],
+                },
+                output: "Updated src/demo.ts",
+                expectedHeading: "Edit src/demo.ts",
+            },
+            {
+                toolCallId: "call_delete_pretty",
+                toolName: "delete_file",
+                input: {
+                    path: "src/old.ts",
+                },
+                output: "OK - deleted file: old.ts\npath: src/old.ts",
+                expectedHeading: "Delete src/old.ts",
+            },
+            {
+                toolCallId: "call_skill_pretty",
+                toolName: "load_skill",
+                input: {
+                    skillName: "git-workflow",
+                },
+                output: "# Skill Loaded: git-workflow [Project]",
+                expectedHeading: "Skill git-workflow",
+            },
+            {
+                toolCallId: "call_todo_pretty",
+                toolName: "todo_write",
+                input: {
+                    todos: [
+                        { id: "1", content: "A", status: "pending", priority: "high" },
+                        {
+                            id: "2",
+                            content: "B",
+                            status: "completed",
+                            priority: "medium",
+                        },
+                    ],
+                },
+                output: "OK - updated todo list\ntotal: 2 tasks",
+                expectedHeading: "Todo 2 tasks",
+            },
+        ];
+        for (const testCase of cases) {
+            const { output } = await renderParts([
+                {
+                    type: "tool-call",
+                    toolCallId: testCase.toolCallId,
+                    toolName: testCase.toolName,
+                    input: testCase.input,
+                },
+                {
+                    type: "tool-result",
+                    toolCallId: testCase.toolCallId,
+                    toolName: testCase.toolName,
+                    input: testCase.input,
+                    output: testCase.output,
+                },
+            ]);
+            expect(output).toContain(testCase.expectedHeading);
+            expect(output).not.toContain(`Tool ${testCase.toolName}`);
+        }
+    });
+});
+//# sourceMappingURL=pi-tui-stream-renderer.test.js.map