@grackle-ai/web-components 0.115.2 → 0.117.0

package/rush-logs/web-components._phase_test.log

@@ -1,126 +0,0 @@
-Invoking: heft run --only test 
-The provided list of phases does not contain all phase dependencies. You may need to run the excluded phases manually.
- ---- test started ---- 
-[test:vitest] Running vitest...
-
- RUN  v3.2.4 /home/runner/work/grackle/grackle/packages/web-components
-
- ✓ src/utils/sessionEvents.test.ts (14 tests) 51ms
- ✓ src/utils/eventContent.test.ts (38 tests) 149ms
- ✓ src/utils/dashboard.test.ts (4 tests) 32ms
- ✓ src/utils/route-config.test.ts (23 tests) 64ms
- ✓ src/utils/streamCoordination.test.ts (10 tests) 25ms
- ✓ src/utils/breadcrumbs.test.ts (18 tests) 37ms
- ✓ src/utils/scrollUtils.test.ts (11 tests) 21ms
- ✓ src/components/tools/classifyTool.test.ts (6 tests) 15ms
- ✓ src/utils/assetUrl.test.ts (3 tests) 17ms
- ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 25ms
- ✓ src/components/display/extractText.test.tsx (8 tests) 14ms
- ✓ src/components/editable/useEditableField.test.tsx (17 tests) 236ms
- ✓ src/hooks/useEventSelection.test.ts (13 tests) 241ms
- ✓ src/utils/grackleHostStyleVariables.test.ts (2 tests) 414ms
-   ✓ grackleHostStyleVariables > always returns the MCP-standard fallback variables  383ms
- ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 270ms
- ✓ src/components/display/McpAppWidget.test.tsx (3 tests) 302ms
-
- Test Files  16 passed (16)
-      Tests  184 passed (184)
-   Start at  20:50:45
-   Duration  17.91s (transform 2.37s, setup 0ms, collect 19.13s, tests 1.91s, environment 15.06s, prepare 5.96s)
-
-[test:vitest] Vitest completed.
-[test:storybook-test] Starting Storybook static server on port 41393...
-[test:storybook-test] Storybook server ready. Running interaction tests...
-jest-haste-map: duplicate manual mock found: adapter-manager
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/adapter-manager.js
-    * <rootDir>/packages/server/src/__mocks__/adapter-manager.ts
-
-jest-haste-map: duplicate manual mock found: auto-reconnect
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/auto-reconnect.js
-    * <rootDir>/packages/server/src/__mocks__/auto-reconnect.ts
-
-jest-haste-map: duplicate manual mock found: event-bus
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/event-bus.js
-    * <rootDir>/packages/server/src/__mocks__/event-bus.ts
-
-jest-haste-map: duplicate manual mock found: event-processor
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/event-processor.js
-    * <rootDir>/packages/server/src/__mocks__/event-processor.ts
-
-jest-haste-map: duplicate manual mock found: github-import
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/github-import.js
-    * <rootDir>/packages/server/src/__mocks__/github-import.ts
-
-jest-haste-map: duplicate manual mock found: lifecycle
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/lifecycle.js
-    * <rootDir>/packages/server/src/__mocks__/lifecycle.ts
-
-jest-haste-map: duplicate manual mock found: log-writer
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/log-writer.js
-    * <rootDir>/packages/server/src/__mocks__/log-writer.ts
-
-jest-haste-map: duplicate manual mock found: logger
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/logger.js
-    * <rootDir>/packages/server/src/__mocks__/logger.ts
-
-jest-haste-map: duplicate manual mock found: pipe-delivery
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/pipe-delivery.js
-    * <rootDir>/packages/server/src/__mocks__/pipe-delivery.ts
-
-jest-haste-map: duplicate manual mock found: processor-registry
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/processor-registry.js
-    * <rootDir>/packages/server/src/__mocks__/processor-registry.ts
-
-jest-haste-map: duplicate manual mock found: reanimate-agent
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/reanimate-agent.js
-    * <rootDir>/packages/server/src/__mocks__/reanimate-agent.ts
-
-jest-haste-map: duplicate manual mock found: session-recovery
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/session-recovery.js
-    * <rootDir>/packages/server/src/__mocks__/session-recovery.ts
-
-jest-haste-map: duplicate manual mock found: stream-hub
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/stream-hub.js
-    * <rootDir>/packages/server/src/__mocks__/stream-hub.ts
-
-jest-haste-map: duplicate manual mock found: stream-registry
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/stream-registry.js
-    * <rootDir>/packages/server/src/__mocks__/stream-registry.ts
-
-jest-haste-map: duplicate manual mock found: token-push
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/token-push.js
-    * <rootDir>/packages/server/src/__mocks__/token-push.ts
-
-jest-haste-map: duplicate manual mock found: utils/exec
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/utils/exec.js
-    * <rootDir>/packages/server/src/__mocks__/utils/exec.ts
-
-jest-haste-map: duplicate manual mock found: utils/format-gh-error
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/utils/format-gh-error.js
-    * <rootDir>/packages/server/src/__mocks__/utils/format-gh-error.ts
-
-jest-haste-map: duplicate manual mock found: utils/network
-  The following files share their name; please delete one of them:
-    * <rootDir>/packages/server/dist/__mocks__/utils/network.js
-    * <rootDir>/packages/server/src/__mocks__/utils/network.ts
-
-[test:storybook-test] Storybook interaction tests completed.
- ---- test finished (122.666s) ---- 
--------------------- Finished (122.677s) --------------------

package/src/components/lists/FindingsNav.module.scss

@@ -1,126 +0,0 @@
-@use '../../styles/mixins' as *;
-
-.nav {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-  width: 100%;
-  padding: var(--space-md);
-  overflow-y: auto;
-
-  @include mobile {
-    flex-direction: row;
-    width: 100%;
-    min-width: unset;
-    border-right: none;
-    border-bottom: 1px solid var(--border-subtle);
-    overflow-x: auto;
-    overflow-y: hidden;
-    padding: var(--space-xs) var(--space-sm);
-    gap: 0;
-    flex-wrap: nowrap;
-  }
-}
-
-.categoryPills {
-  display: flex;
-  gap: var(--space-xs);
-  flex-wrap: wrap;
-  padding-bottom: var(--space-sm);
-  border-bottom: 1px solid var(--border-subtle);
-  margin-bottom: var(--space-xs);
-}
-
-.categoryPill {
-  font-size: 10px;
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  padding: 1px var(--space-xs);
-  border-radius: var(--radius-full);
-  background: var(--bg-elevated);
-}
-
-.tab {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-md);
-  border: none;
-  border-left: 3px solid transparent;
-  border-radius: var(--radius-md);
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: var(--font-size-sm);
-  font-family: var(--font-ui);
-  cursor: pointer;
-  transition: background var(--transition-fast),
-              color var(--transition-fast),
-              border-color var(--transition-fast);
-  text-align: left;
-  width: 100%;
-
-  &:hover {
-    background: var(--bg-overlay);
-    color: var(--text-primary);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--accent-blue);
-    outline-offset: -2px;
-  }
-
-  @include mobile {
-    border-left: none;
-    border-bottom: 2px solid transparent;
-    white-space: nowrap;
-    flex-shrink: 0;
-    padding: var(--space-xs) var(--space-sm);
-    font-size: var(--font-size-xs);
-    width: auto;
-    border-radius: 0;
-  }
-}
-
-.tabActive {
-  border-left-color: var(--accent-blue);
-  background: var(--bg-overlay);
-  color: var(--text-primary);
-  font-weight: var(--font-weight-medium);
-
-  @include mobile {
-    border-left-color: transparent;
-    border-bottom-color: var(--accent-blue);
-  }
-}
-
-.tabContent {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.tabLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tabMeta {
-  font-size: var(--font-size-xs);
-  color: var(--text-tertiary);
-}
-
-.categoryDot {
-  flex-shrink: 0;
-  font-size: var(--font-size-xs);
-  line-height: 1;
-  margin-top: 3px;
-}
-
-.empty {
-  padding: var(--space-md);
-  font-size: var(--font-size-sm);
-  color: var(--text-tertiary);
-  text-align: center;
-}

package/src/components/lists/FindingsNav.tsx

@@ -1,146 +0,0 @@
-/**
- * Sidebar navigation for the Findings pages.
- *
- * Displays a list of findings with category pills and relative timestamps.
- *
- * @module
- */
-
-import { useCallback, useMemo, useRef, type JSX, type KeyboardEvent } from "react";
-import { Circle } from "lucide-react";
-import { ICON_XS } from "../../utils/iconSize.js";
-import { useMatch } from "react-router";
-import type { FindingData } from "../../hooks/types.js";
-import { findingUrl, useAppNavigate } from "../../utils/navigation.js";
-import { formatRelativeTime } from "../../utils/time.js";
-import { getCategoryColor } from "../../utils/findingCategory.js";
-import styles from "./FindingsNav.module.scss";
-
-/** Props for the FindingsNav component. */
-interface FindingsNavProps {
-  /** All loaded findings to display. */
-  findings: FindingData[];
-  /** Optional workspace ID for scoped navigation. */
-  workspaceId?: string;
-  /** Optional environment ID for scoped navigation. */
-  environmentId?: string;
-}
-
-/** Sidebar nav listing findings with category badges and relative timestamps. */
-export function FindingsNav({ findings, workspaceId, environmentId }: FindingsNavProps): JSX.Element {
-  const navigate = useAppNavigate();
-  const tabListRef = useRef<HTMLElement>(null);
-
-  // Match both global and workspace-scoped finding detail routes.
-  const globalMatch = useMatch("/findings/:findingId");
-  const scopedMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId/findings/:findingId");
-  const activeFindingId = globalMatch?.params.findingId ?? scopedMatch?.params.findingId;
-
-  /** Unique categories derived from the current findings list. */
-  const categories = useMemo(() => {
-    const cats = new Set(findings.map((f) => f.category).filter(Boolean));
-    return Array.from(cats).sort();
-  }, [findings]);
-
-  const handleClick = useCallback((findingId: string) => {
-    navigate(findingUrl(findingId, workspaceId, environmentId));
-  }, [navigate, workspaceId, environmentId]);
-
-  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLElement>) => {
-    const buttons = tabListRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]');
-    if (!buttons || buttons.length === 0) {
-      return;
-    }
-    const focusedIndex = Array.from(buttons).findIndex((b) => b === document.activeElement);
-    const currentIndex = focusedIndex >= 0 ? focusedIndex : findings.findIndex((f) => f.id === activeFindingId);
-    let nextIndex = currentIndex;
-
-    if (e.key === "ArrowDown" || e.key === "j" || e.key === "J") {
-      e.preventDefault();
-      nextIndex = (currentIndex + 1) % buttons.length;
-    } else if (e.key === "ArrowUp" || e.key === "k" || e.key === "K") {
-      e.preventDefault();
-      nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
-    } else if (e.key === "Home") {
-      e.preventDefault();
-      nextIndex = 0;
-    } else if (e.key === "End") {
-      e.preventDefault();
-      nextIndex = buttons.length - 1;
-    } else {
-      return;
-    }
-
-    if (nextIndex < findings.length) {
-      navigate(findingUrl(findings[nextIndex].id, workspaceId, environmentId));
-    }
-    buttons[nextIndex].focus();
-  }, [activeFindingId, findings, navigate, workspaceId, environmentId]);
-
-  const focusableId = activeFindingId ?? (findings.length > 0 ? findings[0].id : undefined);
-
-  return (
-    <div className={styles.nav} data-testid="findings-nav">
-      {categories.length > 1 && (
-        <div className={styles.categoryPills} data-testid="findings-nav-categories">
-          {categories.map((cat) => (
-            <span
-              key={cat}
-              className={styles.categoryPill}
-              style={{ color: getCategoryColor(cat).text }}
-            >
-              {cat}
-            </span>
-          ))}
-        </div>
-      )}
-
-      <nav
-        ref={tabListRef}
-        role="tablist"
-        aria-orientation="vertical"
-        aria-label="Findings"
-        onKeyDown={handleKeyDown}
-      >
-        {findings.map((f) => {
-          const isActive = f.id === activeFindingId;
-          const isFocusable = f.id === focusableId;
-          return (
-            <button
-              key={f.id}
-              role="tab"
-              type="button"
-              aria-selected={isActive}
-              tabIndex={isFocusable ? 0 : -1}
-              className={`${styles.tab} ${isActive ? styles.tabActive : ""}`}
-              onClick={() => handleClick(f.id)}
-              data-testid="finding-nav-item"
-            >
-              <span
-                className={styles.categoryDot}
-                style={{ color: getCategoryColor(f.category).text }}
-                aria-hidden="true"
-              >
-                <Circle size={ICON_XS} fill="currentColor" />
-              </span>
-              <span className={styles.tabContent}>
-                <span className={styles.tabLabel} title={f.title}>
-                  {f.title}
-                </span>
-                <span className={styles.tabMeta} title={f.createdAt}>
-                  {formatRelativeTime(f.createdAt)}
-                </span>
-              </span>
-            </button>
-          );
-        })}
-      </nav>
-
-      {findings.length === 0 && (
-        <div className={styles.empty}>
-          No findings yet. Agents will post discoveries here.
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/panels/FindingsPanel.module.scss

@@ -1,94 +0,0 @@
-@use '../../styles/mixins' as *;
-
-// =============================================================================
-// Findings Panel — workspace findings cards with staggered animation
-// =============================================================================
-
-.container {
-  padding: var(--space-md);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-.emptyState {
-  padding: var(--space-xl);
-  color: var(--text-tertiary);
-  text-align: center;
-}
-
-.card {
-  @include surface-card;
-  @include card-hover;
-  padding: var(--space-md);
-}
-
-.cardClickable {
-  cursor: pointer;
-
-  &:focus-visible {
-    outline: 2px solid var(--accent-blue);
-    outline-offset: 2px;
-  }
-}
-
-.cardHeader {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-xs);
-
-  @include mobile {
-    flex-wrap: wrap;
-  }
-}
-
-.categoryBadge {
-  border-radius: var(--radius-full);
-  padding: 2px var(--space-md);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-}
-
-.findingTitle {
-  font-weight: var(--font-weight-bold);
-  color: var(--text-primary);
-  font-size: var(--font-size-md);
-}
-
-.findingDate {
-  margin-left: auto;
-  font-size: var(--font-size-xs);
-  color: var(--text-tertiary);
-
-  @include mobile {
-    margin-left: 0;
-    width: 100%;
-  }
-}
-
-.findingContent {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-}
-
-.tags {
-  margin-top: var(--space-xs);
-  display: flex;
-  gap: var(--space-xs);
-
-  @include mobile {
-    flex-wrap: wrap;
-  }
-}
-
-// Frosted inset chip for tags — third glass tier with category-tinted border
-.tag {
-  @include surface-inset;
-  font-size: 10px;
-  padding: 1px var(--space-xs);
-  border-radius: var(--radius-full);
-  color: var(--text-secondary);
-}

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