@grackle-ai/web-components 0.107.2

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

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { GenericToolCard } from "./GenericToolCard.js";
+
+const meta: Meta<typeof GenericToolCard> = {
+  component: GenericToolCard,
+  title: "Grackle/Tools/GenericToolCard",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const McpTool: Story = {
+  name: "MCP tool - formatted name",
+  args: {
+    tool: "mcp__github__create_pull_request",
+    args: { title: "Add auth middleware", base: "main", head: "feat/auth" },
+    result: "PR #142 created successfully",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-generic")).toBeInTheDocument();
+    // MCP name should be formatted as "server / tool"
+    await expect(canvas.getByText("github / create_pull_request")).toBeInTheDocument();
+  },
+};
+
+export const UnknownTool: Story = {
+  name: "Unknown tool",
+  args: {
+    tool: "custom_tool",
+    args: { query: "find all TODOs" },
+    result: "Found 12 TODO comments across 5 files",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("custom_tool")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-result")).toHaveTextContent("Found 12 TODO comments");
+  },
+};
+
+export const InProgress: Story = {
+  name: "In-progress - shows formatted args",
+  args: {
+    tool: "WebFetch",
+    args: { url: "https://api.example.com/data" },
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-generic");
+    await expect(card.className).toContain("inProgress");
+    await expect(canvas.getByTestId("tool-card-args")).toBeInTheDocument();
+  },
+};
+
+export const LongResult: Story = {
+  name: "Long result - expand/collapse",
+  args: {
+    tool: "WebSearch",
+    args: { query: "nodejs best practices 2026" },
+    result: "Result 1: Use ESM modules\nResult 2: Adopt Node 22\nResult 3: Use built-in test runner\nResult 4: Prefer fetch over axios\nResult 5: Use structured logging\nResult 6: Type-check with tsc\nResult 7: Use Biome for formatting\nResult 8: Pin dependency versions",
+  },
+  play: async ({ canvas }) => {
+    const toggle = canvas.getByTestId("tool-card-toggle");
+    await expect(toggle).toBeInTheDocument();
+    await userEvent.click(toggle);
+    await expect(toggle.textContent).toContain("collapse");
+  },
+};
+
+export const ErrorResult: Story = {
+  args: {
+    tool: "mcp__slack__send_message",
+    args: { channel: "#deploys", message: "Deployed v2.0" },
+    result: "Error: channel not found",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+    const card = canvas.getByTestId("tool-card-generic");
+    await expect(card.className).toContain("cardRed");
+  },
+};

package/src/components/tools/GenericToolCard.tsx

@@ -0,0 +1,111 @@
+import { useState, type JSX } from "react";
+import { ChevronRight, Cog } from "lucide-react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { ICON_SM, ICON_MD } from "../../utils/iconSize.js";
+import styles from "./toolCards.module.scss";
+
+/** Formats an MCP tool name for display: `mcp__server__tool` → `server / tool`. */
+export function formatToolName(tool: string): { display: string; isMcp: boolean } {
+  const mcpMatch = /^mcp__([^_]+(?:_[^_]+)*)__(.+)$/.exec(tool);
+  if (mcpMatch) {
+    return { display: `${mcpMatch[1]} / ${mcpMatch[2]}`, isMcp: true };
+  }
+  return { display: tool, isMcp: false };
+}
+
+/** Extracts a one-line human-readable summary of tool arguments. */
+function argsPreview(args: unknown): string {
+  if (args === null || args === undefined) {
+    return "";
+  }
+  if (typeof args !== "object") {
+    return String(args);
+  }
+  const a = args as Record<string, unknown>;
+  // Common patterns
+  if (typeof a.command === "string") { return a.command; }
+  if (typeof a.file_path === "string") { return a.file_path; }
+  if (typeof a.path === "string") { return a.path; }
+  if (typeof a.query === "string") { return a.query; }
+  if (typeof a.url === "string") { return a.url; }
+  // Fallback
+  try {
+    const json = JSON.stringify(args);
+    return json.length > 120 ? `${json.slice(0, 120)}\u2026` : json;
+  } catch {
+    return "";
+  }
+}
+
+/** Number of result lines shown when collapsed. */
+const PREVIEW_LINES: number = 5;
+
+/** Renders a generic/unknown tool call with formatted args and result. */
+export function GenericToolCard({ tool, args, result, isError }: ToolCardProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const { display } = formatToolName(tool);
+  const preview = argsPreview(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");
+
+  // Format args as pretty JSON for expanded view
+  let argsFormatted = "";
+  if (args !== null && args !== undefined) {
+    try {
+      argsFormatted = JSON.stringify(args, null, 2);
+    } catch {
+      argsFormatted = String(args);
+    }
+  }
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardBlue} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-generic"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon}><Cog size={ICON_MD} aria-hidden="true" /></span>
+        <span className={styles.toolName} style={{ color: "var(--accent-blue)" }}>{display}</span>
+        {preview && (
+          <span className={styles.fileName}>{preview}</span>
+        )}
+      </div>
+
+      {/* Show formatted args when no result yet */}
+      {inProgress && argsFormatted && (
+        <pre className={styles.pre} data-testid="tool-card-args">
+          {argsFormatted}
+        </pre>
+      )}
+
+      {isError && result && (
+        <pre className={styles.pre} data-testid="tool-card-error">
+          {result}
+        </pre>
+      )}
+
+      {!isError && !inProgress && result && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-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 : ""}`} aria-hidden="true"><ChevronRight size={ICON_SM} /></span>
+              {expanded ? "collapse" : `${resultLines.length - PREVIEW_LINES} more lines`}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { IpcCard } from "./IpcCard.js";
+
+const meta: Meta<typeof IpcCard> = {
+  component: IpcCard,
+  title: "Tools/IpcCard",
+};
+export default meta;
+type Story = StoryObj<typeof IpcCard>;
+
+export const SpawnInProgress: Story = {
+  name: "ipc_spawn - in progress",
+  args: {
+    tool: "mcp__grackle__ipc_spawn",
+    args: {
+      prompt: "Investigate the authentication module and report findings",
+      pipe: "async",
+      environmentId: "local",
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-ipc")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-ipc-info")).toHaveTextContent("[async]");
+    await expect(canvas.getByTestId("tool-card-ipc-prompt")).toBeInTheDocument();
+  },
+};
+
+export const SpawnCompleted: Story = {
+  name: "ipc_spawn - async result",
+  args: {
+    tool: "mcp__grackle__ipc_spawn",
+    args: { prompt: "Run tests", pipe: "async", environmentId: "local" },
+    result: JSON.stringify({
+      sessionId: "abc123-def456",
+      fd: 3,
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-ipc")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-ipc-session")).toHaveTextContent("abc123-def456");
+  },
+};
+
+export const WriteToFd: Story = {
+  name: "ipc_write - success",
+  args: {
+    tool: "mcp__grackle__ipc_write",
+    args: { fd: 3, message: "Please also check the error handling paths" },
+    result: JSON.stringify({ success: true }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-ipc")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-ipc-info")).toHaveTextContent("fd:3");
+    await expect(canvas.getByTestId("tool-card-ipc-success")).toHaveTextContent("ok");
+  },
+};
+
+export const CloseFd: Story = {
+  name: "ipc_close - success",
+  args: {
+    tool: "mcp__grackle__ipc_close",
+    args: { fd: 3 },
+    result: JSON.stringify({ success: true, stopped: true }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-ipc")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-ipc-info")).toHaveTextContent("fd:3");
+  },
+};
+
+export const ListFds: Story = {
+  name: "ipc_list_fds - with descriptors",
+  args: {
+    tool: "mcp__grackle__ipc_list_fds",
+    args: {},
+    result: JSON.stringify({
+      fds: [
+        { fd: 3, streamName: "child-1", permission: "rw", deliveryMode: "async", owned: true, targetSessionId: "sess-1" },
+        { fd: 4, streamName: "child-2", permission: "r", deliveryMode: "detach", owned: false, targetSessionId: "sess-2" },
+      ],
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-ipc")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-ipc-fd-count")).toHaveTextContent("2 fds");
+    await expect(canvas.getByTestId("tool-card-ipc-fds")).toBeInTheDocument();
+  },
+};
+
+export const Terminate: Story = {
+  name: "ipc_terminate - success",
+  args: {
+    tool: "mcp__grackle__ipc_terminate",
+    args: { fd: 3 },
+    result: JSON.stringify({ success: true, targetSessionId: "sess-1" }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-ipc")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-ipc-success")).toHaveTextContent("ok");
+  },
+};
+
+export const CreateStream: Story = {
+  name: "ipc_create_stream - result",
+  args: {
+    tool: "mcp__grackle__ipc_create_stream",
+    args: { name: "broadcast-channel" },
+    result: JSON.stringify({ streamId: "stream-abc", fd: 5 }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-ipc")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-ipc-info")).toHaveTextContent("broadcast-channel");
+  },
+};
+
+export const ErrorState: Story = {
+  name: "ipc_write - error",
+  args: {
+    tool: "mcp__grackle__ipc_write",
+    args: { fd: 99, message: "hello" },
+    result: "gRPC error [NotFound]: fd 99 not found",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-ipc")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};

package/src/components/tools/IpcCard.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 file descriptor entry from ipc_list_fds. */
+interface FdEntry {
+  fd?: number;
+  streamName?: string;
+  permission?: string;
+  deliveryMode?: string;
+  owned?: boolean;
+  targetSessionId?: string;
+}
+
+/** Extracts IPC-relevant fields from tool args. */
+function getArgs(args: unknown): { fd?: number; pipe?: string; prompt?: string; name?: string; message?: string } {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return {};
+  }
+  const a = args as Record<string, unknown>;
+  return {
+    fd: typeof a.fd === "number" ? a.fd : undefined,
+    pipe: typeof a.pipe === "string" ? a.pipe : undefined,
+    prompt: typeof a.prompt === "string" ? a.prompt : undefined,
+    name: typeof a.name === "string" ? a.name : undefined,
+    message: typeof a.message === "string" ? a.message : undefined,
+  };
+}
+
+/** Parses IPC result JSON. */
+function parseResult(result: string | undefined): { sessionId?: string; fd?: number; fds?: FdEntry[]; success?: boolean; output?: string } {
+  if (!result) {
+    return {};
+  }
+  try {
+    const parsed: unknown = JSON.parse(result);
+    if (typeof parsed !== "object" || parsed === null) {
+      return {};
+    }
+    const obj = parsed as Record<string, unknown>;
+    return {
+      sessionId: typeof obj.sessionId === "string" ? obj.sessionId : undefined,
+      fd: typeof obj.fd === "number" ? obj.fd : undefined,
+      fds: Array.isArray(obj.fds) ? (obj.fds as unknown[]).filter((v): v is FdEntry => v !== null && typeof v === "object") : undefined,
+      success: typeof obj.success === "boolean" ? obj.success : undefined,
+      output: typeof obj.output === "string" ? obj.output : undefined,
+    };
+  } catch { /* fall through */ }
+  return {};
+}
+
+/** Renders an IPC tool call with structured display. */
+export function IpcCard({ 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);
+
+  // Build a descriptor for the header
+  let headerInfo = "";
+  if (argData.pipe) {
+    headerInfo = `[${argData.pipe}]`;
+  } else if (argData.fd !== undefined) {
+    headerInfo = `fd:${argData.fd}`;
+  } else if (argData.name) {
+    headerInfo = `"${argData.name}"`;
+  }
+
+  // Prompt snippet for ipc_spawn
+  const promptSnippet = argData.prompt
+    ? (argData.prompt.length > 60 ? `${argData.prompt.slice(0, 60)}...` : argData.prompt)
+    : undefined;
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardOrange} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-ipc"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon} aria-hidden="true">&#x1F500;</span>
+        <span className={styles.toolName} style={{ color: "var(--accent-yellow, #fbbf24)" }}>
+          {bareName}
+        </span>
+        {headerInfo && (
+          <span className={styles.fileName} data-testid="tool-card-ipc-info">
+            {headerInfo}
+          </span>
+        )}
+        {promptSnippet && (
+          <span className={styles.fileName} title={argData.prompt} data-testid="tool-card-ipc-prompt">
+            {promptSnippet}
+          </span>
+        )}
+        {resultData.fds && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-ipc-fd-count">
+              {resultData.fds.length} {resultData.fds.length === 1 ? "fd" : "fds"}
+            </span>
+          </>
+        )}
+        {resultData.success !== undefined && !resultData.fds && (
+          <>
+            <span className={styles.spacer} />
+            <span
+              className={styles.badge}
+              style={{ color: resultData.success ? "var(--accent-green, #4ade80)" : "var(--accent-red, #f87171)" }}
+              data-testid="tool-card-ipc-success"
+            >
+              {resultData.success ? "\u2713 ok" : "\u2717 failed"}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* In-progress: show args if nothing else to show */}
+      {inProgress && !promptSnippet && !headerInfo && 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>
+      )}
+
+      {/* Session ID from ipc_spawn */}
+      {!isError && resultData.sessionId && (
+        <div className={styles.pre} style={{ padding: "4px 8px", fontSize: "0.85em" }} data-testid="tool-card-ipc-session">
+          session: {resultData.sessionId}
+          {resultData.fd !== undefined && ` | fd: ${resultData.fd}`}
+        </div>
+      )}
+
+      {/* Output from sync ipc_spawn */}
+      {!isError && resultData.output && (
+        <pre className={styles.pre} data-testid="tool-card-ipc-output">
+          {resultData.output}
+        </pre>
+      )}
+
+      {/* FD listing from ipc_list_fds */}
+      {!isError && resultData.fds && resultData.fds.length > 0 && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-ipc-fds">
+            {(expanded ? resultData.fds : resultData.fds.slice(0, 5)).map((f) => {
+              const parts = [`fd:${f.fd ?? "?"}`, f.permission ?? "", f.deliveryMode ?? ""];
+              if (f.streamName) {
+                parts.push(f.streamName);
+              }
+              if (f.owned) {
+                parts.push("(owned)");
+              }
+              return parts.filter(Boolean).join(" ");
+            }).join("\n")}
+          </pre>
+          {resultData.fds.length > 5 && (
+            <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" : `${resultData.fds.length - 5} more fds`}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { KnowledgeCard } from "./KnowledgeCard.js";
+
+const meta: Meta<typeof KnowledgeCard> = {
+  component: KnowledgeCard,
+  title: "Tools/KnowledgeCard",
+};
+export default meta;
+type Story = StoryObj<typeof KnowledgeCard>;
+
+export const SearchInProgress: Story = {
+  name: "knowledge_search - in progress",
+  args: {
+    tool: "mcp__grackle__knowledge_search",
+    args: { query: "authentication", limit: 5 },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-knowledge")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-knowledge-query")).toHaveTextContent("authentication");
+  },
+};
+
+export const SearchWithResults: Story = {
+  name: "knowledge_search - with results",
+  args: {
+    tool: "mcp__grackle__knowledge_search",
+    args: { query: "authentication" },
+    result: JSON.stringify({
+      results: [
+        { score: 0.92, node: { id: "n1", title: "Auth middleware design", category: "decision" } },
+        { score: 0.85, node: { id: "n2", title: "Session token rotation", category: "insight" } },
+        { score: 0.78, node: { id: "n3", title: "Pairing code auth flow", category: "reference" } },
+      ],
+      neighbors: [],
+      neighborEdges: [],
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-knowledge")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-knowledge-count")).toHaveTextContent("3 results");
+    await expect(canvas.getByTestId("tool-card-knowledge-results")).toBeInTheDocument();
+  },
+};
+
+export const SearchEmpty: Story = {
+  name: "knowledge_search - no results",
+  args: {
+    tool: "mcp__grackle__knowledge_search",
+    args: { query: "nonexistent topic" },
+    result: JSON.stringify({ results: [], neighbors: [], neighborEdges: [] }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-knowledge")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-knowledge-count")).toHaveTextContent("0 results");
+  },
+};
+
+export const GetNode: Story = {
+  name: "knowledge_get_node - with edges",
+  args: {
+    tool: "mcp__grackle__knowledge_get_node",
+    args: { id: "n1" },
+    result: JSON.stringify({
+      node: {
+        id: "n1",
+        title: "Auth middleware design",
+        category: "decision",
+        kind: "content",
+        content: "The auth middleware uses pairing-code flow for web UI and Bearer token for gRPC.",
+      },
+      edges: [
+        { fromId: "n1", toId: "n2", type: "RELATES_TO" },
+        { fromId: "n1", toId: "n3", type: "DEPENDS_ON" },
+      ],
+      neighbors: [],
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-knowledge")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-knowledge-id")).toHaveTextContent("n1");
+    await expect(canvas.getByTestId("tool-card-knowledge-edges")).toHaveTextContent("2 edges");
+    await expect(canvas.getByTestId("tool-card-knowledge-node")).toBeInTheDocument();
+  },
+};
+
+export const CopilotFormat: Story = {
+  name: "knowledge_search - Copilot tool name",
+  args: {
+    tool: "grackle-knowledge_search",
+    args: { query: "authentication" },
+    result: JSON.stringify({ results: [], neighbors: [], neighborEdges: [] }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-knowledge")).toBeInTheDocument();
+    await expect(canvas.getByText("knowledge_search")).toBeInTheDocument();
+  },
+};
+
+export const ErrorState: Story = {
+  name: "knowledge_search - error",
+  args: {
+    tool: "mcp__grackle__knowledge_search",
+    args: { query: "test" },
+    result: "UNAVAILABLE: knowledge service not running",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-knowledge")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};