@grackle-ai/web-components 0.107.2

package/src/components/tools/FileEditCard.tsx

@@ -0,0 +1,160 @@
+import { useState, type JSX } from "react";
+import { ChevronRight, Pencil } from "lucide-react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { parseUnifiedDiff, diffFromOldNew, diffStats, type DiffLine } from "./parseDiff.js";
+import { ICON_SM, ICON_MD } from "../../utils/iconSize.js";
+import styles from "./toolCards.module.scss";
+
+/** Extracts file path from edit tool args (handles `file_path`, `path` variants). */
+function getFilePath(args: unknown): string {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return "";
+  }
+  const a = args as Record<string, unknown>;
+  return (typeof a.file_path === "string" && a.file_path)
+    || (typeof a.path === "string" && a.path)
+    || "";
+}
+
+/** Extracts old/new string pair from args (handles Claude Code and Copilot field names). */
+function getOldNew(args: unknown): { oldStr: string; newStr: string } | undefined {
+  if (args === undefined || typeof args !== "object" || args === null) {
+    return undefined;
+  }
+  const a = args as Record<string, unknown>;
+  const oldStr: string | undefined = (typeof a.old_string === "string" ? a.old_string : undefined)
+    ?? (typeof a.old_str === "string" ? a.old_str : undefined);
+  const newStr: string | undefined = (typeof a.new_string === "string" ? a.new_string : undefined)
+    ?? (typeof a.new_str === "string" ? a.new_str : undefined);
+  if (oldStr !== undefined && newStr !== undefined) {
+    return { oldStr, newStr };
+  }
+  return undefined;
+}
+
+/** Extracts the basename from a file path. */
+function basename(filePath: string): string {
+  const parts = filePath.split(/[/\\]/);
+  return parts[parts.length - 1] || filePath;
+}
+
+/**
+ * Resolves diff lines from available data sources.
+ *
+ * Priority: detailedResult (unified diff) > args old/new strings > null.
+ */
+function resolveDiff(args: unknown, detailedResult?: string): DiffLine[] | undefined {
+  // 1. Try detailedResult as unified diff
+  if (detailedResult) {
+    // Copilot embeds diff in a JSON object sometimes
+    let diffText = detailedResult;
+    // Only attempt JSON parse if it looks like a JSON object (avoids throwing
+    // on unified diff strings which are the common case)
+    if (detailedResult.trimStart().startsWith("{")) {
+      try {
+        const parsed = JSON.parse(detailedResult) as Record<string, unknown>;
+        if (typeof parsed.detailedContent === "string") {
+          diffText = parsed.detailedContent;
+        }
+      } catch { /* not valid JSON despite looking like one — use as-is */ }
+    }
+
+    if (diffText.includes("@@") || diffText.startsWith("diff ")) {
+      const lines = parseUnifiedDiff(diffText);
+      if (lines.length > 0) {
+        return lines;
+      }
+    }
+  }
+
+  // 2. Try old/new string pair from args
+  const oldNew = getOldNew(args);
+  if (oldNew) {
+    return diffFromOldNew(oldNew.oldStr, oldNew.newStr);
+  }
+
+  return undefined;
+}
+
+/** Number of diff lines shown when collapsed. */
+const PREVIEW_LINES: number = 5;
+
+/** Renders a file edit tool call with a unified diff view. */
+export function FileEditCard({ tool, args, result, isError, detailedResult }: ToolCardProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const filePath = getFilePath(args);
+  const name = basename(filePath);
+  const inProgress = result === undefined;
+
+  const diffLines = resolveDiff(args, detailedResult);
+  const stats = diffLines ? diffStats(diffLines) : null;
+  const hasMore = (diffLines?.length ?? 0) > PREVIEW_LINES;
+  const displayLines = expanded ? diffLines : diffLines?.slice(0, PREVIEW_LINES);
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardOrange} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-file-edit"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon}><Pencil size={ICON_MD} /></span>
+        <span className={styles.toolName} style={{ color: "var(--accent-yellow)" }}>{tool}</span>
+        {name && (
+          <span className={styles.fileName} title={filePath}>{name}</span>
+        )}
+        {stats && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-diff-stats">
+              <span style={{ color: "var(--accent-green)" }}>+{stats.added}</span>
+              {" "}
+              <span style={{ color: "var(--accent-red)" }}>−{stats.removed}</span>
+            </span>
+          </>
+        )}
+      </div>
+
+      {isError && result && (
+        <pre className={styles.pre} data-testid="tool-card-error">
+          {result}
+        </pre>
+      )}
+
+      {!isError && displayLines && displayLines.length > 0 && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-diff">
+            {displayLines.map((line, i) => {
+              let lineClass = styles.diffContext;
+              if (line.type === "add") { lineClass = styles.diffAdd; }
+              if (line.type === "remove") { lineClass = styles.diffRemove; }
+              if (line.type === "header") { lineClass = styles.diffHeader; }
+              return (
+                <span key={i} className={`${styles.diffLine} ${lineClass}`}>
+                  {line.content}
+                </span>
+              );
+            })}
+          </pre>
+          {hasMore && (
+            <button
+              type="button"
+              className={styles.bodyToggle}
+              onClick={() => { setExpanded((v) => !v); }}
+              aria-expanded={expanded}
+              data-testid="tool-card-toggle"
+            >
+              <span className={`${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`} aria-hidden="true"><ChevronRight size={ICON_SM} /></span>
+              {expanded ? "collapse" : `${(diffLines?.length ?? 0) - PREVIEW_LINES} more lines`}
+            </button>
+          )}
+        </>
+      )}
+
+      {!isError && !diffLines && !inProgress && result && (
+        <pre className={styles.pre} data-testid="tool-card-content">
+          {result}
+        </pre>
+      )}
+    </div>
+  );
+}

package/src/components/tools/FileReadCard.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { FileReadCard } from "./FileReadCard.js";
+
+const meta: Meta<typeof FileReadCard> = {
+  component: FileReadCard,
+  title: "Grackle/Tools/FileReadCard",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SAMPLE_FILE: string = `import jwt from "jsonwebtoken";
+import type { Request, Response, NextFunction } from "express";
+
+const JWT_SECRET = process.env.JWT_SECRET || "change-me";
+
+export function verifyToken(req: Request, res: Response, next: NextFunction): void {
+  const header = req.headers.authorization;
+  if (!header?.startsWith("Bearer ")) {
+    res.status(401).json({ error: "Missing token" });
+    return;
+  }
+  try {
+    const decoded = jwt.verify(header.slice(7), JWT_SECRET);
+    req.user = decoded;
+    next();
+  } catch {
+    res.status(403).json({ error: "Invalid token" });
+  }
+}`;
+
+export const WithContent: Story = {
+  args: {
+    tool: "Read",
+    args: { file_path: "/src/middleware/auth.ts" },
+    result: SAMPLE_FILE,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-file-read")).toBeInTheDocument();
+    await expect(canvas.getByText("auth.ts")).toBeInTheDocument();
+    await expect(canvas.getByText("19 lines")).toBeInTheDocument();
+    // Should show toggle for >5 lines
+    await expect(canvas.getByTestId("tool-card-toggle")).toBeInTheDocument();
+  },
+};
+
+export const ExpandCollapse: Story = {
+  args: {
+    tool: "Read",
+    args: { file_path: "/src/middleware/auth.ts" },
+    result: SAMPLE_FILE,
+  },
+  play: async ({ canvas }) => {
+    // Initially collapsed - line 10 content should not be visible
+    const content = canvas.getByTestId("tool-card-content");
+    await expect(content.textContent).not.toContain("const decoded");
+
+    // Click toggle to expand
+    const toggle = canvas.getByTestId("tool-card-toggle");
+    await userEvent.click(toggle);
+
+    // Now line 13 content should be visible
+    await expect(content.textContent).toContain("const decoded");
+
+    // Click again to collapse
+    await userEvent.click(toggle);
+    await expect(content.textContent).not.toContain("const decoded");
+  },
+};
+
+export const ShortFile: Story = {
+  args: {
+    tool: "view",
+    args: { path: "C:\\Users\\nickp\\src\\config.json" },
+    result: '{\n  "port": 3000\n}',
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("config.json")).toBeInTheDocument();
+    await expect(canvas.getByText("3 lines")).toBeInTheDocument();
+    // No toggle for <=5 lines
+    await expect(canvas.queryByTestId("tool-card-toggle")).not.toBeInTheDocument();
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    tool: "Read",
+    args: { file_path: "/src/index.ts" },
+    // No result - still loading
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-file-read");
+    await expect(card.className).toContain("inProgress");
+    await expect(canvas.getByText("index.ts")).toBeInTheDocument();
+    await expect(canvas.queryByTestId("tool-card-content")).not.toBeInTheDocument();
+  },
+};
+
+export const ErrorResult: Story = {
+  args: {
+    tool: "Read",
+    args: { file_path: "/nonexistent/file.ts" },
+    result: "Error: ENOENT: no such file or directory",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-file-read");
+    await expect(card.className).toContain("cardRed");
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};
+
+export const EmptyFile: Story = {
+  args: {
+    tool: "Read",
+    args: { file_path: "/src/empty.ts" },
+    result: "",
+  },
+};

package/src/components/tools/FileReadCard.tsx

@@ -0,0 +1,106 @@
+import { useState, type JSX, type ReactNode } from "react";
+import { ChevronRight, FilePen, FileText } from "lucide-react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { ICON_SM, ICON_MD } from "../../utils/iconSize.js";
+import styles from "./toolCards.module.scss";
+
+/** Extracts the file path from tool args (handles both `file_path` and `path` variants). */
+function getFilePath(args: unknown): string {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return "";
+  }
+  const a = args as Record<string, unknown>;
+  if (typeof a.file_path === "string") {
+    return a.file_path;
+  }
+  if (typeof a.path === "string") {
+    return a.path;
+  }
+  return "";
+}
+
+/** Extracts the basename from a file path (handles both / and \ separators). */
+function basename(filePath: string): string {
+  const parts = filePath.split(/[/\\]/);
+  return parts[parts.length - 1] || filePath;
+}
+
+/** Number of preview lines shown when collapsed. */
+const PREVIEW_LINES: number = 5;
+
+/** Extra props for FileReadCard to support write variant styling. */
+interface FileReadCardProps extends ToolCardProps {
+  /** When true, uses green accent and write icon instead of blue/read. */
+  writeVariant?: boolean;
+}
+
+/** Renders a file read/write tool call with syntax-highlighted content preview. */
+export function FileReadCard({ tool, args, result, isError, writeVariant }: FileReadCardProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const filePath = getFilePath(args);
+  const name = basename(filePath);
+  const inProgress = result === undefined;
+
+  const accentClass: string = isError ? styles.cardRed : (writeVariant ? styles.cardGreen : styles.cardBlue);
+  const accentColor: string = writeVariant ? "var(--accent-green)" : "var(--accent-blue)";
+  const icon: ReactNode = writeVariant ? <FilePen size={ICON_MD} /> : <FileText size={ICON_MD} />;
+  const testId: string = writeVariant ? "tool-card-file-write" : "tool-card-file-read";
+
+  const lines = result?.split("\n") ?? [];
+  const hasMore = lines.length > PREVIEW_LINES;
+  const displayLines = expanded ? lines : lines.slice(0, PREVIEW_LINES);
+
+  return (
+    <div
+      className={`${styles.card} ${accentClass} ${inProgress ? styles.inProgress : ""}`}
+      data-testid={testId}
+    >
+      <div className={styles.header}>
+        <span className={styles.icon}>{icon}</span>
+        <span className={styles.toolName} style={{ color: accentColor }}>{tool}</span>
+        {name && (
+          <span className={styles.fileName} title={filePath}>{name}</span>
+        )}
+        {!inProgress && lines.length > 0 && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge}>{lines.length} lines</span>
+          </>
+        )}
+      </div>
+
+      {isError && result && (
+        <pre className={styles.pre} data-testid="tool-card-error">
+          {result}
+        </pre>
+      )}
+
+      {!isError && !inProgress && lines.length > 0 && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-content">
+            {displayLines.map((line, i) => (
+              <span key={i} className={styles.diffLine}>
+                <span style={{ color: "var(--text-tertiary)", userSelect: "none", marginRight: "var(--space-sm)", display: "inline-block", width: "3ch", textAlign: "right" }}>
+                  {i + 1}
+                </span>
+                {line}
+              </span>
+            ))}
+          </pre>
+          {hasMore && (
+            <button
+              type="button"
+              className={styles.bodyToggle}
+              onClick={() => { setExpanded((v) => !v); }}
+              aria-expanded={expanded}
+              data-testid="tool-card-toggle"
+            >
+              <span className={`${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`} aria-hidden="true"><ChevronRight size={ICON_SM} /></span>
+              {expanded ? "collapse" : `${lines.length - PREVIEW_LINES} more lines`}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/tools/FindingCard.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { FindingCard } from "./FindingCard.js";
+
+const meta: Meta<typeof FindingCard> = {
+  component: FindingCard,
+  title: "Tools/FindingCard",
+};
+export default meta;
+type Story = StoryObj<typeof FindingCard>;
+
+export const PostInProgress: Story = {
+  name: "finding_post - in progress",
+  args: {
+    tool: "mcp__grackle__finding_post",
+    args: {
+      title: "Auth middleware stores tokens insecurely",
+      category: "bug",
+      tags: ["security", "auth"],
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-finding-title")).toHaveTextContent("Auth middleware");
+    await expect(canvas.getByTestId("tool-card-finding-category")).toHaveTextContent("bug");
+  },
+};
+
+export const PostCompleted: Story = {
+  name: "finding_post - completed",
+  args: {
+    tool: "mcp__grackle__finding_post",
+    args: {
+      title: "Qdrant catalog naming convention",
+      category: "insight",
+      tags: ["search", "worktree", "qdrant"],
+    },
+    result: JSON.stringify({
+      id: "589f1e83",
+      workspaceId: "default",
+      category: "insight",
+      title: "Qdrant catalog naming convention",
+      content: "The qdrant-search MCP server indexes the codebase under the catalog name \"grackle\". All worktrees share the same codebase, so every semantic search call must pass catalog: \"grackle\".",
+      tags: ["search", "worktree", "qdrant"],
+      createdAt: "2026-03-28 03:49:15",
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-finding-category")).toHaveTextContent("insight");
+    await expect(canvas.getByTestId("tool-card-finding-tags")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-finding-content")).toBeInTheDocument();
+  },
+};
+
+export const PostCopilotFormat: Story = {
+  name: "finding_post - Copilot tool name",
+  args: {
+    tool: "grackle-finding_post",
+    args: {
+      title: "Rush worktree usage",
+      category: "insight",
+      tags: ["workflow"],
+    },
+    result: JSON.stringify({
+      id: "e7091ea6",
+      category: "insight",
+      title: "Rush worktree usage",
+      content: "This codebase uses Rush worktrees for all feature development.",
+      tags: ["workflow"],
+      createdAt: "2026-03-28 03:53:07",
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
+    // Should show bare tool name, not the full prefixed name
+    await expect(canvas.getByText("finding_post")).toBeInTheDocument();
+  },
+};
+
+export const ListWithResults: Story = {
+  name: "finding_list - multiple results",
+  args: {
+    tool: "mcp__grackle__finding_list",
+    args: { limit: 20 },
+    result: JSON.stringify([
+      { id: "f1", category: "insight", title: "Qdrant catalog naming" },
+      { id: "f2", category: "bug", title: "Auth token storage issue" },
+      { id: "f3", category: "decision", title: "Use ConnectRPC over ws-bridge" },
+    ]),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-finding-count")).toHaveTextContent("3 findings");
+    await expect(canvas.getByTestId("tool-card-finding-list")).toBeInTheDocument();
+  },
+};
+
+export const ListEmpty: Story = {
+  name: "finding_list - no results",
+  args: {
+    tool: "mcp__grackle__finding_list",
+    args: { category: "bug" },
+    result: JSON.stringify([]),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-finding-count")).toHaveTextContent("0 findings");
+  },
+};
+
+export const ErrorState: Story = {
+  name: "finding_post - error",
+  args: {
+    tool: "mcp__grackle__finding_post",
+    args: { title: "Test finding" },
+    result: "gRPC error [Internal]: database connection failed",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};

package/src/components/tools/FindingCard.tsx

@@ -0,0 +1,178 @@
+import { useState, type JSX } from "react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { extractBareName } from "./classifyTool.js";
+import styles from "./toolCards.module.scss";
+
+/** Shape of a single finding in MCP results. */
+interface Finding {
+  id?: string;
+  title?: string;
+  category?: string;
+  content?: string;
+  tags?: string[];
+  createdAt?: string;
+}
+
+/** Extracts finding-relevant fields from tool args. */
+function getArgs(args: unknown): { title?: string; category?: string; tags?: string[] } {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return {};
+  }
+  const a = args as Record<string, unknown>;
+  return {
+    title: typeof a.title === "string" ? a.title : undefined,
+    category: typeof a.category === "string" ? a.category : undefined,
+    tags: Array.isArray(a.tags) ? (a.tags as string[]) : undefined,
+  };
+}
+
+/** Parses MCP result JSON into a finding or array of findings. */
+function parseResult(result: string | undefined): { single?: Finding; list?: Finding[] } {
+  if (!result) {
+    return {};
+  }
+  try {
+    const parsed: unknown = JSON.parse(result);
+    if (Array.isArray(parsed)) {
+      return { list: (parsed as unknown[]).filter((v): v is Finding => v !== null && typeof v === "object") };
+    }
+    if (typeof parsed === "object" && parsed !== null) {
+      return { single: parsed as Finding };
+    }
+  } catch { /* fall through */ }
+  return {};
+}
+
+/** Number of items shown when collapsed. */
+const PREVIEW_COUNT: number = 5;
+
+/** Number of content lines shown when collapsed. */
+const PREVIEW_LINES: number = 5;
+
+/** Renders a finding tool call (finding_post, finding_list) with structured display. */
+export function FindingCard({ tool, args, result, isError }: ToolCardProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const bareName = extractBareName(tool);
+  const argData = getArgs(args);
+  const inProgress = result === undefined;
+  const { single, list } = parseResult(result);
+
+  // Determine title to show in header
+  const displayTitle = single?.title ?? argData.title;
+  // Only show category badge for single findings, not when displaying a list
+  const displayCategory = list ? undefined : (single?.category ?? argData.category);
+  const displayTags = list ? undefined : (single?.tags ?? argData.tags);
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardPurple} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-finding"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon} aria-hidden="true">&#x1F4A1;</span>
+        <span className={styles.toolName} style={{ color: "var(--accent-purple, #a78bfa)" }}>
+          {bareName}
+        </span>
+        {displayTitle && (
+          <span className={styles.fileName} data-testid="tool-card-finding-title">
+            &quot;{displayTitle}&quot;
+          </span>
+        )}
+        {displayCategory && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-finding-category">
+              {displayCategory}
+            </span>
+          </>
+        )}
+        {list && !displayCategory && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-finding-count">
+              {list.length} {list.length === 1 ? "finding" : "findings"}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* Tags */}
+      {displayTags && displayTags.length > 0 && (
+        <div className={styles.pre} style={{ padding: "4px 8px", whiteSpace: "normal" }} data-testid="tool-card-finding-tags">
+          {displayTags.map((tag, i) => (
+            <span key={i} style={{ display: "inline-block", marginRight: "6px", opacity: 0.7, fontSize: "0.85em" }}>
+              #{tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* In-progress: show args summary */}
+      {inProgress && !displayTitle && args !== null && args !== undefined && (
+        <pre className={styles.pre} data-testid="tool-card-args">
+          {JSON.stringify(args, null, 2)}
+        </pre>
+      )}
+
+      {/* Error */}
+      {isError && result && (
+        <pre className={styles.pre} data-testid="tool-card-error">
+          {result}
+        </pre>
+      )}
+
+      {/* Single finding result: show content */}
+      {!isError && single?.content && (
+        <>
+          {(() => {
+            const lines = single.content.split("\n");
+            const hasMore = lines.length > PREVIEW_LINES;
+            const displayContent = expanded ? single.content : lines.slice(0, PREVIEW_LINES).join("\n");
+            return (
+              <>
+                <pre className={styles.pre} data-testid="tool-card-finding-content">
+                  {displayContent}
+                </pre>
+                {hasMore && (
+                  <button
+                    type="button"
+                    className={styles.bodyToggle}
+                    onClick={() => { setExpanded((v) => !v); }}
+                    aria-expanded={expanded}
+                    data-testid="tool-card-toggle"
+                  >
+                    <span className={`${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`}>&#x25B8;</span>
+                    {expanded ? "collapse" : `${lines.length - PREVIEW_LINES} more lines`}
+                  </button>
+                )}
+              </>
+            );
+          })()}
+        </>
+      )}
+
+      {/* List result: show compact finding titles */}
+      {!isError && list && list.length > 0 && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-finding-list">
+            {(expanded ? list : list.slice(0, PREVIEW_COUNT)).map((f, i) => (
+              `${f.category ? `[${f.category}] ` : ""}${f.title ?? f.id ?? `Finding ${i + 1}`}`
+            )).join("\n")}
+          </pre>
+          {list.length > PREVIEW_COUNT && (
+            <button
+              type="button"
+              className={styles.bodyToggle}
+              onClick={() => { setExpanded((v) => !v); }}
+              aria-expanded={expanded}
+              data-testid="tool-card-toggle"
+            >
+              <span className={`${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`}>&#x25B8;</span>
+              {expanded ? "collapse" : `${list.length - PREVIEW_COUNT} more findings`}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}