@grackle-ai/web-components 0.113.0 → 0.114.0

package/temp/build/lint/_eslint-5eVG3S6w.json

@@ -7,7 +7,7 @@
     ],
     [
       "hooks/types.ts",
-      "Q3IfPXTzOZH/42LKa4mjM52/+X0=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "6V+IhDV8stiaMzUcKy7VtyKchXU=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/chat/ChatInput.tsx",
@@ -35,7 +35,7 @@
     ],
     [
       "utils/navigation.ts",
-      "VYMJ/hZ95uKS4IXcv2tomXVUoCk=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "Jp9ePlbyKrjkctBaIHNfJR9ed74=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/dag/DagView.tsx",
@@ -275,7 +275,7 @@
     ],
     [
       "components/layout/AppNav.tsx",
-      "m+cH8YKux2EB/NGH9BzaikTuEw0=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "tBAiCk8HnPO62b+sMkZudZfg/2A=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/layout/Sidebar.tsx",
@@ -391,7 +391,7 @@
     ],
     [
       "components/panels/KeyboardShortcutsPanel.tsx",
-      "0yOtcA8wE4p4ctgFYThvwW0x8Pk=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "3edi7irlbtgRuyn2M7Xd0UxNLlM=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/panels/CredentialProvidersPanel.tsx",
@@ -414,16 +414,20 @@
       "jRRfxaaHfygxZpdluJRjfEfHpHw=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
-      "components/streams/StreamList.tsx",
-      "LVEmA8wVrbyO2Xt+GtPMhSGC6B8=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "utils/streamCoordination.ts",
+      "EptFZSARRzENP6IxRt/AyZXBJt8=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+    ],
+    [
+      "components/streams/CoordinationList.tsx",
+      "xDBNKE1Nr/O3BrdHcyQlPea6MtM=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/streams/StreamDetailPanel.tsx",
-      "RGLslyiZm41CPlqP2QpSDWm5uYw=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "OnOHSENhCoxiHgkVDZM3a06WeO4=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/streams/index.ts",
-      "wjnffmfMguFqP1a4hC2+XReu4Ss=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "6ayws8aPUPY31xaNAyWGY2MkjFY=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "utils/boardColumns.ts",
@@ -465,13 +469,17 @@
       "mocks/mockKnowledgeData.ts",
       "K09GMmZqdvBWTt38ZYY1HsIjlLQ=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
+    [
+      "mocks/mockStreamsData.ts",
+      "sV8iV8PeiQ+2LXWFB7zKll/xSIs=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+    ],
     [
       "mocks/mockData.ts",
-      "8t66aL3PKQq/G0CwV/82K12tURc=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "rwiDVF97QNZ5XtbVvMH8/1e4gBI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "mocks/MockGrackleProvider.tsx",
-      "Zrw0hhCq5Bbv4P33XGGTpJjLm/8=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "B09K0oXwGXuyVoPp09f6MYqwzBI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "test-utils/storybook-decorators.tsx",
@@ -483,7 +491,7 @@
     ],
     [
       "index.ts",
-      "ahBkv6xGAgyekHPIzGpNiJ2T2lI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "GBCOSyIvbIWfMykHVFwaig0ddkA=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/index.ts",
@@ -611,7 +619,7 @@
     ],
     [
       "components/layout/AppNav.stories.tsx",
-      "oYykVWEa7SEp4YtAOIe+xpB1D3k=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "Bb31+Z83wts8nmmIRRCzUDj0/q8=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/layout/BottomStatusBar.stories.tsx",
@@ -675,7 +683,7 @@
     ],
     [
       "components/panels/KeyboardShortcutsPanel.stories.tsx",
-      "gZ9hP3WGlzy58xTJYrj2eHoEpYQ=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "V+OspyHv+PfL/AcNDfxj2yloCzE=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/panels/TaskActionButtons.stories.tsx",
@@ -714,12 +722,12 @@
       "/43ghyGqzqkxu1CWV60htj1ImpU=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
-      "components/streams/StreamDetailPanel.stories.tsx",
-      "Q8zOB3LMfxtVSD/0uHCjEIs3+ys=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "components/streams/CoordinationList.stories.tsx",
+      "BlZXoGe7ntz+nxDQbdI+MC4hj/g=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
-      "components/streams/StreamList.stories.tsx",
-      "nBRv4JGi+SHcQWldHrRA0y9cyF0=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "components/streams/StreamDetailPanel.stories.tsx",
+      "wXCDWxvXnuORr2+5yl/rwfioFFE=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/tools/AgentToolCard.stories.tsx",
@@ -832,7 +840,11 @@
     [
       "utils/sessionEvents.test.ts",
       "hL9OyAvsoDAPSh4+TPUEgQrdYMI=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
+    ],
+    [
+      "utils/streamCoordination.test.ts",
+      "tcFLEiIFvYYLO/1jT41tcJ4CIX4=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
     ]
   ],
-  "filesHash": "wzmDK7nkrsOam3n0gh_j3g"
+  "filesHash": "350HaaMGlV7A3LVA-PY0sQ"
 }

package/src/components/streams/StreamList.module.scss

@@ -1,92 +0,0 @@
-@use '../../styles/mixins' as *;
-
-// =============================================================================
-// StreamList — IPC stream sidebar list
-// =============================================================================
-
-.container {
-  padding: var(--space-sm) 0;
-}
-
-.header {
-  @include section-label;
-  padding: var(--space-xs) var(--space-md);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.refreshButton {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 2px;
-  display: flex;
-  align-items: center;
-  border-radius: var(--radius-sm);
-
-  &:hover {
-    color: var(--text-primary);
-    background: var(--bg-overlay);
-  }
-}
-
-.streamRow {
-  @include hover-accent;
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-xs) var(--space-md);
-  cursor: pointer;
-  min-height: 32px;
-  user-select: none;
-
-  &.selected {
-    background: var(--bg-overlay);
-  }
-}
-
-.systemRow {
-  composes: streamRow;
-  border-bottom: 1px solid var(--border-subtle);
-  margin-bottom: var(--space-xs);
-  font-weight: 500;
-}
-
-.streamIcon {
-  flex-shrink: 0;
-  color: var(--text-secondary);
-}
-
-.streamName {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.subscriberBadge {
-  @include surface-inset;
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  flex-shrink: 0;
-}
-
-.emptyState {
-  padding: var(--space-md);
-  font-size: 12px;
-  color: var(--text-disabled);
-  text-align: center;
-}
-
-.loading {
-  padding: var(--space-md);
-  font-size: 12px;
-  color: var(--text-disabled);
-  text-align: center;
-}

package/src/components/streams/StreamList.stories.tsx

@@ -1,99 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn } from "@storybook/test";
-import type { StreamData } from "../../hooks/types.js";
-import { withMockGrackleRoute } from "../../test-utils/storybook-helpers.js";
-import { StreamList } from "./StreamList.js";
-
-// ---------------------------------------------------------------------------
-// Mock data
-// ---------------------------------------------------------------------------
-
-const mockStreams: StreamData[] = [
-  {
-    id: "stream-001",
-    name: "agent-chat",
-    subscriberCount: 2,
-    messageBufferDepth: 0,
-    subscribers: [],
-  },
-  {
-    id: "stream-002",
-    name: "coordinator-bus",
-    subscriberCount: 1,
-    messageBufferDepth: 3,
-    subscribers: [],
-  },
-  {
-    id: "stream-003",
-    name: "telemetry-feed",
-    subscriberCount: 0,
-    messageBufferDepth: 0,
-    subscribers: [],
-  },
-];
-
-// ---------------------------------------------------------------------------
-// Story meta
-// ---------------------------------------------------------------------------
-
-const meta: Meta<typeof StreamList> = {
-  title: "Grackle/Streams/StreamList",
-  component: StreamList,
-  parameters: { skipRouter: true },
-  args: {
-    streams: mockStreams,
-    loading: false,
-    onRefresh: fn(),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof StreamList>;
-
-// ---------------------------------------------------------------------------
-// Stories
-// ---------------------------------------------------------------------------
-
-/** Default: shows System pinned row and a list of named streams. */
-export const Default: Story = {
-  decorators: [withMockGrackleRoute(["/chat"], "/chat")],
-};
-
-/** Empty state: no named streams, only the System row. */
-export const Empty: Story = {
-  decorators: [withMockGrackleRoute(["/chat"], "/chat")],
-  args: {
-    streams: [],
-  },
-};
-
-/** Loading state while streams are being fetched. */
-export const Loading: Story = {
-  decorators: [withMockGrackleRoute(["/chat"], "/chat")],
-  args: {
-    streams: [],
-    loading: true,
-  },
-};
-
-/** System row is visually selected when on the /chat route. */
-export const SystemSelected: Story = {
-  decorators: [withMockGrackleRoute(["/chat"], "/chat")],
-  play: async ({ canvas }) => {
-    const systemRow = canvas.getByTestId("stream-list-system-row");
-    await expect(systemRow).toBeInTheDocument();
-    await expect(systemRow).toHaveAttribute("aria-current", "page");
-  },
-};
-
-/** A named stream is selected when on its /chat/:streamId route. */
-export const StreamSelected: Story = {
-  decorators: [withMockGrackleRoute(["/chat/stream-001"], "/chat/:streamId")],
-  play: async ({ canvas }) => {
-    const streamRow = canvas.getByTestId("stream-list-row-stream-001");
-    await expect(streamRow).toBeInTheDocument();
-    await expect(streamRow).toHaveAttribute("aria-current", "page");
-    const systemRow = canvas.getByTestId("stream-list-system-row");
-    await expect(systemRow).not.toHaveAttribute("aria-current");
-  },
-};

package/src/components/streams/StreamList.tsx

@@ -1,114 +0,0 @@
-/**
- * StreamList — sidebar list of IPC streams with a pinned "System" entry.
- *
- * @module
- */
-
-import { useCallback, type JSX } from "react";
-import { useLocation, useMatch } from "react-router";
-import { MessageSquare, Radio, RefreshCw } from "lucide-react";
-import type { StreamData } from "../../hooks/types.js";
-import { useAppNavigate, chatStreamUrl, CHAT_URL } from "../../utils/navigation.js";
-import styles from "./StreamList.module.scss";
-
-/** Size for row icons. */
-const ICON_SIZE: number = 14;
-
-/** Props for the StreamList sidebar component. */
-export interface StreamListProps {
-  /** All known IPC streams. */
-  streams: StreamData[];
-  /** Whether streams are currently loading. */
-  loading: boolean;
-  /** True if the most recent load attempt failed. */
-  streamsLoadError?: boolean;
-  /** True after at least one load attempt has completed. */
-  streamsLoadedOnce?: boolean;
-  /** Optional callback to trigger a stream list refresh. */
-  onRefresh?: () => void;
-}
-
-/**
- * Sidebar list showing IPC streams.
- *
- * The "System" row is always pinned at the top and links to `/chat`.
- * Named streams are listed below, sorted alphabetically.
- */
-export function StreamList({ streams, loading, streamsLoadError = false, streamsLoadedOnce = true, onRefresh }: StreamListProps): JSX.Element {
-  const navigate = useAppNavigate();
-  const location = useLocation();
-  const streamMatch = useMatch("/chat/:streamId");
-
-  const selectedStreamId = streamMatch?.params.streamId;
-  const isSystemSelected = !selectedStreamId && location.pathname === CHAT_URL;
-
-  const sortedStreams = [...streams].sort((a, b) => a.name.localeCompare(b.name));
-
-  const handleSystemClick = useCallback(() => {
-    navigate(CHAT_URL);
-  }, [navigate]);
-
-  const handleStreamClick = useCallback((streamId: string) => {
-    navigate(chatStreamUrl(streamId));
-  }, [navigate]);
-
-  return (
-    <div className={styles.container} data-testid="stream-list">
-      <div className={styles.header}>
-        <span>Streams</span>
-        {onRefresh && (
-          <button
-            className={styles.refreshButton}
-            onClick={onRefresh}
-            aria-label="Refresh streams"
-            data-testid="stream-list-refresh"
-          >
-            <RefreshCw size={12} />
-          </button>
-        )}
-      </div>
-
-      {/* Pinned System row */}
-      <button
-        type="button"
-        className={`${styles.systemRow}${isSystemSelected ? ` ${styles.selected}` : ""}`}
-        onClick={handleSystemClick}
-        data-testid="stream-list-system-row"
-        aria-current={isSystemSelected ? "page" : undefined}
-      >
-        <MessageSquare size={ICON_SIZE} className={styles.streamIcon} />
-        <span className={styles.streamName}>System</span>
-      </button>
-
-      {/* Named streams */}
-      {loading && sortedStreams.length === 0 && (
-        <div className={styles.loading}>Loading...</div>
-      )}
-      {!loading && streamsLoadError && (
-        <div className={styles.emptyState} data-testid="stream-list-error">Unable to load streams</div>
-      )}
-      {!loading && !streamsLoadError && streamsLoadedOnce && sortedStreams.length === 0 && (
-        <div className={styles.emptyState}>No streams</div>
-      )}
-      {sortedStreams.map((stream) => {
-        const isSelected = selectedStreamId === stream.id;
-        return (
-          <button
-            key={stream.id}
-            type="button"
-            className={`${styles.streamRow}${isSelected ? ` ${styles.selected}` : ""}`}
-            onClick={() => handleStreamClick(stream.id)}
-            data-testid={`stream-list-row-${stream.id}`}
-            aria-current={isSelected ? "page" : undefined}
-          >
-            <Radio size={ICON_SIZE} className={styles.streamIcon} />
-            <span className={styles.streamName}>{stream.name}</span>
-            {stream.subscriberCount > 0 && (
-              <span className={styles.subscriberBadge}>{stream.subscriberCount}</span>
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
-}