feat(web): MS23-P2-005 GlobalAgentRoster sidebar tree

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

@@ -4,7 +4,6 @@ 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 { KillAllDialog } from "@/components/mission-control/KillAllDialog";
 import { Badge } from "@/components/ui/badge";
 import type { BadgeVariant } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -37,7 +36,7 @@ interface ProviderSessionGroup {
 
 export interface GlobalAgentRosterProps {
   onSelectSession?: (sessionId: string) => void;
-  selectedSessionId?: string | undefined;
+  selectedSessionId?: string;
 }
 
 function getStatusVariant(status: MissionControlSessionStatus): BadgeVariant {
@@ -88,21 +87,6 @@ async function fetchSessions(): Promise<MissionControlSession[]> {
   return Array.isArray(payload) ? payload : payload.sessions;
 }
 
-function toKillAllSessions(sessions: MissionControlSession[]): AgentSession[] {
-  return sessions
-    .filter(
-      (session): session is MissionControlSession & { status: AgentSession["status"] } =>
-        session.status !== "killed"
-    )
-    .map((session) => ({
-      ...session,
-      createdAt:
-        session.createdAt instanceof Date ? session.createdAt : new Date(session.createdAt),
-      updatedAt:
-        session.updatedAt instanceof Date ? session.updatedAt : new Date(session.updatedAt),
-    }));
-}
-
 export function GlobalAgentRoster({
   onSelectSession,
   selectedSessionId,
@@ -133,13 +117,6 @@ export function GlobalAgentRoster({
     [sessionsQuery.data]
   );
 
-  const killAllSessions = useMemo(
-    () => toKillAllSessions(sessionsQuery.data ?? []),
-    [sessionsQuery.data]
-  );
-
-  const totalSessionCount = sessionsQuery.data?.length ?? 0;
-
   const pendingKillSessionId = killMutation.isPending ? killMutation.variables : undefined;
 
   const toggleProvider = (providerId: string): void => {
@@ -151,23 +128,14 @@ export function GlobalAgentRoster({
 
   const isProviderOpen = (providerId: string): boolean => openProviders[providerId] ?? true;
 
-  const handleKillAllComplete = (): void => {
-    void queryClient.invalidateQueries({ queryKey: SESSIONS_QUERY_KEY });
-  };
-
   return (
     <Card className="flex h-full min-h-0 flex-col">
       <CardHeader className="pb-2">
-        <CardTitle className="flex items-center justify-between gap-2 text-base">
+        <CardTitle className="flex items-center justify-between text-base">
           <span>Agent Roster</span>
-          <div className="flex items-center gap-2">
-            {totalSessionCount > 0 ? (
-              <KillAllDialog sessions={killAllSessions} onComplete={handleKillAllComplete} />
-            ) : null}
           {sessionsQuery.isFetching && !sessionsQuery.isLoading ? (
             <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden="true" />
           ) : null}
-          </div>
         </CardTitle>
       </CardHeader>
       <CardContent className="min-h-0 flex-1 px-3 pb-3">

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

@@ -1,224 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import type { AgentSession } from "@mosaic/shared";
-import { Loader2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { apiPost } from "@/lib/api/client";
-
-const CONFIRM_TEXT = "KILL ALL";
-const AUTO_CLOSE_DELAY_MS = 2_000;
-
-type KillScope = "internal" | "all";
-
-export interface KillAllDialogProps {
-  sessions: AgentSession[];
-  onComplete?: () => void;
-}
-
-export function KillAllDialog({ sessions, onComplete }: KillAllDialogProps): React.JSX.Element {
-  const [open, setOpen] = useState(false);
-  const [scope, setScope] = useState<KillScope>("internal");
-  const [confirmationInput, setConfirmationInput] = useState("");
-  const [isKilling, setIsKilling] = useState(false);
-  const [completedCount, setCompletedCount] = useState(0);
-  const [targetCount, setTargetCount] = useState(0);
-  const [successCount, setSuccessCount] = useState<number | null>(null);
-  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const internalSessions = useMemo(
-    () => sessions.filter((session) => session.providerType.toLowerCase() === "internal"),
-    [sessions]
-  );
-
-  const scopedSessions = useMemo(
-    () => (scope === "all" ? sessions : internalSessions),
-    [scope, sessions, internalSessions]
-  );
-
-  const hasConfirmation = confirmationInput === CONFIRM_TEXT;
-  const isConfirmDisabled =
-    isKilling || successCount !== null || !hasConfirmation || scopedSessions.length === 0;
-
-  useEffect((): (() => void) => {
-    return (): void => {
-      if (closeTimeoutRef.current !== null) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const resetState = (): void => {
-    setScope("internal");
-    setConfirmationInput("");
-    setIsKilling(false);
-    setCompletedCount(0);
-    setTargetCount(0);
-    setSuccessCount(null);
-  };
-
-  const handleOpenChange = (nextOpen: boolean): void => {
-    if (!nextOpen && isKilling) {
-      return;
-    }
-
-    if (!nextOpen) {
-      if (closeTimeoutRef.current !== null) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-      resetState();
-    }
-
-    setOpen(nextOpen);
-  };
-
-  const handleKillAll = async (): Promise<void> => {
-    if (isConfirmDisabled) {
-      return;
-    }
-
-    const targetSessions = [...scopedSessions];
-    setIsKilling(true);
-    setCompletedCount(0);
-    setTargetCount(targetSessions.length);
-    setSuccessCount(null);
-
-    const killRequests = targetSessions.map(async (session) => {
-      try {
-        await apiPost<{ message: string }>(`/api/mission-control/sessions/${session.id}/kill`, {
-          force: true,
-        });
-        return true;
-      } catch {
-        return false;
-      } finally {
-        setCompletedCount((currentCount) => currentCount + 1);
-      }
-    });
-
-    const results = await Promise.all(killRequests);
-    const successfulKills = results.filter(Boolean).length;
-
-    setIsKilling(false);
-    setSuccessCount(successfulKills);
-    onComplete?.();
-
-    closeTimeoutRef.current = setTimeout(() => {
-      setOpen(false);
-      resetState();
-    }, AUTO_CLOSE_DELAY_MS);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>
-        <Button variant="danger" size="sm">
-          Kill All
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[520px]">
-        <DialogHeader>
-          <DialogTitle>Kill All Agents</DialogTitle>
-          <DialogDescription>
-            This force-kills every selected agent session. This action cannot be undone.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-2">
-          <fieldset className="space-y-2">
-            <legend className="text-sm font-medium">Scope</legend>
-            <label className="flex cursor-pointer items-center gap-2 text-sm text-foreground">
-              <input
-                type="radio"
-                name="kill-all-scope"
-                checked={scope === "internal"}
-                disabled={isKilling}
-                onChange={() => {
-                  setScope("internal");
-                }}
-              />
-              <span>Internal provider only ({internalSessions.length})</span>
-            </label>
-            <label className="flex cursor-pointer items-center gap-2 text-sm text-foreground">
-              <input
-                type="radio"
-                name="kill-all-scope"
-                checked={scope === "all"}
-                disabled={isKilling}
-                onChange={() => {
-                  setScope("all");
-                }}
-              />
-              <span>All providers ({sessions.length})</span>
-            </label>
-          </fieldset>
-
-          <div className="space-y-2">
-            <Label htmlFor="kill-all-confirmation-input">Type KILL ALL to confirm</Label>
-            <Input
-              id="kill-all-confirmation-input"
-              value={confirmationInput}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                setConfirmationInput(event.target.value);
-              }}
-              placeholder={CONFIRM_TEXT}
-              autoComplete="off"
-              disabled={isKilling}
-            />
-          </div>
-
-          {scopedSessions.length === 0 ? (
-            <p className="text-sm text-red-500">No sessions in the selected scope.</p>
-          ) : null}
-
-          {isKilling ? (
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
-              <span>
-                Killing {completedCount} of {targetCount} agents...
-              </span>
-            </div>
-          ) : successCount !== null ? (
-            <p className="text-sm text-muted-foreground">
-              Killed {successCount} of {targetCount} agents. Closing...
-            </p>
-          ) : null}
-        </div>
-
-        <DialogFooter>
-          <Button
-            type="button"
-            variant="outline"
-            disabled={isKilling}
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            variant="danger"
-            disabled={isConfirmDisabled}
-            onClick={() => {
-              void handleKillAll();
-            }}
-          >
-            Kill All Agents
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -3,29 +3,28 @@
 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
-            onSelectSession={setSelectedSessionId}
+            onSelectSession={(sessionId) => {
-            selectedSessionId={selectedSessionId}
+              setSelectedSessionId(sessionId);
+            }}
+            {...(selectedSessionId !== undefined ? { selectedSessionId } : {})}
           />
         </aside>
         <main className="h-full min-h-0 overflow-hidden">
-          <MissionControlPanel panels={DEFAULT_PANEL_SLOTS} panelSessionIds={panelSessionIds} />
+          <MissionControlPanel
+            panels={DEFAULT_PANEL_SLOTS}
+            {...(selectedSessionId !== undefined ? { selectedSessionId } : {})}
+          />
         </main>
       </div>
     </section>

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

@@ -4,24 +4,21 @@ import { OrchestratorPanel } from "@/components/mission-control/OrchestratorPane
 
 interface MissionControlPanelProps {
   panels: readonly string[];
-  panelSessionIds?: readonly (string | undefined)[];
+  selectedSessionId?: string;
 }
 
 export function MissionControlPanel({
   panels,
-  panelSessionIds,
+  selectedSessionId,
 }: 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) => {
+      {panels.map((panelId) => (
-        const sessionId = panelSessionIds?.[index];
+        <OrchestratorPanel
-
+          key={panelId}
-        if (sessionId === undefined) {
+          {...(selectedSessionId !== undefined ? { selectedSessionId } : {})}
-          return <OrchestratorPanel key={panelId} />;
+        />
-        }
+      ))}
-
-        return <OrchestratorPanel key={panelId} sessionId={sessionId} />;
-      })}
     </div>
   );
 }

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

@@ -1,117 +1,27 @@
 "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> = {
+interface OrchestratorPanelProps {
-  user: "badge-blue",
+  selectedSessionId?: string;
-  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 {
+function truncateSessionId(sessionId: string): string {
-  const parsedDate = new Date(timestamp);
+  return sessionId.slice(0, 8);
-  if (Number.isNaN(parsedDate.getTime())) {
-    return "just now";
 }
 
-  return formatDistanceToNow(parsedDate, { addSuffix: true });
+export function OrchestratorPanel({
-}
+  selectedSessionId,
-
+}: OrchestratorPanelProps): React.JSX.Element {
-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
+        {selectedSessionId
-        </CardContent>
+          ? `Selected agent: ${truncateSessionId(selectedSessionId)}`
-      </Card>
+          : "Select an agent"}
-    );
-  }
-
-  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

@@ -3,13 +3,9 @@ import * as React from "react";
 export type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement>;
 
 export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
-  ({ className = "", children, ...props }, ref) => {
+  ({ className = "", ...props }, ref) => (
-    return (
+    <div ref={ref} className={`h-full w-full overflow-auto ${className}`} {...props} />
-      <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

@@ -1,189 +1,10 @@
-"use client";
+interface UseMissionControlResult {
-
+  sessions: [];
-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;
+  error: null;
 }
 
-export interface UseSessionStreamResult {
+// Stub — will be wired in P2-002
-  messages: MissionControlStreamMessage[];
+export function useMissionControl(): UseMissionControlResult {
-  status: MissionControlConnectionStatus;
+  return { sessions: [], loading: false, error: null };
-  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,
-  };
 }