@fnclaude/renderer 0.0.1 → 2.0.1

package/src/renderers/ReadInput.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { ReadInput } from "./ReadInput.tsx";
+
+describe("ReadInput", () => {
+  test("renders path being read", () => {
+    const { lastFrame } = render(<ReadInput filePath="/etc/hosts" />);
+    expect(lastFrame() ?? "").toContain("/etc/hosts");
+  });
+
+  test("includes line range when offset/limit present", () => {
+    const { lastFrame } = render(<ReadInput filePath="/etc/hosts" offset={10} limit={20} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/etc/hosts");
+    expect(frame).toMatch(/10/);
+    expect(frame).toMatch(/20/);
+  });
+});

package/src/renderers/ReadInput.tsx

@@ -0,0 +1,19 @@
+import { Text } from "ink";
+
+export interface ReadInputProps {
+  filePath: string;
+  offset?: number | undefined;
+  limit?: number | undefined;
+}
+
+/**
+ * Renders the path being read by a Read tool_use. This is the *call*
+ * side; the resulting file content is filterable via Read.content on
+ * the result side. The call line itself is always shown — it's a
+ * tool-call header, not a filterable element.
+ */
+export function ReadInput({ filePath, offset, limit }: ReadInputProps): JSX.Element {
+  const range =
+    offset !== undefined || limit !== undefined ? ` [${offset ?? 0}:${limit ?? "end"}]` : "";
+  return <Text>{`▸ Read: ${filePath}${range}`}</Text>;
+}

package/src/renderers/ResultRenderer.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import type { ResultEvent } from "../types/events.ts";
+import { ResultRenderer } from "./ResultRenderer.tsx";
+
+const baseEvent: ResultEvent = {
+  type: "result",
+  subtype: "success",
+  is_error: false,
+  session_id: "s1",
+  uuid: "u1",
+  result: "All good.",
+  num_turns: 1,
+  duration_ms: 10,
+  duration_api_ms: 5,
+  total_cost_usd: 0,
+};
+
+describe("ResultRenderer", () => {
+  test("renders the result text", () => {
+    const { lastFrame } = render(<ResultRenderer event={baseEvent} />);
+    expect(lastFrame() ?? "").toContain("All good.");
+  });
+
+  test("detects 'Unknown command:' prefix and styles as a soft warning", () => {
+    const ev: ResultEvent = { ...baseEvent, result: "Unknown command: /foo" };
+    const { lastFrame } = render(<ResultRenderer event={ev} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Unknown command: /foo");
+    // Yellow ANSI (CSI 33) for soft warning
+    expect(frame).toMatch(/\x1B\[33m/);
+  });
+
+  test("non-Unknown result does NOT use yellow warning color", () => {
+    const { lastFrame } = render(<ResultRenderer event={baseEvent} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).not.toMatch(/\x1B\[33m/);
+  });
+
+  test("is_error: delegates to error styling (red)", () => {
+    const ev: ResultEvent = {
+      ...baseEvent,
+      is_error: true,
+      subtype: "error",
+      result: "kaboom",
+    };
+    const { lastFrame } = render(<ResultRenderer event={ev} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("kaboom");
+    expect(frame).toMatch(/\x1B\[31m/);
+  });
+});

package/src/renderers/ResultRenderer.tsx

@@ -0,0 +1,26 @@
+import { Text } from "ink";
+import type { ResultEvent } from "../types/events.ts";
+import { ErrorRenderer } from "./ErrorRenderer.tsx";
+
+export interface ResultRendererProps {
+  event: ResultEvent;
+}
+
+/**
+ * Renders a ResultEvent. The `result` text is always shown (status-line
+ * style). Two special cases:
+ *
+ *   - is_error: true            → delegate to ErrorRenderer (red bold).
+ *   - "Unknown command:" prefix → soft warning (yellow), per
+ *     docs/stream-json-findings.md: claude reports unknown slash commands
+ *     via result.result with is_error: false.
+ */
+export function ResultRenderer({ event }: ResultRendererProps): JSX.Element {
+  if (event.is_error) {
+    return <ErrorRenderer message={event.result} label="result" />;
+  }
+  if (event.result.startsWith("Unknown command:")) {
+    return <Text color="yellow">{event.result}</Text>;
+  }
+  return <Text>{event.result}</Text>;
+}

package/src/renderers/SystemInit.test.tsx

@@ -0,0 +1,33 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import type { SystemEvent } from "../types/events.ts";
+import { SystemInit } from "./SystemInit.tsx";
+
+const baseEvent: SystemEvent = {
+  type: "system",
+  subtype: "init",
+  session_id: "sess-abc123",
+  uuid: "u-1",
+  cwd: "/home/user/proj",
+  model: "claude-sonnet-4",
+};
+
+describe("SystemInit", () => {
+  test("renders session_id, cwd, model on one line", () => {
+    const { lastFrame } = render(<SystemInit event={baseEvent} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("sess-abc123");
+    expect(frame).toContain("/home/user/proj");
+    expect(frame).toContain("claude-sonnet-4");
+    // single line (no embedded newlines other than trailing)
+    const lines = frame.trim().split("\n");
+    expect(lines.length).toBe(1);
+  });
+
+  test("tolerates missing optional fields", () => {
+    const { lastFrame } = render(
+      <SystemInit event={{ type: "system", subtype: "init", session_id: "s1", uuid: "u1" }} />,
+    );
+    expect(lastFrame() ?? "").toContain("s1");
+  });
+});

package/src/renderers/SystemInit.tsx

@@ -0,0 +1,22 @@
+import { Text } from "ink";
+import type { SystemEvent } from "../types/events.ts";
+
+export interface SystemInitProps {
+  event: SystemEvent;
+}
+
+/**
+ * One-line session header for SystemEvent.subtype === "init".
+ * Mostly hidden by default; surfaces session_id, cwd, model on one line.
+ */
+export function SystemInit({ event }: SystemInitProps): JSX.Element {
+  const parts: string[] = [`session=${event.session_id}`];
+  if (event.cwd) parts.push(`cwd=${event.cwd}`);
+  if (event.model) parts.push(`model=${event.model}`);
+  return (
+    <Text dimColor>
+      {"▸ "}
+      {parts.join(" ")}
+    </Text>
+  );
+}

package/src/renderers/TaskNested.test.tsx

@@ -0,0 +1,58 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { TaskNested } from "./TaskNested.tsx";
+
+const prompt = `Find all TypeScript files.
+Then count lines of code in each.
+Report top 10 by size.
+Include only .ts and .tsx.
+Use ripgrep.
+Output JSON.`;
+
+describe("TaskNested", () => {
+  test("show: full prompt rendered", () => {
+    const { lastFrame } = render(
+      <TaskNested description="audit ts" prompt={prompt} visibility="show" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Find all TypeScript");
+    expect(frame).toContain("Output JSON");
+  });
+
+  test("hide: header only", () => {
+    const { lastFrame } = render(
+      <TaskNested description="audit ts" prompt={prompt} visibility="hide" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Task");
+    expect(frame).toContain("audit ts");
+    expect(frame).not.toContain("Find all TypeScript");
+  });
+
+  test("summary: first line + line count", () => {
+    const { lastFrame } = render(
+      <TaskNested description="audit ts" prompt={prompt} visibility="summary" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Find all TypeScript files.");
+    expect(frame).toMatch(/6 lines/);
+    expect(frame).not.toContain("Output JSON");
+  });
+
+  test("dim: full body with dim styling", () => {
+    const { lastFrame } = render(<TaskNested description="t" prompt="hello" visibility="dim" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("hello");
+    expect(frame).toMatch(/\x1B\[2m/);
+  });
+
+  test("show vs hide vs summary differ", () => {
+    const p = { description: "d", prompt };
+    const a = render(<TaskNested {...p} visibility="show" />).lastFrame() ?? "";
+    const b = render(<TaskNested {...p} visibility="hide" />).lastFrame() ?? "";
+    const c = render(<TaskNested {...p} visibility="summary" />).lastFrame() ?? "";
+    expect(a).not.toBe(b);
+    expect(a).not.toBe(c);
+    expect(b).not.toBe(c);
+  });
+});

package/src/renderers/TaskNested.tsx

@@ -0,0 +1,49 @@
+import { Box, Text } from "ink";
+import type { Visibility } from "../types/events.ts";
+import { countLines } from "./summarize.ts";
+
+export interface TaskNestedProps {
+  description?: string | undefined;
+  prompt: string;
+  visibility: Visibility;
+}
+
+/**
+ * Renders a Task tool_use: prompt sent to a subagent.
+ * Filterable element id: "Task.nested".
+ *
+ * Visibility:
+ *   show     — full subagent prompt
+ *   hide     — header only ("▸ Task: <description>")
+ *   summary  — first line of prompt + line count
+ *   dim      — full prompt, ANSI-faint
+ */
+export function TaskNested({ description, prompt, visibility }: TaskNestedProps): JSX.Element {
+  const header = `▸ Task${description ? `: ${description}` : ""}`;
+
+  if (visibility === "hide") {
+    return <Text dimColor>{header}</Text>;
+  }
+
+  if (visibility === "summary") {
+    const firstLine = prompt.split("\n", 1)[0] ?? "";
+    const total = countLines(prompt);
+    return <Text>{`${header}\n  ${firstLine} (${total} lines)`}</Text>;
+  }
+
+  if (visibility === "dim") {
+    return (
+      <Box flexDirection="column">
+        <Text dimColor>{header}</Text>
+        <Text dimColor>{prompt}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text>{header}</Text>
+      <Text>{prompt}</Text>
+    </Box>
+  );
+}

package/src/renderers/TextRenderer.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { TextRenderer } from "./TextRenderer.tsx";
+
+const md = "# Heading\n\nSome *italic* text.";
+
+describe("TextRenderer", () => {
+  test("glow=null: renders raw markdown unchanged", () => {
+    const { lastFrame } = render(<TextRenderer text={md} glow={null} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("# Heading");
+    expect(frame).toContain("Some *italic* text.");
+  });
+
+  test("glow injected: output differs from raw markdown path", () => {
+    const fakeGlow = (input: string) => `<<RENDERED:${input}>>`;
+    const plain = render(<TextRenderer text={md} glow={null} />).lastFrame() ?? "";
+    const glowed = render(<TextRenderer text={md} glow={fakeGlow} />).lastFrame() ?? "";
+    expect(plain).not.toBe(glowed);
+    expect(glowed).toContain("<<RENDERED:");
+    expect(glowed).toContain("# Heading"); // the input gets embedded
+  });
+
+  test("glow output containing ANSI escapes is passed through", () => {
+    const ansiGlow = (_input: string) => "\x1B[1mBOLD\x1B[0m text";
+    const { lastFrame } = render(<TextRenderer text="anything" glow={ansiGlow} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("BOLD");
+    // ANSI escape opening sequence should survive
+    expect(frame).toMatch(/\x1B\[/);
+  });
+
+  test("empty text produces empty output", () => {
+    const { lastFrame } = render(<TextRenderer text="" glow={null} />);
+    expect((lastFrame() ?? "").trim()).toBe("");
+  });
+});

package/src/renderers/TextRenderer.tsx

@@ -0,0 +1,80 @@
+import { Text } from "ink";
+
+/**
+ * A glow-runner function: takes raw markdown, returns rendered output
+ * (typically containing ANSI escapes from `glow -s dark`).
+ *
+ * Injectable so tests can avoid depending on glow being on PATH in CI.
+ *   - `undefined` (omitted) → use the module default (detect + run glow if
+ *      present; else pass markdown through unchanged).
+ *   - `null`               → explicitly disable glow; render raw markdown.
+ *   - `(md) => rendered`    → use the provided runner.
+ */
+export type GlowRunner = (markdown: string) => string;
+
+export interface TextRendererProps {
+  text: string;
+  glow?: GlowRunner | null;
+}
+
+let cachedGlowPath: string | null | undefined;
+
+/**
+ * Detect glow on PATH via `which glow`. Memoized. Returns null if not
+ * found. Synchronous (single subprocess at module load); never throws —
+ * an unreachable binary just yields null.
+ */
+export function detectGlowPath(): string | null {
+  if (cachedGlowPath !== undefined) return cachedGlowPath;
+  try {
+    const proc = Bun.spawnSync({ cmd: ["which", "glow"], stdout: "pipe", stderr: "ignore" });
+    if (proc.exitCode === 0) {
+      const out = proc.stdout.toString().trim();
+      cachedGlowPath = out.length > 0 ? out : null;
+    } else {
+      cachedGlowPath = null;
+    }
+  } catch {
+    cachedGlowPath = null;
+  }
+  return cachedGlowPath;
+}
+
+/**
+ * Run `glow -s dark` against the markdown. Returns the rendered output
+ * (ANSI-styled); falls back to the raw input if glow exits non-zero.
+ */
+export function runGlow(markdown: string, glowPath: string): string {
+  try {
+    const proc = Bun.spawnSync({
+      cmd: [glowPath, "-s", "dark"],
+      stdin: new TextEncoder().encode(markdown),
+      stdout: "pipe",
+      stderr: "ignore",
+    });
+    if (proc.exitCode === 0) return proc.stdout.toString();
+  } catch {
+    // fall through
+  }
+  return markdown;
+}
+
+/** The default runner used when the prop is omitted. */
+const defaultGlowRunner: GlowRunner | null = (() => {
+  const path = detectGlowPath();
+  if (path === null) return null;
+  return (md: string) => runGlow(md, path);
+})();
+
+/**
+ * Renders an AssistantEvent.message.content[] TextBlock.
+ *
+ * Glow integration: if glow is on PATH at module init, pipes markdown
+ * through `glow -s dark`; otherwise renders raw markdown. Ink's <Text>
+ * passes ANSI escapes through unchanged, so glow's coloring survives.
+ */
+export function TextRenderer({ text, glow }: TextRendererProps): JSX.Element {
+  const runner = glow === undefined ? defaultGlowRunner : glow;
+  const rendered = runner ? runner(text) : text;
+  return <Text>{rendered}</Text>;
+}

package/src/renderers/ThinkingRenderer.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { ThinkingRenderer } from "./ThinkingRenderer.tsx";
+
+const longThought =
+  "This is the first sentence. And here is the second sentence which keeps going. " +
+  "Third sentence. Fourth. Fifth. Sixth. Seventh. Eighth.";
+
+describe("ThinkingRenderer", () => {
+  test("show: full content with dim styling", () => {
+    const { lastFrame } = render(<ThinkingRenderer thinking={longThought} visibility="show" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("first sentence");
+    expect(frame).toContain("Eighth");
+    // Dim ANSI (CSI 2) should be present
+    expect(frame).toMatch(/\x1B\[2m/);
+  });
+
+  test("hide: renders nothing visible", () => {
+    const { lastFrame } = render(<ThinkingRenderer thinking={longThought} visibility="hide" />);
+    expect((lastFrame() ?? "").trim()).toBe("");
+  });
+
+  test("summary: first sentence + (thinking continues)", () => {
+    const { lastFrame } = render(<ThinkingRenderer thinking={longThought} visibility="summary" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("This is the first sentence.");
+    expect(frame).toContain("thinking continues");
+    expect(frame).not.toContain("Eighth");
+  });
+
+  test("dim: full content (with dim escape)", () => {
+    const { lastFrame } = render(<ThinkingRenderer thinking="short thought" visibility="dim" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("short thought");
+    expect(frame).toMatch(/\x1B\[2m/);
+  });
+
+  test("summary with single short sentence keeps it whole, no continuation marker", () => {
+    const { lastFrame } = render(<ThinkingRenderer thinking="Just one." visibility="summary" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Just one.");
+    expect(frame).not.toContain("thinking continues");
+  });
+});

package/src/renderers/ThinkingRenderer.tsx

@@ -0,0 +1,52 @@
+import { Text } from "ink";
+import type { Visibility } from "../types/events.ts";
+
+export interface ThinkingRendererProps {
+  thinking: string;
+  visibility: Visibility;
+}
+
+/**
+ * Renders a ThinkingBlock. Filterable element id: "thinking".
+ *
+ * Visibility semantics (see docs/filter-state-spec.md):
+ *   show      — full content (dim styling because thinking is meta)
+ *   hide      — render nothing
+ *   summary   — first sentence + "(thinking continues)" if more
+ *   dim       — full content with ANSI faint
+ */
+export function ThinkingRenderer({
+  thinking,
+  visibility,
+}: ThinkingRendererProps): JSX.Element | null {
+  if (visibility === "hide") return null;
+
+  if (visibility === "summary") {
+    const { head, hasMore } = firstSentence(thinking);
+    return (
+      <Text dimColor>
+        {"💭 "}
+        {head}
+        {hasMore ? " (thinking continues)" : ""}
+      </Text>
+    );
+  }
+
+  // show and dim both render full content with dim styling. Thinking is
+  // always rendered dim — "show" just means "full body visible at all".
+  return (
+    <Text dimColor>
+      {"💭 "}
+      {thinking}
+    </Text>
+  );
+}
+
+function firstSentence(text: string): { head: string; hasMore: boolean } {
+  const trimmed = text.trim();
+  // Match up to and including the first sentence terminator.
+  const m = trimmed.match(/^.*?[.!?](?=\s|$)/);
+  if (!m) return { head: trimmed, hasMore: false };
+  const head = m[0];
+  return { head, hasMore: head.length < trimmed.length };
+}

package/src/renderers/ToolResultRenderer.test.tsx

@@ -0,0 +1,105 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import type { ToolResultBlock, Visibility } from "../types/events.ts";
+import { ToolResultRenderer } from "./ToolResultRenderer.tsx";
+
+const visAll = (v: Visibility) => () => v;
+
+describe("ToolResultRenderer", () => {
+  test("Bash result → BashOutput with Bash.output visibility", () => {
+    const block: ToolResultBlock = {
+      type: "tool_result",
+      tool_use_id: "tu1",
+      content: "stdout line",
+    };
+    const { lastFrame } = render(
+      <ToolResultRenderer block={block} toolName="Bash" visibilityFor={visAll("show")} />,
+    );
+    expect(lastFrame() ?? "").toContain("stdout line");
+  });
+
+  test("Read result → ReadContent with Read.content visibility", () => {
+    const body = "file body line 1\nfile body line 2";
+    const block: ToolResultBlock = {
+      type: "tool_result",
+      tool_use_id: "tu2",
+      content: body,
+    };
+    const { lastFrame } = render(
+      <ToolResultRenderer
+        block={block}
+        toolName="Read"
+        toolInput={{ file_path: "/etc/hosts" }}
+        visibilityFor={visAll("summary")}
+      />,
+    );
+    const frame = lastFrame() ?? "";
+    // summary mode: path + line count, no body
+    expect(frame).toContain("/etc/hosts");
+    expect(frame).toMatch(/2 lines/);
+    expect(frame).not.toContain("file body line 1");
+  });
+
+  test("is_error: delegates to ErrorRenderer (red)", () => {
+    const block: ToolResultBlock = {
+      type: "tool_result",
+      tool_use_id: "tuX",
+      content: "permission denied",
+      is_error: true,
+    };
+    const { lastFrame } = render(
+      <ToolResultRenderer block={block} toolName="Bash" visibilityFor={visAll("show")} />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("permission denied");
+    expect(frame).toMatch(/\x1B\[31m/);
+  });
+
+  test("accepts content as TextBlock[]", () => {
+    const block: ToolResultBlock = {
+      type: "tool_result",
+      tool_use_id: "tu3",
+      content: [
+        { type: "text", text: "part1" },
+        { type: "text", text: "part2" },
+      ],
+    };
+    const { lastFrame } = render(
+      <ToolResultRenderer block={block} toolName="Bash" visibilityFor={visAll("show")} />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("part1");
+    expect(frame).toContain("part2");
+  });
+
+  test("unknown tool result → generic text block", () => {
+    const block: ToolResultBlock = {
+      type: "tool_result",
+      tool_use_id: "tu4",
+      content: "some glob output",
+    };
+    const { lastFrame } = render(
+      <ToolResultRenderer block={block} toolName="Glob" visibilityFor={visAll("show")} />,
+    );
+    expect(lastFrame() ?? "").toContain("some glob output");
+  });
+
+  test("Bash output hide vs show differ", () => {
+    const block: ToolResultBlock = {
+      type: "tool_result",
+      tool_use_id: "tu5",
+      content: "interesting output",
+    };
+    const a =
+      render(
+        <ToolResultRenderer block={block} toolName="Bash" visibilityFor={visAll("show")} />,
+      ).lastFrame() ?? "";
+    const b =
+      render(
+        <ToolResultRenderer block={block} toolName="Bash" visibilityFor={visAll("hide")} />,
+      ).lastFrame() ?? "";
+    expect(a).not.toBe(b);
+    expect(a).toContain("interesting output");
+    expect(b).not.toContain("interesting output");
+  });
+});

package/src/renderers/ToolResultRenderer.tsx

@@ -0,0 +1,66 @@
+import { Text } from "ink";
+import type { ElementId, ToolResultBlock, Visibility } from "../types/events.ts";
+import { BashOutput } from "./BashOutput.tsx";
+import { ErrorRenderer } from "./ErrorRenderer.tsx";
+import { ReadContent } from "./ReadContent.tsx";
+
+export interface ToolResultRendererProps {
+  block: ToolResultBlock;
+  /**
+   * Tool name resolved from the originating tool_use's id. Slice B maintains
+   * a tool_use_id → tool_name map (the cleanest representation: it lives
+   * naturally in the event-log reducer where both halves of the pair are
+   * observed) and passes the name in here.
+   */
+  toolName: string;
+  /**
+   * Optional tool_use input — needed for results that summarize against
+   * the call (e.g. Read.content's summary form wants the file_path).
+   * Pass-through from slice B's map; omitted if not relevant.
+   */
+  toolInput?: Record<string, unknown>;
+  visibilityFor: (id: ElementId) => Visibility;
+}
+
+/**
+ * Generic dispatcher for ToolResultBlocks. Maps the originating tool name
+ * to the right per-result component (BashOutput, ReadContent, …). Errors
+ * (is_error: true) always delegate to ErrorRenderer regardless of tool.
+ */
+export function ToolResultRenderer({
+  block,
+  toolName,
+  toolInput,
+  visibilityFor,
+}: ToolResultRendererProps): JSX.Element | null {
+  const content = stringifyContent(block.content);
+
+  if (block.is_error) {
+    return <ErrorRenderer message={content} label={toolName} />;
+  }
+
+  switch (toolName) {
+    case "Bash":
+      return <BashOutput content={content} visibility={visibilityFor("Bash.output")} />;
+
+    case "Read": {
+      const fp = toolInput?.file_path;
+      return (
+        <ReadContent
+          filePath={typeof fp === "string" ? fp : ""}
+          content={content}
+          visibility={visibilityFor("Read.content")}
+        />
+      );
+    }
+
+    default:
+      // No dedicated component — render the result body as plain text.
+      return <Text>{content}</Text>;
+  }
+}
+
+function stringifyContent(content: ToolResultBlock["content"]): string {
+  if (typeof content === "string") return content;
+  return content.map((b) => b.text).join("");
+}