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

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

@@ -1,147 +0,0 @@
-"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

@@ -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>
-          {sessionsQuery.isFetching && !sessionsQuery.isLoading ? (
+          <div className="flex items-center gap-2">
-            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden="true" />
+            {totalSessionCount > 0 ? (
-          ) : null}
+              <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/MissionControlLayout.tsx

@@ -21,7 +21,7 @@ export function MissionControlLayout(): React.JSX.Element {
         <aside className="h-full min-h-0">
           <GlobalAgentRoster
             onSelectSession={setSelectedSessionId}
-            {...(selectedSessionId ? { selectedSessionId } : {})}
+            selectedSessionId={selectedSessionId}
           />
         </aside>
         <main className="h-full min-h-0 overflow-hidden">

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

@@ -2,7 +2,6 @@
 
 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";
@@ -83,41 +82,36 @@ export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.
         </div>
         <p className="truncate text-xs text-muted-foreground">Session: {sessionId}</p>
       </CardHeader>
-      <CardContent className="flex min-h-0 flex-1 flex-col p-0">
+      <CardContent className="flex min-h-0 flex-1 p-0">
-        <div className="min-h-0 flex-1">
+        <ScrollArea className="h-full w-full">
-          <ScrollArea className="h-full w-full">
+          <div className="flex min-h-full flex-col gap-3 p-4">
-            <div className="flex min-h-full flex-col gap-3 p-4">
+            {messages.length === 0 ? (
-              {messages.length === 0 ? (
+              <p className="mt-6 text-center text-sm text-muted-foreground">
-                <p className="mt-6 text-center text-sm text-muted-foreground">
+                {error ?? "Waiting for messages..."}
-                  {error ?? "Waiting for messages..."}
+              </p>
-                </p>
+            ) : (
-              ) : (
+              messages.map((message) => (
-                messages.map((message) => (
+                <article
-                  <article
+                  key={message.id}
-                    key={message.id}
+                  className="rounded-lg border border-border/70 bg-card px-3 py-2"
-                    className="rounded-lg border border-border/70 bg-card px-3 py-2"
+                >
-                  >
+                  <div className="mb-2 flex items-center justify-between gap-2">
-                    <div className="mb-2 flex items-center justify-between gap-2">
+                    <Badge variant={ROLE_BADGE_VARIANT[message.role]} className="uppercase">
-                      <Badge variant={ROLE_BADGE_VARIANT[message.role]} className="uppercase">
+                      {message.role}
-                        {message.role}
+                    </Badge>
-                      </Badge>
+                    <time className="text-xs text-muted-foreground">
-                      <time className="text-xs text-muted-foreground">
+                      {formatRelativeTimestamp(message.timestamp)}
-                        {formatRelativeTimestamp(message.timestamp)}
+                    </time>
-                      </time>
+                  </div>
-                    </div>
+                  <p className="whitespace-pre-wrap break-words text-sm text-foreground">
-                    <p className="whitespace-pre-wrap break-words text-sm text-foreground">
+                    {message.content}
-                      {message.content}
+                  </p>
-                    </p>
+                </article>
-                  </article>
+              ))
-                ))
+            )}
-              )}
+            <div ref={bottomAnchorRef} />
-              <div ref={bottomAnchorRef} />
+          </div>
-            </div>
+        </ScrollArea>
-          </ScrollArea>
-        </div>
-        <div className="border-t border-border/70 p-3">
-          <BargeInInput sessionId={sessionId} />
-        </div>
       </CardContent>
     </Card>
   );