@grackle-ai/web-components 0.107.2

package/src/components/tools/TodoCard.tsx

@@ -0,0 +1,200 @@
+import { type JSX, type ReactNode } from "react";
+import { Check, Circle, ListChecks } from "lucide-react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { ICON_SM, ICON_MD } from "../../utils/iconSize.js";
+import styles from "./toolCards.module.scss";
+import todoStyles from "./TodoCard.module.scss";
+
+/** A normalized todo item used for rendering. */
+interface TodoItem {
+  /** Display text (e.g. "Get bread"). */
+  content: string;
+  /** Present-tense description shown when in-progress (e.g. "Getting bread"). */
+  activeForm?: string;
+  /** Lifecycle status. */
+  status: "pending" | "in_progress" | "completed";
+}
+
+/** Checkbox pattern for Goose's markdown checklist: `- [x]`, `- [ ]`, `- [~]`, `- [/]` */
+const CHECKBOX_PATTERN: RegExp = /^[-*]\s*\[([ xX~!/])\]\s*(.+)$/;
+
+/**
+ * Parses todo items from args across all supported runtimes.
+ *
+ * Handles three formats:
+ * - Claude Code TodoWrite: `{ todos: [{ content, activeForm, status }] }`
+ * - Codex update_plan:     `{ plan: [{ step, status }] }`
+ * - Goose todo_write:      `{ content: "markdown checklist" }`
+ */
+function parseTodos(args: unknown): TodoItem[] {
+  if (args === undefined || typeof args !== "object" || args === null) {
+    return [];
+  }
+  const a = args as Record<string, unknown>;
+
+  // Claude Code: { todos: [...] }
+  if (Array.isArray(a.todos)) {
+    return (a.todos as unknown[])
+      .filter(
+        (item): item is Record<string, unknown> =>
+          typeof item === "object" &&
+          item !== null &&
+          typeof (item as Record<string, unknown>).content === "string" &&
+          typeof (item as Record<string, unknown>).status === "string",
+      )
+      .map((item) => ({
+        content: item.content as string,
+        activeForm: typeof item.activeForm === "string" ? item.activeForm : undefined,
+        status: normalizeStatus(item.status as string),
+      }));
+  }
+
+  // Codex: { plan: [{ step, status }] }
+  if (Array.isArray(a.plan)) {
+    return (a.plan as unknown[])
+      .filter(
+        (item): item is Record<string, unknown> =>
+          typeof item === "object" &&
+          item !== null &&
+          typeof (item as Record<string, unknown>).step === "string" &&
+          typeof (item as Record<string, unknown>).status === "string",
+      )
+      .map((item) => ({
+        content: item.step as string,
+        status: normalizeStatus(item.status as string),
+      }));
+  }
+
+  // Goose: { content: "markdown checklist" }
+  if (typeof a.content === "string") {
+    return parseMarkdownChecklist(a.content);
+  }
+
+  return [];
+}
+
+/** Normalizes status strings across runtimes to our three canonical values. */
+function normalizeStatus(status: string): "pending" | "in_progress" | "completed" {
+  switch (status.toLowerCase()) {
+    case "completed":
+    case "done":
+    case "complete":
+      return "completed";
+    case "in_progress":
+    case "in-progress":
+    case "working":
+    case "active":
+      return "in_progress";
+    default:
+      return "pending";
+  }
+}
+
+/** Parses a markdown checklist string (Goose format) into TodoItems. */
+function parseMarkdownChecklist(content: string): TodoItem[] {
+  const lines: string[] = content.split("\n");
+  const items: TodoItem[] = [];
+  for (const line of lines) {
+    const match: RegExpExecArray | null = CHECKBOX_PATTERN.exec(line.trim());
+    if (match) {
+      const marker: string = match[1];
+      const text: string = match[2].trim();
+      let status: "pending" | "in_progress" | "completed" = "pending";
+      if (marker === "x" || marker === "X") {
+        status = "completed";
+      } else if (marker === "~" || marker === "/" || marker === "!") {
+        status = "in_progress";
+      }
+      items.push({ content: text, status });
+    }
+  }
+  return items;
+}
+
+/** Status icon for a todo item. */
+function statusIcon(status: string): ReactNode {
+  switch (status) {
+    case "completed":
+      return <Check size={ICON_SM} />;
+    case "in_progress":
+      return <Circle size={ICON_SM} fill="currentColor" />;
+    default:
+      return <Circle size={ICON_SM} />;
+  }
+}
+
+/** Renders a TodoWrite tool call as a compact checklist. */
+export function TodoCard({ args }: ToolCardProps): JSX.Element {
+  const todos = parseTodos(args);
+  const completed: number = todos.filter((t) => t.status === "completed").length;
+  const inProgress: TodoItem | undefined = todos.find((t) => t.status === "in_progress");
+  const isEmpty: boolean = todos.length === 0;
+
+  return (
+    <div
+      className={`${styles.card} ${styles.cardBlue}`}
+      data-testid="tool-card-todo"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon}><ListChecks size={ICON_MD} /></span>
+        <span className={styles.toolName} style={{ color: "var(--accent-blue)" }}>
+          {isEmpty ? "Todos cleared" : "Todos"}
+        </span>
+        {!isEmpty && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-todo-progress">
+              {completed}/{todos.length}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* Progress bar */}
+      {!isEmpty && (
+        <div className={todoStyles.progressBar} data-testid="tool-card-todo-bar">
+          <div
+            className={todoStyles.progressFill}
+            style={{ width: `${(completed / todos.length) * 100}%` }}
+          />
+        </div>
+      )}
+
+      {/* Active task callout */}
+      {inProgress && (
+        <div className={todoStyles.activeTask} data-testid="tool-card-todo-active">
+          <span className={todoStyles.activeIcon}><Circle size={ICON_SM} fill="currentColor" /></span>
+          <span className={todoStyles.activeText}>
+            {inProgress.activeForm || inProgress.content}
+          </span>
+        </div>
+      )}
+
+      {/* Checklist */}
+      {!isEmpty && (
+        <div className={todoStyles.checklist} data-testid="tool-card-todo-list">
+          {todos.map((todo, i) => (
+            <div
+              key={i}
+              className={`${todoStyles.item} ${todoStyles[todo.status]}`}
+              data-testid="tool-card-todo-item"
+            >
+              <span className={todoStyles.itemIcon}>
+                {statusIcon(todo.status)}
+              </span>
+              <span className={todoStyles.itemText}>
+                {todo.content}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {isEmpty && (
+        <div className={todoStyles.emptyMessage}>
+          All items completed and cleared.
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { ToolCard } from "./ToolCard.js";
+
+const meta: Meta<typeof ToolCard> = {
+  component: ToolCard,
+  title: "Grackle/Tools/ToolCard",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** File read tool renders the file-read card variant. */
+export const FileRead: Story = {
+  args: {
+    tool: "Read",
+    args: { file_path: "/src/index.ts", limit: 50 },
+    result: "import express from 'express';\n\nconst app = express();\napp.listen(3000);",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-file-read")).toBeInTheDocument();
+    await expect(canvas.getByText("index.ts")).toBeInTheDocument();
+  },
+};
+
+/** Shell command tool renders the shell card variant. */
+export const ShellCommand: Story = {
+  args: {
+    tool: "Bash",
+    args: { command: "npm test" },
+    result: "[exit 0] All tests passed.",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-shell")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-command")).toHaveTextContent("npm test");
+  },
+};
+
+/** Unknown tool name falls through to the generic card. */
+export const GenericTool: Story = {
+  args: {
+    tool: "MyCustomTool",
+    args: { query: "search term" },
+    result: "Found 3 results.",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-generic")).toBeInTheDocument();
+    await expect(canvas.getByText("MyCustomTool")).toBeInTheDocument();
+  },
+};
+
+/** MCP finding tool (Claude Code format) routes to FindingCard. */
+export const McpFinding: Story = {
+  name: "MCP finding_post (Claude Code)",
+  args: {
+    tool: "mcp__grackle__finding_post",
+    args: { title: "Test finding", category: "insight" },
+    result: JSON.stringify({ id: "f1", title: "Test finding", category: "insight", tags: [] }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
+  },
+};
+
+/** MCP finding tool (Copilot format) routes to FindingCard. */
+export const McpFindingCopilot: Story = {
+  name: "MCP finding_post (Copilot)",
+  args: {
+    tool: "grackle-finding_post",
+    args: { title: "Copilot finding", category: "bug" },
+    result: JSON.stringify({ id: "f2", title: "Copilot finding", category: "bug", tags: [] }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
+  },
+};
+
+/** MCP task tool routes to TaskCard. */
+export const McpTask: Story = {
+  name: "MCP task_list",
+  args: {
+    tool: "mcp__grackle__task_list",
+    args: {},
+    result: JSON.stringify([{ id: "t1", title: "Test", status: "working" }]),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-task")).toBeInTheDocument();
+  },
+};
+
+/** MCP workpad tool routes to WorkpadCard. */
+export const McpWorkpad: Story = {
+  name: "MCP workpad_write",
+  args: {
+    tool: "mcp__grackle__workpad_write",
+    args: { status: "done", summary: "All done" },
+    result: JSON.stringify({ taskId: "t1", workpad: { status: "done", summary: "All done" } }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-workpad")).toBeInTheDocument();
+  },
+};
+
+/** MCP knowledge tool routes to KnowledgeCard. */
+export const McpKnowledge: Story = {
+  name: "MCP knowledge_search",
+  args: {
+    tool: "mcp__grackle__knowledge_search",
+    args: { query: "auth" },
+    result: JSON.stringify({ results: [], neighbors: [], neighborEdges: [] }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-knowledge")).toBeInTheDocument();
+  },
+};
+
+/** MCP IPC tool routes to IpcCard. */
+export const McpIpc: Story = {
+  name: "MCP ipc_spawn",
+  args: {
+    tool: "mcp__grackle__ipc_spawn",
+    args: { prompt: "Run tests", pipe: "detach", environmentId: "local" },
+    result: JSON.stringify({ sessionId: "sess-1" }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-ipc")).toBeInTheDocument();
+  },
+};
+
+/** ToolSearch routes to ToolSearchCard. */
+export const ToolSearchRouting: Story = {
+  name: "ToolSearch routing",
+  args: {
+    tool: "ToolSearch",
+    args: { query: "select:Read,Write" },
+    result: "Read: reads a file\nWrite: writes a file",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-tool-search")).toBeInTheDocument();
+  },
+};
+
+/** Claude Code Agent tool routes to the agent card. */
+export const AgentTool: Story = {
+  args: {
+    tool: "Agent",
+    args: { subagent_type: "Explore", description: "Find files", prompt: "Search for files." },
+    result: "Found 5 files.",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-agent")).toBeInTheDocument();
+  },
+};
+
+/** Copilot task tool routes to the agent card. */
+export const CopilotTaskTool: Story = {
+  args: {
+    tool: "task",
+    args: { agent_type: "explore", name: "search-task", prompt: "Search." },
+    result: "Agent started.",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-agent")).toBeInTheDocument();
+  },
+};
+
+/** Copilot read_agent tool routes to the agent card. */
+export const CopilotReadAgentTool: Story = {
+  args: {
+    tool: "read_agent",
+    args: { agent_id: "search-task" },
+    result: "Agent completed. agent_id: search-task, status: completed, elapsed: 3s",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-agent")).toBeInTheDocument();
+  },
+};

package/src/components/tools/ToolCard.tsx

@@ -0,0 +1,60 @@
+import type { JSX } from "react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { classifyTool } from "./classifyTool.js";
+import { FileReadCard } from "./FileReadCard.js";
+import { FileEditCard } from "./FileEditCard.js";
+import { ShellCard } from "./ShellCard.js";
+import { SearchCard } from "./SearchCard.js";
+import { TodoCard } from "./TodoCard.js";
+import { MetadataCard } from "./MetadataCard.js";
+import { FindingCard } from "./FindingCard.js";
+import { TaskCard } from "./TaskCard.js";
+import { WorkpadCard } from "./WorkpadCard.js";
+import { KnowledgeCard } from "./KnowledgeCard.js";
+import { IpcCard } from "./IpcCard.js";
+import { ToolSearchCard } from "./ToolSearchCard.js";
+import { GenericToolCard } from "./GenericToolCard.js";
+import { AgentToolCard } from "./AgentToolCard.js";
+
+/**
+ * Routes a tool event to the appropriate specialized card component.
+ *
+ * This is a thin classifier + router — all rendering logic lives in the
+ * individual card components, which are independently testable via Storybook.
+ */
+export function ToolCard(props: ToolCardProps): JSX.Element {
+  const category = classifyTool(props.tool);
+
+  switch (category) {
+    case "file-read":
+      return <FileReadCard {...props} />;
+    case "file-edit":
+      return <FileEditCard {...props} />;
+    case "file-write":
+      return <FileReadCard {...props} writeVariant />;
+    case "shell":
+      return <ShellCard {...props} />;
+    case "search":
+      return <SearchCard {...props} />;
+    case "todo":
+      return <TodoCard {...props} />;
+    case "metadata":
+      return <MetadataCard {...props} />;
+    case "finding":
+      return <FindingCard {...props} />;
+    case "task":
+      return <TaskCard {...props} />;
+    case "workpad":
+      return <WorkpadCard {...props} />;
+    case "knowledge":
+      return <KnowledgeCard {...props} />;
+    case "ipc":
+      return <IpcCard {...props} />;
+    case "tool-search":
+      return <ToolSearchCard {...props} />;
+    case "agent":
+      return <AgentToolCard {...props} />;
+    default:
+      return <GenericToolCard {...props} />;
+  }
+}

package/src/components/tools/ToolCardProps.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared props interface for all tool card sub-components.
+ *
+ * The ToolCard router passes these through uniformly to whichever
+ * specialized card component handles the tool category.
+ */
+
+/** Props accepted by every tool card sub-component. */
+export interface ToolCardProps {
+  /** Tool name as reported by the runtime (e.g. "Read", "view", "Bash"). */
+  tool: string;
+  /** Parsed args object from the tool_use event. */
+  args: unknown;
+  /** Tool result content string (undefined if still in-progress). */
+  result?: string;
+  /** Whether the tool result is an error. */
+  isError?: boolean;
+  /** Extended result content (e.g. Copilot's detailedContent with diffs). */
+  detailedResult?: string;
+}

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { ToolSearchCard } from "./ToolSearchCard.js";
+
+const meta: Meta<typeof ToolSearchCard> = {
+  component: ToolSearchCard,
+  title: "Tools/ToolSearchCard",
+};
+export default meta;
+type Story = StoryObj<typeof ToolSearchCard>;
+
+export const InProgress: Story = {
+  name: "ToolSearch - in progress",
+  args: {
+    tool: "ToolSearch",
+    args: { query: "select:mcp__grackle__finding_post,mcp__grackle__workpad_write", max_results: 3 },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-tool-search")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-tool-search-query")).toBeInTheDocument();
+  },
+};
+
+export const WithResults: Story = {
+  name: "ToolSearch - with results",
+  args: {
+    tool: "ToolSearch",
+    args: { query: "select:mcp__grackle__finding_post", max_results: 3 },
+    result: [
+      "mcp__grackle__finding_post:",
+      "  Post a new finding to the workspace.",
+      "  Parameters:",
+      "    title (string, required): Finding title",
+      "    category (string, optional): Category (bug, insight, decision)",
+      "    content (string, optional): Detailed content",
+      "    tags (array, optional): Tags for categorization",
+      "",
+      "mcp__grackle__workpad_write:",
+      "  Write to the task workpad.",
+      "  Parameters:",
+      "    status (string, optional): Task status",
+      "    summary (string, optional): Summary text",
+    ].join("\n"),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-tool-search")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-tool-search-result")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-tool-search-count")).toBeInTheDocument();
+  },
+};
+
+export const LongResultExpandable: Story = {
+  name: "ToolSearch - long result with expand",
+  args: {
+    tool: "ToolSearch",
+    args: { query: "grackle tools", max_results: 10 },
+    result: Array.from({ length: 20 }, (_, i) => `Line ${i + 1}: tool_${i + 1} definition`).join("\n"),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-tool-search")).toBeInTheDocument();
+    const toggle = canvas.getByTestId("tool-card-toggle");
+    await expect(toggle).toBeInTheDocument();
+    await expect(toggle).toHaveTextContent("12 more lines");
+    await userEvent.click(toggle);
+    await expect(toggle).toHaveTextContent("collapse");
+  },
+};
+
+export const ErrorState: Story = {
+  name: "ToolSearch - error",
+  args: {
+    tool: "ToolSearch",
+    args: { query: "nonexistent" },
+    result: "No tools found matching query",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-tool-search")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};

package/src/components/tools/ToolSearchCard.tsx

@@ -0,0 +1,86 @@
+import { useState, type JSX } from "react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import styles from "./toolCards.module.scss";
+
+/** Extracts query from ToolSearch args. */
+function getQuery(args: unknown): string {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return "";
+  }
+  const a = args as Record<string, unknown>;
+  return typeof a.query === "string" ? a.query : "";
+}
+
+/** Number of lines shown when collapsed. */
+const PREVIEW_LINES: number = 8;
+
+/** Renders a ToolSearch call (Claude Code built-in) with query and results. */
+export function ToolSearchCard({ args, result, isError }: ToolCardProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const query = getQuery(args);
+  const inProgress = result === undefined;
+
+  const resultLines = result?.split("\n") ?? [];
+  const hasMore = resultLines.length > PREVIEW_LINES;
+  const displayResult = expanded ? result : resultLines.slice(0, PREVIEW_LINES).join("\n");
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardNeutral} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-tool-search"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon} aria-hidden="true">&#x1F527;</span>
+        <span className={styles.toolName}>ToolSearch</span>
+        {query && (
+          <span className={styles.fileName} data-testid="tool-card-tool-search-query">
+            &quot;{query}&quot;
+          </span>
+        )}
+        {!inProgress && !isError && result && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-tool-search-count">
+              {resultLines.length} lines
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* In-progress: show query */}
+      {inProgress && !query && 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>
+      )}
+
+      {/* Result text */}
+      {!isError && !inProgress && result && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-tool-search-result">
+            {displayResult}
+          </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" : `${resultLines.length - PREVIEW_LINES} more lines`}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}