@grackle-ai/web-components 0.107.2

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

@@ -0,0 +1,132 @@
+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 { StreamDetailPanel } from "./StreamDetailPanel.js";
+
+// ---------------------------------------------------------------------------
+// Mock data
+// ---------------------------------------------------------------------------
+
+const streamWithSubscribers: StreamData = {
+  id: "stream-abc123",
+  name: "agent-chat",
+  subscriberCount: 2,
+  messageBufferDepth: 5,
+  subscribers: [
+    {
+      subscriptionId: "sub-001",
+      sessionId: "session-aabbccdd-eeff-0011",
+      fd: 3,
+      permission: "rw",
+      deliveryMode: "async",
+      createdBySpawn: true,
+    },
+    {
+      subscriptionId: "sub-002",
+      sessionId: "session-11223344-5566-7788",
+      fd: 4,
+      permission: "r",
+      deliveryMode: "sync",
+      createdBySpawn: false,
+    },
+  ],
+};
+
+const streamNoSubscribers: StreamData = {
+  id: "stream-empty",
+  name: "telemetry-feed",
+  subscriberCount: 0,
+  messageBufferDepth: 0,
+  subscribers: [],
+};
+
+const streamAllModes: StreamData = {
+  id: "stream-modes",
+  name: "mixed-modes",
+  subscriberCount: 3,
+  messageBufferDepth: 0,
+  subscribers: [
+    {
+      subscriptionId: "sub-rw-async",
+      sessionId: "session-rw-async",
+      fd: 3,
+      permission: "rw",
+      deliveryMode: "async",
+      createdBySpawn: true,
+    },
+    {
+      subscriptionId: "sub-r-sync",
+      sessionId: "session-r-sync",
+      fd: 4,
+      permission: "r",
+      deliveryMode: "sync",
+      createdBySpawn: false,
+    },
+    {
+      subscriptionId: "sub-w-detach",
+      sessionId: "session-w-detach",
+      fd: 5,
+      permission: "w",
+      deliveryMode: "detach",
+      createdBySpawn: false,
+    },
+  ],
+};
+
+// ---------------------------------------------------------------------------
+// Story meta
+// ---------------------------------------------------------------------------
+
+const meta: Meta<typeof StreamDetailPanel> = {
+  title: "Grackle/Streams/StreamDetailPanel",
+  component: StreamDetailPanel,
+  decorators: [withMockGrackleRoute(["/chat/stream-abc123"], "/chat/:streamId")],
+  parameters: { skipRouter: true },
+  args: {
+    stream: streamWithSubscribers,
+    onClose: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StreamDetailPanel>;
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+/** Stream with multiple active subscribers. */
+export const WithSubscribers: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("stream-detail-panel")).toBeInTheDocument();
+    await expect(canvas.getByTestId("subscriber-card-sub-001")).toBeInTheDocument();
+    await expect(canvas.getByTestId("subscriber-card-sub-002")).toBeInTheDocument();
+  },
+};
+
+/** Stream with no subscribers. */
+export const NoSubscribers: Story = {
+  args: {
+    stream: streamNoSubscribers,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("No active subscribers")).toBeInTheDocument();
+  },
+};
+
+/** All permission and delivery mode badge variants. */
+export const AllPermissionModes: Story = {
+  args: {
+    stream: streamAllModes,
+  },
+};
+
+/** Close button calls onClose. */
+export const CloseButton: Story = {
+  play: async ({ canvas, args }) => {
+    const closeBtn = canvas.getByRole("button", { name: /close stream details/i });
+    closeBtn.click();
+    await expect(args.onClose).toHaveBeenCalled();
+  },
+};

package/src/components/streams/StreamDetailPanel.tsx

@@ -0,0 +1,119 @@
+/**
+ * StreamDetailPanel — right pull-out drawer showing stream metadata.
+ *
+ * Renders as an absolutely-positioned overlay anchored to the right of its
+ * containing block (which must have `position: relative`).
+ *
+ * @module
+ */
+
+import { useEffect, type JSX } from "react";
+import type { StreamData } from "../../hooks/types.js";
+import { useAppNavigate, sessionUrl } from "../../utils/navigation.js";
+import styles from "./StreamDetailPanel.module.scss";
+
+/** Props for the StreamDetailPanel component. */
+export interface StreamDetailPanelProps {
+  /** The stream to display details for. */
+  stream: StreamData;
+  /** Called when the user requests to close the panel. */
+  onClose: () => void;
+}
+
+/** Render a permission badge with appropriate color. */
+function PermissionBadge({ permission }: { permission: string }): JSX.Element {
+  const cls = permission === "rw"
+    ? styles.badgeRw
+    : permission === "r"
+      ? styles.badgeR
+      : styles.badgeW;
+  return <span className={cls}>{permission}</span>;
+}
+
+/** Render a delivery mode badge with appropriate color. */
+function DeliveryModeBadge({ mode }: { mode: string }): JSX.Element {
+  const cls = mode === "async"
+    ? styles.badgeAsync
+    : mode === "detach"
+      ? styles.badgeDetach
+      : styles.badgeSync;
+  return <span className={cls}>{mode}</span>;
+}
+
+/**
+ * Pull-out right drawer showing stream metadata: overview, subscribers, fds.
+ */
+export function StreamDetailPanel({ stream, onClose }: StreamDetailPanelProps): JSX.Element {
+  const navigate = useAppNavigate();
+
+  // Close on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => { document.removeEventListener("keydown", handleKeyDown); };
+  }, [onClose]);
+
+  return (
+    <div className={styles.panel} data-testid="stream-detail-panel">
+      <div className={styles.header}>
+        <h3 className={styles.title}>{stream.name}</h3>
+        <button className={styles.closeButton} onClick={onClose} aria-label="Close stream details">
+          &times;
+        </button>
+      </div>
+
+      <div className={styles.body}>
+        {/* Overview */}
+        <div className={styles.section}>
+          <div className={styles.sectionLabel}>Overview</div>
+          <div className={styles.metaRow}>
+            <span className={styles.metaKey}>Stream ID</span>
+            <span className={styles.metaValue}>{stream.id}</span>
+          </div>
+          <div className={styles.metaRow}>
+            <span className={styles.metaKey}>Subscribers</span>
+            <span className={styles.metaValue}>{stream.subscriberCount}</span>
+          </div>
+          <div className={styles.metaRow}>
+            <span className={styles.metaKey}>Buffered</span>
+            <span className={styles.metaValue}>{stream.messageBufferDepth} msgs</span>
+          </div>
+        </div>
+
+        {/* Subscribers */}
+        <div className={styles.section}>
+          <div className={styles.sectionLabel}>Subscribers</div>
+          {stream.subscribers.length === 0 ? (
+            <div className={styles.emptySubscribers}>No active subscribers</div>
+          ) : (
+            stream.subscribers.map((sub) => (
+              <div key={sub.subscriptionId} className={styles.subscriberCard} data-testid={`subscriber-card-${sub.subscriptionId}`}>
+                <div className={styles.subscriberHeader}>
+                  <span className={styles.fdNumber}>fd {sub.fd}</span>
+                  <button
+                    className={styles.sessionLink}
+                    onClick={() => { navigate(sessionUrl(sub.sessionId)); }}
+                    title={sub.sessionId}
+                  >
+                    {sub.sessionId.slice(0, 12)}…
+                  </button>
+                </div>
+                <div className={styles.badges}>
+                  <PermissionBadge permission={sub.permission} />
+                  <DeliveryModeBadge mode={sub.deliveryMode} />
+                  {sub.createdBySpawn && (
+                    <span className={styles.spawnTag}>spawn</span>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,92 @@
+@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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,114 @@
+/**
+ * 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>
+  );
+}

package/src/components/streams/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Stream sidebar and detail panel components.
+ *
+ * @module streams
+ */
+
+export { StreamList } from "./StreamList.js";
+export type { StreamListProps } from "./StreamList.js";
+export { StreamDetailPanel } from "./StreamDetailPanel.js";
+export type { StreamDetailPanelProps } from "./StreamDetailPanel.js";

package/src/components/tools/AgentToolCard.module.scss

@@ -0,0 +1,118 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// AgentToolCard — subagent spawn/poll card styles
+// =============================================================================
+
+// --- Agent type / model badges ---
+
+.badgePill {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  font-size: 10px;
+  font-family: var(--font-mono);
+  font-weight: var(--font-weight-medium);
+  background: rgba(45, 212, 191, 0.12);
+  color: var(--accent-teal, #2dd4bf);
+  flex-shrink: 0;
+}
+
+.modelBadge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  font-size: 10px;
+  font-family: var(--font-mono);
+  background: var(--bg-inset);
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+// --- Background indicator ---
+
+.backgroundBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.backgroundDot {
+  font-size: 8px;
+  color: var(--accent-teal, #2dd4bf);
+}
+
+.backgroundDotPulsing {
+  font-size: 8px;
+  color: var(--accent-teal, #2dd4bf);
+  animation: agentPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes agentPulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+
+// --- Description line ---
+
+.description {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  padding: var(--space-xs) 0 0;
+  line-height: 1.4;
+}
+
+// --- Status line (read_agent metadata) ---
+
+.statusLine {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-tertiary);
+  padding: var(--space-xs) 0 0;
+}
+
+.statusCompleted {
+  font-weight: var(--font-weight-bold);
+  color: var(--accent-green);
+}
+
+.statusRunning {
+  font-weight: var(--font-weight-bold);
+  color: var(--accent-teal, #2dd4bf);
+  animation: agentPulse 1.5s ease-in-out infinite;
+}
+
+.statusError {
+  font-weight: var(--font-weight-bold);
+  color: var(--accent-red);
+}
+
+// --- Prompt section (collapsible) ---
+
+.promptToggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  background: none;
+  border: none;
+  padding: 2px 0;
+  margin-top: var(--space-xs);
+  color: var(--text-tertiary);
+  font-size: 11px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+
+  &:hover {
+    color: var(--text-secondary);
+  }
+}