@grackle-ai/web-components 0.112.2 → 0.114.0

package/src/utils/streamCoordination.test.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect } from "vitest";
+import type { Session, StreamData, StreamSubscriberData } from "../hooks/types.js";
+import { attributeStream, groupStreamsByTask, isInternalStream, streamKind } from "./streamCoordination.js";
+
+function makeSub(sessionId: string): StreamSubscriberData {
+  return { subscriptionId: `sub-${sessionId}`, sessionId, fd: 3, permission: "rw", deliveryMode: "async", createdBySpawn: false };
+}
+
+function makeStream(over: Partial<StreamData> & { id: string; name: string }): StreamData {
+  return {
+    subscriberCount: over.subscribers?.length ?? 0,
+    messageBufferDepth: 0,
+    selfEcho: false,
+    subscribers: [],
+    ...over,
+  };
+}
+
+function makeSession(id: string, taskId?: string): Session {
+  return { id, environmentId: "env-1", runtime: "claude-code", status: "running", prompt: "", startedAt: "2026-01-01T00:00:00Z", taskId };
+}
+
+describe("streamKind", () => {
+  it("classifies self-echo streams as chatroom", () => {
+    expect(streamKind(makeStream({ id: "1", name: "room", selfEcho: true }))).toBe("chatroom");
+  });
+  it("classifies pipe: streams as pipe", () => {
+    expect(streamKind(makeStream({ id: "2", name: "pipe:abc" }))).toBe("pipe");
+  });
+  it("classifies other named streams as channel", () => {
+    expect(streamKind(makeStream({ id: "3", name: "telemetry" }))).toBe("channel");
+  });
+});
+
+describe("isInternalStream", () => {
+  it("flags reserved prefixes", () => {
+    expect(isInternalStream(makeStream({ id: "1", name: "lifecycle:x" }))).toBe(true);
+    expect(isInternalStream(makeStream({ id: "2", name: "pipe:x" }))).toBe(true);
+    expect(isInternalStream(makeStream({ id: "3", name: "stdin:x" }))).toBe(true);
+  });
+  it("does not flag normal names", () => {
+    expect(isInternalStream(makeStream({ id: "4", name: "agent-chat" }))).toBe(false);
+  });
+});
+
+describe("attributeStream", () => {
+  const sessions = [makeSession("s-task", "task-1"), makeSession("s-orphan")];
+
+  it("attributes to a task when a subscriber session has a taskId", () => {
+    const stream = makeStream({ id: "1", name: "x", subscribers: [makeSub("s-task")] });
+    expect(attributeStream(stream, sessions)).toEqual({ kind: "task", taskId: "task-1" });
+  });
+  it("returns unattached when the session is known but task-less", () => {
+    const stream = makeStream({ id: "2", name: "x", subscribers: [makeSub("s-orphan")] });
+    expect(attributeStream(stream, sessions)).toEqual({ kind: "unattached" });
+  });
+  it("returns external when no subscriber session is known", () => {
+    const stream = makeStream({ id: "3", name: "x", subscribers: [makeSub("s-unknown")] });
+    expect(attributeStream(stream, sessions)).toEqual({ kind: "external" });
+  });
+});
+
+describe("groupStreamsByTask", () => {
+  it("groups streams by owning task with a trailing orphan bucket", () => {
+    const sessions = [makeSession("s1", "task-1"), makeSession("s2", "task-2"), makeSession("s3")];
+    const streams = [
+      makeStream({ id: "a", name: "a", subscribers: [makeSub("s1")] }),
+      makeStream({ id: "b", name: "b", subscribers: [makeSub("s2")] }),
+      makeStream({ id: "c", name: "c", subscribers: [makeSub("s1")] }),
+      makeStream({ id: "d", name: "d", subscribers: [makeSub("s3")] }), // unattached
+      makeStream({ id: "e", name: "e", subscribers: [makeSub("s-unknown")] }), // external
+    ];
+    const groups = groupStreamsByTask(streams, sessions);
+
+    expect(groups.map((g) => g.taskId)).toEqual(["task-1", "task-2", undefined]);
+    expect(groups[0].streams.map((s) => s.id)).toEqual(["a", "c"]);
+    expect(groups[1].streams.map((s) => s.id)).toEqual(["b"]);
+    expect(groups[2].streams.map((s) => s.id)).toEqual(["d", "e"]);
+  });
+
+  it("omits the orphan bucket when every stream is attributed", () => {
+    const sessions = [makeSession("s1", "task-1")];
+    const streams = [makeStream({ id: "a", name: "a", subscribers: [makeSub("s1")] })];
+    const groups = groupStreamsByTask(streams, sessions);
+    expect(groups).toHaveLength(1);
+    expect(groups[0].taskId).toBe("task-1");
+  });
+});

package/src/utils/streamCoordination.ts

@@ -0,0 +1,108 @@
+/**
+ * Pure helpers for the Coordination surface: classifying IPC streams by kind
+ * and attributing them to the task that owns their subscribers.
+ *
+ * No React or DOM dependencies — safe to unit test in isolation.
+ *
+ * @module
+ */
+
+import type { Session, StreamData } from "../hooks/types.js";
+
+/** Internal IPC plumbing prefixes (mirrors the server's RESERVED_PREFIXES). */
+export const INTERNAL_STREAM_PREFIXES: readonly string[] = ["lifecycle:", "pipe:", "stdin:"];
+
+/** Display kind of a stream, derived from its shape. */
+export type StreamKind = "chatroom" | "pipe" | "channel";
+
+/** Ownership classification of a stream, derived from its subscribers' sessions. */
+export type StreamOwnership =
+  | { kind: "task"; taskId: string }
+  | { kind: "unattached" }
+  | { kind: "external" };
+
+/**
+ * Classify a stream's kind:
+ * - `chatroom` — self-echo streams (N-party rooms where senders see their own messages).
+ * - `pipe` — internal point-to-point pipes (`pipe:` prefix).
+ * - `channel` — any other named stream.
+ */
+export function streamKind(stream: StreamData): StreamKind {
+  if (stream.selfEcho) {
+    return "chatroom";
+  }
+  if (stream.name.startsWith("pipe:")) {
+    return "pipe";
+  }
+  return "channel";
+}
+
+/** Returns true when a stream is internal IPC plumbing (reserved prefix). */
+export function isInternalStream(stream: StreamData): boolean {
+  return INTERNAL_STREAM_PREFIXES.some((prefix) => stream.name.startsWith(prefix));
+}
+
+/**
+ * Attribute a stream to the task that owns it, by resolving its subscribers'
+ * sessions:
+ * - the first subscriber whose session has a `taskId` wins → `{ kind: "task" }`;
+ * - else if any subscriber's session is known (but task-less) → `unattached`;
+ * - else (no subscriber session resolvable — e.g. CLI/MCP-created) → `external`.
+ */
+export function attributeStream(stream: StreamData, sessions: readonly Session[]): StreamOwnership {
+  return attributeWithMap(stream, new Map(sessions.map((s) => [s.id, s])));
+}
+
+/** Attribution against a precomputed session map — avoids rebuilding it per stream. */
+function attributeWithMap(stream: StreamData, sessionsById: ReadonlyMap<string, Session>): StreamOwnership {
+  let sawKnownSession = false;
+  for (const sub of stream.subscribers) {
+    const session = sessionsById.get(sub.sessionId);
+    if (session) {
+      sawKnownSession = true;
+      if (session.taskId) {
+        return { kind: "task", taskId: session.taskId };
+      }
+    }
+  }
+  return sawKnownSession ? { kind: "unattached" } : { kind: "external" };
+}
+
+/** A group of streams sharing an owning task (or the unattached/external bucket). */
+export interface StreamGroup {
+  /** Owning task id, or `undefined` for the combined unattached/external bucket. */
+  taskId?: string;
+  /** Streams in this group, in their incoming order. */
+  streams: StreamData[];
+}
+
+/**
+ * Group streams by owning task, preserving first-seen order of tasks. Streams
+ * that are unattached or external are collected into a single trailing bucket
+ * with `taskId === undefined`.
+ */
+export function groupStreamsByTask(streams: readonly StreamData[], sessions: readonly Session[]): StreamGroup[] {
+  const sessionsById = new Map(sessions.map((s) => [s.id, s]));
+  const taskGroups = new Map<string, StreamData[]>();
+  const orphans: StreamData[] = [];
+
+  for (const stream of streams) {
+    const ownership = attributeWithMap(stream, sessionsById);
+    if (ownership.kind === "task") {
+      const existing = taskGroups.get(ownership.taskId);
+      if (existing) {
+        existing.push(stream);
+      } else {
+        taskGroups.set(ownership.taskId, [stream]);
+      }
+    } else {
+      orphans.push(stream);
+    }
+  }
+
+  const groups: StreamGroup[] = Array.from(taskGroups, ([taskId, groupStreams]) => ({ taskId, streams: groupStreams }));
+  if (orphans.length > 0) {
+    groups.push({ taskId: undefined, streams: orphans });
+  }
+  return groups;
+}

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",
@@ -145,9 +145,17 @@
       "components/tools/ToolCard.tsx",
       "daOT8+qSG8CTNk+//LXtKNBcFfE=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
+    [
+      "utils/grackleHostStyleVariables.ts",
+      "4GAn+eMbEHJoOb1z01LPtk6nJ7U=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+    ],
+    [
+      "components/display/McpAppWidget.tsx",
+      "FHPzMKgR6sTY4eFNQv5BPGbIhBI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+    ],
     [
       "components/display/EventRenderer.tsx",
-      "baXzKtFkiMslyFhdBCwrXQHmfZ8=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "PHybhj9WzoyCcHMrbT8OHMiXuQI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/display/ConfirmDialog.tsx",
@@ -177,17 +185,9 @@
       "components/display/SessionAttemptSelector.tsx",
       "3P6Dn2a9NBqHlUcL32V4cbFlQnA=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
-    [
-      "utils/grackleHostStyleVariables.ts",
-      "4GAn+eMbEHJoOb1z01LPtk6nJ7U=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
-    ],
-    [
-      "components/display/McpAppWidget.tsx",
-      "FHPzMKgR6sTY4eFNQv5BPGbIhBI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
-    ],
     [
       "components/display/index.ts",
-      "RDb8Fh+7051CrG4TyqRFZAV2xes=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "u8VYHmtVaFCzY50HZB9BaToo/Uk=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/display/EventHoverRow.tsx",
@@ -223,7 +223,7 @@
     ],
     [
       "components/display/EventStream.tsx",
-      "nUUukNWjhiFGA12f1MdOlE8Y3No=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "zU7SmOEHQotfmTvaRF0f7x3kIzo=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/editable/useEditableField.ts",
@@ -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",
-      "Lbo23h9QnwqCWZmf6x/aafniLGY=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "GBCOSyIvbIWfMykHVFwaig0ddkA=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/index.ts",
@@ -527,7 +535,7 @@
     ],
     [
       "components/display/EventRenderer.stories.tsx",
-      "TJiKZNxPldFn9X6rDkmjlIjwp1k=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "vwvW6L580d9RGMBXR6UIB78YLAg=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/display/EventStream.stories.tsx",
@@ -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>
-  );
-}