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

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

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

@@ -1,15 +1,14 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+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";
-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 +47,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,57 +69,55 @@ 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">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span
-              <span
+              className={`h-2.5 w-2.5 rounded-full ${CONNECTION_DOT_CLASS[status]} ${
-                className={`h-2.5 w-2.5 rounded-full ${CONNECTION_DOT_CLASS[status]} ${
+                status === "connecting" ? "animate-pulse" : ""
-                  status === "connecting" ? "animate-pulse" : ""
+              }`}
-                }`}
+              aria-hidden="true"
-                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>
       </CardHeader>
-      <CardContent className="flex min-h-0 flex-1 p-0">
+      <CardContent className="flex min-h-0 flex-1 flex-col p-0">
-        <ScrollArea className="h-full w-full">
+        <div className="min-h-0 flex-1">
-          <div className="flex min-h-full flex-col gap-3 p-4">
+          <ScrollArea className="h-full w-full">
-            {messages.length === 0 ? (
+            <div className="flex min-h-full flex-col gap-3 p-4">
-              <p className="mt-6 text-center text-sm text-muted-foreground">
+              {messages.length === 0 ? (
-                {error ?? "Waiting for messages..."}
+                <p className="mt-6 text-center text-sm text-muted-foreground">
-              </p>
+                  {error ?? "Waiting for messages..."}
-            ) : (
+                </p>
-              messages.map((message) => (
+              ) : (
-                <article
+                messages.map((message) => (
-                  key={message.id}
+                  <article
-                  className="rounded-lg border border-border/70 bg-card px-3 py-2"
+                    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">
+                    <div className="mb-2 flex items-center justify-between gap-2">
-                      {message.role}
+                      <Badge variant={ROLE_BADGE_VARIANT[message.role]} className="uppercase">
-                    </Badge>
+                        {message.role}
-                    <time className="text-xs text-muted-foreground">
+                      </Badge>
-                      {formatRelativeTimestamp(message.timestamp)}
+                      <time className="text-xs text-muted-foreground">
-                    </time>
+                        {formatRelativeTimestamp(message.timestamp)}
-                  </div>
+                      </time>
-                  <p className="whitespace-pre-wrap break-words text-sm text-foreground">
+                    </div>
-                    {message.content}
+                    <p className="whitespace-pre-wrap break-words text-sm text-foreground">
-                  </p>
+                      {message.content}
-                </article>
+                    </p>
-              ))
+                  </article>
-            )}
+                ))
-            <div ref={bottomAnchorRef} />
+              )}
-          </div>
+              <div ref={bottomAnchorRef} />
-        </ScrollArea>
+            </div>
+          </ScrollArea>
+        </div>
+        <div className="border-t border-border/70 p-3">
+          <BargeInInput sessionId={sessionId} />
+        </div>
       </CardContent>
     </Card>
   );

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>
-  );
-}