1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import type { ToolCall } from "../reducer";
import { ToolCallCard } from "./ToolCallCard";

function call(overrides: Partial<ToolCall>): ToolCall {
	return {
		toolCallId: "c1",
		title: "A tool call",
		toolKind: "other",
		status: "completed",
		contents: [],
		locations: [],
		...overrides,
	};
}

describe("ToolCallCard", () => {
	it("renders execute output verbatim in a monospace block", () => {
		const { container } = render(
			<ToolCallCard
				call={call({
					toolKind: "execute",
					contents: [
						{
							type: "content",
							content: { type: "text", text: "* main\n  remote/origin" },
						},
					],
				})}
			/>,
		);

		const output = container.querySelector("pre.tool-output");
		expect(output).not.toBeNull();
		// Verbatim: the "* " prefix must not have become a markdown list.
		expect(output?.textContent).toBe("* main\n  remote/origin");
		expect(container.querySelector("ul li")).toBeNull();
	});

	it("renders backticked commands in the title as monospace code", () => {
		const { container } = render(
			<ToolCallCard
				call={call({ toolKind: "execute", title: "Run `ls .memory/`" })}
			/>,
		);

		const code = container.querySelector(".tool-title code.inline-code");
		expect(code?.textContent).toBe("ls .memory/");
	});

	it("renders non-execute text content as markdown", () => {
		const { container } = render(
			<ToolCallCard
				call={call({
					toolKind: "read",
					contents: [
						{
							type: "content",
							content: { type: "text", text: "**bold** result" },
						},
					],
				})}
			/>,
		);

		expect(container.querySelector("pre.tool-output")).toBeNull();
		expect(screen.getByText("bold")).toBeDefined();
	});
});