feat(web): MS23-P2-003 BargeInInput component

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

@@ -0,0 +1,147 @@
+"use client";
+
+import { useCallback, useState, type KeyboardEvent } from "react";
+import { Loader2 } from "lucide-react";
+import { useToast } from "@mosaic/ui";
+import { Button } from "@/components/ui/button";
+import { apiPost } from "@/lib/api/client";
+
+const MAX_ROWS = 4;
+const TEXTAREA_MAX_HEIGHT_REM = 6.5;
+
+interface BargeInMutationResponse {
+  message?: string;
+}
+
+export interface BargeInInputProps {
+  sessionId: string;
+  onSent?: () => void;
+}
+
+function getErrorMessage(error: unknown): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+  return "Failed to send message to the session.";
+}
+
+export function BargeInInput({ sessionId, onSent }: BargeInInputProps): React.JSX.Element {
+  const { showToast } = useToast();
+  const [content, setContent] = useState("");
+  const [pauseBeforeSend, setPauseBeforeSend] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleSend = useCallback(async (): Promise<void> => {
+    const trimmedContent = content.trim();
+    if (!trimmedContent || isSending) {
+      return;
+    }
+
+    const encodedSessionId = encodeURIComponent(sessionId);
+    const baseEndpoint = `/api/mission-control/sessions/${encodedSessionId}`;
+    let didPause = false;
+    let didInject = false;
+
+    setIsSending(true);
+    setErrorMessage(null);
+
+    try {
+      if (pauseBeforeSend) {
+        await apiPost<BargeInMutationResponse>(`${baseEndpoint}/pause`);
+        didPause = true;
+      }
+
+      await apiPost<BargeInMutationResponse>(`${baseEndpoint}/inject`, { content: trimmedContent });
+      didInject = true;
+      setContent("");
+      onSent?.();
+    } catch (error) {
+      const message = getErrorMessage(error);
+      setErrorMessage(message);
+      showToast(message, "error");
+    } finally {
+      if (didPause) {
+        try {
+          await apiPost<BargeInMutationResponse>(`${baseEndpoint}/resume`);
+        } catch (resumeError) {
+          const resumeMessage = getErrorMessage(resumeError);
+          const message = didInject
+            ? `Message sent, but failed to resume session: ${resumeMessage}`
+            : `Failed to resume session: ${resumeMessage}`;
+          setErrorMessage(message);
+          showToast(message, "error");
+        }
+      }
+
+      setIsSending(false);
+    }
+  }, [content, isSending, onSent, pauseBeforeSend, sessionId, showToast]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        void handleSend();
+      }
+    },
+    [handleSend]
+  );
+
+  const isSendDisabled = isSending || content.trim().length === 0;
+
+  return (
+    <div className="space-y-2">
+      <textarea
+        value={content}
+        onChange={(event) => {
+          setContent(event.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+        disabled={isSending}
+        rows={MAX_ROWS}
+        placeholder="Inject a message into this session..."
+        className="block w-full resize-y rounded-md border border-border bg-background px-3 py-2 text-sm leading-5 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60"
+        style={{ maxHeight: `${String(TEXTAREA_MAX_HEIGHT_REM)}rem` }}
+        aria-label="Inject message"
+      />
+      <div className="flex items-center justify-between gap-3">
+        <label className="flex items-center gap-2 text-sm text-muted-foreground">
+          <input
+            type="checkbox"
+            checked={pauseBeforeSend}
+            onChange={(event) => {
+              setPauseBeforeSend(event.target.checked);
+            }}
+            disabled={isSending}
+            className="h-4 w-4 rounded border-border"
+          />
+          <span>Pause before send</span>
+        </label>
+        <Button
+          type="button"
+          variant="primary"
+          size="sm"
+          disabled={isSendDisabled}
+          onClick={() => {
+            void handleSend();
+          }}
+        >
+          {isSending ? (
+            <span className="flex items-center gap-2">
+              <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+              Sending...
+            </span>
+          ) : (
+            "Send"
+          )}
+        </Button>
+      </div>
+      {errorMessage ? (
+        <p role="alert" className="text-sm text-red-500">
+          {errorMessage}
+        </p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -1,15 +1,259 @@
 "use client";
 
+import { useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AgentSession } from "@mosaic/shared";
+import { ChevronRight, Loader2, X } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import type { BadgeVariant } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Collapsible } from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+import { apiGet, apiPost } from "@/lib/api/client";
+
+const SESSIONS_QUERY_KEY = ["mission-control", "sessions"] as const;
+const SESSIONS_POLL_INTERVAL_MS = 5_000;
+
+type MissionControlSessionStatus = AgentSession["status"] | "killed";
+
+interface MissionControlSession extends Omit<AgentSession, "status" | "createdAt" | "updatedAt"> {
+  status: MissionControlSessionStatus;
+  createdAt: string | Date;
+  updatedAt: string | Date;
+}
+
+interface SessionsPayload {
+  sessions: MissionControlSession[];
+}
+
+interface ProviderSessionGroup {
+  providerId: string;
+  providerType: string;
+  sessions: MissionControlSession[];
+}
+
+export interface GlobalAgentRosterProps {
+  onSelectSession?: (sessionId: string) => void;
+  selectedSessionId?: string;
+}
+
+function getStatusVariant(status: MissionControlSessionStatus): BadgeVariant {
+  switch (status) {
+    case "active":
+      return "status-success";
+    case "paused":
+      return "status-warning";
+    case "killed":
+      return "status-error";
+    default:
+      return "status-neutral";
+  }
+}
+
+function truncateSessionId(sessionId: string): string {
+  return sessionId.slice(0, 8);
+}
+
+function resolveProviderName(providerId: string, providerType: string): string {
+  return providerId === providerType ? providerId : `${providerId} (${providerType})`;
+}
+
+function groupByProvider(sessions: MissionControlSession[]): ProviderSessionGroup[] {
+  const grouped = new Map<string, ProviderSessionGroup>();
+
+  for (const session of sessions) {
+    const existing = grouped.get(session.providerId);
+    if (existing) {
+      existing.sessions.push(session);
+      continue;
+    }
+
+    grouped.set(session.providerId, {
+      providerId: session.providerId,
+      providerType: session.providerType,
+      sessions: [session],
+    });
+  }
+
+  return Array.from(grouped.values()).sort((a, b) => a.providerId.localeCompare(b.providerId));
+}
+
+async function fetchSessions(): Promise<MissionControlSession[]> {
+  const payload = await apiGet<MissionControlSession[] | SessionsPayload>(
+    "/api/mission-control/sessions"
+  );
+  return Array.isArray(payload) ? payload : payload.sessions;
+}
+
+export function GlobalAgentRoster({
+  onSelectSession,
+  selectedSessionId,
+}: GlobalAgentRosterProps): React.JSX.Element {
+  const queryClient = useQueryClient();
+  const [openProviders, setOpenProviders] = useState<Record<string, boolean>>({});
+
+  const sessionsQuery = useQuery<MissionControlSession[]>({
+    queryKey: SESSIONS_QUERY_KEY,
+    queryFn: fetchSessions,
+    refetchInterval: SESSIONS_POLL_INTERVAL_MS,
+  });
+
+  const killMutation = useMutation({
+    mutationFn: async (sessionId: string): Promise<string> => {
+      await apiPost<{ message: string }>(`/api/mission-control/sessions/${sessionId}/kill`, {
+        force: false,
+      });
+      return sessionId;
+    },
+    onSuccess: (): void => {
+      void queryClient.invalidateQueries({ queryKey: SESSIONS_QUERY_KEY });
+    },
+  });
+
+  const groupedSessions = useMemo(
+    () => groupByProvider(sessionsQuery.data ?? []),
+    [sessionsQuery.data]
+  );
+
+  const pendingKillSessionId = killMutation.isPending ? killMutation.variables : undefined;
+
+  const toggleProvider = (providerId: string): void => {
+    setOpenProviders((prev) => ({
+      ...prev,
+      [providerId]: !(prev[providerId] ?? true),
+    }));
+  };
+
+  const isProviderOpen = (providerId: string): boolean => openProviders[providerId] ?? true;
 
-export function GlobalAgentRoster(): React.JSX.Element {
   return (
     <Card className="flex h-full min-h-0 flex-col">
-      <CardHeader>
+      <CardHeader className="pb-2">
-        <CardTitle className="text-base">Agent Roster</CardTitle>
+        <CardTitle className="flex items-center justify-between text-base">
+          <span>Agent Roster</span>
+          {sessionsQuery.isFetching && !sessionsQuery.isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden="true" />
+          ) : null}
+        </CardTitle>
       </CardHeader>
-      <CardContent className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+      <CardContent className="min-h-0 flex-1 px-3 pb-3">
-        No active agents
+        {sessionsQuery.isLoading ? (
+          <ScrollArea className="h-full">
+            <div className="space-y-2 pr-1">
+              {Array.from({ length: 6 }).map((_, index) => (
+                <Skeleton key={`roster-skeleton-${String(index)}`} className="h-10 w-full" />
+              ))}
+            </div>
+          </ScrollArea>
+        ) : sessionsQuery.error ? (
+          <div className="flex h-full items-center justify-center text-center text-sm text-red-500">
+            Failed to load agents: {sessionsQuery.error.message}
+          </div>
+        ) : groupedSessions.length === 0 ? (
+          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+            No active agents
+          </div>
+        ) : (
+          <ScrollArea className="h-full">
+            <div className="space-y-3 pr-1">
+              {groupedSessions.map((group) => {
+                const providerOpen = isProviderOpen(group.providerId);
+
+                return (
+                  <Collapsible key={group.providerId} open={providerOpen} className="space-y-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        toggleProvider(group.providerId);
+                      }}
+                      className="flex w-full items-center gap-2 rounded-md px-1 py-1 text-left text-sm hover:bg-muted/40"
+                      aria-expanded={providerOpen}
+                    >
+                      <ChevronRight
+                        className={`h-4 w-4 text-muted-foreground transition-transform ${providerOpen ? "rotate-90" : ""}`}
+                        aria-hidden="true"
+                      />
+                      <span className="font-medium">
+                        {resolveProviderName(group.providerId, group.providerType)}
+                      </span>
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        {group.sessions.length}
+                      </span>
+                    </button>
+                    {providerOpen ? (
+                      <div className="space-y-1 pl-2">
+                        {group.sessions.map((session) => {
+                          const isSelected = selectedSessionId === session.id;
+                          const isKilling = pendingKillSessionId === session.id;
+
+                          return (
+                            <div
+                              key={session.id}
+                              role="button"
+                              tabIndex={0}
+                              onClick={() => {
+                                onSelectSession?.(session.id);
+                              }}
+                              onKeyDown={(event) => {
+                                if (event.key === "Enter" || event.key === " ") {
+                                  event.preventDefault();
+                                  onSelectSession?.(session.id);
+                                }
+                              }}
+                              className="flex items-center justify-between gap-2 rounded-md border border-transparent px-2 py-1.5 transition-colors hover:bg-muted/40"
+                              style={
+                                isSelected
+                                  ? {
+                                      borderColor: "rgba(47, 128, 255, 0.35)",
+                                      backgroundColor: "rgba(47, 128, 255, 0.08)",
+                                    }
+                                  : undefined
+                              }
+                            >
+                              <div className="flex min-w-0 items-center gap-2">
+                                <span className="font-mono text-xs" title={session.id}>
+                                  {truncateSessionId(session.id)}
+                                </span>
+                                <Badge
+                                  variant={getStatusVariant(session.status)}
+                                  className="capitalize"
+                                >
+                                  {session.status}
+                                </Badge>
+                              </div>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-7 min-h-7 w-7 min-w-7 p-0"
+                                disabled={isKilling}
+                                onClick={(event) => {
+                                  event.stopPropagation();
+                                  killMutation.mutate(session.id);
+                                }}
+                                aria-label={`Kill session ${truncateSessionId(session.id)}`}
+                              >
+                                {isKilling ? (
+                                  <Loader2
+                                    className="h-3.5 w-3.5 animate-spin"
+                                    aria-hidden="true"
+                                  />
+                                ) : (
+                                  <X className="h-3.5 w-3.5" aria-hidden="true" />
+                                )}
+                              </Button>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : null}
+                  </Collapsible>
+                );
+              })}
+            </div>
+          </ScrollArea>
+        )}
       </CardContent>
     </Card>
   );

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

@@ -1,19 +1,31 @@
 "use client";
 
+import { useState } from "react";
 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 [selectedSessionId, setSelectedSessionId] = useState<string>();
+
+  // First panel: selected session (from roster click) or first available session
+  const firstPanelSessionId = selectedSessionId ?? sessions[0]?.id;
+  const panelSessionIds = [firstPanelSessionId, 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 />
+          <GlobalAgentRoster
+            onSelectSession={setSelectedSessionId}
+            {...(selectedSessionId ? { selectedSessionId } : {})}
+          />
         </aside>
         <main className="h-full min-h-0 overflow-hidden">
-          <MissionControlPanel panels={DEFAULT_PANEL_SLOTS} />
+          <MissionControlPanel panels={DEFAULT_PANEL_SLOTS} panelSessionIds={panelSessionIds} />
         </main>
       </div>
     </section>

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

@@ -4,14 +4,24 @@ import { OrchestratorPanel } from "@/components/mission-control/OrchestratorPane
 
 interface MissionControlPanelProps {
   panels: readonly string[];
+  panelSessionIds?: readonly (string | undefined)[];
 }
 
-export function MissionControlPanel({ panels }: MissionControlPanelProps): React.JSX.Element {
+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) => (
+      {panels.map((panelId, index) => {
-        <OrchestratorPanel key={panelId} />
+        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

@@ -1,15 +1,123 @@
 "use client";
 
+import { useEffect, useRef } from "react";
+import { formatDistanceToNow } from "date-fns";
+import { BargeInInput } from "@/components/mission-control/BargeInInput";
+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>
+    );
+  }
 
-export function OrchestratorPanel(): React.JSX.Element {
   return (
     <Card className="flex h-full min-h-[220px] flex-col">
-      <CardHeader>
+      <CardHeader className="space-y-2">
-        <CardTitle className="text-base">Orchestrator Panel</CardTitle>
+        <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 flex-1 items-center justify-center text-sm text-muted-foreground">
+      <CardContent className="flex min-h-0 flex-1 flex-col p-0">
-        Select an agent
+        <div className="min-h-0 flex-1">
+          <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>
+        </div>
+        <div className="border-t border-border/70 p-3">
+          <BargeInInput sessionId={sessionId} />
+        </div>
       </CardContent>
     </Card>
   );

apps/web/src/components/ui/collapsible.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+}
+
+export function Collapsible({
+  open = true,
+  className = "",
+  ...props
+}: CollapsibleProps): React.JSX.Element {
+  return <div data-state={open ? "open" : "closed"} className={className} {...props} />;
+}

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/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className = "", ...props }, ref) => (
+    <div
+      ref={ref}
+      className={`animate-pulse rounded-md bg-[rgb(var(--surface-2))] ${className}`}
+      {...props}
+    />
+  )
+);
+
+Skeleton.displayName = "Skeleton";

apps/web/src/hooks/useMissionControl.ts

@@ -1,10 +1,189 @@
-interface UseMissionControlResult {
+"use client";
-  sessions: [];
+
-  loading: boolean;
+import { useEffect, useRef, useState } from "react";
-  error: null;
+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>;
 }
 
-// Stub — will be wired in P2-002
+interface MissionControlSessionsResponse {
-export function useMissionControl(): UseMissionControlResult {
+  sessions: MissionControlSession[];
-  return { sessions: [], loading: false, error: null };
+}
+
+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,
+  };
 }