feat(web): MS23-P2-002 OrchestratorPanel SSE stream component

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/orchestrator/src/api/mission-control/mission-control.controller.spec.ts

@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { AgentSession } from "@mosaic/shared";
+import type { PrismaService } from "../../prisma/prisma.service";
+import { AgentProviderRegistry } from "../agents/agent-provider.registry";
+import { MissionControlController } from "./mission-control.controller";
+import { MissionControlService } from "./mission-control.service";
+
+describe("MissionControlController", () => {
+  let controller: MissionControlController;
+  let registry: {
+    listAllSessions: ReturnType<typeof vi.fn>;
+    getProviderForSession: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(() => {
+    registry = {
+      listAllSessions: vi.fn(),
+      getProviderForSession: vi.fn(),
+    };
+
+    const prisma = {
+      operatorAuditLog: {
+        create: vi.fn().mockResolvedValue(undefined),
+      },
+    };
+
+    const service = new MissionControlService(
+      registry as unknown as AgentProviderRegistry,
+      prisma as unknown as PrismaService
+    );
+
+    controller = new MissionControlController(service);
+  });
+
+  it("Phase 1 gate: unified sessions endpoint returns internal provider sessions", async () => {
+    const internalSession: AgentSession = {
+      id: "session-internal-1",
+      providerId: "internal",
+      providerType: "internal",
+      status: "active",
+      createdAt: new Date("2026-03-07T20:00:00.000Z"),
+      updatedAt: new Date("2026-03-07T20:01:00.000Z"),
+    };
+
+    const externalSession: AgentSession = {
+      id: "session-openclaw-1",
+      providerId: "openclaw",
+      providerType: "external",
+      status: "active",
+      createdAt: new Date("2026-03-07T20:02:00.000Z"),
+      updatedAt: new Date("2026-03-07T20:03:00.000Z"),
+    };
+
+    registry.listAllSessions.mockResolvedValue([internalSession, externalSession]);
+
+    const response = await controller.listSessions();
+
+    expect(registry.listAllSessions).toHaveBeenCalledTimes(1);
+    expect(response.sessions).toEqual([internalSession, externalSession]);
+    expect(response.sessions).toContainEqual(
+      expect.objectContaining({
+        id: "session-internal-1",
+        providerId: "internal",
+      })
+    );
+  });
+});

apps/web/src/app/(authenticated)/mission-control/page.tsx

@@ -0,0 +1,5 @@
+import { MissionControlLayout } from "@/components/mission-control/MissionControlLayout";
+
+export default function MissionControlPage(): React.JSX.Element {
+  return <MissionControlLayout />;
+}

apps/web/src/components/layout/AppSidebar.tsx

@@ -156,6 +156,26 @@ function IconTerminal(): React.JSX.Element {
   );
 }
 
+function IconMissionControl(): React.JSX.Element {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      aria-hidden="true"
+    >
+      <circle cx="8" cy="8" r="1.5" />
+      <path d="M11 5a4.25 4.25 0 0 1 0 6" />
+      <path d="M5 5a4.25 4.25 0 0 0 0 6" />
+      <path d="M13.5 2.5a7.75 7.75 0 0 1 0 11" />
+      <path d="M2.5 2.5a7.75 7.75 0 0 0 0 11" />
+    </svg>
+  );
+}
+
 function IconSettings(): React.JSX.Element {
   return (
     <svg
@@ -260,6 +280,11 @@ const NAV_GROUPS: NavGroup[] = [
         label: "Terminal",
         icon: <IconTerminal />,
       },
+      {
+        href: "/mission-control",
+        label: "Mission Control",
+        icon: <IconMissionControl />,
+      },
     ],
   },
   {

apps/web/src/components/mission-control/GlobalAgentRoster.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function GlobalAgentRoster(): React.JSX.Element {
+  return (
+    <Card className="flex h-full min-h-0 flex-col">
+      <CardHeader>
+        <CardTitle className="text-base">Agent Roster</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+        No active agents
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/mission-control/MissionControlLayout.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
+import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";
+import { useSessions } from "@/hooks/useMissionControl";
+
+const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as const;
+
+export function MissionControlLayout(): React.JSX.Element {
+  const { sessions } = useSessions();
+
+  const panelSessionIds = [sessions[0]?.id, undefined, undefined, undefined] as const;
+
+  return (
+    <section className="h-full min-h-0 overflow-hidden" aria-label="Mission Control">
+      <div className="grid h-full min-h-0 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
+        <aside className="h-full min-h-0">
+          <GlobalAgentRoster />
+        </aside>
+        <main className="h-full min-h-0 overflow-hidden">
+          <MissionControlPanel panels={DEFAULT_PANEL_SLOTS} panelSessionIds={panelSessionIds} />
+        </main>
+      </div>
+    </section>
+  );
+}

apps/web/src/components/mission-control/MissionControlPanel.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { OrchestratorPanel } from "@/components/mission-control/OrchestratorPanel";
+
+interface MissionControlPanelProps {
+  panels: readonly string[];
+  panelSessionIds?: readonly (string | undefined)[];
+}
+
+export function MissionControlPanel({
+  panels,
+  panelSessionIds,
+}: MissionControlPanelProps): React.JSX.Element {
+  return (
+    <div className="grid h-full min-h-0 auto-rows-fr grid-cols-1 gap-4 overflow-y-auto pr-1 md:grid-cols-2">
+      {panels.map((panelId, index) => {
+        const sessionId = panelSessionIds?.[index];
+
+        if (sessionId === undefined) {
+          return <OrchestratorPanel key={panelId} />;
+        }
+
+        return <OrchestratorPanel key={panelId} sessionId={sessionId} />;
+      })}
+    </div>
+  );
+}

apps/web/src/components/mission-control/OrchestratorPanel.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { formatDistanceToNow } from "date-fns";
+import { Badge } from "@/components/ui/badge";
+import type { BadgeVariant } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  useSessionStream,
+  type MissionControlConnectionStatus,
+  type MissionControlMessageRole,
+} from "@/hooks/useMissionControl";
+
+const ROLE_BADGE_VARIANT: Record<MissionControlMessageRole, BadgeVariant> = {
+  user: "badge-blue",
+  assistant: "status-success",
+  tool: "badge-amber",
+  system: "badge-muted",
+};
+
+const CONNECTION_DOT_CLASS: Record<MissionControlConnectionStatus, string> = {
+  connected: "bg-emerald-500",
+  connecting: "bg-amber-500",
+  error: "bg-red-500",
+};
+
+const CONNECTION_TEXT: Record<MissionControlConnectionStatus, string> = {
+  connected: "Connected",
+  connecting: "Connecting",
+  error: "Error",
+};
+
+export interface OrchestratorPanelProps {
+  sessionId?: string;
+}
+
+function formatRelativeTimestamp(timestamp: string): string {
+  const parsedDate = new Date(timestamp);
+  if (Number.isNaN(parsedDate.getTime())) {
+    return "just now";
+  }
+
+  return formatDistanceToNow(parsedDate, { addSuffix: true });
+}
+
+export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.JSX.Element {
+  const { messages, status, error } = useSessionStream(sessionId ?? "");
+  const bottomAnchorRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    bottomAnchorRef.current?.scrollIntoView({ block: "end" });
+  }, [messages.length]);
+
+  if (!sessionId) {
+    return (
+      <Card className="flex h-full min-h-[220px] flex-col">
+        <CardHeader>
+          <CardTitle className="text-base">Orchestrator Panel</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+          Select an agent to view its stream
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="flex h-full min-h-[220px] flex-col">
+      <CardHeader className="space-y-2">
+        <div className="flex items-center justify-between gap-2">
+          <CardTitle className="text-base">Orchestrator Panel</CardTitle>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span
+              className={`h-2.5 w-2.5 rounded-full ${CONNECTION_DOT_CLASS[status]} ${
+                status === "connecting" ? "animate-pulse" : ""
+              }`}
+              aria-hidden="true"
+            />
+            <span>{CONNECTION_TEXT[status]}</span>
+          </div>
+        </div>
+        <p className="truncate text-xs text-muted-foreground">Session: {sessionId}</p>
+      </CardHeader>
+      <CardContent className="flex min-h-0 flex-1 p-0">
+        <ScrollArea className="h-full w-full">
+          <div className="flex min-h-full flex-col gap-3 p-4">
+            {messages.length === 0 ? (
+              <p className="mt-6 text-center text-sm text-muted-foreground">
+                {error ?? "Waiting for messages..."}
+              </p>
+            ) : (
+              messages.map((message) => (
+                <article
+                  key={message.id}
+                  className="rounded-lg border border-border/70 bg-card px-3 py-2"
+                >
+                  <div className="mb-2 flex items-center justify-between gap-2">
+                    <Badge variant={ROLE_BADGE_VARIANT[message.role]} className="uppercase">
+                      {message.role}
+                    </Badge>
+                    <time className="text-xs text-muted-foreground">
+                      {formatRelativeTimestamp(message.timestamp)}
+                    </time>
+                  </div>
+                  <p className="whitespace-pre-wrap break-words text-sm text-foreground">
+                    {message.content}
+                  </p>
+                </article>
+              ))
+            )}
+            <div ref={bottomAnchorRef} />
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/ui/scroll-area.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  ({ className = "", children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`relative overflow-hidden ${className}`} {...props}>
+        <div className="h-full w-full overflow-auto">{children}</div>
+      </div>
+    );
+  }
+);
+
+ScrollArea.displayName = "ScrollArea";

apps/web/src/hooks/useMissionControl.ts

@@ -0,0 +1,189 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import type { AgentMessageRole, AgentSessionStatus } from "@mosaic/shared";
+import { apiGet } from "@/lib/api/client";
+
+const MISSION_CONTROL_SESSIONS_QUERY_KEY = ["mission-control", "sessions"] as const;
+const SESSIONS_REFRESH_INTERVAL_MS = 15_000;
+
+export type MissionControlMessageRole = AgentMessageRole;
+
+export interface MissionControlSession {
+  id: string;
+  providerId: string;
+  providerType: string;
+  label?: string;
+  status: AgentSessionStatus;
+  parentSessionId?: string;
+  createdAt: string;
+  updatedAt: string;
+  metadata?: Record<string, unknown>;
+}
+
+interface MissionControlSessionsResponse {
+  sessions: MissionControlSession[];
+}
+
+export interface MissionControlStreamMessage {
+  id: string;
+  sessionId: string;
+  role: MissionControlMessageRole;
+  content: string;
+  timestamp: string;
+  metadata?: Record<string, unknown>;
+}
+
+export type MissionControlConnectionStatus = "connecting" | "connected" | "error";
+
+export interface UseSessionsResult {
+  sessions: MissionControlSession[];
+  loading: boolean;
+  error: Error | null;
+}
+
+export interface UseSessionStreamResult {
+  messages: MissionControlStreamMessage[];
+  status: MissionControlConnectionStatus;
+  error: string | null;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function isMessageRole(value: unknown): value is MissionControlMessageRole {
+  return value === "assistant" || value === "system" || value === "tool" || value === "user";
+}
+
+function isMissionControlStreamMessage(value: unknown): value is MissionControlStreamMessage {
+  if (!isRecord(value)) {
+    return false;
+  }
+
+  const { id, sessionId, role, content, timestamp, metadata } = value;
+
+  if (
+    typeof id !== "string" ||
+    typeof sessionId !== "string" ||
+    !isMessageRole(role) ||
+    typeof content !== "string" ||
+    typeof timestamp !== "string"
+  ) {
+    return false;
+  }
+
+  if (metadata !== undefined && !isRecord(metadata)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Fetches Mission Control sessions.
+ */
+export function useSessions(): UseSessionsResult {
+  const query = useQuery<MissionControlSessionsResponse>({
+    queryKey: MISSION_CONTROL_SESSIONS_QUERY_KEY,
+    queryFn: async (): Promise<MissionControlSessionsResponse> => {
+      return apiGet<MissionControlSessionsResponse>("/api/mission-control/sessions");
+    },
+    refetchInterval: SESSIONS_REFRESH_INTERVAL_MS,
+  });
+
+  return {
+    sessions: query.data?.sessions ?? [],
+    loading: query.isLoading,
+    error: query.error ?? null,
+  };
+}
+
+/**
+ * Backward-compatible alias for early Mission Control integration.
+ */
+export function useMissionControl(): UseSessionsResult {
+  return useSessions();
+}
+
+/**
+ * Streams Mission Control session messages over SSE.
+ */
+export function useSessionStream(sessionId: string): UseSessionStreamResult {
+  const [messages, setMessages] = useState<MissionControlStreamMessage[]>([]);
+  const [status, setStatus] = useState<MissionControlConnectionStatus>("connecting");
+  const [error, setError] = useState<string | null>(null);
+
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  useEffect(() => {
+    if (eventSourceRef.current !== null) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+
+    setMessages([]);
+    setError(null);
+
+    if (!sessionId) {
+      setStatus("connecting");
+      return;
+    }
+
+    if (typeof EventSource === "undefined") {
+      setStatus("error");
+      setError("Mission Control stream is not supported by this browser.");
+      return;
+    }
+
+    setStatus("connecting");
+
+    const source = new EventSource(
+      `/api/mission-control/sessions/${encodeURIComponent(sessionId)}/stream`
+    );
+    eventSourceRef.current = source;
+
+    source.onopen = (): void => {
+      setStatus("connected");
+      setError(null);
+    };
+
+    source.onmessage = (event: MessageEvent<string>): void => {
+      try {
+        const parsed = JSON.parse(event.data) as unknown;
+        if (!isMissionControlStreamMessage(parsed)) {
+          return;
+        }
+
+        setMessages((previousMessages) => [...previousMessages, parsed]);
+      } catch {
+        // Ignore malformed events from the stream.
+      }
+    };
+
+    source.onerror = (): void => {
+      if (source.readyState === EventSource.CONNECTING) {
+        setStatus("connecting");
+        setError(null);
+        return;
+      }
+
+      setStatus("error");
+      setError("Mission Control stream disconnected.");
+    };
+
+    return (): void => {
+      source.close();
+      if (eventSourceRef.current === source) {
+        eventSourceRef.current = null;
+      }
+    };
+  }, [sessionId]);
+
+  return {
+    messages,
+    status,
+    error,
+  };
+}