@grackle-ai/web-components 0.112.2 → 0.114.0

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",

package/src/components/streams/StreamDetailPanel.tsx

@@ -4,12 +4,17 @@
  * Renders as an absolutely-positioned overlay anchored to the right of its
  * containing block (which must have `position: relative`).
  *
+ * Read-only: participants link to their sessions; low-level wiring (fds, full
+ * GUIDs, permission/delivery mode) is tucked behind an "Advanced" disclosure.
+ * Live conversation content arrives in V2 (#1230).
+ *
  * @module
  */
 
 import { useEffect, type JSX } from "react";
 import type { StreamData } from "../../hooks/types.js";
 import { useAppNavigate, sessionUrl } from "../../utils/navigation.js";
+import { streamKind, type StreamKind } from "../../utils/streamCoordination.js";
 import styles from "./StreamDetailPanel.module.scss";
 
 /** Props for the StreamDetailPanel component. */
@@ -20,6 +25,13 @@ export interface StreamDetailPanelProps {
   onClose: () => void;
 }
 
+/** Human-readable kind label. */
+const KIND_LABEL: Record<StreamKind, string> = {
+  chatroom: "Chatroom",
+  pipe: "Pipe",
+  channel: "Channel",
+};
+
 /** Render a permission badge with appropriate color. */
 function PermissionBadge({ permission }: { permission: string }): JSX.Element {
   const cls = permission === "rw"
@@ -41,7 +53,8 @@ function DeliveryModeBadge({ mode }: { mode: string }): JSX.Element {
 }
 
 /**
- * Pull-out right drawer showing stream metadata: overview, subscribers, fds.
+ * Pull-out right drawer showing stream metadata: overview, participants, and an
+ * Advanced disclosure with low-level wiring. Conversation content is V2.
  */
 export function StreamDetailPanel({ stream, onClose }: StreamDetailPanelProps): JSX.Element {
   const navigate = useAppNavigate();
@@ -61,7 +74,7 @@ export function StreamDetailPanel({ stream, onClose }: StreamDetailPanelProps):
     <div className={styles.panel} data-testid="stream-detail-panel">
       <div className={styles.header}>
         <h3 className={styles.title}>{stream.name}</h3>
-        <button className={styles.closeButton} onClick={onClose} aria-label="Close stream details">
+        <button type="button" className={styles.closeButton} onClick={onClose} aria-label="Close stream details">
           &times;
         </button>
       </div>
@@ -71,11 +84,11 @@ export function StreamDetailPanel({ stream, onClose }: StreamDetailPanelProps):
         <div className={styles.section}>
           <div className={styles.sectionLabel}>Overview</div>
           <div className={styles.metaRow}>
-            <span className={styles.metaKey}>Stream ID</span>
-            <span className={styles.metaValue}>{stream.id}</span>
+            <span className={styles.metaKey}>Kind</span>
+            <span className={styles.metaValue}>{KIND_LABEL[streamKind(stream)]}</span>
           </div>
           <div className={styles.metaRow}>
-            <span className={styles.metaKey}>Subscribers</span>
+            <span className={styles.metaKey}>Participants</span>
             <span className={styles.metaValue}>{stream.subscriberCount}</span>
           </div>
           <div className={styles.metaRow}>
@@ -84,35 +97,56 @@ export function StreamDetailPanel({ stream, onClose }: StreamDetailPanelProps):
           </div>
         </div>
 
-        {/* Subscribers */}
+        {/* Participants */}
         <div className={styles.section}>
-          <div className={styles.sectionLabel}>Subscribers</div>
+          <div className={styles.sectionLabel}>Participants</div>
           {stream.subscribers.length === 0 ? (
             <div className={styles.emptySubscribers}>No active subscribers</div>
           ) : (
             stream.subscribers.map((sub) => (
               <div key={sub.subscriptionId} className={styles.subscriberCard} data-testid={`subscriber-card-${sub.subscriptionId}`}>
-                <div className={styles.subscriberHeader}>
-                  <span className={styles.fdNumber}>fd {sub.fd}</span>
-                  <button
-                    className={styles.sessionLink}
-                    onClick={() => { navigate(sessionUrl(sub.sessionId)); }}
-                    title={sub.sessionId}
-                  >
-                    {sub.sessionId.slice(0, 12)}…
-                  </button>
-                </div>
-                <div className={styles.badges}>
-                  <PermissionBadge permission={sub.permission} />
-                  <DeliveryModeBadge mode={sub.deliveryMode} />
-                  {sub.createdBySpawn && (
-                    <span className={styles.spawnTag}>spawn</span>
-                  )}
-                </div>
+                <button
+                  type="button"
+                  className={styles.sessionLink}
+                  onClick={() => { navigate(sessionUrl(sub.sessionId)); }}
+                  title={sub.sessionId}
+                >
+                  {sub.sessionId.slice(0, 12)}…
+                </button>
+                {sub.createdBySpawn && <span className={styles.spawnTag}>spawn</span>}
               </div>
             ))
           )}
         </div>
+
+        {/* Live conversation — V2 */}
+        <div className={styles.section}>
+          <div className={styles.sectionLabel}>Conversation</div>
+          <div className={styles.placeholder} data-testid="stream-conversation-placeholder">
+            Live conversation view — coming in V2.
+          </div>
+        </div>
+
+        {/* Advanced wiring */}
+        <details className={styles.advanced} data-testid="stream-advanced">
+          <summary className={styles.advancedSummary}>Advanced</summary>
+          <div className={styles.metaRow}>
+            <span className={styles.metaKey}>Stream ID</span>
+            <span className={styles.metaValueMono}>{stream.id}</span>
+          </div>
+          {stream.subscribers.map((sub) => (
+            <div key={sub.subscriptionId} className={styles.subscriberCard}>
+              <div className={styles.subscriberHeader}>
+                <span className={styles.fdNumber}>fd {sub.fd}</span>
+                <span className={styles.metaValueMono} title={sub.subscriptionId}>{sub.subscriptionId.slice(0, 12)}…</span>
+              </div>
+              <div className={styles.badges}>
+                <PermissionBadge permission={sub.permission} />
+                <DeliveryModeBadge mode={sub.deliveryMode} />
+              </div>
+            </div>
+          ))}
+        </details>
       </div>
     </div>
   );

package/src/components/streams/index.ts

@@ -1,10 +1,10 @@
 /**
- * Stream sidebar and detail panel components.
+ * IPC stream inventory and detail panel components (Coordination tab).
  *
  * @module streams
  */
 
-export { StreamList } from "./StreamList.js";
-export type { StreamListProps } from "./StreamList.js";
+export { CoordinationList } from "./CoordinationList.js";
+export type { CoordinationListProps } from "./CoordinationList.js";
 export { StreamDetailPanel } from "./StreamDetailPanel.js";
 export type { StreamDetailPanelProps } from "./StreamDetailPanel.js";

package/src/hooks/types.ts

@@ -49,6 +49,8 @@ export interface Session {
   error?: string;
   endReason?: string;
   personaId?: string;
+  /** ID of the task this session belongs to, if any (root/orchestrated work). */
+  taskId?: string;
   inputTokens?: number;
   outputTokens?: number;
   costMillicents?: number;
@@ -641,6 +643,8 @@ export interface StreamData {
   messageBufferDepth: number;
   /** Full subscriber details. */
   subscribers: StreamSubscriberData[];
+  /** Whether publishers receive their own messages echoed back (marks a chatroom). */
+  selfEcho: boolean;
 }
 
 /** Values returned by the streams domain hook. */
@@ -653,8 +657,11 @@ export interface UseStreamsResult {
   streamsLoadedOnce: boolean;
   /** True if the most recent loadStreams call failed (e.g. RPC/network error). */
   streamsLoadError: boolean;
-  /** Request the current stream list from the server. */
-  loadStreams: () => Promise<void>;
+  /**
+   * Request the current stream list from the server. Pass `includeInternal`
+   * to surface internal IPC plumbing (lifecycle/pipe/stdin); defaults to false.
+   */
+  loadStreams: (includeInternal?: boolean) => Promise<void>;
   /** Handle a domain event from the event bus. Returns `true` if handled. */
   handleEvent: (event: GrackleEvent) => boolean;
   /** Lifecycle hook for connect/disconnect/event routing. */

package/src/index.ts

@@ -19,7 +19,7 @@ export { useDagLayout } from "./components/dag/useDagLayout.js";
 export {
   Breadcrumbs, Button, CopyButton, DemoBanner, SplitButton,
   EventRenderer, ConfirmDialog, Skeleton, SkeletonText, SkeletonCard,
-  Spinner, SplashScreen, Tooltip, McpAppWidget,
+  Spinner, SplashScreen, Tooltip,
 } from "./components/display/index.js";
 export type { ButtonProps, ButtonVariant, ButtonSize } from "./components/display/index.js";
 export type { TooltipProps, TooltipPlacement } from "./components/display/index.js";
@@ -86,9 +86,9 @@ export type { ScheduleManagerProps } from "./components/schedules/ScheduleManage
 // Settings
 export { SettingsNav } from "./components/settings/SettingsNav.js";
 
-// Streams
-export { StreamList, StreamDetailPanel } from "./components/streams/index.js";
-export type { StreamListProps, StreamDetailPanelProps } from "./components/streams/index.js";
+// Streams (Coordination tab)
+export { CoordinationList, StreamDetailPanel } from "./components/streams/index.js";
+export type { CoordinationListProps, StreamDetailPanelProps } from "./components/streams/index.js";
 
 // Tools
 export { ToolCard } from "./components/tools/ToolCard.js";
@@ -165,7 +165,7 @@ export {
   SETTINGS_APPEARANCE_URL, SETTINGS_ABOUT_URL, SETTINGS_SHORTCUTS_URL,
   PAIR_PATH, NEW_WORKSPACE_URL, KNOWLEDGE_URL, HOME_URL,
   FINDINGS_URL, findingsUrl, findingUrl,
-  CHAT_URL, chatStreamUrl, TASKS_URL,
+  CHAT_URL, COORDINATION_URL, TASKS_URL,
 } from "./utils/navigation.js";
 
 export {

package/src/mocks/MockGrackleProvider.tsx

@@ -44,6 +44,7 @@ const NOOP_DOMAIN_HOOK: DomainHook = {
 import {
   MOCK_ENVIRONMENTS,
   MOCK_SESSIONS,
+  MOCK_STREAMS,
   MOCK_EVENTS,
   MOCK_WORKSPACES,
   MOCK_TASKS,
@@ -57,7 +58,16 @@ import {
   MOCK_KNOWLEDGE_DETAILS,
   type MockStreamStep,
 } from "./mockData.js";
-import type { GraphNode, GraphLink, NodeDetail } from "../hooks/types.js";
+import type { GraphNode, GraphLink, NodeDetail, StreamData } from "../hooks/types.js";
+import { INTERNAL_STREAM_PREFIXES } from "../utils/streamCoordination.js";
+
+/** Filter internal IPC plumbing streams unless explicitly requested. */
+function filterMockStreams(includeInternal: boolean): StreamData[] {
+  if (includeInternal) {
+    return MOCK_STREAMS;
+  }
+  return MOCK_STREAMS.filter((s) => !INTERNAL_STREAM_PREFIXES.some((p) => s.name.startsWith(p)));
+}
 
 // ─── Constants ──────────────────────────────────────
 
@@ -81,6 +91,7 @@ export function MockGrackleProvider({ children }: MockGrackleProviderProps): JSX
   // ── State ─────────────────────────────────────────
   const [environments, setEnvironments] = useState<Environment[]>(MOCK_ENVIRONMENTS);
   const [sessions, setSessions] = useState<Session[]>(MOCK_SESSIONS);
+  const [streams, setStreams] = useState<StreamData[]>(() => filterMockStreams(false));
   const [events, setEvents] = useState<SessionEvent[]>(MOCK_EVENTS);
   const [lastSpawnedId, setLastSpawnedId] = useState<string | undefined>(undefined);
   const [workspaces, setWorkspaces] = useState<Workspace[]>(MOCK_WORKSPACES);
@@ -1176,11 +1187,11 @@ export function MockGrackleProvider({ children }: MockGrackleProviderProps): JSX
       },
 
       streams: {
-        streams: [],
+        streams,
         streamsLoading: false,
         streamsLoadedOnce: true,
         streamsLoadError: false,
-        loadStreams: async () => {},
+        loadStreams: async (includeInternal = false) => { setStreams(filterMockStreams(includeInternal)); },
         domainHook: NOOP_DOMAIN_HOOK,
       },
 
@@ -1371,6 +1382,7 @@ export function MockGrackleProvider({ children }: MockGrackleProviderProps): JSX
     [
       environments,
       sessions,
+      streams,
       events,
       lastSpawnedId,
       taskSessions,

package/src/mocks/mockData.ts

@@ -17,6 +17,7 @@ import type {
   PersonaData,
 } from "../hooks/types.js";
 export { MOCK_KNOWLEDGE_NODES, MOCK_KNOWLEDGE_LINKS, MOCK_KNOWLEDGE_DETAILS } from "./mockKnowledgeData.js";
+export { MOCK_STREAMS } from "./mockStreamsData.js";
 
 // ─── Environments ───────────────────────────────────
 
@@ -94,6 +95,7 @@ export const MOCK_SESSIONS: Session[] = [
     status: "running",
     prompt: "Refactor the authentication middleware to use JWT tokens",
     startedAt: "2026-02-27T08:15:00Z",
+    taskId: "task-001",
     inputTokens: 42_600,
     outputTokens: 8_100,
     costMillicents: 22_000,
@@ -107,6 +109,7 @@ export const MOCK_SESSIONS: Session[] = [
     prompt: "Write unit tests for the user registration endpoint",
     startedAt: "2026-02-27T07:30:00Z",
     endedAt: "2026-02-27T07:33:00Z",
+    taskId: "task-003",
     inputTokens: 31_400,
     outputTokens: 9_800,
     costMillicents: 18_000,
@@ -131,6 +134,7 @@ export const MOCK_SESSIONS: Session[] = [
     status: "running",
     prompt: "Implement rate limiting for the public API",
     startedAt: "2026-02-27T09:00:00Z",
+    taskId: "task-006c",
     inputTokens: 18_900,
     outputTokens: 4_500,
     costMillicents: 10_000,

package/src/mocks/mockStreamsData.ts

@@ -0,0 +1,80 @@
+/**
+ * Static mock IPC streams for the Coordination surface in `?mock` demo mode.
+ *
+ * Subscribers reference sessions from {@link MOCK_SESSIONS}; sessions carry a
+ * `taskId`, so the Coordination tab attributes each stream to its owning task.
+ * Internal plumbing (`lifecycle:`/`pipe:`/`stdin:`) is hidden until the user
+ * toggles "Show internals".
+ *
+ * @module
+ */
+
+import type { StreamData } from "../hooks/types.js";
+
+/** Sample IPC streams: a chatroom + channel attributed to tasks, an unattached
+ * stream, and internal plumbing streams. */
+export const MOCK_STREAMS: StreamData[] = [
+  {
+    id: "stream-planning",
+    name: "jwt-planning-room",
+    selfEcho: true,
+    subscriberCount: 2,
+    messageBufferDepth: 3,
+    subscribers: [
+      { subscriptionId: "sub-p1", sessionId: "sess-001", fd: 3, permission: "rw", deliveryMode: "async", createdBySpawn: false },
+      { subscriptionId: "sub-p2", sessionId: "sess-002", fd: 4, permission: "r", deliveryMode: "async", createdBySpawn: true },
+    ],
+  },
+  {
+    id: "stream-metrics",
+    name: "rate-limit-metrics",
+    selfEcho: false,
+    subscriberCount: 1,
+    messageBufferDepth: 0,
+    subscribers: [
+      { subscriptionId: "sub-m1", sessionId: "sess-004", fd: 3, permission: "r", deliveryMode: "sync", createdBySpawn: false },
+    ],
+  },
+  {
+    id: "stream-cli",
+    name: "cli-inspector",
+    selfEcho: false,
+    subscriberCount: 1,
+    messageBufferDepth: 1,
+    subscribers: [
+      { subscriptionId: "sub-c1", sessionId: "external-cli-session", fd: 5, permission: "rw", deliveryMode: "async", createdBySpawn: false },
+    ],
+  },
+  // ── Internal plumbing — hidden unless "Show internals" is on ──
+  {
+    id: "stream-lifecycle",
+    name: "lifecycle:sess-001-7f3a",
+    selfEcho: false,
+    subscriberCount: 1,
+    messageBufferDepth: 0,
+    subscribers: [
+      { subscriptionId: "sub-l1", sessionId: "sess-001", fd: 6, permission: "rw", deliveryMode: "detach", createdBySpawn: true },
+    ],
+  },
+  {
+    id: "stream-pipe",
+    name: "pipe:sess-001-sess-004",
+    selfEcho: false,
+    subscriberCount: 2,
+    messageBufferDepth: 0,
+    subscribers: [
+      { subscriptionId: "sub-pp1", sessionId: "sess-001", fd: 7, permission: "rw", deliveryMode: "async", createdBySpawn: false },
+      { subscriptionId: "sub-pp2", sessionId: "sess-004", fd: 8, permission: "rw", deliveryMode: "async", createdBySpawn: true },
+    ],
+  },
+  {
+    id: "stream-stdin",
+    name: "stdin:sess-002-9c2e",
+    selfEcho: false,
+    subscriberCount: 1,
+    messageBufferDepth: 0,
+    subscribers: [
+      { subscriptionId: "sub-s1", sessionId: "sess-002", fd: 9, permission: "w", deliveryMode: "detach", createdBySpawn: true },
+    ],
+  },
+];

package/src/utils/navigation.ts

@@ -159,13 +159,11 @@ export const SETTINGS_SHORTCUTS_URL: string = "/settings/shortcuts";
 /** URL for the device pairing page. */
 export const PAIR_PATH: string = "/pair";
 
-/** URL for the root-task chat page. */
+/** URL for the root-task ("Root") chat page. */
 export const CHAT_URL: string = "/chat";
 
-/** Build URL for a specific IPC stream's chat page. */
-export function chatStreamUrl(streamId: string): string {
-  return `/chat/${encodeURIComponent(streamId)}`;
-}
+/** URL for the Coordination page (read-only IPC stream inventory). */
+export const COORDINATION_URL: string = "/coordination";
 
 /** URL for the home dashboard page. */
 export const HOME_URL: string = "/";