@grackle-ai/web-components 0.107.2

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

@@ -0,0 +1,304 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { AgentToolCard } from "./AgentToolCard.js";
+
+const meta: Meta<typeof AgentToolCard> = {
+  component: AgentToolCard,
+  title: "Tools/AgentToolCard",
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Claude Code - Agent tool
+// ---------------------------------------------------------------------------
+
+export const ClaudeCodeForeground: Story = {
+  name: "Claude Code - foreground Explore agent",
+  args: {
+    tool: "Agent",
+    args: {
+      subagent_type: "Explore",
+      description: "Find all TypeScript files with runtime",
+      prompt: "Search for all TypeScript (.ts and .tsx) files under any src directory that contain the word runtime. List the matching file paths.",
+      model: "sonnet",
+    },
+    result: "Found 23 matching files:\n- packages/runtime-sdk/src/runtime.ts\n- packages/runtime-claude-code/src/claude-code.ts\n- packages/runtime-copilot/src/copilot.ts\n- packages/server/src/runtime-manager.ts",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-agent")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-agent-type")).toHaveTextContent("Explore");
+    await expect(canvas.getByTestId("tool-card-agent-model")).toHaveTextContent("sonnet");
+    await expect(canvas.getByTestId("tool-card-agent-description")).toHaveTextContent("Find all TypeScript files with runtime");
+    await expect(canvas.getByTestId("tool-card-result")).toBeInTheDocument();
+    // Should NOT have background indicator
+    await expect(canvas.queryByTestId("tool-card-agent-background")).not.toBeInTheDocument();
+  },
+};
+
+export const ClaudeCodeBackground: Story = {
+  name: "Claude Code - background agent completed",
+  args: {
+    tool: "Agent",
+    args: {
+      subagent_type: "general-purpose",
+      description: "Research API options",
+      prompt: "Research the available authentication methods for the GitHub API.",
+      run_in_background: true,
+      model: "opus",
+    },
+    result: "GitHub API supports three auth methods:\n1. Personal access tokens (PAT)\n2. GitHub App installation tokens\n3. OAuth app tokens",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-agent-type")).toHaveTextContent("general-purpose");
+    await expect(canvas.getByTestId("tool-card-agent-model")).toHaveTextContent("opus");
+    await expect(canvas.getByTestId("tool-card-agent-background")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-agent-background")).toHaveTextContent("BG");
+  },
+};
+
+export const ClaudeCodeInProgress: Story = {
+  name: "Claude Code - in progress (foreground)",
+  args: {
+    tool: "Agent",
+    args: {
+      subagent_type: "Explore",
+      description: "Count .ts files in the project",
+      prompt: "Count the total number of .ts files (not .tsx) in this project. Return just the count.",
+    },
+    // No result -- still running
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-pending")).toBeInTheDocument();
+    await expect(canvas.queryByTestId("tool-card-result")).not.toBeInTheDocument();
+    // Card should be dimmed
+    const card = canvas.getByTestId("tool-card-agent");
+    await expect(card.className).toContain("inProgress");
+  },
+};
+
+export const ClaudeCodeBackgroundInProgress: Story = {
+  name: "Claude Code - in progress (background)",
+  args: {
+    tool: "Agent",
+    args: {
+      subagent_type: "general-purpose",
+      description: "Long running analysis",
+      prompt: "Analyze the entire codebase for security vulnerabilities.",
+      run_in_background: true,
+    },
+    // No result -- still running
+  },
+  play: async ({ canvas }) => {
+    // Background agents show BG badge with pulsing dot, NOT the generic pending dot
+    await expect(canvas.getByTestId("tool-card-agent-background")).toBeInTheDocument();
+    await expect(canvas.queryByTestId("tool-card-pending")).not.toBeInTheDocument();
+  },
+};
+
+export const ClaudeCodeError: Story = {
+  name: "Claude Code - error result",
+  args: {
+    tool: "Agent",
+    args: {
+      subagent_type: "general-purpose",
+      description: "Fix the auth bug",
+      prompt: "Find and fix the authentication bug in the login flow.",
+    },
+    result: "Error: Agent exceeded maximum turns (10). The task was not completed.",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-agent");
+    await expect(card.className).toContain("cardRed");
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};
+
+export const ClaudeCodeLongResult: Story = {
+  name: "Claude Code - long result with expand/collapse",
+  args: {
+    tool: "Agent",
+    args: {
+      subagent_type: "Explore",
+      description: "List all package.json files",
+      prompt: "Find every package.json in the repo.",
+    },
+    result: "packages/cli/package.json\npackages/common/package.json\npackages/core/package.json\npackages/mcp/package.json\npackages/server/package.json\npackages/web/package.json\npackages/web-components/package.json\npackages/runtime-sdk/package.json\npackages/runtime-claude-code/package.json\npackages/runtime-copilot/package.json",
+  },
+  play: async ({ canvas }) => {
+    const toggle = canvas.getByTestId("tool-card-toggle");
+    await expect(toggle).toBeInTheDocument();
+    await expect(toggle.textContent).toContain("5 more lines");
+
+    await userEvent.click(toggle);
+    await expect(toggle.textContent).toContain("collapse");
+
+    await userEvent.click(toggle);
+    await expect(toggle.textContent).toContain("more lines");
+  },
+};
+
+export const ClaudeCodeResume: Story = {
+  name: "Claude Code - resuming a prior agent",
+  args: {
+    tool: "Agent",
+    args: {
+      subagent_type: "general-purpose",
+      description: "Continue the auth investigation",
+      prompt: "Pick up where you left off analyzing the auth flow.",
+      resume: "a40b974b6929b2f4a",
+    },
+    result: "Resumed analysis. The root cause is a missing token refresh in the middleware.",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-agent-description")).toHaveTextContent("Resuming: Continue the auth investigation");
+  },
+};
+
+export const ClaudeCodePromptToggle: Story = {
+  name: "Claude Code - prompt expand/collapse",
+  args: {
+    tool: "Agent",
+    args: {
+      subagent_type: "Explore",
+      description: "Search for patterns",
+      prompt: "This is a detailed prompt that describes exactly what the subagent should do. It includes multiple sentences and specific instructions.",
+    },
+    result: "Done.",
+  },
+  play: async ({ canvas }) => {
+    // Prompt should be collapsed by default
+    await expect(canvas.queryByTestId("tool-card-prompt")).not.toBeInTheDocument();
+
+    // Click to expand
+    const toggle = canvas.getByTestId("tool-card-prompt-toggle");
+    await userEvent.click(toggle);
+    await expect(canvas.getByTestId("tool-card-prompt")).toBeInTheDocument();
+
+    // Click to collapse
+    await userEvent.click(toggle);
+    await expect(canvas.queryByTestId("tool-card-prompt")).not.toBeInTheDocument();
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Copilot - task tool
+// ---------------------------------------------------------------------------
+
+export const CopilotTask: Story = {
+  name: "Copilot - background task agent",
+  args: {
+    tool: "task",
+    args: {
+      agent_type: "explore",
+      description: "Searching for grackle in files",
+      mode: "background",
+      name: "find-grackle-files",
+      prompt: "Search all files in the current directory and subdirectories for the word grackle. List the file paths containing matches.",
+    },
+    result: "Agent started in background with agent_id: find-grackle-files. You can use read_agent tool with this agent_id to check status and retrieve results.",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-agent")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-agent-type")).toHaveTextContent("explore");
+    await expect(canvas.getByTestId("tool-card-agent-background")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-agent-name")).toHaveTextContent("find-grackle-files");
+  },
+};
+
+export const CopilotTaskInProgress: Story = {
+  name: "Copilot - task in progress",
+  args: {
+    tool: "task",
+    args: {
+      agent_type: "worker",
+      description: "Building the project",
+      mode: "background",
+      name: "build-task",
+      prompt: "Run rush build and report any errors.",
+    },
+    // No result -- still running
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-agent");
+    await expect(card.className).toContain("inProgress");
+    await expect(canvas.getByTestId("tool-card-agent-background")).toBeInTheDocument();
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Copilot - read_agent tool
+// ---------------------------------------------------------------------------
+
+export const CopilotReadAgentCompleted: Story = {
+  name: "Copilot - read_agent completed",
+  args: {
+    tool: "read_agent",
+    args: { agent_id: "find-grackle-files" },
+    result: "Agent completed. agent_id: find-grackle-files, agent_type: explore, status: completed, elapsed: 6s, total_turns: 0, duration: 4s\n\nFound 12 matching files:\npackages/cli/src/index.ts\npackages/server/src/index.ts\npackages/common/src/types.ts",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-agent")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-agent-status")).toBeInTheDocument();
+    // Status should show "completed"
+    const status = canvas.getByTestId("tool-card-agent-status");
+    await expect(status.textContent).toContain("completed");
+    // Agent ID should be displayed in header
+    await expect(canvas.getByTestId("tool-card-agent-id")).toHaveTextContent("find-grackle-files");
+    // Result content should be the part after the prefix
+    await expect(canvas.getByTestId("tool-card-result")).toHaveTextContent(/Found 12 matching files/);
+  },
+};
+
+export const CopilotReadAgentError: Story = {
+  name: "Copilot - read_agent error",
+  args: {
+    tool: "read_agent",
+    args: { agent_id: "failed-task" },
+    result: "Agent failed. agent_id: failed-task, agent_type: worker, status: failed, elapsed: 30s\n\nThe agent encountered an unrecoverable error during execution.",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-agent");
+    await expect(card.className).toContain("cardRed");
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};
+
+export const CopilotReadAgentUnparseable: Story = {
+  name: "Copilot - read_agent with unstructured result",
+  args: {
+    tool: "read_agent",
+    args: { agent_id: "some-agent" },
+    result: "The agent returned some plain text result without the structured prefix.",
+  },
+  play: async ({ canvas }) => {
+    // Should gracefully fall back to showing raw result
+    await expect(canvas.getByTestId("tool-card-result")).toHaveTextContent("The agent returned some plain text result");
+    // No status line since it couldn't be parsed
+    await expect(canvas.queryByTestId("tool-card-agent-status")).not.toBeInTheDocument();
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Legacy - Claude Code Task (old name)
+// ---------------------------------------------------------------------------
+
+export const LegacyTask: Story = {
+  name: "Claude Code - legacy Task tool name",
+  args: {
+    tool: "Task",
+    args: {
+      subagent_type: "Explore",
+      description: "Find test files",
+      prompt: "List all test files in the project.",
+    },
+    result: "Found 42 test files across 8 packages.",
+  },
+  play: async ({ canvas }) => {
+    // Should render as AgentToolCard, not GenericToolCard
+    await expect(canvas.getByTestId("tool-card-agent")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-agent-type")).toHaveTextContent("Explore");
+  },
+};

package/src/components/tools/AgentToolCard.tsx

@@ -0,0 +1,247 @@
+import { useState, type JSX } from "react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import styles from "./toolCards.module.scss";
+import agentStyles from "./AgentToolCard.module.scss";
+
+/** Normalized info extracted from agent tool args across runtimes. */
+interface AgentInfo {
+  /** Agent type: "Explore", "Plan", "general-purpose", "explore", "worker", etc. */
+  agentType?: string;
+  /** Short description of the subagent task. */
+  description?: string;
+  /** Full prompt sent to the subagent. */
+  prompt?: string;
+  /** Whether the subagent runs in the background. */
+  isBackground?: boolean;
+  /** Model override (e.g. "sonnet", "opus", "claude-sonnet-4-20250514"). */
+  model?: string;
+  /** Copilot: human-readable agent name (e.g. "find-tests"). */
+  agentName?: string;
+  /** Copilot read_agent: the agent_id being polled. */
+  agentId?: string;
+  /** Whether this is a resume of a prior subagent. */
+  isResume?: boolean;
+  /** Whether this is a read_agent poll (not a spawn). */
+  isPoll?: boolean;
+}
+
+/**
+ * Parses agent tool args from all supported runtimes into a normalized shape.
+ *
+ * Handles:
+ * - Claude Code `Agent` / `Task`: `{ subagent_type, description, prompt, run_in_background, model, resume }`
+ * - Copilot `task`: `{ agent_type, description, prompt, mode, name }`
+ * - Copilot `read_agent`: `{ agent_id }`
+ */
+function parseAgentArgs(tool: string, args: unknown): AgentInfo {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return {};
+  }
+  const a = args as Record<string, unknown>;
+  const toolLower = tool.toLowerCase();
+
+  // Copilot read_agent — polling a background agent
+  if (toolLower === "read_agent") {
+    return {
+      agentId: typeof a.agent_id === "string" ? a.agent_id : undefined,
+      isPoll: true,
+    };
+  }
+
+  // Copilot task — has `agent_type` and `name` fields
+  if (typeof a.agent_type === "string" || typeof a.name === "string") {
+    return {
+      agentType: typeof a.agent_type === "string" ? a.agent_type : undefined,
+      description: typeof a.description === "string" ? a.description : undefined,
+      prompt: typeof a.prompt === "string" ? a.prompt : undefined,
+      isBackground: a.mode === "background",
+      agentName: typeof a.name === "string" ? a.name : undefined,
+    };
+  }
+
+  // Claude Code Agent / Task — has `subagent_type` field
+  return {
+    agentType: typeof a.subagent_type === "string" ? a.subagent_type : undefined,
+    description: typeof a.description === "string" ? a.description : undefined,
+    prompt: typeof a.prompt === "string" ? a.prompt : undefined,
+    isBackground: a.run_in_background === true,
+    model: typeof a.model === "string" ? a.model : undefined,
+    isResume: typeof a.resume === "string" && a.resume.length > 0,
+  };
+}
+
+/** Regex to parse Copilot read_agent structured result prefix. */
+const READ_AGENT_STATUS_PATTERN: RegExp =
+  /^Agent\s+(completed|running|failed|error)\.\s*agent_id:\s*(\S+),?\s*([^\n]*)(?:\n\n([\s\S]*))?$/i;
+
+/** Parsed result from a Copilot read_agent poll. */
+interface ReadAgentResult {
+  /** Agent lifecycle status. */
+  status: string;
+  /** The agent_id that was polled. */
+  agentId: string;
+  /** Metadata line (e.g. "elapsed: 6s, total_turns: 0, duration: 4s"). */
+  metadata: string;
+  /** The actual content after the status prefix. */
+  content?: string;
+}
+
+/** Attempts to parse the structured prefix from a read_agent result. */
+function parseReadAgentResult(result: string): ReadAgentResult | undefined {
+  const match = READ_AGENT_STATUS_PATTERN.exec(result);
+  if (!match) {
+    return undefined;
+  }
+  const rawContent: string | undefined = match[4] as string | undefined;
+  return {
+    status: match[1].toLowerCase(),
+    agentId: match[2].replace(/,$/, ""),
+    metadata: match[3].trim(),
+    content: rawContent ? rawContent.trim() : undefined,
+  };
+}
+
+/** Number of result lines shown when collapsed. */
+const PREVIEW_LINES: number = 5;
+
+/** Renders a subagent tool call (Claude Code Agent, Copilot task/read_agent). */
+export function AgentToolCard({ tool, args, result, isError }: ToolCardProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const [promptExpanded, setPromptExpanded] = useState(false);
+  const info = parseAgentArgs(tool, args);
+  const inProgress = result === undefined;
+
+  // For read_agent, try to parse the structured result
+  const parsedPoll = info.isPoll && result ? parseReadAgentResult(result) : undefined;
+  const displayResult = parsedPoll?.content ?? result;
+
+  const resultLines = displayResult?.split("\n") ?? [];
+  const hasMore = resultLines.length > PREVIEW_LINES;
+  const visibleResult = expanded ? displayResult : resultLines.slice(0, PREVIEW_LINES).join("\n");
+
+  // Header label
+  const headerLabel = info.isPoll ? "Subagent" : "Agent";
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardTeal} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-agent"
+    >
+      {/* Header row */}
+      <div className={styles.header}>
+        <span className={styles.icon} style={{ color: "var(--accent-teal, #2dd4bf)" }}>&#9654;</span>
+        <span className={styles.toolName} style={{ color: "var(--accent-teal, #2dd4bf)" }}>
+          {headerLabel}
+        </span>
+
+        {info.agentType && (
+          <span className={agentStyles.badgePill} data-testid="tool-card-agent-type">
+            {info.agentType}
+          </span>
+        )}
+
+        {info.model && (
+          <span className={agentStyles.modelBadge} data-testid="tool-card-agent-model">
+            {info.model}
+          </span>
+        )}
+
+        {info.isBackground && (
+          <span className={agentStyles.backgroundBadge} data-testid="tool-card-agent-background">
+            <span className={inProgress ? agentStyles.backgroundDotPulsing : agentStyles.backgroundDot}>&#9679;</span>
+            BG
+          </span>
+        )}
+
+        {info.agentName && (
+          <span className={styles.fileName} data-testid="tool-card-agent-name">
+            {info.agentName}
+          </span>
+        )}
+
+        {info.agentId && (
+          <span className={styles.fileName} data-testid="tool-card-agent-id">
+            {info.agentId}
+          </span>
+        )}
+
+        <span className={styles.spacer} />
+
+        {inProgress && !info.isBackground && (
+          <span className={styles.exitPending} data-testid="tool-card-pending">&#9679;</span>
+        )}
+
+      </div>
+
+      {/* Description */}
+      {info.description && (
+        <div className={agentStyles.description} data-testid="tool-card-agent-description">
+          {info.isResume ? `Resuming: ${info.description}` : info.description}
+        </div>
+      )}
+
+      {/* read_agent status line */}
+      {parsedPoll && (
+        <div className={agentStyles.statusLine} data-testid="tool-card-agent-status">
+          <span className={
+            parsedPoll.status === "completed" ? agentStyles.statusCompleted
+              : parsedPoll.status === "running" ? agentStyles.statusRunning
+                : agentStyles.statusError
+          }>
+            {parsedPoll.status}
+          </span>
+          {parsedPoll.metadata && <span>{parsedPoll.metadata}</span>}
+        </div>
+      )}
+
+      {/* Collapsible prompt */}
+      {info.prompt && (
+        <>
+          <button
+            type="button"
+            className={agentStyles.promptToggle}
+            onClick={() => { setPromptExpanded((v) => !v); }}
+            aria-expanded={promptExpanded}
+            data-testid="tool-card-prompt-toggle"
+          >
+            <span className={`${styles.chevron} ${promptExpanded ? styles.chevronExpanded : ""}`}>&#9656;</span>
+            prompt
+          </button>
+          {promptExpanded && (
+            <pre className={styles.pre} data-testid="tool-card-prompt">
+              {info.prompt}
+            </pre>
+          )}
+        </>
+      )}
+
+      {/* Error result */}
+      {isError && result && (
+        <pre className={styles.pre} data-testid="tool-card-error">
+          {result}
+        </pre>
+      )}
+
+      {/* Normal result */}
+      {!isError && !inProgress && displayResult && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-result">
+            {visibleResult}
+          </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 : ""}`}>&#9656;</span>
+              {expanded ? "collapse" : `${resultLines.length - PREVIEW_LINES} more lines`}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { FileEditCard } from "./FileEditCard.js";
+
+const meta: Meta<typeof FileEditCard> = {
+  component: FileEditCard,
+  title: "Grackle/Tools/FileEditCard",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FromOldNewStrings: Story = {
+  name: "Claude Code - old/new strings",
+  args: {
+    tool: "Edit",
+    args: {
+      file_path: "/src/middleware/auth.ts",
+      old_string: 'const secret = "hardcoded";\nconst expiry = 3600;',
+      new_string: 'const secret = process.env.JWT_SECRET;\nif (!secret) {\n  throw new Error("JWT_SECRET is required");\n}\nconst expiry = 86400;',
+    },
+    result: "File updated successfully",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-file-edit")).toBeInTheDocument();
+    await expect(canvas.getByText("auth.ts")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-diff-stats")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-diff")).toBeInTheDocument();
+  },
+};
+
+export const FromUnifiedDiff: Story = {
+  name: "Copilot - unified diff in detailedResult",
+  args: {
+    tool: "edit",
+    args: {
+      path: "C:\\Users\\nickp\\src\\grackle4\\README.md",
+      old_str: "## Requirements",
+      new_str: "## Getting Started\n\n```bash\nnpm install\nrush build\nrush serve\n```\n\n## Requirements",
+    },
+    result: "File updated with changes.",
+    detailedResult: `diff --git a/README.md b/README.md
+index 0000000..0000001 100644
+--- a/README.md
++++ b/README.md
+@@ -280,6 +280,15 @@
+ \`\`\`
+ </details>
+
++## Getting Started
++
++\`\`\`bash
++npm install
++rush build
++rush serve
++\`\`\`
++
+ ## Requirements
+
+ - Docker (recommended)`,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-diff")).toBeInTheDocument();
+    // Should show the parsed unified diff, not the old/new fallback
+    const diff = canvas.getByTestId("tool-card-diff");
+    await expect(diff.textContent).toContain("Getting Started");
+  },
+};
+
+export const SmallEdit: Story = {
+  name: "Single-line change",
+  args: {
+    tool: "Edit",
+    args: {
+      file_path: "/src/config.ts",
+      old_string: "const PORT = 3000;",
+      new_string: "const PORT = 8080;",
+    },
+    result: "File updated",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("config.ts")).toBeInTheDocument();
+    // No toggle for <=5 diff lines
+    await expect(canvas.queryByTestId("tool-card-toggle")).not.toBeInTheDocument();
+  },
+};
+
+export const LargeDiffExpandCollapse: Story = {
+  name: "Large diff - expand/collapse",
+  args: {
+    tool: "Edit",
+    args: {
+      file_path: "/src/routes/api.ts",
+      old_string: "line 1\nline 2\nline 3\nline 4\nline 5",
+      new_string: "new line 1\nnew line 2\nnew line 3\nnew line 4\nnew line 5\nnew line 6\nnew line 7\nnew line 8",
+    },
+    result: "File updated",
+  },
+  play: async ({ canvas }) => {
+    // Should have toggle (5 removes + 8 adds = 13 lines > 5)
+    const toggle = canvas.getByTestId("tool-card-toggle");
+    await expect(toggle).toBeInTheDocument();
+
+    // Expand
+    await userEvent.click(toggle);
+    await expect(toggle.textContent).toContain("collapse");
+
+    // Collapse
+    await userEvent.click(toggle);
+    await expect(toggle.textContent).toContain("more lines");
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    tool: "Edit",
+    args: { file_path: "/src/index.ts", old_string: "foo", new_string: "bar" },
+    // No result yet
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-file-edit");
+    await expect(card.className).toContain("inProgress");
+  },
+};
+
+export const ErrorResult: Story = {
+  args: {
+    tool: "edit",
+    args: { path: "/src/missing.ts", old_str: "x", new_str: "y" },
+    result: "Error: old_str not found in file",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-file-edit");
+    await expect(card.className).toContain("cardRed");
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};