@fnclaude/renderer 0.0.1 → 2.0.0

package/src/keybinds.test.ts

@@ -0,0 +1,148 @@
+import { describe, expect, test } from "bun:test";
+import { type Key, dispatchKey } from "./keybinds.ts";
+
+const baseKey: Key = {
+  upArrow: false,
+  downArrow: false,
+  leftArrow: false,
+  rightArrow: false,
+  pageDown: false,
+  pageUp: false,
+  return: false,
+  escape: false,
+  ctrl: false,
+  shift: false,
+  tab: false,
+  backspace: false,
+  delete: false,
+  meta: false,
+};
+
+const meta = (input: string): { input: string; key: Key } => ({
+  input,
+  key: { ...baseKey, meta: true },
+});
+
+const ctrl = (input: string): { input: string; key: Key } => ({
+  input,
+  key: { ...baseKey, ctrl: true },
+});
+
+describe("dispatchKey — Alt+1-8 element toggles", () => {
+  test("Alt+1 → toggle thinking", () => {
+    const { input, key } = meta("1");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "toggleElement",
+      element: "thinking",
+    });
+  });
+
+  test("Alt+2 → toggle Bash.input", () => {
+    const { input, key } = meta("2");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "toggleElement",
+      element: "Bash.input",
+    });
+  });
+
+  test("Alt+3 → toggle Bash.output", () => {
+    const { input, key } = meta("3");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "toggleElement",
+      element: "Bash.output",
+    });
+  });
+
+  test("Alt+4 → toggle Edit.diff", () => {
+    const { input, key } = meta("4");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "toggleElement",
+      element: "Edit.diff",
+    });
+  });
+
+  test("Alt+5 → toggle Read.content", () => {
+    const { input, key } = meta("5");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "toggleElement",
+      element: "Read.content",
+    });
+  });
+
+  test("Alt+6 → toggle Write.content", () => {
+    const { input, key } = meta("6");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "toggleElement",
+      element: "Write.content",
+    });
+  });
+
+  test("Alt+7 → toggle Task.nested", () => {
+    const { input, key } = meta("7");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "toggleElement",
+      element: "Task.nested",
+    });
+  });
+
+  test("Alt+8 → toggle errors", () => {
+    const { input, key } = meta("8");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "toggleElement",
+      element: "errors",
+    });
+  });
+});
+
+describe("dispatchKey — preset cycle", () => {
+  test("Alt+0 → cycle forward", () => {
+    const { input, key } = meta("0");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "cyclePreset",
+      direction: 1,
+    });
+  });
+
+  test("Alt+9 → cycle backward", () => {
+    const { input, key } = meta("9");
+    expect(dispatchKey(input, key)).toEqual({
+      kind: "cyclePreset",
+      direction: -1,
+    });
+  });
+});
+
+describe("dispatchKey — control combos", () => {
+  test("Ctrl+L → repaint", () => {
+    const { input, key } = ctrl("l");
+    expect(dispatchKey(input, key)).toEqual({ kind: "repaint" });
+  });
+
+  test("Ctrl+D → close stdin", () => {
+    const { input, key } = ctrl("d");
+    expect(dispatchKey(input, key)).toEqual({ kind: "closeStdin" });
+  });
+
+  test("Ctrl+C → interrupt", () => {
+    const { input, key } = ctrl("c");
+    expect(dispatchKey(input, key)).toEqual({ kind: "interrupt" });
+  });
+});
+
+describe("dispatchKey — non-matches return null", () => {
+  test("plain letter is null (let App handle text input)", () => {
+    expect(dispatchKey("a", baseKey)).toBeNull();
+  });
+
+  test("Alt+a (non-digit meta) is null", () => {
+    expect(dispatchKey("a", { ...baseKey, meta: true })).toBeNull();
+  });
+
+  test("Ctrl+x (unbound) is null", () => {
+    expect(dispatchKey("x", { ...baseKey, ctrl: true })).toBeNull();
+  });
+
+  test("Enter alone is null (App handles submit)", () => {
+    expect(dispatchKey("", { ...baseKey, return: true })).toBeNull();
+  });
+});

package/src/keybinds.ts

@@ -0,0 +1,75 @@
+/**
+ * Pure keybind dispatch. Maps `(input, key)` (the args Ink's `useInput`
+ * passes) to a `KeybindAction`, or `null` when the input should fall
+ * through to the App's text-input handling.
+ *
+ * Pure means: no React, no side effects, no Ink imports. The App owns the
+ * effect — this module just decides which action a keystroke is.
+ *
+ * See docs/keybind-spec.md.
+ */
+
+import type { ElementId } from "./types/events.ts";
+
+/**
+ * Mirror of ink's `Key` shape, decoupled so the dispatch logic stays
+ * Ink-free for direct unit testing. Anything passing a structurally-
+ * matching object satisfies it.
+ */
+export interface Key {
+  upArrow: boolean;
+  downArrow: boolean;
+  leftArrow: boolean;
+  rightArrow: boolean;
+  pageDown: boolean;
+  pageUp: boolean;
+  return: boolean;
+  escape: boolean;
+  ctrl: boolean;
+  shift: boolean;
+  tab: boolean;
+  backspace: boolean;
+  delete: boolean;
+  meta: boolean;
+}
+
+export type KeybindAction =
+  | { kind: "toggleElement"; element: ElementId }
+  | { kind: "cyclePreset"; direction: 1 | -1 }
+  | { kind: "repaint" }
+  | { kind: "closeStdin" }
+  | { kind: "interrupt" };
+
+/**
+ * Element order matches `Alt+1` … `Alt+8` exactly (docs/keybind-spec.md).
+ */
+const ALT_DIGIT_ELEMENTS: Record<string, ElementId> = {
+  "1": "thinking",
+  "2": "Bash.input",
+  "3": "Bash.output",
+  "4": "Edit.diff",
+  "5": "Read.content",
+  "6": "Write.content",
+  "7": "Task.nested",
+  "8": "errors",
+};
+
+export function dispatchKey(input: string, key: Key): KeybindAction | null {
+  // Alt + digit
+  if (key.meta && /^[0-9]$/.test(input)) {
+    if (input === "0") return { kind: "cyclePreset", direction: 1 };
+    if (input === "9") return { kind: "cyclePreset", direction: -1 };
+    const element = ALT_DIGIT_ELEMENTS[input];
+    if (element !== undefined) return { kind: "toggleElement", element };
+    return null;
+  }
+
+  // Ctrl combos
+  if (key.ctrl && !key.meta) {
+    if (input === "l") return { kind: "repaint" };
+    if (input === "d") return { kind: "closeStdin" };
+    if (input === "c") return { kind: "interrupt" };
+  }
+
+  return null;
+}

package/src/renderers/BashInput.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { BashInput } from "./BashInput.tsx";
+
+const multilineCmd = "echo line1\necho line2\necho line3\necho line4\necho line5\necho line6";
+
+describe("BashInput", () => {
+  test("show: full command rendered", () => {
+    const { lastFrame } = render(
+      <BashInput command="ls -la" description="list files" visibility="show" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("ls -la");
+  });
+
+  test("hide: shows a one-line tool header but not the command", () => {
+    const { lastFrame } = render(
+      <BashInput command="rm -rf /" description="dangerous op" visibility="hide" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).not.toContain("rm -rf /");
+    expect(frame).toContain("Bash");
+  });
+
+  test("summary: first 5 lines + remaining-line indicator for multi-line scripts", () => {
+    const { lastFrame } = render(
+      <BashInput command={multilineCmd} description="multi" visibility="summary" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("echo line1");
+    expect(frame).toContain("echo line5");
+    expect(frame).not.toContain("echo line6");
+    expect(frame).toMatch(/1 more line/);
+  });
+
+  test("summary on single-line command: shows whole command (no truncation)", () => {
+    const { lastFrame } = render(
+      <BashInput command="ls -la" description="d" visibility="summary" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("ls -la");
+    expect(frame).not.toMatch(/more line/);
+  });
+
+  test("dim: full command with dim styling", () => {
+    const { lastFrame } = render(<BashInput command="ls -la" description="d" visibility="dim" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("ls -la");
+    expect(frame).toMatch(/\x1B\[2m/);
+  });
+
+  test("show vs hide vs summary produce different output", () => {
+    const props = { command: multilineCmd, description: "m" };
+    const showFrame = render(<BashInput {...props} visibility="show" />).lastFrame() ?? "";
+    const hideFrame = render(<BashInput {...props} visibility="hide" />).lastFrame() ?? "";
+    const sumFrame = render(<BashInput {...props} visibility="summary" />).lastFrame() ?? "";
+    expect(showFrame).not.toBe(hideFrame);
+    expect(showFrame).not.toBe(sumFrame);
+    expect(sumFrame).not.toBe(hideFrame);
+  });
+});

package/src/renderers/BashInput.tsx

@@ -0,0 +1,44 @@
+import { Text } from "ink";
+import type { Visibility } from "../types/events.ts";
+import { firstNLines } from "./summarize.ts";
+
+export interface BashInputProps {
+  command: string;
+  description?: string | undefined;
+  visibility: Visibility;
+}
+
+/**
+ * Renders the `command` field of a Bash tool_use block.
+ * Filterable element id: "Bash.input".
+ *
+ * Visibility:
+ *   show     — full command
+ *   hide     — single-line "▸ Bash: <description>" header only
+ *   summary  — first 5 lines (+ "N more lines" indicator for multi-line)
+ *   dim      — full command, ANSI-faint
+ */
+export function BashInput({ command, description, visibility }: BashInputProps): JSX.Element {
+  const header = `▸ Bash${description ? `: ${description}` : ""}`;
+
+  if (visibility === "hide") {
+    return <Text dimColor>{header}</Text>;
+  }
+
+  if (visibility === "summary") {
+    const { head, hiddenLines } = firstNLines(command);
+    return (
+      <Text>
+        {`$ ${head}`}
+        {hiddenLines > 0 ? `\n(… ${hiddenLines} more line${hiddenLines === 1 ? "" : "s"})` : ""}
+      </Text>
+    );
+  }
+
+  if (visibility === "dim") {
+    return <Text dimColor>{`$ ${command}`}</Text>;
+  }
+
+  // show
+  return <Text>{`$ ${command}`}</Text>;
+}

package/src/renderers/BashOutput.test.tsx

@@ -0,0 +1,44 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { BashOutput } from "./BashOutput.tsx";
+
+const longOutput = Array.from({ length: 12 }, (_, i) => `line${i + 1}`).join("\n");
+
+describe("BashOutput", () => {
+  test("show: full output rendered", () => {
+    const { lastFrame } = render(<BashOutput content={longOutput} visibility="show" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("line1");
+    expect(frame).toContain("line12");
+  });
+
+  test("hide: empty", () => {
+    const { lastFrame } = render(<BashOutput content={longOutput} visibility="hide" />);
+    expect((lastFrame() ?? "").trim()).toBe("");
+  });
+
+  test("summary: first 5 lines + (N lines hidden)", () => {
+    const { lastFrame } = render(<BashOutput content={longOutput} visibility="summary" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("line1");
+    expect(frame).toContain("line5");
+    expect(frame).not.toContain("line6");
+    expect(frame).toMatch(/7 lines hidden/);
+  });
+
+  test("dim: dim styling, full content", () => {
+    const { lastFrame } = render(<BashOutput content="hello" visibility="dim" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("hello");
+    expect(frame).toMatch(/\x1B\[2m/);
+  });
+
+  test("show vs hide vs summary differ", () => {
+    const a = render(<BashOutput content={longOutput} visibility="show" />).lastFrame() ?? "";
+    const b = render(<BashOutput content={longOutput} visibility="hide" />).lastFrame() ?? "";
+    const c = render(<BashOutput content={longOutput} visibility="summary" />).lastFrame() ?? "";
+    expect(a).not.toBe(b);
+    expect(a).not.toBe(c);
+    expect(b).not.toBe(c);
+  });
+});

package/src/renderers/BashOutput.tsx

@@ -0,0 +1,36 @@
+import { Text } from "ink";
+import type { Visibility } from "../types/events.ts";
+import { firstNLines } from "./summarize.ts";
+
+export interface BashOutputProps {
+  content: string;
+  visibility: Visibility;
+  isError?: boolean | undefined;
+}
+
+/**
+ * Renders the tool_result output of a Bash invocation.
+ * Filterable element id: "Bash.output".
+ *
+ * Visibility:
+ *   show     — full output
+ *   hide     — render nothing
+ *   summary  — first 5 lines + "(… N lines hidden)"
+ *   dim      — full output, ANSI-faint
+ */
+export function BashOutput({ content, visibility, isError }: BashOutputProps): JSX.Element | null {
+  if (visibility === "hide") return null;
+
+  if (visibility === "summary") {
+    const { head, hiddenLines } = firstNLines(content);
+    const body = `${head}${hiddenLines > 0 ? `\n(… ${hiddenLines} lines hidden)` : ""}`;
+    return isError ? <Text color="red">{body}</Text> : <Text>{body}</Text>;
+  }
+
+  if (visibility === "dim") {
+    return <Text dimColor>{content}</Text>;
+  }
+
+  // show
+  return isError ? <Text color="red">{content}</Text> : <Text>{content}</Text>;
+}

package/src/renderers/EditDiff.test.tsx

@@ -0,0 +1,65 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { EditDiff } from "./EditDiff.tsx";
+
+const oldStr = "old line 1\nold line 2";
+const newStr = "new line 1\nnew line 2\nnew line 3";
+
+describe("EditDiff", () => {
+  test("show: file path + diff body", () => {
+    const { lastFrame } = render(
+      <EditDiff filePath="/tmp/foo.txt" oldString={oldStr} newString={newStr} visibility="show" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/tmp/foo.txt");
+    expect(frame).toContain("old line 1");
+    expect(frame).toContain("new line 1");
+  });
+
+  test("hide: header only, no diff body", () => {
+    const { lastFrame } = render(
+      <EditDiff filePath="/tmp/foo.txt" oldString={oldStr} newString={newStr} visibility="hide" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/tmp/foo.txt");
+    expect(frame).not.toContain("old line 1");
+    expect(frame).not.toContain("new line 1");
+  });
+
+  test("summary: file path + change line count, no diff body", () => {
+    const { lastFrame } = render(
+      <EditDiff
+        filePath="/tmp/foo.txt"
+        oldString={oldStr}
+        newString={newStr}
+        visibility="summary"
+      />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/tmp/foo.txt");
+    // 2 lines removed + 3 lines added
+    expect(frame).toMatch(/-2/);
+    expect(frame).toMatch(/\+3/);
+    expect(frame).not.toContain("old line 1");
+    expect(frame).not.toContain("new line 1");
+  });
+
+  test("dim: full content with dim styling", () => {
+    const { lastFrame } = render(
+      <EditDiff filePath="/tmp/foo.txt" oldString={oldStr} newString={newStr} visibility="dim" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/tmp/foo.txt");
+    expect(frame).toMatch(/\x1B\[2m/);
+  });
+
+  test("show vs hide vs summary differ", () => {
+    const p = { filePath: "/tmp/x", oldString: oldStr, newString: newStr };
+    const a = render(<EditDiff {...p} visibility="show" />).lastFrame() ?? "";
+    const b = render(<EditDiff {...p} visibility="hide" />).lastFrame() ?? "";
+    const c = render(<EditDiff {...p} visibility="summary" />).lastFrame() ?? "";
+    expect(a).not.toBe(b);
+    expect(a).not.toBe(c);
+    expect(b).not.toBe(c);
+  });
+});

package/src/renderers/EditDiff.tsx

@@ -0,0 +1,73 @@
+import { Box, Text } from "ink";
+import type { Visibility } from "../types/events.ts";
+import { countLines } from "./summarize.ts";
+
+function prefixLines(text: string, prefix: string): string {
+  return text
+    .split("\n")
+    .map((line) => `${prefix}${line}`)
+    .join("\n");
+}
+
+export interface EditDiffProps {
+  filePath: string;
+  oldString: string;
+  newString: string;
+  visibility: Visibility;
+}
+
+/**
+ * Renders an Edit tool_use: file path + minimal diff body.
+ * Filterable element id: "Edit.diff".
+ *
+ * Visibility:
+ *   show     — file path header + simple line-prefixed diff
+ *   hide     — header only ("▸ Edit: <path>")
+ *   summary  — file path + line count of change (e.g. "-2 +3 lines")
+ *   dim      — full content, ANSI-faint
+ */
+export function EditDiff({
+  filePath,
+  oldString,
+  newString,
+  visibility,
+}: EditDiffProps): JSX.Element {
+  const removedLines = countLines(oldString);
+  const addedLines = countLines(newString);
+
+  if (visibility === "hide") {
+    return <Text dimColor>{`▸ Edit: ${filePath}`}</Text>;
+  }
+
+  if (visibility === "summary") {
+    return (
+      <Text>
+        {`▸ Edit: ${filePath} `}
+        <Text color="red">{`-${removedLines}`}</Text> <Text color="green">{`+${addedLines}`}</Text>
+        {" lines"}
+      </Text>
+    );
+  }
+
+  const removed = prefixLines(oldString, "- ");
+  const added = prefixLines(newString, "+ ");
+
+  if (visibility === "dim") {
+    return (
+      <Box flexDirection="column">
+        <Text dimColor>{`▸ Edit: ${filePath}`}</Text>
+        <Text dimColor>{removed}</Text>
+        <Text dimColor>{added}</Text>
+      </Box>
+    );
+  }
+
+  // show
+  return (
+    <Box flexDirection="column">
+      <Text>{`▸ Edit: ${filePath}`}</Text>
+      <Text color="red">{removed}</Text>
+      <Text color="green">{added}</Text>
+    </Box>
+  );
+}

package/src/renderers/ErrorRenderer.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { ErrorRenderer } from "./ErrorRenderer.tsx";
+
+describe("ErrorRenderer", () => {
+  test("renders error text with red styling (ANSI escape present)", () => {
+    const { lastFrame } = render(<ErrorRenderer message="boom: file not found" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("boom: file not found");
+    // CSI escape opens with ESC[ (\x1B[). Confirm color/bold escapes present.
+    expect(frame).toMatch(/\x1B\[/);
+  });
+
+  test("renders multi-line errors", () => {
+    const { lastFrame } = render(<ErrorRenderer message={"line one\nline two"} />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("line one");
+    expect(frame).toContain("line two");
+  });
+
+  test("includes optional label prefix", () => {
+    const { lastFrame } = render(<ErrorRenderer message="bad" label="Bash" />);
+    expect(lastFrame() ?? "").toContain("Bash");
+  });
+});

package/src/renderers/ErrorRenderer.tsx

@@ -0,0 +1,22 @@
+import { Text } from "ink";
+
+export interface ErrorRendererProps {
+  message: string;
+  /** Optional label, e.g. tool name or "result". */
+  label?: string;
+}
+
+/**
+ * Error renderer for any block with is_error: true and ResultEvent with
+ * is_error: true. Always shown (errors element defaults to "show" on every
+ * preset; respects overrides only if the user explicitly hides errors).
+ */
+export function ErrorRenderer({ message, label }: ErrorRendererProps): JSX.Element {
+  const prefix = label ? `✖ ${label}: ` : "✖ ";
+  return (
+    <Text color="red" bold>
+      {prefix}
+      {message}
+    </Text>
+  );
+}

package/src/renderers/ReadContent.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "ink-testing-library";
+import { ReadContent } from "./ReadContent.tsx";
+
+const bigFile = Array.from({ length: 50 }, (_, i) => `line${i + 1}`).join("\n");
+
+describe("ReadContent", () => {
+  test("show: full content", () => {
+    const { lastFrame } = render(<ReadContent filePath="/x" content={bigFile} visibility="show" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("line1");
+    expect(frame).toContain("line50");
+  });
+
+  test("hide: empty", () => {
+    const { lastFrame } = render(<ReadContent filePath="/x" content={bigFile} visibility="hide" />);
+    expect((lastFrame() ?? "").trim()).toBe("");
+  });
+
+  test("summary: file path + line count, no content", () => {
+    const { lastFrame } = render(
+      <ReadContent filePath="/etc/hosts" content={bigFile} visibility="summary" />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("/etc/hosts");
+    expect(frame).toMatch(/50 lines/);
+    expect(frame).not.toContain("line1\nline2");
+  });
+
+  test("dim: full content with dim styling", () => {
+    const { lastFrame } = render(<ReadContent filePath="/x" content="hello" visibility="dim" />);
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("hello");
+    expect(frame).toMatch(/\x1B\[2m/);
+  });
+
+  test("show vs hide vs summary differ", () => {
+    const p = { filePath: "/x", content: bigFile };
+    const a = render(<ReadContent {...p} visibility="show" />).lastFrame() ?? "";
+    const b = render(<ReadContent {...p} visibility="hide" />).lastFrame() ?? "";
+    const c = render(<ReadContent {...p} visibility="summary" />).lastFrame() ?? "";
+    expect(a).not.toBe(b);
+    expect(a).not.toBe(c);
+    expect(b).not.toBe(c);
+  });
+});

package/src/renderers/ReadContent.tsx

@@ -0,0 +1,37 @@
+import { Text } from "ink";
+import type { Visibility } from "../types/events.ts";
+import { countLines } from "./summarize.ts";
+
+export interface ReadContentProps {
+  filePath: string;
+  content: string;
+  visibility: Visibility;
+}
+
+/**
+ * Renders the tool_result content of a Read tool call (large file body).
+ * Filterable element id: "Read.content".
+ *
+ * Visibility:
+ *   show     — full file content
+ *   hide     — render nothing
+ *   summary  — file path + line count of file
+ *   dim      — full content, ANSI-faint
+ */
+export function ReadContent({
+  filePath,
+  content,
+  visibility,
+}: ReadContentProps): JSX.Element | null {
+  if (visibility === "hide") return null;
+
+  if (visibility === "summary") {
+    return <Text dimColor>{`  ↳ ${filePath} (${countLines(content)} lines)`}</Text>;
+  }
+
+  if (visibility === "dim") {
+    return <Text dimColor>{content}</Text>;
+  }
+
+  return <Text>{content}</Text>;
+}