@grackle-ai/web-components 0.113.0 → 0.114.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web-components",
-  "version": "0.113.0",
+  "version": "0.114.0",
   "description": "Presentational React component library for the Grackle web UI",
   "license": "MIT",
   "sideEffects": [
@@ -46,7 +46,7 @@
     "remark-gfm": "^4.0.0",
     "lucide-react": "~0.474.0",
     "react-router": "^7.0.0",
-    "@grackle-ai/common": "0.113.0"
+    "@grackle-ai/common": "0.114.0"
   },
   "devDependencies": {
     "@rushstack/heft": "1.2.7",

package/rush-logs/web-components._phase_build.cache.log

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: 05ec67b10f932bdbe295aab3f4465cf0d26cb485
+Cache key: b1a36bcc314d65fbd843fcff6d3127ebdf827e06
 Clearing cached folders: dist, storybook-static, .rush/temp/operation/_phase_build
 Successfully restored output from the build cache.

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

@@ -7,13 +7,13 @@ Invoking: heft run --only build -- --clean
 [build:lint] Using ESLint version 9.39.4
 vite v6.4.2 building for production...
 transforming...
-✓ 2716 modules transformed.
+✓ 2718 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.css                   158.47 kB │ gzip:  20.60 kB
+dist/index.css                   159.65 kB │ gzip:  20.78 kB
 dist/McpAppWidget-CSX2W2Vb.js    205.28 kB │ gzip:  47.19 kB
-dist/index.js                  1,385.24 kB │ gzip: 354.56 kB
-✓ built in 5.92s
+dist/index.js                  1,392.78 kB │ gzip: 356.09 kB
+✓ built in 5.94s
 [build:vite-build] Vite build completed.
- ---- build finished (77.344s) ---- 
--------------------- Finished (77.347s) --------------------
+ ---- build finished (75.104s) ---- 
+-------------------- Finished (75.107s) --------------------

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

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: b47d67cd3e2d79d0da7f9aef2eb425725d6d2f61
+Cache key: 989dfd9dfc66be6288052dccbf2952ddad9066c6
 Clearing cached folders: .rush/temp/operation/_phase_test
 Successfully restored output from the build cache.

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

@@ -5,29 +5,31 @@ The provided list of phases does not contain all phase dependencies. You may nee
 
  RUN  v3.2.4 /home/runner/work/grackle/grackle/packages/web-components
 
- ✓ src/utils/sessionEvents.test.ts (14 tests) 36ms
- ✓ src/utils/eventContent.test.ts (38 tests) 110ms
- ✓ src/utils/dashboard.test.ts (4 tests) 7ms
- ✓ src/utils/route-config.test.ts (23 tests) 21ms
- ✓ src/utils/scrollUtils.test.ts (11 tests) 49ms
- ✓ src/utils/breadcrumbs.test.ts (18 tests) 88ms
- ✓ src/components/tools/classifyTool.test.ts (6 tests) 17ms
- ✓ src/utils/assetUrl.test.ts (3 tests) 33ms
- ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 29ms
- ✓ src/components/display/extractText.test.tsx (8 tests) 31ms
- ✓ src/components/editable/useEditableField.test.tsx (17 tests) 273ms
- ✓ src/hooks/useEventSelection.test.ts (13 tests) 121ms
- ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 155ms
- ✓ src/utils/grackleHostStyleVariables.test.ts (2 tests) 306ms
- ✓ src/components/display/McpAppWidget.test.tsx (3 tests) 383ms
-
- Test Files  15 passed (15)
-      Tests  174 passed (174)
-   Start at  03:06:05
-   Duration  16.86s (transform 3.49s, setup 0ms, collect 18.02s, tests 1.66s, environment 13.18s, prepare 5.11s)
+ ✓ src/utils/sessionEvents.test.ts (14 tests) 67ms
+ ✓ src/utils/eventContent.test.ts (38 tests) 187ms
+ ✓ src/utils/dashboard.test.ts (4 tests) 38ms
+ ✓ src/utils/route-config.test.ts (23 tests) 90ms
+ ✓ src/utils/streamCoordination.test.ts (10 tests) 29ms
+ ✓ src/utils/breadcrumbs.test.ts (18 tests) 41ms
+ ✓ src/utils/scrollUtils.test.ts (11 tests) 41ms
+ ✓ src/components/tools/classifyTool.test.ts (6 tests) 19ms
+ ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 14ms
+ ✓ src/utils/assetUrl.test.ts (3 tests) 11ms
+ ✓ src/components/display/extractText.test.tsx (8 tests) 12ms
+ ✓ src/hooks/useEventSelection.test.ts (13 tests) 244ms
+ ✓ src/components/editable/useEditableField.test.tsx (17 tests) 231ms
+ ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 169ms
+ ✓ src/components/display/McpAppWidget.test.tsx (3 tests) 234ms
+ ✓ src/utils/grackleHostStyleVariables.test.ts (2 tests) 477ms
+   ✓ grackleHostStyleVariables > always returns the MCP-standard fallback variables  467ms
+
+ Test Files  16 passed (16)
+      Tests  184 passed (184)
+   Start at  08:12:34
+   Duration  15.79s (transform 2.74s, setup 0ms, collect 15.85s, tests 1.90s, environment 10.61s, prepare 6.00s)
 
 [test:vitest] Vitest completed.
-[test:storybook-test] Starting Storybook static server on port 33461...
+[test:storybook-test] Starting Storybook static server on port 45781...
 [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:
@@ -120,5 +122,5 @@ jest-haste-map: duplicate manual mock found: utils/network
     * <rootDir>/packages/server/src/__mocks__/utils/network.ts
 
 [test:storybook-test] Storybook interaction tests completed.
- ---- test finished (118.259s) ---- 
--------------------- Finished (118.269s) --------------------
+ ---- test finished (111.929s) ---- 
+-------------------- Finished (111.943s) --------------------

package/src/components/layout/AppNav.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 export const AllTabsRendered: Story = {
   play: async ({ canvas }) => {
     await expect(canvas.getByRole("tab", { name: /Dashboard/ })).toBeInTheDocument();
-    await expect(canvas.getByRole("tab", { name: /Sessions/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Root/ })).toBeInTheDocument();
     await expect(canvas.getByRole("tab", { name: /Tasks/ })).toBeInTheDocument();
     await expect(canvas.getByRole("tab", { name: /Environments/ })).toBeInTheDocument();
     await expect(canvas.getByRole("tab", { name: /Knowledge/ })).toBeInTheDocument();
@@ -30,14 +30,14 @@ export const CoreOnlyTabs: Story = {
   args: {
     tabs: [
       { view: "dashboard", label: "Dashboard", icon: <Home size={ICON_LG} />, route: HOME_URL, testId: "sidebar-tab-dashboard" },
-      { view: "chat", label: "Sessions", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat" },
+      { view: "chat", label: "Root", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat" },
       { view: "environments", label: "Environments", icon: <Monitor size={ICON_LG} />, route: ENVIRONMENTS_URL, testId: "sidebar-tab-environments" },
       { view: "settings", label: "Settings", icon: <Settings size={ICON_LG} />, route: SETTINGS_CREDENTIALS_URL, testId: "sidebar-tab-settings" },
     ],
   },
   play: async ({ canvas }) => {
     await expect(canvas.getByRole("tab", { name: /Dashboard/ })).toBeInTheDocument();
-    await expect(canvas.getByRole("tab", { name: /Sessions/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Root/ })).toBeInTheDocument();
     await expect(canvas.getByRole("tab", { name: /Environments/ })).toBeInTheDocument();
     await expect(canvas.getByRole("tab", { name: /Settings/ })).toBeInTheDocument();
     await expect(canvas.queryByRole("tab", { name: /Tasks/ })).not.toBeInTheDocument();
@@ -51,7 +51,7 @@ export const AllTabsExplicit: Story = {
   args: {
     tabs: [
       { view: "dashboard", label: "Dashboard", icon: <Home size={ICON_LG} />, route: HOME_URL, testId: "sidebar-tab-dashboard" },
-      { view: "chat", label: "Sessions", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat" },
+      { view: "chat", label: "Root", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat" },
       { view: "tasks", label: "Tasks", icon: <ClipboardList size={ICON_LG} />, route: TASKS_URL, testId: "sidebar-tab-tasks" },
       { view: "environments", label: "Environments", icon: <Monitor size={ICON_LG} />, route: ENVIRONMENTS_URL, testId: "sidebar-tab-environments" },
       { view: "knowledge", label: "Knowledge", icon: <Brain size={ICON_LG} />, route: KNOWLEDGE_URL, testId: "sidebar-tab-knowledge" },
@@ -78,7 +78,7 @@ export const SettingsPinnedRight: Story = {
   args: {
     tabs: [
       { view: "dashboard", label: "Dashboard", icon: <Home size={ICON_LG} />, route: HOME_URL, testId: "sidebar-tab-dashboard" },
-      { view: "chat", label: "Sessions", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat" },
+      { view: "chat", label: "Root", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat" },
       { view: "environments", label: "Environments", icon: <Monitor size={ICON_LG} />, route: ENVIRONMENTS_URL, testId: "sidebar-tab-environments" },
       { view: "settings", label: "Settings", icon: <Settings size={ICON_LG} />, route: SETTINGS_CREDENTIALS_URL, testId: "sidebar-tab-settings", align: "end" },
       { view: "tasks", label: "Tasks", icon: <ClipboardList size={ICON_LG} />, route: TASKS_URL, testId: "sidebar-tab-tasks" },

package/src/components/layout/AppNav.tsx

@@ -1,13 +1,13 @@
 import { useCallback, useMemo, useRef, type JSX, type KeyboardEvent, type ReactNode } from "react";
 import { useLocation } from "react-router";
-import { Brain, ClipboardList, Home, MessageSquare, Monitor, Search, Settings } from "lucide-react";
-import { CHAT_URL, ENVIRONMENTS_URL, FINDINGS_URL, HOME_URL, KNOWLEDGE_URL, SETTINGS_URL, SETTINGS_CREDENTIALS_URL, TASKS_URL, useAppNavigate } from "../../utils/navigation.js";
+import { Brain, ClipboardList, Home, MessageSquare, Monitor, Network, Search, Settings } from "lucide-react";
+import { CHAT_URL, COORDINATION_URL, ENVIRONMENTS_URL, FINDINGS_URL, HOME_URL, KNOWLEDGE_URL, SETTINGS_URL, SETTINGS_CREDENTIALS_URL, TASKS_URL, useAppNavigate } from "../../utils/navigation.js";
 import { ICON_LG } from "../../utils/iconSize.js";
 import { Tooltip } from "../display/Tooltip.js";
 import styles from "./AppNav.module.scss";
 
 /** Application view identifiers. */
-export type AppView = "dashboard" | "chat" | "tasks" | "environments" | "knowledge" | "findings" | "settings";
+export type AppView = "dashboard" | "chat" | "tasks" | "environments" | "knowledge" | "findings" | "coordination" | "settings";
 
 /** Tab definition for the application navigation bar. */
 export interface AppTab {
@@ -36,9 +36,10 @@ export const TABS: AppTab[] = [
   { view: "dashboard", label: "Dashboard", icon: <Home size={ICON_LG} />, route: HOME_URL, testId: "sidebar-tab-dashboard", order: 0 },
   { view: "tasks", label: "Tasks", icon: <ClipboardList size={ICON_LG} />, route: TASKS_URL, testId: "sidebar-tab-tasks", order: 1 },
   { view: "environments", label: "Environments", icon: <Monitor size={ICON_LG} />, route: ENVIRONMENTS_URL, testId: "sidebar-tab-environments", order: 2 },
-  { view: "chat", label: "Sessions", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat", order: 3 },
+  { view: "chat", label: "Root", icon: <MessageSquare size={ICON_LG} />, route: CHAT_URL, testId: "sidebar-tab-chat", order: 3 },
   { view: "findings", label: "Findings", icon: <Search size={ICON_LG} />, route: FINDINGS_URL, testId: "sidebar-tab-findings", order: 4 },
   { view: "knowledge", label: "Knowledge", icon: <Brain size={ICON_LG} />, route: KNOWLEDGE_URL, testId: "sidebar-tab-knowledge", order: 5 },
+  { view: "coordination", label: "Coordination", icon: <Network size={ICON_LG} />, route: COORDINATION_URL, testId: "sidebar-tab-coordination", order: 6 },
   { view: "settings", label: "Settings", icon: <Settings size={ICON_LG} />, route: SETTINGS_CREDENTIALS_URL, testId: "sidebar-tab-settings", align: "end" },
 ];
 
@@ -47,6 +48,9 @@ export function getActiveView(pathname: string): AppView {
   if (pathname === HOME_URL || pathname === "/") {
     return "dashboard";
   }
+  if (pathname.startsWith(COORDINATION_URL)) {
+    return "coordination";
+  }
   if (pathname.startsWith("/chat") || pathname.startsWith("/sessions")) {
     return "chat";
   }

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

@@ -25,7 +25,7 @@ export const AllCategoriesRendered: Story = {
     await expect(canvas.getByText("Workspace Page")).toBeInTheDocument();
     await expect(canvas.getByText("Navigation Lists")).toBeInTheDocument();
     await expect(canvas.getByText("Editing")).toBeInTheDocument();
-    await expect(canvas.getByText("Sessions")).toBeInTheDocument();
+    await expect(canvas.getByText("Root")).toBeInTheDocument();
   },
 };
 

package/src/components/panels/KeyboardShortcutsPanel.tsx

@@ -66,7 +66,7 @@ const SHORTCUT_GROUPS: ShortcutGroup[] = [
     ],
   },
   {
-    title: "Sessions",
+    title: "Root",
     shortcuts: [
       { keys: ["Ctrl/Cmd", "Enter"], description: "Send message (when the composer is focused)" },
       { keys: ["Enter"], description: "Insert a new line in the message composer" },

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

@@ -0,0 +1,137 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// CoordinationList — read-only IPC stream inventory (Coordination tab)
+// =============================================================================
+
+.container {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-sm) 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.title {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.internalsToggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  user-select: none;
+}
+
+.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);
+  }
+}
+
+.state {
+  padding: var(--space-lg) var(--space-md);
+  font-size: var(--font-size-sm);
+  color: var(--text-disabled);
+  text-align: center;
+}
+
+.group {
+  margin-top: var(--space-sm);
+}
+
+.groupHeader {
+  @include section-label;
+  padding: var(--space-xs) var(--space-md);
+}
+
+.row {
+  @include hover-accent;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  width: 100%;
+  padding: var(--space-xs) var(--space-md);
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  min-height: 34px;
+
+  &.selected {
+    background: var(--bg-overlay);
+  }
+}
+
+.kindBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  padding: 1px 6px;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--border-subtle);
+}
+
+.kindChatroom {
+  color: var(--accent-green);
+  background: var(--accent-green-dim);
+  border-color: var(--accent-green);
+}
+
+.kindPipe {
+  color: var(--accent-yellow);
+  background: var(--bg-inset);
+  border-color: var(--accent-yellow);
+}
+
+.kindChannel {
+  color: var(--accent-blue);
+  background: var(--accent-blue-dim);
+  border-color: var(--accent-blue);
+}
+
+.streamName {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}

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

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import type { Session, StreamData } from "../../hooks/types.js";
+import { CoordinationList } from "./CoordinationList.js";
+
+function sub(sessionId: string): StreamData["subscribers"][number] {
+  return { subscriptionId: `sub-${sessionId}`, sessionId, fd: 3, permission: "rw", deliveryMode: "async", createdBySpawn: false };
+}
+function stream(over: Partial<StreamData> & { id: string; name: string }): StreamData {
+  return { subscriberCount: over.subscribers?.length ?? 1, messageBufferDepth: 0, selfEcho: false, subscribers: over.subscribers ?? [sub("s1")], ...over };
+}
+function session(id: string, taskId?: string): Session {
+  return { id, environmentId: "env-1", runtime: "claude-code", status: "running", prompt: "", startedAt: "2026-01-01T00:00:00Z", taskId };
+}
+
+const sessions: Session[] = [session("s1", "task-1"), session("s2", "task-1"), session("s3")];
+const tasks: { id: string; title: string }[] = [{ id: "task-1", title: "Implement JWT auth" }];
+
+const mixedStreams: StreamData[] = [
+  stream({ id: "room", name: "agent-chat", selfEcho: true, subscribers: [sub("s1"), sub("s2")], subscriberCount: 2 }),
+  stream({ id: "chan", name: "telemetry", subscribers: [sub("s2")] }),
+  stream({ id: "orphan", name: "cli-inspector", subscribers: [sub("s3")] }),
+];
+
+const meta: Meta<typeof CoordinationList> = {
+  title: "Grackle/Streams/CoordinationList",
+  component: CoordinationList,
+  args: {
+    streams: mixedStreams,
+    sessions,
+    tasks,
+    loading: false,
+    loadedOnce: true,
+    showInternals: false,
+    onToggleInternals: fn(),
+    onSelectStream: fn(),
+    onRefresh: fn(),
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Streams grouped by owning task, with a trailing unattached/external bucket. */
+export const GroupedByTask: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("coordination-list")).toBeInTheDocument();
+    await expect(canvas.getByText("Implement JWT auth")).toBeInTheDocument();
+    await expect(canvas.getByText(/Unattached/)).toBeInTheDocument();
+    await expect(canvas.getByTestId("coordination-row-room")).toBeInTheDocument();
+    await expect(canvas.getByTestId("coordination-row-orphan")).toBeInTheDocument();
+  },
+};
+
+/** Each stream is tagged with its kind badge. */
+export const KindBadges: Story = {
+  play: async ({ canvas }) => {
+    // mixedStreams has one chatroom and two channels.
+    await expect(canvas.getAllByText("Chatroom")).toHaveLength(1);
+    await expect(canvas.getAllByText("Channel")).toHaveLength(2);
+  },
+};
+
+/** Toggling "Show internals" calls back to re-fetch. */
+export const InternalsToggle: Story = {
+  play: async ({ canvas, args }) => {
+    const toggle = canvas.getByTestId("coordination-show-internals");
+    await expect(toggle).not.toBeChecked();
+    await userEvent.click(toggle);
+    await expect(args.onToggleInternals).toHaveBeenCalledWith(true);
+  },
+};
+
+/** Clicking a row selects the stream. */
+export const SelectStream: Story = {
+  play: async ({ canvas, args }) => {
+    await userEvent.click(canvas.getByTestId("coordination-row-chan"));
+    await expect(args.onSelectStream).toHaveBeenCalledWith("chan");
+  },
+};
+
+/** Empty state when there are no streams. */
+export const EmptyState: Story = {
+  args: { streams: [] },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("coordination-empty")).toBeInTheDocument();
+  },
+};
+
+/** Error state when the load failed. */
+export const ErrorState: Story = {
+  args: { streams: [], loadError: true },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("coordination-error")).toBeInTheDocument();
+  },
+};

package/src/components/streams/CoordinationList.tsx

@@ -0,0 +1,153 @@
+/**
+ * CoordinationList — read-only inventory of IPC streams for the Coordination tab.
+ *
+ * Groups streams by the task that owns their subscribers (with a trailing
+ * unattached/external bucket), tags each by kind, and offers a "Show internals"
+ * toggle to reveal internal IPC plumbing (lifecycle/pipe/stdin).
+ *
+ * Pure presentational component — data and callbacks come from the page.
+ *
+ * @module
+ */
+
+import { type JSX } from "react";
+import { GitBranch, Hash, MessagesSquare, RefreshCw } from "lucide-react";
+import type { Session, StreamData, TaskData } from "../../hooks/types.js";
+import { groupStreamsByTask, streamKind, type StreamKind } from "../../utils/streamCoordination.js";
+import { ICON_SM } from "../../utils/iconSize.js";
+import styles from "./CoordinationList.module.scss";
+
+/** Human-readable label per stream kind. */
+const KIND_LABEL: Record<StreamKind, string> = {
+  chatroom: "Chatroom",
+  pipe: "Pipe",
+  channel: "Channel",
+};
+
+/** Icon per stream kind. */
+function KindIcon({ kind }: { kind: StreamKind }): JSX.Element {
+  if (kind === "chatroom") {
+    return <MessagesSquare size={ICON_SM} aria-hidden="true" />;
+  }
+  if (kind === "pipe") {
+    return <GitBranch size={ICON_SM} aria-hidden="true" />;
+  }
+  return <Hash size={ICON_SM} aria-hidden="true" />;
+}
+
+/** Props for the CoordinationList component. */
+export interface CoordinationListProps {
+  /** Streams to display (already filtered server-side by the internals toggle). */
+  streams: StreamData[];
+  /** All known sessions, used to attribute streams to their owning task. */
+  sessions: Session[];
+  /** Known tasks (only `id` + `title` are used), to render group headers. */
+  tasks: readonly Pick<TaskData, "id" | "title">[];
+  /** Whether streams are currently loading. */
+  loading: boolean;
+  /** True if the most recent load attempt failed. */
+  loadError?: boolean;
+  /** True after at least one load attempt has completed. */
+  loadedOnce?: boolean;
+  /** Whether internal IPC plumbing is currently shown. */
+  showInternals: boolean;
+  /** Called when the "Show internals" toggle changes. */
+  onToggleInternals: (value: boolean) => void;
+  /** Currently selected stream id (for highlight). */
+  selectedStreamId?: string;
+  /** Called when a stream row is clicked. */
+  onSelectStream: (streamId: string) => void;
+  /** Optional refresh callback. */
+  onRefresh?: () => void;
+}
+
+/** Read-only, task-grouped inventory of IPC streams. */
+export function CoordinationList({
+  streams,
+  sessions,
+  tasks,
+  loading,
+  loadError = false,
+  loadedOnce = true,
+  showInternals,
+  onToggleInternals,
+  selectedStreamId,
+  onSelectStream,
+  onRefresh,
+}: CoordinationListProps): JSX.Element {
+  const groups = groupStreamsByTask(streams, sessions);
+  const kindClass: Record<StreamKind, string> = {
+    chatroom: styles.kindChatroom,
+    pipe: styles.kindPipe,
+    channel: styles.kindChannel,
+  };
+  const taskTitle = (taskId: string): string => tasks.find((t) => t.id === taskId)?.title ?? taskId;
+
+  return (
+    <div className={styles.container} data-testid="coordination-list">
+      <div className={styles.header}>
+        <span className={styles.title}>Coordination</span>
+        <div className={styles.headerActions}>
+          <label className={styles.internalsToggle}>
+            <input
+              type="checkbox"
+              checked={showInternals}
+              onChange={(e) => onToggleInternals(e.target.checked)}
+              data-testid="coordination-show-internals"
+            />
+            Show internals
+          </label>
+          {onRefresh && (
+            <button
+              type="button"
+              className={styles.refreshButton}
+              onClick={onRefresh}
+              aria-label="Refresh streams"
+              data-testid="coordination-refresh"
+            >
+              <RefreshCw size={ICON_SM} aria-hidden="true" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {loading && streams.length === 0 && <div className={styles.state}>Loading{"…"}</div>}
+      {!loading && loadError && (
+        <div className={styles.state} data-testid="coordination-error">Unable to load streams</div>
+      )}
+      {!loading && !loadError && loadedOnce && streams.length === 0 && (
+        <div className={styles.state} data-testid="coordination-empty">No active streams</div>
+      )}
+
+      {groups.map((group) => (
+        <div key={group.taskId ?? "__orphans__"} className={styles.group}>
+          <div className={styles.groupHeader}>
+            {group.taskId ? taskTitle(group.taskId) : "Unattached / external (CLI · MCP)"}
+          </div>
+          {group.streams.map((stream) => {
+            const kind = streamKind(stream);
+            const isSelected = stream.id === selectedStreamId;
+            return (
+              <button
+                key={stream.id}
+                type="button"
+                className={`${styles.row}${isSelected ? ` ${styles.selected}` : ""}`}
+                onClick={() => onSelectStream(stream.id)}
+                data-testid={`coordination-row-${stream.id}`}
+                aria-current={isSelected ? "page" : undefined}
+              >
+                <span className={`${styles.kindBadge} ${kindClass[kind]}`}>
+                  <KindIcon kind={kind} /> {KIND_LABEL[kind]}
+                </span>
+                <span className={styles.streamName}>{stream.name}</span>
+                <span className={styles.meta}>
+                  {stream.subscriberCount} {stream.subscriberCount === 1 ? "sub" : "subs"} {"·"} {stream.messageBufferDepth} buffered
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -204,3 +204,33 @@
   color: var(--text-disabled, #666);
   font-style: italic;
 }
+
+.metaValueMono {
+  composes: metaValue;
+  word-break: break-all;
+  white-space: normal;
+}
+
+.placeholder {
+  font-size: 13px;
+  color: var(--text-disabled, #666);
+  font-style: italic;
+  padding: 10px 12px;
+  border: 1px dashed var(--border-default, #333);
+  border-radius: 6px;
+}
+
+.advanced {
+  margin-top: 8px;
+}
+
+.advancedSummary {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-disabled, #666);
+  cursor: pointer;
+  margin-bottom: 8px;
+  user-select: none;
+}

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

@@ -13,6 +13,7 @@ const streamWithSubscribers: StreamData = {
   name: "agent-chat",
   subscriberCount: 2,
   messageBufferDepth: 5,
+  selfEcho: true,
   subscribers: [
     {
       subscriptionId: "sub-001",
@@ -38,6 +39,7 @@ const streamNoSubscribers: StreamData = {
   name: "telemetry-feed",
   subscriberCount: 0,
   messageBufferDepth: 0,
+  selfEcho: false,
   subscribers: [],
 };
 
@@ -46,6 +48,7 @@ const streamAllModes: StreamData = {
   name: "mixed-modes",
   subscriberCount: 3,
   messageBufferDepth: 0,
+  selfEcho: false,
   subscribers: [
     {
       subscriptionId: "sub-rw-async",