@butlerw/vellum 0.1.0

package/src/tui/components/Messages/ToolResultPreview.tsx

@@ -0,0 +1,243 @@
+/**
+ * ToolResultPreview Component
+ *
+ * Renders tool call results with line truncation and format-aware display.
+ * Supports different content types: strings, objects, arrays, directory listings.
+ *
+ * @module tui/components/Messages/ToolResultPreview
+ */
+
+import { Box, Text } from "ink";
+import type React from "react";
+import { useMemo } from "react";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/** Default maximum lines for tool result preview */
+export const TOOL_RESULT_MAX_LINES = 5;
+
+/** Maximum lines for shell/bash command output */
+export const SHELL_TOOL_MAX_LINES = 50;
+
+/** Shell-related tool names that get more output lines */
+const SHELL_TOOLS = new Set(["bash", "shell", "run_command", "execute_command", "terminal"]);
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the ToolResultPreview component.
+ */
+export interface ToolResultPreviewProps {
+  /** The result content to display */
+  readonly result: unknown;
+  /** The tool name (used to determine line limits) */
+  readonly toolName: string;
+  /** Override the maximum lines to display */
+  readonly maxLines?: number;
+}
+
+/**
+ * A displayable line with optional styling metadata.
+ */
+interface DisplayLine {
+  readonly text: string;
+  /** If true, render with bold + cyan for directories */
+  readonly isDirectory?: boolean;
+}
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Determines if a tool is a shell/command execution tool.
+ */
+function isShellTool(toolName: string): boolean {
+  const lowerName = toolName.toLowerCase();
+  return SHELL_TOOLS.has(lowerName) || lowerName.includes("bash") || lowerName.includes("shell");
+}
+
+/**
+ * Checks if an item looks like a directory entry.
+ */
+function isDirectoryItem(item: unknown): item is { name: string; type?: string } {
+  if (!item || typeof item !== "object") {
+    return false;
+  }
+  const obj = item as Record<string, unknown>;
+  return typeof obj.name === "string";
+}
+
+/**
+ * Formats a directory item with type indicator.
+ * Directories: bold cyan with trailing slash
+ * Files: indented plain text
+ */
+function formatDirectoryItem(item: unknown): DisplayLine {
+  if (!isDirectoryItem(item)) {
+    return { text: String(item) };
+  }
+  const { name, type } = item;
+  const isDir = type === "directory" || type === "dir" || name.endsWith("/");
+  if (isDir) {
+    const cleanName = name.replace(/\/$/, "");
+    return { text: `${cleanName}/`, isDirectory: true };
+  }
+  return { text: `  ${name}` };
+}
+
+/**
+ * Creates a plain display line from text.
+ */
+function plainLine(text: string): DisplayLine {
+  return { text };
+}
+
+/**
+ * Converts result to displayable lines.
+ */
+function resultToLines(result: unknown): DisplayLine[] {
+  if (result === null || result === undefined) {
+    return [];
+  }
+
+  if (typeof result === "string") {
+    return result.split("\n").map(plainLine);
+  }
+
+  if (Array.isArray(result)) {
+    // Check if it's a directory listing (items with name/type)
+    if (result.length > 0 && isDirectoryItem(result[0])) {
+      return result.map(formatDirectoryItem);
+    }
+    // Generic array - show as JSON lines
+    return result
+      .map((item) => (typeof item === "string" ? item : JSON.stringify(item, null, 2)))
+      .flatMap((s) => s.split("\n"))
+      .map(plainLine);
+  }
+
+  if (typeof result === "object") {
+    // Check for content field (common in tool results)
+    const obj = result as Record<string, unknown>;
+    if (typeof obj.content === "string") {
+      return obj.content.split("\n").map(plainLine);
+    }
+    if (typeof obj.output === "string") {
+      return obj.output.split("\n").map(plainLine);
+    }
+    if (typeof obj.text === "string") {
+      return obj.text.split("\n").map(plainLine);
+    }
+    // Check for entries array (directory listings)
+    if (Array.isArray(obj.entries)) {
+      return obj.entries.map(formatDirectoryItem);
+    }
+    // Fallback: JSON stringify
+    return JSON.stringify(result, null, 2).split("\n").map(plainLine);
+  }
+
+  return [plainLine(String(result))];
+}
+
+/**
+ * Truncates lines and returns truncation info.
+ */
+function truncateLines(
+  lines: DisplayLine[],
+  maxLines: number
+): { visibleLines: DisplayLine[]; hiddenCount: number } {
+  if (lines.length <= maxLines) {
+    return { visibleLines: lines, hiddenCount: 0 };
+  }
+  return {
+    visibleLines: lines.slice(0, maxLines),
+    hiddenCount: lines.length - maxLines,
+  };
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * ToolResultPreview displays tool call results with smart truncation.
+ *
+ * Features:
+ * - Codex-style line truncation (5 lines default, 50 for shell)
+ * - Format-aware rendering (directory listings, JSON, plain text)
+ * - Shows "+ N lines" indicator when truncated
+ * - Directories styled with bold cyan, files with indent
+ *
+ * @example
+ * ```tsx
+ * <ToolResultPreview
+ *   result="line1\nline2\nline3\nline4\nline5\nline6"
+ *   toolName="read_file"
+ * />
+ * // Output:
+ * // line1
+ * // line2
+ * // line3
+ * // line4
+ * // line5
+ * // ... +1 lines
+ * ```
+ */
+export function ToolResultPreview({
+  result,
+  toolName,
+  maxLines: maxLinesOverride,
+}: ToolResultPreviewProps): React.JSX.Element | null {
+  const { theme } = useTheme();
+
+  // Determine max lines based on tool type
+  const maxLines = useMemo(() => {
+    if (maxLinesOverride !== undefined) {
+      return maxLinesOverride;
+    }
+    return isShellTool(toolName) ? SHELL_TOOL_MAX_LINES : TOOL_RESULT_MAX_LINES;
+  }, [toolName, maxLinesOverride]);
+
+  // Convert result to lines and truncate
+  const { visibleLines, hiddenCount } = useMemo(() => {
+    const allLines = resultToLines(result);
+    // Filter out empty trailing lines
+    while (allLines.length > 0 && allLines[allLines.length - 1]?.text.trim() === "") {
+      allLines.pop();
+    }
+    return truncateLines(allLines, maxLines);
+  }, [result, maxLines]);
+
+  // Don't render if no content
+  if (visibleLines.length === 0) {
+    return null;
+  }
+
+  const mutedColor = theme.semantic.text.muted;
+
+  return (
+    <Box flexDirection="column">
+      {visibleLines.map((line, index) => (
+        <Text
+          key={`${index}-${line.text.slice(0, 20)}`}
+          wrap="truncate"
+          bold={line.isDirectory}
+          color={line.isDirectory ? theme.colors.info : undefined}
+        >
+          {line.text}
+        </Text>
+      ))}
+      {hiddenCount > 0 && (
+        <Text color={mutedColor} dimColor>
+          ... +{hiddenCount} {hiddenCount === 1 ? "line" : "lines"}
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/Messages/__tests__/CodeBlock.test.tsx

@@ -0,0 +1,296 @@
+/**
+ * CodeBlock Component Tests (T021)
+ *
+ * @module tui/components/Messages/__tests__/CodeBlock.test
+ */
+
+import { render } from "ink-testing-library";
+import { describe, expect, it } from "vitest";
+import { ThemeProvider } from "../../../theme/index.js";
+import { CodeBlock } from "../CodeBlock.js";
+
+/**
+ * Wrap component with ThemeProvider for testing.
+ */
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe("CodeBlock", () => {
+  describe("basic rendering", () => {
+    it("renders code content", () => {
+      const { lastFrame } = renderWithTheme(<CodeBlock code="const x = 1;" />);
+
+      expect(lastFrame()).toContain("const x = 1;");
+    });
+
+    it("renders multi-line code", () => {
+      const code = `function hello() {
+  return "world";
+}`;
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} />);
+
+      expect(lastFrame()).toContain("function hello()");
+      expect(lastFrame()).toContain("return");
+      expect(lastFrame()).toContain("world");
+    });
+
+    it("renders empty code block", () => {
+      const { lastFrame } = renderWithTheme(<CodeBlock code="" />);
+
+      // Should render borders at minimum
+      expect(lastFrame()).toBeTruthy();
+    });
+
+    it("renders with borders", () => {
+      const { lastFrame } = renderWithTheme(<CodeBlock code="test" />);
+
+      // Check for box-drawing characters (borders)
+      expect(lastFrame()).toMatch(/[─│┌┐└┘┬┴├┤┼╭╮╯╰]/);
+    });
+  });
+
+  describe("language header", () => {
+    it("displays language label when provided", () => {
+      const { lastFrame } = renderWithTheme(
+        <CodeBlock code="const x = 1;" language="typescript" />
+      );
+
+      expect(lastFrame()).toContain("typescript");
+    });
+
+    it("does not display language label when not provided", () => {
+      const { lastFrame } = renderWithTheme(<CodeBlock code="const x = 1;" />);
+
+      // Should not have a header row for language
+      expect(lastFrame()).not.toContain("javascript");
+      expect(lastFrame()).not.toContain("typescript");
+    });
+  });
+
+  describe("line numbers", () => {
+    it("shows line numbers when enabled", () => {
+      const code = `line 1
+line 2
+line 3`;
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} showLineNumbers />);
+
+      expect(lastFrame()).toContain("1");
+      expect(lastFrame()).toContain("2");
+      expect(lastFrame()).toContain("3");
+    });
+
+    it("hides line numbers when disabled", () => {
+      const { lastFrame } = renderWithTheme(
+        <CodeBlock code="single line" showLineNumbers={false} />
+      );
+
+      // The line number with separator should not be present
+      // (only box border │ should exist, not "1│" line number separator)
+      expect(lastFrame()).not.toMatch(/\d│/);
+    });
+
+    it("pads line numbers correctly for many lines", () => {
+      const lines = Array.from({ length: 15 }, (_, i) => `line ${i + 1}`).join("\n");
+      const { lastFrame } = renderWithTheme(<CodeBlock code={lines} showLineNumbers />);
+
+      // Should have proper padding for double-digit line numbers
+      expect(lastFrame()).toContain("line 1");
+      expect(lastFrame()).toContain("15");
+    });
+  });
+
+  describe("syntax highlighting", () => {
+    it("highlights JavaScript keywords", () => {
+      const code = "const value = function() { return true; }";
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="javascript" />);
+
+      expect(lastFrame()).toContain("const");
+      expect(lastFrame()).toContain("function");
+      expect(lastFrame()).toContain("return");
+      expect(lastFrame()).toContain("true");
+    });
+
+    it("highlights TypeScript keywords", () => {
+      const code = "interface User { readonly name: string; }";
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="typescript" />);
+
+      expect(lastFrame()).toContain("interface");
+      expect(lastFrame()).toContain("readonly");
+      expect(lastFrame()).toContain("string");
+    });
+
+    it("highlights Python keywords", () => {
+      const code = "def hello():\n    return None";
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="python" />);
+
+      expect(lastFrame()).toContain("def");
+      expect(lastFrame()).toContain("return");
+      expect(lastFrame()).toContain("None");
+    });
+
+    it("highlights bash keywords", () => {
+      const code = "if [ -f file ]; then\n  echo 'found'\nfi";
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="bash" />);
+
+      expect(lastFrame()).toContain("if");
+      expect(lastFrame()).toContain("then");
+      expect(lastFrame()).toContain("fi");
+    });
+
+    it("highlights strings in quotes", () => {
+      const code = 'const msg = "hello world";';
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="javascript" />);
+
+      expect(lastFrame()).toContain("hello world");
+    });
+
+    it("highlights comments", () => {
+      const code = "// This is a comment\nconst x = 1;";
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="javascript" />);
+
+      expect(lastFrame()).toContain("This is a comment");
+    });
+
+    it("handles language aliases (js -> javascript)", () => {
+      const code = "const x = 1;";
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="js" />);
+
+      expect(lastFrame()).toContain("const");
+    });
+
+    it("handles language aliases (ts -> typescript)", () => {
+      const code = "const x: number = 1;";
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="ts" />);
+
+      expect(lastFrame()).toContain("number");
+    });
+
+    it("falls back to plain text for unknown languages", () => {
+      const code = "some code here";
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="unknownlang" />);
+
+      expect(lastFrame()).toContain("some code here");
+    });
+  });
+
+  describe("line highlighting", () => {
+    it("highlights specified lines", () => {
+      const code = `line 1
+line 2
+line 3`;
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} highlight={[2]} />);
+
+      // Should contain highlight indicator
+      expect(lastFrame()).toContain("▶");
+    });
+
+    it("highlights multiple lines", () => {
+      const code = `line 1
+line 2
+line 3
+line 4`;
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} highlight={[1, 3]} />);
+
+      // Multiple lines should be highlighted
+      const output = lastFrame() ?? "";
+      const arrowCount = (output.match(/▶/g) ?? []).length;
+      expect(arrowCount).toBe(2);
+    });
+
+    it("ignores invalid line numbers", () => {
+      const code = "single line";
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} highlight={[5, 10]} />);
+
+      // Should render without error
+      expect(lastFrame()).toContain("single line");
+    });
+  });
+
+  describe("copy button", () => {
+    it("shows copy button when enabled", () => {
+      const { lastFrame } = renderWithTheme(<CodeBlock code="test" showCopyButton />);
+
+      // Translation key is used in tests
+      expect(lastFrame()).toContain("code.copy");
+    });
+
+    it("hides copy button when disabled", () => {
+      const { lastFrame } = renderWithTheme(<CodeBlock code="test" showCopyButton={false} />);
+
+      // Translation key should not be present
+      expect(lastFrame()).not.toContain("code.copy");
+    });
+  });
+
+  describe("maxHeight", () => {
+    it("truncates code when exceeding maxHeight", () => {
+      const code = Array.from({ length: 20 }, (_, i) => `line ${i + 1}`).join("\n");
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} maxHeight={5} />);
+
+      expect(lastFrame()).toContain("more lines");
+    });
+
+    it("shows all lines when within maxHeight", () => {
+      const code = `line 1
+line 2
+line 3`;
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} maxHeight={10} />);
+
+      expect(lastFrame()).not.toContain("more lines");
+    });
+
+    it("displays correct count of hidden lines", () => {
+      const code = Array.from({ length: 20 }, (_, i) => `line ${i + 1}`).join("\n");
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} maxHeight={5} />);
+
+      expect(lastFrame()).toContain("15 more lines");
+    });
+  });
+
+  describe("JSON highlighting", () => {
+    it("highlights JSON values", () => {
+      const code = '{"name": "test", "count": 42, "active": true}';
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="json" />);
+
+      expect(lastFrame()).toContain("name");
+      expect(lastFrame()).toContain("test");
+      expect(lastFrame()).toContain("42");
+      expect(lastFrame()).toContain("true");
+    });
+
+    it("highlights null in JSON", () => {
+      const code = '{"value": null}';
+      const { lastFrame } = renderWithTheme(<CodeBlock code={code} language="json" />);
+
+      expect(lastFrame()).toContain("null");
+    });
+  });
+
+  describe("combined features", () => {
+    it("renders with all features enabled", () => {
+      const code = `function example() {
+  // A comment
+  const message = "hello";
+  return message;
+}`;
+      const { lastFrame } = renderWithTheme(
+        <CodeBlock
+          code={code}
+          language="typescript"
+          showLineNumbers
+          showCopyButton
+          highlight={[3]}
+          maxHeight={10}
+        />
+      );
+
+      expect(lastFrame()).toContain("typescript");
+      // Translation key is used in tests
+      expect(lastFrame()).toContain("code.copy");
+      expect(lastFrame()).toContain("▶");
+      expect(lastFrame()).toContain("1");
+      expect(lastFrame()).toContain("function");
+    });
+  });
+});