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";
@@ -36,7 +37,7 @@ interface ProviderSessionGroup {
 
 export interface GlobalAgentRosterProps {
   onSelectSession?: (sessionId: string) => void;
-  selectedSessionId?: string;
+  selectedSessionId?: string | undefined;
 }
 
 function getStatusVariant(status: MissionControlSessionStatus): BadgeVariant {
@@ -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>
+  );
+}