@fnclaude/renderer 0.0.1 → 2.0.0

package/src/renderers/ToolUseRenderer.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import type { ToolUseBlock, Visibility } from "../types/events.ts";
+import { ToolUseRenderer } from "./ToolUseRenderer.tsx";
+
+const visAll = (v: Visibility) => () => v;
+
+describe("ToolUseRenderer", () => {
+  test("dispatches Bash → BashInput", () => {
+    const block: ToolUseBlock = {
+      type: "tool_use",
+      id: "tu1",
+      name: "Bash",
+      input: { command: "ls -la", description: "list files" },
+    };
+    const { lastFrame } = render(<ToolUseRenderer block={block} visibilityFor={visAll("show")} />);
+    expect(lastFrame() ?? "").toContain("ls -la");
+  });
+
+  test("dispatches Edit → EditDiff", () => {
+    const block: ToolUseBlock = {
+      type: "tool_use",
+      id: "tu2",
+      name: "Edit",
+      input: { file_path: "/x.txt", old_string: "a", new_string: "b" },
+    };
+    const { lastFrame } = render(<ToolUseRenderer block={block} visibilityFor={visAll("show")} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/x.txt");
+    expect(frame).toContain("- a");
+    expect(frame).toContain("+ b");
+  });
+
+  test("dispatches Read → ReadInput (path always shown)", () => {
+    const block: ToolUseBlock = {
+      type: "tool_use",
+      id: "tu3",
+      name: "Read",
+      input: { file_path: "/etc/hosts" },
+    };
+    const { lastFrame } = render(<ToolUseRenderer block={block} visibilityFor={visAll("hide")} />);
+    expect(lastFrame() ?? "").toContain("/etc/hosts");
+  });
+
+  test("dispatches Write → WriteContent", () => {
+    const block: ToolUseBlock = {
+      type: "tool_use",
+      id: "tu4",
+      name: "Write",
+      input: { file_path: "/o.txt", content: "hello world" },
+    };
+    const { lastFrame } = render(<ToolUseRenderer block={block} visibilityFor={visAll("show")} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/o.txt");
+    expect(frame).toContain("hello world");
+  });
+
+  test("dispatches Task → TaskNested", () => {
+    const block: ToolUseBlock = {
+      type: "tool_use",
+      id: "tu5",
+      name: "Task",
+      input: { description: "do thing", prompt: "do the thing" },
+    };
+    const { lastFrame } = render(<ToolUseRenderer block={block} visibilityFor={visAll("show")} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Task");
+    expect(frame).toContain("do the thing");
+  });
+
+  test("unknown tool → generic fallback with tool name and input summary", () => {
+    const block: ToolUseBlock = {
+      type: "tool_use",
+      id: "tu6",
+      name: "Glob",
+      input: { pattern: "**/*.ts" },
+    };
+    const { lastFrame } = render(<ToolUseRenderer block={block} visibilityFor={visAll("show")} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Glob");
+    expect(frame).toContain("**/*.ts");
+  });
+
+  test("visibilityFor is consulted per element id", () => {
+    const queriedIds: string[] = [];
+    const visFor = (id: string) => {
+      queriedIds.push(id);
+      return "hide" as const;
+    };
+    const block: ToolUseBlock = {
+      type: "tool_use",
+      id: "tu7",
+      name: "Bash",
+      input: { command: "rm -rf /" },
+    };
+    render(<ToolUseRenderer block={block} visibilityFor={visFor} />);
+    expect(queriedIds).toContain("Bash.input");
+  });
+});

package/src/renderers/ToolUseRenderer.tsx

@@ -0,0 +1,112 @@
+import { Text } from "ink";
+import type { ElementId, ToolUseBlock, Visibility } from "../types/events.ts";
+import { BashInput } from "./BashInput.tsx";
+import { EditDiff } from "./EditDiff.tsx";
+import { ReadInput } from "./ReadInput.tsx";
+import { TaskNested } from "./TaskNested.tsx";
+import { WriteContent } from "./WriteContent.tsx";
+
+export interface ToolUseRendererProps {
+  block: ToolUseBlock;
+  /**
+   * Resolves the current visibility for a given filterable element id.
+   * Slice B owns filter state; this dispatcher only consults the
+   * function for the element id corresponding to the block's tool.
+   */
+  visibilityFor: (id: ElementId) => Visibility;
+}
+
+/**
+ * Generic dispatcher for ToolUseBlocks. Reads `block.name`, pulls the
+ * right input fields, and renders the matching per-tool component with
+ * the visibility resolved for that tool's element id.
+ *
+ * Unknown tools fall back to a one-line header showing the tool name and
+ * a compact input summary.
+ */
+export function ToolUseRenderer({ block, visibilityFor }: ToolUseRendererProps): JSX.Element {
+  const input = block.input;
+
+  switch (block.name) {
+    case "Bash":
+      return (
+        <BashInput
+          command={asString(input.command)}
+          description={asOptionalString(input.description)}
+          visibility={visibilityFor("Bash.input")}
+        />
+      );
+
+    case "Edit":
+      return (
+        <EditDiff
+          filePath={asString(input.file_path)}
+          oldString={asString(input.old_string)}
+          newString={asString(input.new_string)}
+          visibility={visibilityFor("Edit.diff")}
+        />
+      );
+
+    case "Read":
+      return (
+        <ReadInput
+          filePath={asString(input.file_path)}
+          offset={asOptionalNumber(input.offset)}
+          limit={asOptionalNumber(input.limit)}
+        />
+      );
+
+    case "Write":
+      return (
+        <WriteContent
+          filePath={asString(input.file_path)}
+          content={asString(input.content)}
+          visibility={visibilityFor("Write.content")}
+        />
+      );
+
+    case "Task":
+      return (
+        <TaskNested
+          description={asOptionalString(input.description)}
+          prompt={asString(input.prompt)}
+          visibility={visibilityFor("Task.nested")}
+        />
+      );
+
+    default:
+      return <Text>{`▸ ${block.name}: ${summarizeInput(input)}`}</Text>;
+  }
+}
+
+function asString(v: unknown): string {
+  return typeof v === "string" ? v : "";
+}
+
+function asOptionalString(v: unknown): string | undefined {
+  return typeof v === "string" ? v : undefined;
+}
+
+function asOptionalNumber(v: unknown): number | undefined {
+  return typeof v === "number" ? v : undefined;
+}
+
+/** Compact one-line summary of arbitrary tool input. */
+function summarizeInput(input: Record<string, unknown>): string {
+  const entries = Object.entries(input);
+  if (entries.length === 0) return "(no input)";
+  const parts = entries.slice(0, 3).map(([k, v]) => `${k}=${oneLine(v)}`);
+  return parts.join(" ");
+}
+
+function oneLine(v: unknown): string {
+  if (typeof v === "string") {
+    const flat = v.replace(/\s+/g, " ").trim();
+    return flat.length > 60 ? `${flat.slice(0, 57)}...` : flat;
+  }
+  try {
+    return JSON.stringify(v);
+  } catch {
+    return String(v);
+  }
+}

package/src/renderers/WriteContent.test.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { WriteContent } from "./WriteContent.tsx";
+
+const body = Array.from({ length: 8 }, (_, i) => `body${i + 1}`).join("\n");
+
+describe("WriteContent", () => {
+  test("show: file path + full content", () => {
+    const { lastFrame } = render(
+      <WriteContent filePath="/tmp/out.txt" content={body} visibility="show" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/tmp/out.txt");
+    expect(frame).toContain("body1");
+    expect(frame).toContain("body8");
+  });
+
+  test("hide: header only, no content body", () => {
+    const { lastFrame } = render(
+      <WriteContent filePath="/tmp/out.txt" content={body} visibility="hide" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/tmp/out.txt");
+    expect(frame).not.toContain("body1");
+  });
+
+  test("summary: file path + line count, no body", () => {
+    const { lastFrame } = render(
+      <WriteContent filePath="/tmp/out.txt" content={body} visibility="summary" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/tmp/out.txt");
+    expect(frame).toMatch(/8 lines/);
+    expect(frame).not.toContain("body1");
+  });
+
+  test("dim: full body with dim styling", () => {
+    const { lastFrame } = render(<WriteContent filePath="/x" content="hi" visibility="dim" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("hi");
+    expect(frame).toMatch(/\x1B\[2m/);
+  });
+
+  test("show vs hide vs summary differ", () => {
+    const p = { filePath: "/x", content: body };
+    const a = render(<WriteContent {...p} visibility="show" />).lastFrame() ?? "";
+    const b = render(<WriteContent {...p} visibility="hide" />).lastFrame() ?? "";
+    const c = render(<WriteContent {...p} visibility="summary" />).lastFrame() ?? "";
+    expect(a).not.toBe(b);
+    expect(a).not.toBe(c);
+    expect(b).not.toBe(c);
+  });
+});

package/src/renderers/WriteContent.tsx

@@ -0,0 +1,47 @@
+import { Box, Text } from "ink";
+import type { Visibility } from "../types/events.ts";
+import { countLines } from "./summarize.ts";
+
+export interface WriteContentProps {
+  filePath: string;
+  content: string;
+  visibility: Visibility;
+}
+
+/**
+ * Renders a Write tool_use: file path + new file content.
+ * Filterable element id: "Write.content".
+ *
+ * Visibility:
+ *   show     — file path header + full body
+ *   hide     — header only ("▸ Write: <path>")
+ *   summary  — file path + line count of new content
+ *   dim      — full body, ANSI-faint
+ */
+export function WriteContent({ filePath, content, visibility }: WriteContentProps): JSX.Element {
+  const header = `▸ Write: ${filePath}`;
+
+  if (visibility === "hide") {
+    return <Text dimColor>{header}</Text>;
+  }
+
+  if (visibility === "summary") {
+    return <Text>{`${header} (${countLines(content)} lines)`}</Text>;
+  }
+
+  if (visibility === "dim") {
+    return (
+      <Box flexDirection="column">
+        <Text dimColor>{header}</Text>
+        <Text dimColor>{content}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text>{header}</Text>
+      <Text>{content}</Text>
+    </Box>
+  );
+}

package/src/renderers/index.ts

@@ -0,0 +1,50 @@
+/**
+ * Public surface of slice C — per-event Ink renderers.
+ *
+ * Slice B imports from this module:
+ *   import { TextRenderer, ToolUseRenderer, ToolResultRenderer, ... } from "./renderers";
+ *
+ * Three categories:
+ *   1. Top-level dispatchers   — ToolUseRenderer, ToolResultRenderer
+ *   2. Per-event renderers     — TextRenderer, ThinkingRenderer, SystemInit,
+ *                                ErrorRenderer, ResultRenderer
+ *   3. Per-tool element views  — BashInput, BashOutput, EditDiff,
+ *                                ReadInput, ReadContent, WriteContent,
+ *                                TaskNested
+ *
+ * All filterable per-tool views accept a `visibility: Visibility` prop;
+ * the dispatchers consume a `visibilityFor: (id) => Visibility` resolver
+ * supplied by slice B.
+ */
+
+export { BashInput } from "./BashInput.tsx";
+export type { BashInputProps } from "./BashInput.tsx";
+export { BashOutput } from "./BashOutput.tsx";
+export type { BashOutputProps } from "./BashOutput.tsx";
+export { EditDiff } from "./EditDiff.tsx";
+export type { EditDiffProps } from "./EditDiff.tsx";
+export { ErrorRenderer } from "./ErrorRenderer.tsx";
+export type { ErrorRendererProps } from "./ErrorRenderer.tsx";
+export { ReadContent } from "./ReadContent.tsx";
+export type { ReadContentProps } from "./ReadContent.tsx";
+export { ReadInput } from "./ReadInput.tsx";
+export type { ReadInputProps } from "./ReadInput.tsx";
+export { ResultRenderer } from "./ResultRenderer.tsx";
+export type { ResultRendererProps } from "./ResultRenderer.tsx";
+export { SystemInit } from "./SystemInit.tsx";
+export type { SystemInitProps } from "./SystemInit.tsx";
+export { TaskNested } from "./TaskNested.tsx";
+export type { TaskNestedProps } from "./TaskNested.tsx";
+export {
+  detectGlowPath,
+  type GlowRunner,
+  runGlow,
+  TextRenderer,
+} from "./TextRenderer.tsx";
+export type { TextRendererProps } from "./TextRenderer.tsx";
+export { ThinkingRenderer } from "./ThinkingRenderer.tsx";
+export type { ThinkingRendererProps } from "./ThinkingRenderer.tsx";
+export { ToolResultRenderer } from "./ToolResultRenderer.tsx";
+export type { ToolResultRendererProps } from "./ToolResultRenderer.tsx";
+export { ToolUseRenderer } from "./ToolUseRenderer.tsx";
+export type { ToolUseRendererProps } from "./ToolUseRenderer.tsx";

package/src/renderers/summarize.ts

@@ -0,0 +1,27 @@
+/**
+ * Visibility-summary helpers shared by per-tool renderers.
+ *
+ * The generic "summary" rule from docs/filter-state-spec.md is:
+ *   first 5 lines + "(… N more lines)"
+ *
+ * Per-element variants (Edit.diff, Read.content, Write.content) override
+ * this with path + line count; those live in their own renderers.
+ */
+
+export const SUMMARY_LINE_LIMIT = 5;
+
+export interface FirstNLinesResult {
+  head: string;
+  hiddenLines: number;
+}
+
+export function firstNLines(text: string, n: number = SUMMARY_LINE_LIMIT): FirstNLinesResult {
+  const lines = text.split("\n");
+  if (lines.length <= n) return { head: text, hiddenLines: 0 };
+  return { head: lines.slice(0, n).join("\n"), hiddenLines: lines.length - n };
+}
+
+export function countLines(text: string): number {
+  if (text.length === 0) return 0;
+  return text.split("\n").length;
+}

package/src/types/events.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, test } from "bun:test";
+import type { ClaudeEvent, FilterState, UserTurn, Visibility } from "./events.ts";
+
+describe("events contract", () => {
+  test("UserTurn shape is constructible", () => {
+    const turn: UserTurn = {
+      type: "user",
+      message: {
+        role: "user",
+        content: [{ type: "text", text: "hello" }],
+      },
+    };
+    expect(turn.type).toBe("user");
+    expect(turn.message.content[0].text).toBe("hello");
+  });
+
+  test("ClaudeEvent discriminator narrows correctly", () => {
+    const evt: ClaudeEvent = {
+      type: "result",
+      subtype: "success",
+      is_error: false,
+      session_id: "s",
+      uuid: "u",
+      result: "ok",
+      num_turns: 1,
+      duration_ms: 0,
+      duration_api_ms: 0,
+      total_cost_usd: 0,
+    };
+    if (evt.type === "result") {
+      expect(evt.is_error).toBe(false);
+    }
+  });
+
+  test("FilterState accepts preset + overrides", () => {
+    const state: FilterState = {
+      preset: "normal",
+      overrides: { "Bash.output": "show" },
+    };
+    const visibility: Visibility = state.overrides["Bash.output"] ?? "hide";
+    expect(visibility).toBe("show");
+  });
+});

package/src/types/events.ts

@@ -0,0 +1,145 @@
+/**
+ * Stream-json event types emitted by:
+ *   claude --print --verbose --input-format stream-json --output-format stream-json
+ *
+ * See docs/stream-json-findings.md for provenance and docs/event-spec.md for
+ * the slice-level contract.
+ */
+
+export type ClaudeEvent = SystemEvent | AssistantEvent | UserEvent | ResultEvent | RateLimitEvent;
+
+export interface SystemEvent {
+  type: "system";
+  subtype: "init" | (string & {});
+  session_id: string;
+  uuid: string;
+  cwd?: string;
+  model?: string;
+  tools?: string[];
+  slash_commands?: string[];
+  permissionMode?: string;
+  memory_paths?: string[];
+  claude_code_version?: string;
+}
+
+export interface AssistantEvent {
+  type: "assistant";
+  session_id: string;
+  uuid: string;
+  parent_tool_use_id?: string | null;
+  request_id?: string;
+  message: AssistantMessage;
+}
+
+export interface AssistantMessage {
+  id?: string;
+  model: string;
+  role: "assistant";
+  content: ContentBlock[];
+  stop_reason?: string | null;
+  stop_sequence?: string | null;
+  usage?: TokenUsage;
+}
+
+export interface UserEvent {
+  type: "user";
+  session_id: string;
+  uuid?: string;
+  message: UserMessage;
+}
+
+export interface UserMessage {
+  role: "user";
+  content: ContentBlock[] | string;
+}
+
+export type ContentBlock = TextBlock | ToolUseBlock | ToolResultBlock | ThinkingBlock;
+
+export interface TextBlock {
+  type: "text";
+  text: string;
+}
+
+export interface ToolUseBlock {
+  type: "tool_use";
+  id: string;
+  name: string;
+  input: Record<string, unknown>;
+}
+
+export interface ToolResultBlock {
+  type: "tool_result";
+  tool_use_id: string;
+  content: string | TextBlock[];
+  is_error?: boolean;
+}
+
+export interface ThinkingBlock {
+  type: "thinking";
+  thinking: string;
+  signature?: string;
+}
+
+export interface ResultEvent {
+  type: "result";
+  subtype: "success" | "error" | (string & {});
+  is_error: boolean;
+  session_id: string;
+  uuid: string;
+  result: string;
+  num_turns: number;
+  duration_ms: number;
+  duration_api_ms: number;
+  total_cost_usd: number;
+  usage?: TokenUsage;
+  modelUsage?: Record<string, TokenUsage>;
+  stop_reason?: string | null;
+  terminal_reason?: string;
+}
+
+export interface RateLimitEvent {
+  type: "rate_limit_event";
+  session_id?: string;
+  rate_limit_info?: Record<string, unknown>;
+}
+
+export interface TokenUsage {
+  input_tokens: number;
+  output_tokens: number;
+  cache_creation_input_tokens?: number;
+  cache_read_input_tokens?: number;
+}
+
+/**
+ * Input event: what the renderer writes to claude's stdin as a user turn.
+ * Emit as one JSON object per line, `\n` terminated.
+ */
+export interface UserTurn {
+  type: "user";
+  message: {
+    role: "user";
+    content: [{ type: "text"; text: string }];
+  };
+}
+
+/**
+ * Filter state types (see docs/filter-state-spec.md).
+ */
+export type Preset = "quiet" | "normal" | "verbose" | "debug";
+
+export type Visibility = "show" | "hide" | "summary" | "dim";
+
+export type ElementId =
+  | "thinking"
+  | "Bash.input"
+  | "Bash.output"
+  | "Edit.diff"
+  | "Read.content"
+  | "Write.content"
+  | "Task.nested"
+  | "errors";
+
+export interface FilterState {
+  preset: Preset;
+  overrides: Partial<Record<ElementId, Visibility>>;
+}