@grackle-ai/web-components 0.107.2

package/src/components/tools/KnowledgeCard.tsx

@@ -0,0 +1,165 @@
+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 knowledge search result node. */
+interface KnowledgeResult {
+  score?: number;
+  node?: KnowledgeNode;
+}
+
+/** Shape of a knowledge graph node. */
+interface KnowledgeNode {
+  id?: string;
+  kind?: string;
+  label?: string;
+  title?: string;
+  category?: string;
+  content?: string;
+  tags?: string[];
+}
+
+/** Extracts knowledge-relevant fields from tool args. */
+function getArgs(args: unknown): { query?: string; id?: string } {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return {};
+  }
+  const a = args as Record<string, unknown>;
+  return {
+    query: typeof a.query === "string" ? a.query : undefined,
+    id: typeof a.id === "string" ? a.id : undefined,
+  };
+}
+
+/** Parses knowledge result. Could be search results or a single node. */
+function parseResult(result: string | undefined): { results?: KnowledgeResult[]; node?: KnowledgeNode; edgeCount?: number } {
+  if (!result) {
+    return {};
+  }
+  try {
+    const parsed: unknown = JSON.parse(result);
+    if (typeof parsed !== "object" || parsed === null) {
+      return {};
+    }
+    const obj = parsed as Record<string, unknown>;
+    // knowledge_search returns { results: [...], neighbors, neighborEdges }
+    if (Array.isArray(obj.results)) {
+      return { results: (obj.results as unknown[]).filter((v): v is KnowledgeResult => v !== null && typeof v === "object") };
+    }
+    // knowledge_get_node returns { node, edges, neighbors }
+    if (typeof obj.node === "object" && obj.node !== null) {
+      const edges = Array.isArray(obj.edges) ? obj.edges.length : 0;
+      return { node: obj.node as KnowledgeNode, edgeCount: edges };
+    }
+    // knowledge_create_node returns { id, title, category }
+    if (typeof obj.id === "string") {
+      return { node: obj as KnowledgeNode };
+    }
+  } catch { /* fall through */ }
+  return {};
+}
+
+/** Number of results shown when collapsed. */
+const PREVIEW_COUNT: number = 5;
+
+/** Renders a knowledge tool call (knowledge_search, knowledge_get_node) with structured display. */
+export function KnowledgeCard({ 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);
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardPurple} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-knowledge"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon} aria-hidden="true">&#x1F9E0;</span>
+        <span className={styles.toolName} style={{ color: "var(--accent-purple, #a78bfa)" }}>
+          {bareName}
+        </span>
+        {argData.query && (
+          <span className={styles.fileName} data-testid="tool-card-knowledge-query">
+            &quot;{argData.query}&quot;
+          </span>
+        )}
+        {argData.id && !argData.query && (
+          <span className={styles.fileName} data-testid="tool-card-knowledge-id">
+            {argData.id}
+          </span>
+        )}
+        {resultData.results && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-knowledge-count">
+              {resultData.results.length} {resultData.results.length === 1 ? "result" : "results"}
+            </span>
+          </>
+        )}
+        {resultData.node && resultData.edgeCount !== undefined && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-knowledge-edges">
+              {resultData.edgeCount} {resultData.edgeCount === 1 ? "edge" : "edges"}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* In-progress: show args */}
+      {inProgress && args !== null && args !== undefined && !argData.query && !argData.id && (
+        <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>
+      )}
+
+      {/* Search results */}
+      {!isError && resultData.results && resultData.results.length > 0 && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-knowledge-results">
+            {(expanded ? resultData.results : resultData.results.slice(0, PREVIEW_COUNT)).map((r) => {
+              const label = r.node?.title ?? r.node?.label ?? r.node?.id ?? "node";
+              const score = r.score !== undefined ? ` (${(r.score * 100).toFixed(0)}%)` : "";
+              return `${label}${score}`;
+            }).join("\n")}
+          </pre>
+          {resultData.results.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" : `${resultData.results.length - PREVIEW_COUNT} more results`}
+            </button>
+          )}
+        </>
+      )}
+
+      {/* Single node */}
+      {!isError && resultData.node && !resultData.results && (
+        <pre className={styles.pre} data-testid="tool-card-knowledge-node">
+          {[
+            resultData.node.id ? `id: ${resultData.node.id}` : null,
+            resultData.node.title ? `title: ${resultData.node.title}` : null,
+            resultData.node.category ? `category: ${resultData.node.category}` : null,
+            resultData.node.kind ? `kind: ${resultData.node.kind}` : null,
+            resultData.node.content ? `content: ${resultData.node.content.length > 100 ? resultData.node.content.slice(0, 100) + "..." : resultData.node.content}` : null,
+          ].filter(Boolean).join("\n")}
+        </pre>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { MetadataCard } from "./MetadataCard.js";
+
+const meta: Meta<typeof MetadataCard> = {
+  component: MetadataCard,
+  title: "Grackle/Tools/MetadataCard",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ReportIntent: Story = {
+  args: {
+    tool: "report_intent",
+    args: { intent: "Updating README getting started" },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-metadata")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-metadata")).toHaveTextContent("Updating README getting started");
+  },
+};
+
+export const UnknownMetadata: Story = {
+  args: {
+    tool: "report_intent",
+    args: { description: "Planning implementation" },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-metadata")).toHaveTextContent("Planning implementation");
+  },
+};

package/src/components/tools/MetadataCard.tsx

@@ -0,0 +1,39 @@
+import type { JSX } from "react";
+import { CornerDownRight } from "lucide-react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { ICON_SM } from "../../utils/iconSize.js";
+import styles from "./toolCards.module.scss";
+
+/** Extracts a human-readable summary from metadata tool args. */
+function getSummary(tool: string, args: unknown): string {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return "";
+  }
+  const a = args as Record<string, unknown>;
+
+  // report_intent: show the intent value
+  if (typeof a.intent === "string") {
+    return a.intent;
+  }
+
+  // Generic: show first string value
+  for (const value of Object.values(a)) {
+    if (typeof value === "string") {
+      return value;
+    }
+  }
+
+  return tool;
+}
+
+/** Renders a metadata/intent tool call as a minimal inline annotation. */
+export function MetadataCard({ tool, args }: ToolCardProps): JSX.Element {
+  const summary = getSummary(tool, args);
+
+  return (
+    <div className={styles.metadata} data-testid="tool-card-metadata">
+      <span className={styles.metadataPrefix}><CornerDownRight size={ICON_SM} /></span>
+      {summary}
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { SearchCard } from "./SearchCard.js";
+
+const meta: Meta<typeof SearchCard> = {
+  component: SearchCard,
+  title: "Grackle/Tools/SearchCard",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const GrepWithMatches: Story = {
+  name: "Grep - multiple matches",
+  args: {
+    tool: "Grep",
+    args: { pattern: "verifyToken", path: "src/" },
+    result: "src/middleware/auth.ts:14:  export function verifyToken(req: Request) {\nsrc/routes/protected.ts:8:  const user = verifyToken(req);\nsrc/tests/auth.test.ts:22:  describe('verifyToken', () => {",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-search")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-pattern")).toHaveTextContent('"verifyToken"');
+    await expect(canvas.getByTestId("tool-card-search-path")).toHaveTextContent("in src/");
+    await expect(canvas.getByTestId("tool-card-match-count")).toHaveTextContent("3 matches");
+  },
+};
+
+export const GlobFileList: Story = {
+  name: "Glob - file list",
+  args: {
+    tool: "Glob",
+    args: { pattern: "src/**/*.test.ts" },
+    result: "src/auth.test.ts\nsrc/routes.test.ts\nsrc/middleware.test.ts\nsrc/utils.test.ts",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-match-count")).toHaveTextContent("4 matches");
+  },
+};
+
+export const NoMatches: Story = {
+  name: "No matches",
+  args: {
+    tool: "Grep",
+    args: { pattern: "nonExistentSymbol", path: "src/" },
+    result: "",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.queryByTestId("tool-card-results")).not.toBeInTheDocument();
+    await expect(canvas.queryByTestId("tool-card-match-count")).not.toBeInTheDocument();
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    tool: "Grep",
+    args: { pattern: "TODO", path: "." },
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-search");
+    await expect(card.className).toContain("inProgress");
+  },
+};
+
+export const ErrorResult: Story = {
+  args: {
+    tool: "Grep",
+    args: { pattern: "[invalid regex", path: "src/" },
+    result: "Error: invalid regex pattern",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};

package/src/components/tools/SearchCard.tsx

@@ -0,0 +1,86 @@
+import { useState, type JSX } from "react";
+import { ChevronRight, Search } 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 search-relevant fields from tool args. */
+function getSearchInfo(args: unknown): { pattern: string; path: string } {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return { pattern: "", path: "" };
+  }
+  const a = args as Record<string, unknown>;
+  const pattern = typeof a.pattern === "string" ? a.pattern : "";
+  const path = typeof a.path === "string" ? a.path : "";
+  return { pattern, path };
+}
+
+/** Number of result lines shown when collapsed. */
+const PREVIEW_LINES: number = 5;
+
+/** Renders a search tool call (Grep, Glob) with pattern and match results. */
+export function SearchCard({ tool, args, result, isError }: ToolCardProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const { pattern, path } = getSearchInfo(args);
+  const inProgress = result === undefined;
+
+  const lines = result?.split("\n").filter((l) => l.length > 0) ?? [];
+  const hasMore = lines.length > PREVIEW_LINES;
+  const displayLines = expanded ? lines : lines.slice(0, PREVIEW_LINES);
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardPurple} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-search"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon}><Search size={ICON_MD} /></span>
+        <span className={styles.toolName} style={{ color: "var(--accent-purple, #a78bfa)" }}>{tool}</span>
+        {pattern && (
+          <span className={styles.fileName} data-testid="tool-card-pattern">
+            &quot;{pattern}&quot;
+          </span>
+        )}
+        {path && (
+          <span className={styles.fileName} style={{ flexShrink: 1 }} data-testid="tool-card-search-path">
+            in {path}
+          </span>
+        )}
+        {!inProgress && !isError && lines.length > 0 && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-match-count">
+              {lines.length} {lines.length === 1 ? "match" : "matches"}
+            </span>
+          </>
+        )}
+      </div>
+
+      {isError && result && (
+        <pre className={styles.pre} data-testid="tool-card-error">
+          {result}
+        </pre>
+      )}
+
+      {!isError && !inProgress && displayLines.length > 0 && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-results">
+            {displayLines.join("\n")}
+          </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 matches`}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { ShellCard } from "./ShellCard.js";
+
+const meta: Meta<typeof ShellCard> = {
+  component: ShellCard,
+  title: "Grackle/Tools/ShellCard",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SuccessWithOutput: Story = {
+  name: "Success - exit 0",
+  args: {
+    tool: "Bash",
+    args: { command: "npm test -- --grep auth" },
+    result: "[exit 0] > jest --grep auth\n\n PASS  src/auth.test.ts\n  ✓ validates JWT token (12ms)\n  ✓ rejects expired token (3ms)\n  ✓ handles missing header (1ms)\n\nTests: 3 passed, 3 total\nTime:  1.234s",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-shell")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-command")).toHaveTextContent("npm test -- --grep auth");
+    await expect(canvas.getByTestId("tool-card-exit-code")).toHaveTextContent("exit 0");
+    // Should have toggle (>3 lines)
+    await expect(canvas.getByTestId("tool-card-toggle")).toBeInTheDocument();
+  },
+};
+
+export const ErrorExit: Story = {
+  name: "Failure - exit 1",
+  args: {
+    tool: "Bash",
+    args: { command: "npm run build" },
+    result: "[exit 1] src/index.ts(14,5): error TS2304: Cannot find name 'foo'.",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-exit-code")).toHaveTextContent("exit 1");
+    const card = canvas.getByTestId("tool-card-shell");
+    await expect(card.className).toContain("cardRed");
+  },
+};
+
+export const PowerShellWrapper: Story = {
+  name: "Codex - PowerShell wrapper simplified",
+  args: {
+    tool: "command_execution",
+    args: { command: '"C:\\\\Program Files\\\\PowerShell\\\\7\\\\pwsh.exe" -Command \'Get-Content -Path README.md\'' },
+    result: "[exit 0] # Grackle\n\nRun any AI coding agent...",
+  },
+  play: async ({ canvas }) => {
+    // Should strip the PowerShell wrapper
+    await expect(canvas.getByTestId("tool-card-command")).toHaveTextContent("Get-Content -Path README.md");
+  },
+};
+
+export const LongOutput: Story = {
+  name: "Long output - expand/collapse",
+  args: {
+    tool: "Bash",
+    args: { command: "git log --oneline -10" },
+    result: "abc1234 feat: add auth\ndef5678 fix: typo\nghi9012 chore: deps\njkl3456 docs: readme\nmno7890 test: add coverage\npqr1234 refactor: cleanup",
+  },
+  play: async ({ canvas }) => {
+    const toggle = canvas.getByTestId("tool-card-toggle");
+    await expect(toggle).toBeInTheDocument();
+    await expect(toggle.textContent).toContain("3 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 InProgress: Story = {
+  args: {
+    tool: "Bash",
+    args: { command: "npm install" },
+    // No result yet
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-pending")).toBeInTheDocument();
+    await expect(canvas.queryByTestId("tool-card-output")).not.toBeInTheDocument();
+  },
+};
+
+export const EmptyOutput: Story = {
+  name: "Exit 0 - no output",
+  args: {
+    tool: "Bash",
+    args: { command: "mkdir -p dist" },
+    result: "[exit 0] ",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-exit-code")).toHaveTextContent("exit 0");
+  },
+};
+
+export const NoExitCode: Story = {
+  name: "Plain output (no exit code prefix)",
+  args: {
+    tool: "Bash",
+    args: { command: "echo hello" },
+    result: "hello",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.queryByTestId("tool-card-exit-code")).not.toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-output")).toHaveTextContent("hello");
+  },
+};

package/src/components/tools/ShellCard.tsx

@@ -0,0 +1,106 @@
+import { useState, type JSX } from "react";
+import { Check, ChevronRight, Loader, X } from "lucide-react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { parseShellOutput } from "./parseShellOutput.js";
+import { ICON_SM } from "../../utils/iconSize.js";
+import styles from "./toolCards.module.scss";
+
+/** Extracts the command string from shell tool args. */
+function getCommand(args: unknown): string {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return "";
+  }
+  const a = args as Record<string, unknown>;
+  if (typeof a.command === "string") {
+    return a.command;
+  }
+  return "";
+}
+
+/**
+ * Simplifies a shell command for display.
+ *
+ * Strips PowerShell wrappers like `"C:\\Program Files\\PowerShell\\7\\pwsh.exe" -Command 'inner'`
+ * down to just the inner command.
+ */
+export function simplifyCommand(cmd: string): string {
+  // Match: "...pwsh.exe" -Command 'inner command'
+  const pwshMatch = /pwsh(?:\.exe)?["']?\s+-Command\s+'([^']*)'\s*$/i.exec(cmd);
+  if (pwshMatch) {
+    return pwshMatch[1];
+  }
+  // Match: "...pwsh.exe" -Command "inner command"
+  const pwshMatch2 = /pwsh(?:\.exe)?["']?\s+-Command\s+"([^"]*)"\s*$/i.exec(cmd);
+  if (pwshMatch2) {
+    return pwshMatch2[1];
+  }
+  return cmd;
+}
+
+/** Number of output lines shown when collapsed. */
+const PREVIEW_LINES: number = 3;
+
+/** Renders a shell command tool call with terminal-style output. */
+export function ShellCard({ tool, args, result, isError }: ToolCardProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const rawCommand = getCommand(args);
+  const command = simplifyCommand(rawCommand);
+  const inProgress = result === undefined;
+
+  const parsed = result ? parseShellOutput(result) : null;
+  const outputLines = parsed?.output.split("\n") ?? [];
+  const hasMore = outputLines.length > PREVIEW_LINES;
+  const displayLines = expanded ? outputLines : outputLines.slice(0, PREVIEW_LINES);
+  const exitCode: number | undefined = parsed?.exitCode;
+  const derivedIsError: boolean = isError || (exitCode !== undefined && exitCode !== 0);
+
+  return (
+    <div
+      className={`${styles.card} ${derivedIsError ? styles.cardRed : styles.cardNeutral}`}
+      data-testid="tool-card-shell"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon} style={{ color: "var(--text-secondary)", fontFamily: "var(--font-mono)", fontWeight: "bold" }}>$</span>
+        <span
+          className={styles.fileName}
+          style={{ flex: 1, color: "var(--text-primary)" }}
+          title={rawCommand !== command ? rawCommand : undefined}
+          data-testid="tool-card-command"
+        >
+          {command}
+        </span>
+        {exitCode !== undefined && (
+          <span
+            className={exitCode === 0 ? styles.exitOk : styles.exitError}
+            data-testid="tool-card-exit-code"
+          >
+            {exitCode === 0 ? <Check size={ICON_SM} aria-hidden="true" /> : <X size={ICON_SM} aria-hidden="true" />}{" "}exit {exitCode}
+          </span>
+        )}
+        {inProgress && (
+          <span className={styles.exitPending} data-testid="tool-card-pending"><Loader size={ICON_SM} aria-hidden="true" /></span>
+        )}
+      </div>
+
+      {!inProgress && parsed && parsed.output.length > 0 && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-output">
+            {displayLines.join("\n")}
+          </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" : `${outputLines.length - PREVIEW_LINES} more lines`}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}