feat(web): MS23-P2-004 panel operator controls

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";
@@ -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>
+          {sessionsQuery.isFetching && !sessionsQuery.isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden="true" />
+          ) : null}
         </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/OrchestratorPanel.tsx

@@ -1,13 +1,15 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } 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 { PanelControls } from "@/components/mission-control/PanelControls";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   useSessionStream,
+  useSessions,
   type MissionControlConnectionStatus,
   type MissionControlMessageRole,
 } from "@/hooks/useMissionControl";
@@ -46,12 +48,21 @@ function formatRelativeTimestamp(timestamp: string): string {
 
 export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.JSX.Element {
   const { messages, status, error } = useSessionStream(sessionId ?? "");
+  const { sessions } = useSessions();
   const bottomAnchorRef = useRef<HTMLDivElement | null>(null);
+  const [optimisticStatus, setOptimisticStatus] = useState<string | null>(null);
+
+  const selectedSessionStatus = sessions.find((session) => session.id === sessionId)?.status;
+  const controlsStatus = optimisticStatus ?? selectedSessionStatus ?? "unknown";
 
   useEffect(() => {
     bottomAnchorRef.current?.scrollIntoView({ block: "end" });
   }, [messages.length]);
 
+  useEffect(() => {
+    setOptimisticStatus(null);
+  }, [sessionId, selectedSessionStatus]);
+
   if (!sessionId) {
     return (
       <Card className="flex h-full min-h-[220px] flex-col">
@@ -68,16 +79,23 @@ export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.
   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">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
           <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"
+          <div className="flex flex-col items-start gap-2 sm:items-end">
+            <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>
+            <PanelControls
+              sessionId={sessionId}
+              status={controlsStatus}
+              onStatusChange={setOptimisticStatus}
             />
-            <span>{CONNECTION_TEXT[status]}</span>
           </div>
         </div>
         <p className="truncate text-xs text-muted-foreground">Session: {sessionId}</p>

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

@@ -0,0 +1,259 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { apiPost } from "@/lib/api/client";
+
+const SESSIONS_QUERY_KEY = ["mission-control", "sessions"] as const;
+
+type PanelAction = "pause" | "resume" | "graceful-kill" | "force-kill";
+type KillConfirmationState = "graceful" | "force" | null;
+
+interface PanelActionResult {
+  nextStatus: string;
+}
+
+export interface PanelControlsProps {
+  sessionId: string;
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  status: "active" | "paused" | "killed" | string;
+  onStatusChange?: (newStatus: string) => void;
+}
+
+function getErrorMessage(error: unknown): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+
+  return "Failed to update agent session.";
+}
+
+export function PanelControls({
+  sessionId,
+  status,
+  onStatusChange,
+}: PanelControlsProps): React.JSX.Element {
+  const queryClient = useQueryClient();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [confirmingKill, setConfirmingKill] = useState<KillConfirmationState>(null);
+
+  useEffect(() => {
+    setErrorMessage(null);
+    setConfirmingKill(null);
+  }, [sessionId]);
+
+  const controlMutation = useMutation({
+    mutationFn: async (action: PanelAction): Promise<PanelActionResult> => {
+      switch (action) {
+        case "pause":
+          await apiPost<{ message: string }>(
+            `/api/mission-control/sessions/${encodeURIComponent(sessionId)}/pause`
+          );
+          return { nextStatus: "paused" };
+        case "resume":
+          await apiPost<{ message: string }>(
+            `/api/mission-control/sessions/${encodeURIComponent(sessionId)}/resume`
+          );
+          return { nextStatus: "active" };
+        case "graceful-kill":
+          await apiPost<{ message: string }>(
+            `/api/mission-control/sessions/${encodeURIComponent(sessionId)}/kill`,
+            { force: false }
+          );
+          return { nextStatus: "killed" };
+        case "force-kill":
+          await apiPost<{ message: string }>(
+            `/api/mission-control/sessions/${encodeURIComponent(sessionId)}/kill`,
+            { force: true }
+          );
+          return { nextStatus: "killed" };
+      }
+    },
+    onSuccess: ({ nextStatus }): void => {
+      setErrorMessage(null);
+      setConfirmingKill(null);
+      onStatusChange?.(nextStatus);
+      void queryClient.invalidateQueries({ queryKey: SESSIONS_QUERY_KEY });
+    },
+    onError: (error: unknown): void => {
+      setConfirmingKill(null);
+      setErrorMessage(getErrorMessage(error));
+    },
+  });
+
+  const normalizedStatus = status.toLowerCase();
+  const isKilled = normalizedStatus === "killed";
+  const isBusy = controlMutation.isPending;
+  const pendingAction = isBusy ? controlMutation.variables : undefined;
+
+  const submitAction = (action: PanelAction): void => {
+    setErrorMessage(null);
+    controlMutation.mutate(action);
+  };
+
+  const pauseDisabled = isBusy || normalizedStatus === "paused" || isKilled;
+  const resumeDisabled = isBusy || normalizedStatus === "active" || isKilled;
+  const gracefulKillDisabled = isBusy || isKilled;
+  const forceKillDisabled = isBusy || isKilled;
+
+  return (
+    <div className="flex flex-col items-end gap-2">
+      <div className="flex flex-wrap items-center justify-end gap-1.5">
+        <Button
+          type="button"
+          size="sm"
+          variant="secondary"
+          onClick={() => {
+            submitAction("pause");
+          }}
+          disabled={pauseDisabled}
+          aria-label="Pause session"
+        >
+          {pendingAction === "pause" ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+          ) : (
+            <span aria-hidden="true">⏸</span>
+          )}
+          <span>Pause</span>
+        </Button>
+
+        <Button
+          type="button"
+          size="sm"
+          variant="secondary"
+          onClick={() => {
+            submitAction("resume");
+          }}
+          disabled={resumeDisabled}
+          aria-label="Resume session"
+        >
+          {pendingAction === "resume" ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+          ) : (
+            <span aria-hidden="true">▶</span>
+          )}
+          <span>Resume</span>
+        </Button>
+
+        <div className="relative">
+          <Button
+            type="button"
+            size="sm"
+            variant="secondary"
+            onClick={() => {
+              setErrorMessage(null);
+              setConfirmingKill((current) => (current === "graceful" ? null : "graceful"));
+            }}
+            disabled={gracefulKillDisabled}
+            aria-label="Gracefully kill session"
+          >
+            {pendingAction === "graceful-kill" ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+            ) : (
+              <span aria-hidden="true">⏹</span>
+            )}
+            <span>Graceful Kill</span>
+          </Button>
+          {confirmingKill === "graceful" ? (
+            <div className="absolute right-0 top-[calc(100%+0.375rem)] z-20 w-72 rounded-md border border-border bg-card p-2 shadow-lg">
+              <p className="text-xs text-muted-foreground">
+                Gracefully stop this agent after it finishes the current step?
+              </p>
+              <div className="mt-2 flex justify-end gap-1.5">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setConfirmingKill(null);
+                  }}
+                  disabled={isBusy}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="secondary"
+                  onClick={() => {
+                    submitAction("graceful-kill");
+                  }}
+                  disabled={isBusy}
+                >
+                  {pendingAction === "graceful-kill" ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+                  ) : null}
+                  <span>Confirm</span>
+                </Button>
+              </div>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="relative">
+          <Button
+            type="button"
+            size="sm"
+            variant="danger"
+            onClick={() => {
+              setErrorMessage(null);
+              setConfirmingKill((current) => (current === "force" ? null : "force"));
+            }}
+            disabled={forceKillDisabled}
+            aria-label="Force kill session"
+          >
+            {pendingAction === "force-kill" ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+            ) : (
+              <span aria-hidden="true">💀</span>
+            )}
+            <span>Force Kill</span>
+          </Button>
+          {confirmingKill === "force" ? (
+            <div className="absolute right-0 top-[calc(100%+0.375rem)] z-20 w-72 rounded-md border border-border bg-card p-2 shadow-lg">
+              <p className="text-xs text-muted-foreground">
+                This will hard-kill the agent immediately.
+              </p>
+              <div className="mt-2 flex justify-end gap-1.5">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setConfirmingKill(null);
+                  }}
+                  disabled={isBusy}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="danger"
+                  onClick={() => {
+                    submitAction("force-kill");
+                  }}
+                  disabled={isBusy}
+                >
+                  {pendingAction === "force-kill" ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+                  ) : null}
+                  <span>Confirm</span>
+                </Button>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {errorMessage ? (
+        <Badge variant="status-error" className="max-w-[32rem] whitespace-normal text-xs">
+          {errorMessage}
+        </Badge>
+      ) : null}
+    </div>
+  );
+}