@grackle-ai/web-components 0.115.2 → 0.117.0

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

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect } from "@storybook/test";
-import { FindingCard } from "./FindingCard.js";
-
-const meta: Meta<typeof FindingCard> = {
-  component: FindingCard,
-  title: "Tools/FindingCard",
-};
-export default meta;
-type Story = StoryObj<typeof FindingCard>;
-
-export const PostInProgress: Story = {
-  name: "finding_post - in progress",
-  args: {
-    tool: "mcp__grackle__finding_post",
-    args: {
-      title: "Auth middleware stores tokens insecurely",
-      category: "bug",
-      tags: ["security", "auth"],
-    },
-  },
-  play: async ({ canvas }) => {
-    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
-    await expect(canvas.getByTestId("tool-card-finding-title")).toHaveTextContent("Auth middleware");
-    await expect(canvas.getByTestId("tool-card-finding-category")).toHaveTextContent("bug");
-  },
-};
-
-export const PostCompleted: Story = {
-  name: "finding_post - completed",
-  args: {
-    tool: "mcp__grackle__finding_post",
-    args: {
-      title: "Qdrant catalog naming convention",
-      category: "insight",
-      tags: ["search", "worktree", "qdrant"],
-    },
-    result: JSON.stringify({
-      id: "589f1e83",
-      workspaceId: "default",
-      category: "insight",
-      title: "Qdrant catalog naming convention",
-      content: "The qdrant-search MCP server indexes the codebase under the catalog name \"grackle\". All worktrees share the same codebase, so every semantic search call must pass catalog: \"grackle\".",
-      tags: ["search", "worktree", "qdrant"],
-      createdAt: "2026-03-28 03:49:15",
-    }),
-  },
-  play: async ({ canvas }) => {
-    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
-    await expect(canvas.getByTestId("tool-card-finding-category")).toHaveTextContent("insight");
-    await expect(canvas.getByTestId("tool-card-finding-tags")).toBeInTheDocument();
-    await expect(canvas.getByTestId("tool-card-finding-content")).toBeInTheDocument();
-  },
-};
-
-export const PostCopilotFormat: Story = {
-  name: "finding_post - Copilot tool name",
-  args: {
-    tool: "grackle-finding_post",
-    args: {
-      title: "Rush worktree usage",
-      category: "insight",
-      tags: ["workflow"],
-    },
-    result: JSON.stringify({
-      id: "e7091ea6",
-      category: "insight",
-      title: "Rush worktree usage",
-      content: "This codebase uses Rush worktrees for all feature development.",
-      tags: ["workflow"],
-      createdAt: "2026-03-28 03:53:07",
-    }),
-  },
-  play: async ({ canvas }) => {
-    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
-    // Should show bare tool name, not the full prefixed name
-    await expect(canvas.getByText("finding_post")).toBeInTheDocument();
-  },
-};
-
-export const ListWithResults: Story = {
-  name: "finding_list - multiple results",
-  args: {
-    tool: "mcp__grackle__finding_list",
-    args: { limit: 20 },
-    result: JSON.stringify([
-      { id: "f1", category: "insight", title: "Qdrant catalog naming" },
-      { id: "f2", category: "bug", title: "Auth token storage issue" },
-      { id: "f3", category: "decision", title: "Use ConnectRPC over ws-bridge" },
-    ]),
-  },
-  play: async ({ canvas }) => {
-    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
-    await expect(canvas.getByTestId("tool-card-finding-count")).toHaveTextContent("3 findings");
-    await expect(canvas.getByTestId("tool-card-finding-list")).toBeInTheDocument();
-  },
-};
-
-export const ListEmpty: Story = {
-  name: "finding_list - no results",
-  args: {
-    tool: "mcp__grackle__finding_list",
-    args: { category: "bug" },
-    result: JSON.stringify([]),
-  },
-  play: async ({ canvas }) => {
-    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
-    await expect(canvas.getByTestId("tool-card-finding-count")).toHaveTextContent("0 findings");
-  },
-};
-
-export const ErrorState: Story = {
-  name: "finding_post - error",
-  args: {
-    tool: "mcp__grackle__finding_post",
-    args: { title: "Test finding" },
-    result: "gRPC error [Internal]: database connection failed",
-    isError: true,
-  },
-  play: async ({ canvas }) => {
-    await expect(canvas.getByTestId("tool-card-finding")).toBeInTheDocument();
-    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
-  },
-};

package/src/components/tools/FindingCard.tsx

@@ -1,178 +0,0 @@
-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 single finding in MCP results. */
-interface Finding {
-  id?: string;
-  title?: string;
-  category?: string;
-  content?: string;
-  tags?: string[];
-  createdAt?: string;
-}
-
-/** Extracts finding-relevant fields from tool args. */
-function getArgs(args: unknown): { title?: string; category?: string; tags?: string[] } {
-  if (args === null || args === undefined || typeof args !== "object") {
-    return {};
-  }
-  const a = args as Record<string, unknown>;
-  return {
-    title: typeof a.title === "string" ? a.title : undefined,
-    category: typeof a.category === "string" ? a.category : undefined,
-    tags: Array.isArray(a.tags) ? (a.tags as string[]) : undefined,
-  };
-}
-
-/** Parses MCP result JSON into a finding or array of findings. */
-function parseResult(result: string | undefined): { single?: Finding; list?: Finding[] } {
-  if (!result) {
-    return {};
-  }
-  try {
-    const parsed: unknown = JSON.parse(result);
-    if (Array.isArray(parsed)) {
-      return { list: (parsed as unknown[]).filter((v): v is Finding => v !== null && typeof v === "object") };
-    }
-    if (typeof parsed === "object" && parsed !== null) {
-      return { single: parsed as Finding };
-    }
-  } catch { /* fall through */ }
-  return {};
-}
-
-/** Number of items shown when collapsed. */
-const PREVIEW_COUNT: number = 5;
-
-/** Number of content lines shown when collapsed. */
-const PREVIEW_LINES: number = 5;
-
-/** Renders a finding tool call (finding_post, finding_list) with structured display. */
-export function FindingCard({ 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 { single, list } = parseResult(result);
-
-  // Determine title to show in header
-  const displayTitle = single?.title ?? argData.title;
-  // Only show category badge for single findings, not when displaying a list
-  const displayCategory = list ? undefined : (single?.category ?? argData.category);
-  const displayTags = list ? undefined : (single?.tags ?? argData.tags);
-
-  return (
-    <div
-      className={`${styles.card} ${isError ? styles.cardRed : styles.cardPurple} ${inProgress ? styles.inProgress : ""}`}
-      data-testid="tool-card-finding"
-    >
-      <div className={styles.header}>
-        <span className={styles.icon} aria-hidden="true">&#x1F4A1;</span>
-        <span className={styles.toolName} style={{ color: "var(--accent-purple, #a78bfa)" }}>
-          {bareName}
-        </span>
-        {displayTitle && (
-          <span className={styles.fileName} data-testid="tool-card-finding-title">
-            &quot;{displayTitle}&quot;
-          </span>
-        )}
-        {displayCategory && (
-          <>
-            <span className={styles.spacer} />
-            <span className={styles.badge} data-testid="tool-card-finding-category">
-              {displayCategory}
-            </span>
-          </>
-        )}
-        {list && !displayCategory && (
-          <>
-            <span className={styles.spacer} />
-            <span className={styles.badge} data-testid="tool-card-finding-count">
-              {list.length} {list.length === 1 ? "finding" : "findings"}
-            </span>
-          </>
-        )}
-      </div>
-
-      {/* Tags */}
-      {displayTags && displayTags.length > 0 && (
-        <div className={styles.pre} style={{ padding: "4px 8px", whiteSpace: "normal" }} data-testid="tool-card-finding-tags">
-          {displayTags.map((tag, i) => (
-            <span key={i} style={{ display: "inline-block", marginRight: "6px", opacity: 0.7, fontSize: "0.85em" }}>
-              #{tag}
-            </span>
-          ))}
-        </div>
-      )}
-
-      {/* In-progress: show args summary */}
-      {inProgress && !displayTitle && 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>
-      )}
-
-      {/* Single finding result: show content */}
-      {!isError && single?.content && (
-        <>
-          {(() => {
-            const lines = single.content.split("\n");
-            const hasMore = lines.length > PREVIEW_LINES;
-            const displayContent = expanded ? single.content : lines.slice(0, PREVIEW_LINES).join("\n");
-            return (
-              <>
-                <pre className={styles.pre} data-testid="tool-card-finding-content">
-                  {displayContent}
-                </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" : `${lines.length - PREVIEW_LINES} more lines`}
-                  </button>
-                )}
-              </>
-            );
-          })()}
-        </>
-      )}
-
-      {/* List result: show compact finding titles */}
-      {!isError && list && list.length > 0 && (
-        <>
-          <pre className={styles.pre} data-testid="tool-card-finding-list">
-            {(expanded ? list : list.slice(0, PREVIEW_COUNT)).map((f, i) => (
-              `${f.category ? `[${f.category}] ` : ""}${f.title ?? f.id ?? `Finding ${i + 1}`}`
-            )).join("\n")}
-          </pre>
-          {list.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" : `${list.length - PREVIEW_COUNT} more findings`}
-            </button>
-          )}
-        </>
-      )}
-    </div>
-  );
-}

package/src/utils/findingCategory.ts

@@ -1,33 +0,0 @@
-/**
- * Shared category-to-color mapping for findings.
- *
- * Centralized here so FindingsPanel, FindingsNav, and consuming pages
- * all use the same palette and stay in sync.
- *
- * @module
- */
-
-/** Color pair for a finding category. */
-export interface CategoryColor {
-  /** Foreground / text color (CSS custom property). */
-  text: string;
-  /** Background / badge color (CSS custom property). */
-  bg: string;
-}
-
-/** Category color mapping using CSS custom property values. */
-export const CATEGORY_COLORS: Record<string, CategoryColor> = {
-  architecture: { text: "var(--accent-blue)", bg: "var(--accent-blue-dim)" },
-  api: { text: "var(--accent-green)", bg: "var(--accent-green-dim)" },
-  bug: { text: "var(--accent-red)", bg: "var(--accent-red-dim)" },
-  decision: { text: "var(--accent-yellow)", bg: "var(--accent-yellow-dim)" },
-  dependency: { text: "var(--accent-purple)", bg: "var(--accent-purple-dim)" },
-  pattern: { text: "var(--accent-cyan)", bg: "var(--accent-cyan-dim)" },
-  general: { text: "var(--text-secondary)", bg: "var(--bg-elevated)" },
-};
-
-/** Look up the color pair for a category, falling back to `general`. */
-export function getCategoryColor(category: string): CategoryColor {
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- category may not be in the map
-  return CATEGORY_COLORS[category] || CATEGORY_COLORS.general;
-}