feat(web): MS23-P2-003 BargeInInput component

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

@@ -0,0 +1,147 @@
+"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,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>
+          {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/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,6 +2,7 @@
 
 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";
@@ -82,36 +83,41 @@ 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 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 className="flex min-h-0 flex-1 flex-col p-0">
+        <div className="min-h-0 flex-1">
+          <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>
+        </div>
+        <div className="border-t border-border/70 p-3">
+          <BargeInInput sessionId={sessionId} />
+        </div>
       </CardContent>
     </Card>
   );