@grackle-ai/web-components 0.113.0 → 0.115.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web-components",
-  "version": "0.113.0",
+  "version": "0.115.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.115.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: 2cba8bf698d83f55d8c7bde4c1f1ab17c9392271
 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.84 kB │ gzip: 356.12 kB
+✓ built in 5.78s
 [build:vite-build] Vite build completed.
- ---- build finished (77.344s) ---- 
--------------------- Finished (77.347s) --------------------
+ ---- build finished (75.689s) ---- 
+-------------------- Finished (75.692s) --------------------

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

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: b47d67cd3e2d79d0da7f9aef2eb425725d6d2f61
+Cache key: f7dc40a6d2b535279358eddd5c0cd5f4e522416c
 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/eventContent.test.ts (38 tests) 39ms
+ ✓ src/utils/sessionEvents.test.ts (14 tests) 48ms
+ ✓ src/utils/dashboard.test.ts (4 tests) 26ms
+ ✓ src/utils/route-config.test.ts (23 tests) 48ms
+ ✓ src/utils/streamCoordination.test.ts (10 tests) 29ms
+ ✓ src/utils/breadcrumbs.test.ts (18 tests) 70ms
+ ✓ src/utils/scrollUtils.test.ts (11 tests) 42ms
+ ✓ src/components/tools/classifyTool.test.ts (6 tests) 7ms
+ ✓ src/utils/assetUrl.test.ts (3 tests) 16ms
+ ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 26ms
+ ✓ src/components/display/extractText.test.tsx (8 tests) 7ms
+ ✓ src/components/editable/useEditableField.test.tsx (17 tests) 140ms
+ ✓ src/hooks/useEventSelection.test.ts (13 tests) 185ms
+ ✓ src/components/display/McpAppWidget.test.tsx (3 tests) 635ms
+   ✓ McpAppWidget > mounts an iframe host for the widget  401ms
+ ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 152ms
+ ✓ src/utils/grackleHostStyleVariables.test.ts (2 tests) 300ms
+
+ Test Files  16 passed (16)
+      Tests  184 passed (184)
+   Start at  13:23:17
+   Duration  16.16s (transform 2.79s, setup 0ms, collect 18.18s, tests 1.77s, environment 12.06s, prepare 6.31s)
 
 [test:vitest] Vitest completed.
-[test:storybook-test] Starting Storybook static server on port 33461...
+[test:storybook-test] Starting Storybook static server on port 35329...
 [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 (113.095s) ---- 
+-------------------- Finished (113.1s) --------------------

package/src/components/display/EventRenderer.stories.tsx

@@ -192,6 +192,50 @@ export const WidgetEvent: Story = {
   },
 };
 
+/** Agent-authored widget (#1239): dynamic rendererKind + inline-script body + props. */
+export const AgentWidgetEvent: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "widget",
+      content: JSON.stringify({
+        resourceUri: "ui://grackle/abc123",
+        toolName: "widget_render",
+        rendererKind: "mcp-app-html",
+        widgetId: "abc123",
+        version: 2,
+        html: "<!doctype html><html><body><div class=\"card\">agent widget</div><script>void 0;</script></body></html>",
+        csp: { resourceDomains: ["http://localhost:6007"], connectDomains: ["http://localhost:6007"], allowInlineScripts: true },
+        toolInput: { count: 3 },
+        toolResult: { content: [{ type: "text", text: "ok" }] },
+      }),
+    }),
+    sandboxProxyUrl: "http://localhost:6007/sandbox.html",
+  },
+  play: async ({ canvas }) => {
+    await expect(await canvas.findByTestId("mcp-app-widget")).toBeInTheDocument();
+  },
+};
+
+/** An unknown rendererKind falls back to the default event card (no crash). */
+export const UnknownRendererKindWidget: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "widget",
+      content: JSON.stringify({
+        resourceUri: "",
+        toolName: "widget_show",
+        rendererKind: "adaptive-card",
+        html: "<div>future</div>",
+      }),
+    }),
+    sandboxProxyUrl: "http://localhost:6007/sandbox.html",
+  },
+  play: async ({ canvas }) => {
+    // Unsupported renderer: McpAppWidget is NOT mounted; the raw content shows instead.
+    await expect(canvas.queryByTestId("mcp-app-widget")).toBeNull();
+  },
+};
+
 /** User input events render as markdown (bold, lists, inline code) inside the bubble. */
 export const UserMessageMarkdown: Story = {
   args: {

package/src/components/display/EventRenderer.tsx

@@ -225,14 +225,20 @@ export function EventRenderer({ event, toolUseCtx, settled, sandboxProxyUrl }: P
       }
       let payload: {
         html?: string;
-        csp?: McpUiResourceCsp;
+        rendererKind?: string;
+        // `allowInlineScripts` is a Grackle extension to the upstream CSP type
+        // (agent-authored widgets, #1239); it is forwarded verbatim to the sandbox.
+        csp?: McpUiResourceCsp & { allowInlineScripts?: boolean };
         toolInput?: Record<string, unknown>;
         toolResult?: CallToolResult;
       } = {};
       try {
         payload = JSON.parse(event.content) as typeof payload;
       } catch { /* malformed widget payload — fall back */ }
-      if (!payload.html) {
+      // Dispatch on rendererKind (default "mcp-app-html" for back-compat). This
+      // switch is the seam for future declarative renderers (e.g. adaptive-card).
+      const rendererKind: string = payload.rendererKind ?? "mcp-app-html";
+      if (rendererKind !== "mcp-app-html" || !payload.html) {
         return <DefaultEvent content={event.content} />;
       }
       return (

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();
+  },
+};