@grackle-ai/web-components 0.107.2

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

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { WorkpadCard } from "./WorkpadCard.js";
+
+const meta: Meta<typeof WorkpadCard> = {
+  component: WorkpadCard,
+  title: "Tools/WorkpadCard",
+};
+export default meta;
+type Story = StoryObj<typeof WorkpadCard>;
+
+export const WriteInProgress: Story = {
+  name: "workpad_write - in progress",
+  args: {
+    tool: "mcp__grackle__workpad_write",
+    args: {
+      status: "in_progress",
+      summary: "Working on authentication refactor...",
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-workpad")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-workpad-status")).toHaveTextContent("in_progress");
+    await expect(canvas.getByTestId("tool-card-workpad-summary")).toHaveTextContent("Working on authentication");
+  },
+};
+
+export const WriteCompleted: Story = {
+  name: "workpad_write - completed",
+  args: {
+    tool: "mcp__grackle__workpad_write",
+    args: {
+      status: "completed",
+      summary: "Tested Grackle MCP tools",
+    },
+    result: JSON.stringify({
+      taskId: "74f5b716",
+      workpad: {
+        status: "completed",
+        summary: "Tested Grackle MCP tools: posted a finding, wrote to workpad, and searched knowledge.",
+        extra: {
+          tools_tested: ["finding_post", "workpad_write", "knowledge_search"],
+          finding_topic: "qdrant catalog",
+        },
+      },
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-workpad")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-workpad-status")).toHaveTextContent("completed");
+    await expect(canvas.getByTestId("tool-card-workpad-summary")).toBeInTheDocument();
+    // Extra data toggle should be present
+    const toggle = canvas.getByTestId("tool-card-toggle");
+    await expect(toggle).toBeInTheDocument();
+    // Expand to see extra data
+    await userEvent.click(toggle);
+    await expect(canvas.getByTestId("tool-card-workpad-extra")).toBeInTheDocument();
+  },
+};
+
+export const ReadResult: Story = {
+  name: "workpad_read - with data",
+  args: {
+    tool: "mcp__grackle__workpad_read",
+    args: { taskId: "74f5b716" },
+    result: JSON.stringify({
+      status: "completed",
+      summary: "All tests passing. PR ready for review.",
+      extra: { pr_number: 142, branch: "feat/auth" },
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-workpad")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-workpad-status")).toHaveTextContent("completed");
+  },
+};
+
+export const CopilotFormat: Story = {
+  name: "workpad_write - Copilot tool name",
+  args: {
+    tool: "grackle-workpad_write",
+    args: { status: "in progress", summary: "Posted a finding about Rush worktrees." },
+    result: JSON.stringify({
+      taskId: "e4366a55",
+      workpad: { status: "in progress", summary: "Posted a finding about Rush worktrees." },
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-workpad")).toBeInTheDocument();
+    await expect(canvas.getByText("workpad_write")).toBeInTheDocument();
+  },
+};
+
+export const ErrorState: Story = {
+  name: "workpad_write - error",
+  args: {
+    tool: "mcp__grackle__workpad_write",
+    args: { status: "done" },
+    result: "gRPC error [FailedPrecondition]: no task context",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-workpad")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};

package/src/components/tools/WorkpadCard.tsx

@@ -0,0 +1,125 @@
+import { useState, type JSX } from "react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { extractBareName } from "./classifyTool.js";
+import styles from "./toolCards.module.scss";
+
+/** Extracts workpad-relevant fields from tool args. */
+function getArgs(args: unknown): { status?: string; summary?: string } {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return {};
+  }
+  const a = args as Record<string, unknown>;
+  return {
+    status: typeof a.status === "string" ? a.status : undefined,
+    summary: typeof a.summary === "string" ? a.summary : undefined,
+  };
+}
+
+/** Parses workpad result. Could be { taskId, workpad: {...} } or the workpad object itself. */
+function parseResult(result: string | undefined): { status?: string; summary?: string; extra?: Record<string, unknown> } {
+  if (!result) {
+    return {};
+  }
+  try {
+    const parsed: unknown = JSON.parse(result);
+    if (typeof parsed !== "object" || parsed === null) {
+      return {};
+    }
+    const obj = parsed as Record<string, unknown>;
+    // workpad_write returns { taskId, workpad: { status, summary, extra } }
+    const workpad = (typeof obj.workpad === "object" && obj.workpad !== null)
+      ? obj.workpad as Record<string, unknown>
+      : obj;
+    return {
+      status: typeof workpad.status === "string" ? workpad.status : undefined,
+      summary: typeof workpad.summary === "string" ? workpad.summary : undefined,
+      extra: typeof workpad.extra === "object" && workpad.extra !== null
+        ? workpad.extra as Record<string, unknown>
+        : undefined,
+    };
+  } catch { /* fall through */ }
+  return {};
+}
+
+/** Renders a workpad tool call (workpad_write, workpad_read) with structured display. */
+export function WorkpadCard({ 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 resultData = parseResult(result);
+
+  const displayStatus = resultData.status ?? argData.status;
+  const displaySummary = resultData.summary ?? argData.summary;
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardGreen} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-workpad"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon} aria-hidden="true">&#x1F4D3;</span>
+        <span className={styles.toolName} style={{ color: "var(--accent-green, #4ade80)" }}>
+          {bareName}
+        </span>
+        {displayStatus && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-workpad-status">
+              {displayStatus}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* Summary */}
+      {displaySummary && (
+        <pre className={styles.pre} style={{ whiteSpace: "pre-wrap" }} data-testid="tool-card-workpad-summary">
+          {displaySummary}
+        </pre>
+      )}
+
+      {/* In-progress: show args if no summary */}
+      {inProgress && !displaySummary && 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>
+      )}
+
+      {/* Raw result fallback when parsing yields nothing structured */}
+      {!isError && !inProgress && result && !displaySummary && !displayStatus && !resultData.extra && (
+        <pre className={styles.pre} data-testid="tool-card-result">
+          {result}
+        </pre>
+      )}
+
+      {/* Extra data (expandable) */}
+      {!isError && resultData.extra && (
+        <>
+          <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" : "extra data"}
+          </button>
+          {expanded && (
+            <pre className={styles.pre} data-testid="tool-card-workpad-extra">
+              {JSON.stringify(resultData.extra, null, 2)}
+            </pre>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/tools/classifyTool.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { classifyTool } from "./classifyTool.js";
+
+describe("classifyTool", () => {
+  it("classifies Claude Code tools", () => {
+    expect(classifyTool("Bash")).toBe("shell");
+    expect(classifyTool("Read")).toBe("file-read");
+    expect(classifyTool("Edit")).toBe("file-edit");
+    expect(classifyTool("Write")).toBe("file-write");
+    expect(classifyTool("Grep")).toBe("search");
+    expect(classifyTool("Glob")).toBe("search");
+    expect(classifyTool("TodoWrite")).toBe("todo");
+  });
+
+  it("classifies Copilot tools", () => {
+    expect(classifyTool("powershell")).toBe("shell");
+    expect(classifyTool("view")).toBe("file-read");
+    expect(classifyTool("edit")).toBe("file-edit");
+    expect(classifyTool("report_intent")).toBe("metadata");
+  });
+
+  it("classifies Codex tools", () => {
+    expect(classifyTool("command_execution")).toBe("shell");
+    expect(classifyTool("file_change")).toBe("file-edit");
+    expect(classifyTool("update_plan")).toBe("todo");
+  });
+
+  it("is case-insensitive", () => {
+    expect(classifyTool("BASH")).toBe("shell");
+    expect(classifyTool("PowerShell")).toBe("shell");
+    expect(classifyTool("GREP")).toBe("search");
+  });
+
+  it("classifies Grackle MCP tools", () => {
+    expect(classifyTool("mcp__grackle__workpad_write")).toBe("workpad");
+    expect(classifyTool("mcp__grackle__finding_post")).toBe("finding");
+    expect(classifyTool("mcp__grackle__task_create")).toBe("task");
+  });
+
+  it("returns generic for unknown tools", () => {
+    expect(classifyTool("unknown_tool")).toBe("generic");
+    expect(classifyTool("mcp__unknown_server__foo")).toBe("generic");
+  });
+});

package/src/components/tools/classifyTool.ts

@@ -0,0 +1,134 @@
+/**
+ * Classifies a tool name into a rendering category.
+ *
+ * Maps tool names from all supported runtimes (Claude Code, Copilot, Codex)
+ * to a UI category that determines which card component renders the event.
+ */
+
+/** Tool rendering categories corresponding to specialized card components. */
+export type ToolCategory =
+  | "file-read"
+  | "file-edit"
+  | "file-write"
+  | "shell"
+  | "search"
+  | "todo"
+  | "metadata"
+  | "finding"
+  | "task"
+  | "workpad"
+  | "knowledge"
+  | "ipc"
+  | "tool-search"
+  | "agent"
+  | "generic";
+
+/** Known MCP server names for bare-name extraction from Copilot dash format. */
+const KNOWN_MCP_SERVERS: Set<string> = new Set(["grackle"]);
+
+/**
+ * Extracts the bare tool name from runtime-specific naming conventions.
+ *
+ * - Claude Code / Codex: `mcp__grackle__finding_post` -> `finding_post`
+ * - Copilot: `grackle-finding_post` -> `finding_post`
+ * - Built-in: `Read` -> `read` (unchanged, lowered later)
+ */
+export function extractBareName(toolName: string): string {
+  // MCP double-underscore format: mcp__<server>__<tool> (only for known servers)
+  if (toolName.startsWith("mcp__")) {
+    const serverSep = toolName.indexOf("__", 5);
+    if (serverSep > 5) {
+      const server = toolName.slice(5, serverSep);
+      if (KNOWN_MCP_SERVERS.has(server)) {
+        return toolName.slice(serverSep + 2);
+      }
+    }
+  }
+  // Copilot dash format: <server>-<tool> (only for known servers)
+  const dashIndex = toolName.indexOf("-");
+  if (dashIndex > 0) {
+    const server = toolName.slice(0, dashIndex);
+    if (KNOWN_MCP_SERVERS.has(server)) {
+      return toolName.slice(dashIndex + 1);
+    }
+  }
+  return toolName;
+}
+
+const TOOL_MAP: Record<string, ToolCategory> = {
+  // File read — Claude Code: Read, Copilot: view
+  read: "file-read",
+  view: "file-read",
+
+  // File edit — Claude Code: Edit, Copilot: edit, Codex: file_change
+  edit: "file-edit",
+  file_change: "file-edit",
+
+  // File write — Claude Code: Write
+  write: "file-write",
+
+  // Shell — Claude Code: Bash, Copilot: powershell, Codex: command_execution
+  bash: "shell",
+  powershell: "shell",
+  command_execution: "shell",
+
+  // Search — Claude Code: Grep, Glob
+  grep: "search",
+  glob: "search",
+
+  // Todo — Claude Code: TodoWrite, Codex: update_plan, Goose: todo_write
+  todowrite: "todo",
+  update_plan: "todo",
+  todo_write: "todo",
+
+  // Metadata — Copilot: report_intent
+  report_intent: "metadata",
+
+  // Finding — Grackle MCP
+  finding_post: "finding",
+  finding_list: "finding",
+
+  // Task — Grackle MCP
+  task_list: "task",
+  task_create: "task",
+  task_show: "task",
+  task_update: "task",
+  task_start: "task",
+  task_complete: "task",
+  task_resume: "task",
+  task_delete: "task",
+
+  // Workpad — Grackle MCP
+  workpad_write: "workpad",
+  workpad_read: "workpad",
+
+  // Knowledge — Grackle MCP
+  knowledge_search: "knowledge",
+  knowledge_get_node: "knowledge",
+  knowledge_create_node: "knowledge",
+
+  // IPC — Grackle MCP
+  ipc_spawn: "ipc",
+  ipc_write: "ipc",
+  ipc_close: "ipc",
+  ipc_list_fds: "ipc",
+  ipc_terminate: "ipc",
+  ipc_create_stream: "ipc",
+  ipc_attach: "ipc",
+  ipc_share_stream: "ipc",
+  ipc_list_streams: "ipc",
+
+  // ToolSearch — Claude Code built-in
+  toolsearch: "tool-search",
+
+  // Agent — Claude Code: Agent (formerly Task), Copilot: task, read_agent
+  agent: "agent",
+  task: "agent",
+  read_agent: "agent",
+};
+
+/** Classifies a tool name to determine which card component should render it. */
+export function classifyTool(toolName: string): ToolCategory {
+  const bare = extractBareName(toolName);
+  return TOOL_MAP[bare.toLowerCase()] ?? "generic";
+}

package/src/components/tools/parseDiff.ts

@@ -0,0 +1,95 @@
+/**
+ * Lightweight diff parsing utilities for the FileEditCard.
+ *
+ * Handles two formats:
+ * 1. Unified diff strings (from Copilot's `detailedContent` field)
+ * 2. Old/new string pairs (from Claude Code's `Edit` tool args)
+ */
+
+/** A single line in a parsed diff. */
+export interface DiffLine {
+  /** Line classification. */
+  type: "add" | "remove" | "context" | "header";
+  /** Line content (without the leading +/- prefix). */
+  content: string;
+}
+
+/** Addition/removal counts for a diff. */
+export interface DiffStats {
+  added: number;
+  removed: number;
+}
+
+/**
+ * Parses a unified diff string into typed lines.
+ *
+ * Recognizes `@@` hunk headers, `+`/`-` prefixed lines, and context lines.
+ * Skips `---`/`+++` file header lines and `diff --git` preamble.
+ */
+export function parseUnifiedDiff(diff: string): DiffLine[] {
+  const lines = diff.split("\n");
+  const result: DiffLine[] = [];
+
+  for (const line of lines) {
+    if (line.startsWith("diff --git") || line.startsWith("index ")) {
+      continue;
+    }
+    // Skip file header lines (--- a/file, +++ b/file) but not hunk content
+    // lines that happen to start with "---" or "+++" (which appear as
+    // "----..." or "++++..." in the diff and are handled by +/- rules below).
+    if ((line.startsWith("--- ") || line.startsWith("+++ ")) && !line.startsWith("---- ") && !line.startsWith("++++ ")) {
+      continue;
+    }
+    if (line.startsWith("@@")) {
+      result.push({ type: "header", content: line });
+    } else if (line.startsWith("+")) {
+      result.push({ type: "add", content: line.slice(1) });
+    } else if (line.startsWith("-")) {
+      result.push({ type: "remove", content: line.slice(1) });
+    } else if (line.startsWith(" ")) {
+      result.push({ type: "context", content: line.slice(1) });
+    } else if (line === "") {
+      // Empty lines in unified diffs are context lines
+      result.push({ type: "context", content: "" });
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Constructs a minimal diff from old and new strings.
+ *
+ * This is a simple line-by-line comparison — not a true LCS diff algorithm.
+ * Shows all old lines as removals followed by all new lines as additions.
+ * Good enough for the small, targeted edits agents typically make.
+ */
+export function diffFromOldNew(oldStr: string, newStr: string): DiffLine[] {
+  const oldLines = oldStr.split("\n");
+  const newLines = newStr.split("\n");
+  const result: DiffLine[] = [];
+
+  for (const line of oldLines) {
+    result.push({ type: "remove", content: line });
+  }
+  for (const line of newLines) {
+    result.push({ type: "add", content: line });
+  }
+
+  return result;
+}
+
+/** Counts additions and removals in a parsed diff. */
+export function diffStats(lines: DiffLine[]): DiffStats {
+  let added = 0;
+  let removed = 0;
+  for (const line of lines) {
+    if (line.type === "add") {
+      added++;
+    }
+    if (line.type === "remove") {
+      removed++;
+    }
+  }
+  return { added, removed };
+}

package/src/components/tools/parseShellOutput.ts

@@ -0,0 +1,28 @@
+/**
+ * Parses shell command output from different runtime formats.
+ *
+ * Codex emits `[exit N] output` format. Other runtimes emit plain output.
+ */
+
+/** Parsed shell command result. */
+export interface ShellResult {
+  /** Exit code, or undefined if not available. */
+  exitCode: number | undefined;
+  /** Command output (stdout/stderr). */
+  output: string;
+}
+
+/** Pattern matching Codex's `[exit N] rest` format. */
+const EXIT_CODE_PATTERN: RegExp = /^\[exit (\d+)\]\s*/;
+
+/** Parses shell output, extracting exit code if present. */
+export function parseShellOutput(content: string): ShellResult {
+  const match: RegExpExecArray | null = EXIT_CODE_PATTERN.exec(content);
+  if (match) {
+    return {
+      exitCode: Number(match[1]),
+      output: content.slice(match[0].length),
+    };
+  }
+  return { exitCode: undefined, output: content };
+}

package/src/components/tools/toolCardHelpers.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { formatToolName } from "./GenericToolCard.js";
+import { simplifyCommand } from "./ShellCard.js";
+
+describe("formatToolName", () => {
+  it("parses standard MCP tool names", () => {
+    expect(formatToolName("mcp__server__tool")).toEqual({ display: "server / tool", isMcp: true });
+    expect(formatToolName("mcp__my-server__my-tool")).toEqual({ display: "my-server / my-tool", isMcp: true });
+  });
+
+  it("preserves underscores within server and tool segments", () => {
+    expect(formatToolName("mcp__qdrant-search__semantic_search")).toEqual({ display: "qdrant-search / semantic_search", isMcp: true });
+    expect(formatToolName("mcp__grackle__env_add")).toEqual({ display: "grackle / env_add", isMcp: true });
+    expect(formatToolName("mcp__playwright__browser_navigate")).toEqual({ display: "playwright / browser_navigate", isMcp: true });
+  });
+
+  it("splits only at the first double-underscore boundary", () => {
+    expect(formatToolName("mcp__server__some__deep__tool")).toEqual({ display: "server / some__deep__tool", isMcp: true });
+  });
+
+  it("returns non-MCP tools unchanged", () => {
+    expect(formatToolName("Bash")).toEqual({ display: "Bash", isMcp: false });
+    expect(formatToolName("not_mcp_tool")).toEqual({ display: "not_mcp_tool", isMcp: false });
+  });
+
+  it("rejects malformed MCP names", () => {
+    expect(formatToolName("mcp____tool")).toEqual({ display: "mcp____tool", isMcp: false });
+    expect(formatToolName("mcp__server__")).toEqual({ display: "mcp__server__", isMcp: false });
+  });
+});
+
+describe("simplifyCommand", () => {
+  it("strips single-quoted pwsh wrapper", () => {
+    expect(simplifyCommand("pwsh -Command 'Get-Process'")).toBe("Get-Process");
+  });
+
+  it("strips double-quoted pwsh wrapper", () => {
+    expect(simplifyCommand("pwsh -Command \"Get-Process\"")).toBe("Get-Process");
+  });
+
+  it("handles pwsh.exe with path prefix", () => {
+    expect(simplifyCommand("pwsh.exe -Command 'ls -la'")).toBe("ls -la");
+  });
+
+  it("handles trailing whitespace", () => {
+    expect(simplifyCommand("pwsh -Command 'echo hello'  ")).toBe("echo hello");
+  });
+
+  it("returns non-pwsh commands unchanged", () => {
+    expect(simplifyCommand("git status")).toBe("git status");
+    expect(simplifyCommand("ls -la")).toBe("ls -la");
+  });
+});