feat(web): MS23-P2-006 KillAllDialog confirmation modal

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

@@ -4,6 +4,7 @@ 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";
@@ -87,6 +88,21 @@ 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,
@@ -117,6 +133,13 @@ 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 => {
@@ -128,14 +151,23 @@ 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 text-base">
+        <CardTitle className="flex items-center justify-between gap-2 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

@@ -0,0 +1,224 @@
+"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,15 +1,13 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+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 { PanelControls } from "@/components/mission-control/PanelControls";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   useSessionStream,
-  useSessions,
   type MissionControlConnectionStatus,
   type MissionControlMessageRole,
 } from "@/hooks/useMissionControl";
@@ -48,21 +46,12 @@ 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">
@@ -79,9 +68,8 @@ 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 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex items-center justify-between gap-2">
           <CardTitle className="text-base">Orchestrator Panel</CardTitle>
-          <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]} ${
@@ -91,12 +79,6 @@ export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.
             />
             <span>{CONNECTION_TEXT[status]}</span>
           </div>
-            <PanelControls
-              sessionId={sessionId}
-              status={controlsStatus}
-              onStatusChange={setOptimisticStatus}
-            />
-          </div>
         </div>
         <p className="truncate text-xs text-muted-foreground">Session: {sessionId}</p>
       </CardHeader>

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

@@ -1,259 +0,0 @@
-"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>
-  );
-}