@grackle-ai/web-components 0.112.2 → 0.114.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web-components",
-  "version": "0.112.2",
+  "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.112.2"
+    "@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: 1421806d07f6b0c455deca4bf89a6412726ffd8b
+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,12 +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.js   1,591.31 kB │ gzip: 401.72 kB
-✓ built in 5.69s
+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,392.78 kB │ gzip: 356.09 kB
+✓ built in 5.94s
 [build:vite-build] Vite build completed.
- ---- build finished (72.731s) ---- 
--------------------- Finished (72.734s) --------------------
+ ---- 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: a0341c0f1c835c664217d8a879aa38d780e62122
+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,30 +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) 60ms
- ✓ src/utils/eventContent.test.ts (38 tests) 155ms
- ✓ src/utils/dashboard.test.ts (4 tests) 37ms
- ✓ src/utils/route-config.test.ts (23 tests) 50ms
- ✓ src/utils/scrollUtils.test.ts (11 tests) 20ms
- ✓ src/utils/breadcrumbs.test.ts (18 tests) 65ms
- ✓ src/components/tools/classifyTool.test.ts (6 tests) 22ms
- ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 28ms
- ✓ src/utils/assetUrl.test.ts (3 tests) 18ms
- ✓ src/components/display/extractText.test.tsx (8 tests) 17ms
- ✓ src/components/editable/useEditableField.test.tsx (17 tests) 206ms
- ✓ src/hooks/useEventSelection.test.ts (13 tests) 146ms
- ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 199ms
- ✓ src/utils/grackleHostStyleVariables.test.ts (2 tests) 445ms
-   ✓ grackleHostStyleVariables > always returns the MCP-standard fallback variables  416ms
- ✓ src/components/display/McpAppWidget.test.tsx (3 tests) 258ms
-
- Test Files  15 passed (15)
-      Tests  174 passed (174)
-   Start at  23:48:14
-   Duration  16.41s (transform 2.75s, setup 0ms, collect 18.15s, tests 1.73s, environment 14.38s, prepare 5.42s)
+ ✓ 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 36655...
+[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:
@@ -121,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 (113.186s) ---- 
--------------------- Finished (113.19s) --------------------
+ ---- test finished (111.929s) ---- 
+-------------------- Finished (111.943s) --------------------

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

@@ -170,6 +170,28 @@ export const MarkdownParagraphWrapping: Story = {
   },
 };
 
+/** Widget event renders the lazy-loaded MCP App host iframe. */
+export const WidgetEvent: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "widget",
+      content: JSON.stringify({
+        resourceUri: "ui://grackle/hello-widget",
+        toolName: "show_hello_widget",
+        html: "<!doctype html><html><body><div class=\"card\">widget</div></body></html>",
+        toolInput: { message: "hi" },
+        toolResult: { content: [{ type: "text", text: "ok" }] },
+      }),
+    }),
+    // Different origin than Storybook (6006) so McpAppWidget's same-origin guard passes.
+    sandboxProxyUrl: "http://localhost:6007/sandbox.html",
+  },
+  play: async ({ canvas }) => {
+    // McpAppWidget is lazy-loaded behind Suspense; findByTestId waits for the chunk.
+    await expect(await canvas.findByTestId("mcp-app-widget")).toBeInTheDocument();
+  },
+};
+
 /** User input events render as markdown (bold, lists, inline code) inside the bubble. */
 export const UserMessageMarkdown: Story = {
   args: {

package/src/components/display/EventRenderer.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useState, type JSX } from "react";
+import { type ReactNode, useState, lazy, Suspense, type LazyExoticComponent, type ComponentType, type JSX } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import Markdown from "react-markdown";
 import rehypePrismPlus from "rehype-prism-plus/common";
@@ -7,9 +7,19 @@ import type { SessionEvent } from "../../hooks/types.js";
 import { formatTokens, formatCost } from "../../utils/format.js";
 import { ICON_SM } from "../../utils/iconSize.js";
 import { ToolCard } from "../tools/ToolCard.js";
+import type { McpAppWidgetProps } from "./McpAppWidget.js";
+import type { McpUiResourceCsp } from "@modelcontextprotocol/ext-apps/app-bridge";
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
 import { CopyButton } from "./CopyButton.js";
 import styles from "./EventRenderer.module.scss";
 
+// Lazy-loaded (and intentionally NOT re-exported from the package barrel) so the
+// heavy ext-apps AppBridge is code-split into an async chunk loaded only when a
+// widget actually renders — keeps the main chat bundle under the chunk-size cap.
+const McpAppWidget: LazyExoticComponent<ComponentType<McpAppWidgetProps>> = lazy(() =>
+  import("./McpAppWidget.js").then((m) => ({ default: m.McpAppWidget })),
+);
+
 /** Props for the EventRenderer component. */
 interface Props {
   event: SessionEvent;
@@ -17,6 +27,8 @@ interface Props {
   toolUseCtx?: { tool: string; args: unknown; detailedResult?: string };
   /** True when a tool_use completed but has no tool_result (e.g. Claude Code text-result pattern). */
   settled?: boolean;
+  /** Sandbox proxy origin URL for rendering MCP Apps widget events (different origin than the app). */
+  sandboxProxyUrl?: string;
 }
 
 // --- Individual event type renderers ---
@@ -201,10 +213,40 @@ function DefaultEvent({ content }: { content: string }): JSX.Element {
 // --- Main component ---
 
 /** Renders a single session event, dispatching to the appropriate type-specific renderer. */
-export function EventRenderer({ event, toolUseCtx, settled }: Props): JSX.Element {
+export function EventRenderer({ event, toolUseCtx, settled, sandboxProxyUrl }: Props): JSX.Element {
   const time = new Date(event.timestamp).toLocaleTimeString();
 
   switch (event.eventType) {
+    case "widget": {
+      // MCP Apps widget event (pushed by the broker). Self-contained: HTML +
+      // tool input/result. Renders in the cross-origin sandbox via McpAppWidget.
+      if (!sandboxProxyUrl) {
+        return <DefaultEvent content={event.content} />;
+      }
+      let payload: {
+        html?: string;
+        csp?: McpUiResourceCsp;
+        toolInput?: Record<string, unknown>;
+        toolResult?: CallToolResult;
+      } = {};
+      try {
+        payload = JSON.parse(event.content) as typeof payload;
+      } catch { /* malformed widget payload — fall back */ }
+      if (!payload.html) {
+        return <DefaultEvent content={event.content} />;
+      }
+      return (
+        <Suspense fallback={<DefaultEvent content="Loading widget..." />}>
+          <McpAppWidget
+            widgetHtml={payload.html}
+            sandboxProxyUrl={sandboxProxyUrl}
+            csp={payload.csp}
+            toolInput={payload.toolInput}
+            toolResult={payload.toolResult}
+          />
+        </Suspense>
+      );
+    }
     case "system": {
       // Detect system context events via the raw metadata marker
       if (event.raw) {

package/src/components/display/EventStream.tsx

@@ -88,6 +88,8 @@ interface EventStreamProps {
    * Receives the target session ID and the formatted envelope text.
    */
   onForward?: (sessionId: string, text: string) => Promise<void>;
+  /** Sandbox proxy origin URL for rendering MCP Apps widget events. */
+  sandboxProxyUrl?: string;
 }
 
 /**
@@ -104,6 +106,7 @@ export function EventStream({
   environments,
   personas,
   onForward,
+  sandboxProxyUrl,
 }: EventStreamProps): JSX.Element {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [isReversed, setIsReversed] = useState(readStoredDirection);
@@ -303,7 +306,7 @@ export function EventStream({
                   onToggle={(shiftKey) => { selection.toggleEvent(originalIndex, shiftKey); }}
                   onCopied={() => { onShowToast?.("Copied to clipboard", "success"); }}
                 >
-                  <EventRenderer event={event} toolUseCtx={event.toolUseCtx} settled={event.settled} />
+                  <EventRenderer event={event} toolUseCtx={event.toolUseCtx} settled={event.settled} sandboxProxyUrl={sandboxProxyUrl} />
                 </EventHoverRow>
               </motion.div>
             );

package/src/components/display/index.ts

@@ -14,7 +14,9 @@ export { Spinner } from "./Spinner.js";
 export { SplashScreen } from "./SplashScreen.js";
 export { Tooltip } from "./Tooltip.js";
 export { SessionAttemptSelector } from "./SessionAttemptSelector.js";
-export { McpAppWidget } from "./McpAppWidget.js";
+// NOTE: McpAppWidget is intentionally NOT re-exported as a value — EventRenderer
+// lazy-imports it directly so the heavy ext-apps AppBridge stays code-split out of
+// the main chat bundle. Its prop types remain exported below for consumers.
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.js";
 export type { TooltipProps, TooltipPlacement } from "./Tooltip.js";

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