@grackle-ai/web-components 0.115.2 → 0.116.0

package/src/components/panels/FindingsPanel.stories.tsx

@@ -1,109 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect } from "@storybook/test";
-import { FindingsPanel } from "./FindingsPanel.js";
-import { buildFinding } from "../../test-utils/storybook-helpers.js";
-
-const meta: Meta<typeof FindingsPanel> = {
-  title: "Grackle/Panels/FindingsPanel",
-  component: FindingsPanel,
-  tags: ["autodocs"],
-  args: {
-    findings: [],
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof FindingsPanel>;
-
-/** Empty state shows a placeholder message when there are no findings. */
-export const EmptyState: Story = {
-  args: {
-    findings: [],
-  },
-  play: async ({ canvas }) => {
-    await expect(
-      canvas.getByText("No findings yet. Agents will post discoveries here."),
-    ).toBeInTheDocument();
-  },
-};
-
-/** Renders a single finding card with category badge, title, content, and tags. */
-export const SingleFinding: Story = {
-  args: {
-    findings: [
-      buildFinding({
-        id: "f-1",
-        category: "architecture",
-        title: "Service boundary issue",
-        content: "The auth service is tightly coupled to the user service.",
-        tags: ["coupling", "refactor"],
-      }),
-    ],
-  },
-  play: async ({ canvas }) => {
-    await expect(canvas.getByText("architecture")).toBeInTheDocument();
-    await expect(canvas.getByText("Service boundary issue")).toBeInTheDocument();
-    await expect(canvas.getByText(/tightly coupled/)).toBeInTheDocument();
-    await expect(canvas.getByText("coupling")).toBeInTheDocument();
-    await expect(canvas.getByText("refactor")).toBeInTheDocument();
-  },
-};
-
-/** Renders multiple findings across different categories. */
-export const MultipleFindings: Story = {
-  args: {
-    findings: [
-      buildFinding({
-        id: "f-1",
-        category: "bug",
-        title: "Race condition in session cleanup",
-        content: "When two sessions end simultaneously, the cleanup handler may skip one.",
-        tags: ["concurrency"],
-      }),
-      buildFinding({
-        id: "f-2",
-        category: "api",
-        title: "Missing pagination on list endpoints",
-        content: "The list_tasks endpoint returns all tasks without pagination support.",
-        tags: ["api", "performance"],
-      }),
-      buildFinding({
-        id: "f-3",
-        category: "decision",
-        title: "Chose SQLite over PostgreSQL",
-        content: "SQLite with WAL mode provides sufficient concurrency for single-server deployment.",
-        tags: ["database"],
-      }),
-    ],
-  },
-  play: async ({ canvas }) => {
-    // Use getAllByText for "api" since it appears as both a category badge and a tag
-    await expect(canvas.getByText("bug")).toBeInTheDocument();
-    const apiElements = canvas.getAllByText("api");
-    await expect(apiElements.length).toBeGreaterThanOrEqual(1);
-    await expect(canvas.getByText("decision")).toBeInTheDocument();
-    await expect(canvas.getByText("Race condition in session cleanup")).toBeInTheDocument();
-    await expect(canvas.getByText("Missing pagination on list endpoints")).toBeInTheDocument();
-    await expect(canvas.getByText("Chose SQLite over PostgreSQL")).toBeInTheDocument();
-  },
-};
-
-/** Long content is truncated at 300 characters with an ellipsis. */
-export const LongContentTruncated: Story = {
-  args: {
-    findings: [
-      buildFinding({
-        id: "f-long",
-        category: "pattern",
-        title: "Verbose finding",
-        content: "A".repeat(400),
-        tags: [],
-      }),
-    ],
-  },
-  play: async ({ canvas }) => {
-    // The rendered content should end with "..." since it exceeds 300 chars
-    const contentEl = canvas.getByText(/A{10,}\.\.\.$/);
-    await expect(contentEl).toBeInTheDocument();
-  },
-};

package/src/components/panels/FindingsPanel.tsx

@@ -1,76 +0,0 @@
-import type { JSX } from "react";
-import { motion } from "motion/react";
-import type { FindingData } from "../../hooks/types.js";
-import styles from "./FindingsPanel.module.scss";
-import { formatRelativeTime } from "../../utils/time.js";
-import { getCategoryColor } from "../../utils/findingCategory.js";
-
-/** Props for the FindingsPanel component. */
-interface Props {
-  /** Pre-filtered findings to display. */
-  findings: FindingData[];
-  /** Optional click handler for finding cards. When provided, cards become clickable. */
-  onFindingClick?: (findingId: string) => void;
-}
-
-/** Displays workspace findings as styled cards with staggered entrance animation. */
-export function FindingsPanel({ findings, onFindingClick }: Props): JSX.Element {
-  if (findings.length === 0) {
-    return (
-      <div className={styles.emptyState}>
-        No findings yet. Agents will post discoveries here.
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.container}>
-      {findings.map((f, index) => {
-        const categoryColor = getCategoryColor(f.category);
-        const Tag = onFindingClick ? motion.button : motion.div;
-        return (
-          <Tag
-            key={f.id}
-            type={onFindingClick ? "button" : undefined}
-            className={`${styles.card} ${onFindingClick ? styles.cardClickable : ""}`}
-            initial={{ opacity: 0, y: 8 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: index * 0.05, duration: 0.2 }}
-            onClick={onFindingClick ? () => { onFindingClick(f.id); } : undefined}
-          >
-            <div className={styles.cardHeader}>
-              <span
-                className={styles.categoryBadge}
-                style={{ background: categoryColor.bg, color: categoryColor.text }}
-              >
-                {f.category}
-              </span>
-              <span className={styles.findingTitle}>
-                {f.title}
-              </span>
-              <span className={styles.findingDate} title={f.createdAt}>
-                {formatRelativeTime(f.createdAt)}
-              </span>
-            </div>
-            <div className={styles.findingContent}>
-              {f.content.length > 300 ? f.content.slice(0, 300) + "..." : f.content}
-            </div>
-            {f.tags.length > 0 && (
-              <div className={styles.tags}>
-                {f.tags.map((tag) => (
-                  <span
-                    key={tag}
-                    className={styles.tag}
-                    style={{ color: categoryColor.text, textShadow: `0 0 8px ${categoryColor.text}` }}
-                  >
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            )}
-          </Tag>
-        );
-      })}
-    </div>
-  );
-}

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;
-}