test(web): add Mission Control frontend tests for phase 2 gate

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

@@ -0,0 +1,155 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as MosaicUi from "@mosaic/ui";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+const mockApiPost = vi.fn<(endpoint: string, body?: unknown) => Promise<{ message?: string }>>();
+const mockShowToast = vi.fn<(message: string, variant?: string) => void>();
+const useToastSpy = vi.spyOn(MosaicUi, "useToast");
+
+vi.mock("@/lib/api/client", () => ({
+  apiPost: (endpoint: string, body?: unknown): Promise<{ message?: string }> =>
+    mockApiPost(endpoint, body),
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+import { BargeInInput } from "./BargeInInput";
+
+describe("BargeInInput", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    vi.stubGlobal("fetch", vi.fn());
+    mockApiPost.mockResolvedValue({ message: "ok" });
+    useToastSpy.mockReturnValue({
+      showToast: mockShowToast,
+      removeToast: vi.fn(),
+    } as ReturnType<typeof MosaicUi.useToast>);
+  });
+
+  afterEach((): void => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders input controls and keeps send disabled for empty content", (): void => {
+    render(<BargeInInput sessionId="session-1" />);
+
+    expect(screen.getByLabelText("Inject message")).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", { name: "Pause before send" })).not.toBeChecked();
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+  });
+
+  it("sends a trimmed message and clears the textarea", async (): Promise<void> => {
+    const onSent = vi.fn<() => void>();
+    const user = userEvent.setup();
+
+    render(<BargeInInput sessionId="session-1" onSent={onSent} />);
+
+    const textarea = screen.getByLabelText("Inject message");
+    await user.type(textarea, "  execute plan  ");
+    await user.click(screen.getByRole("button", { name: "Send" }));
+
+    await waitFor((): void => {
+      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/session-1/inject", {
+        content: "execute plan",
+      });
+    });
+
+    expect(onSent).toHaveBeenCalledTimes(1);
+    expect(textarea).toHaveValue("");
+  });
+
+  it("pauses and resumes the session around injection when checkbox is enabled", async (): Promise<void> => {
+    const user = userEvent.setup();
+
+    render(<BargeInInput sessionId="session-2" />);
+
+    await user.click(screen.getByRole("checkbox", { name: "Pause before send" }));
+    await user.type(screen.getByLabelText("Inject message"), "hello world");
+    await user.click(screen.getByRole("button", { name: "Send" }));
+
+    await waitFor((): void => {
+      expect(mockApiPost).toHaveBeenCalledTimes(3);
+    });
+
+    const calls = mockApiPost.mock.calls as [string, unknown?][];
+
+    expect(calls[0]).toEqual(["/api/mission-control/sessions/session-2/pause", undefined]);
+    expect(calls[1]).toEqual([
+      "/api/mission-control/sessions/session-2/inject",
+      { content: "hello world" },
+    ]);
+    expect(calls[2]).toEqual(["/api/mission-control/sessions/session-2/resume", undefined]);
+  });
+
+  it("submits with Enter and does not submit on Shift+Enter", async (): Promise<void> => {
+    const user = userEvent.setup();
+
+    render(<BargeInInput sessionId="session-3" />);
+
+    const textarea = screen.getByLabelText("Inject message");
+    await user.type(textarea, "first");
+    fireEvent.keyDown(textarea, { key: "Enter", code: "Enter", shiftKey: true });
+
+    expect(mockApiPost).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(textarea, { key: "Enter", code: "Enter", shiftKey: false });
+
+    await waitFor((): void => {
+      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/session-3/inject", {
+        content: "first",
+      });
+    });
+  });
+
+  it("shows an inline error and toast when injection fails", async (): Promise<void> => {
+    const user = userEvent.setup();
+    mockApiPost.mockRejectedValueOnce(new Error("Injection failed"));
+
+    render(<BargeInInput sessionId="session-4" />);
+
+    await user.type(screen.getByLabelText("Inject message"), "help");
+    await user.click(screen.getByRole("button", { name: "Send" }));
+
+    await waitFor((): void => {
+      expect(screen.getByRole("alert")).toHaveTextContent("Injection failed");
+    });
+
+    expect(mockShowToast).toHaveBeenCalledWith("Injection failed", "error");
+  });
+
+  it("reports resume failures after a successful send", async (): Promise<void> => {
+    const user = userEvent.setup();
+
+    mockApiPost
+      .mockResolvedValueOnce({ message: "paused" })
+      .mockResolvedValueOnce({ message: "sent" })
+      .mockRejectedValueOnce(new Error("resume failed"));
+
+    render(<BargeInInput sessionId="session-5" />);
+
+    await user.click(screen.getByRole("checkbox", { name: "Pause before send" }));
+    await user.type(screen.getByLabelText("Inject message"), "deploy now");
+    await user.click(screen.getByRole("button", { name: "Send" }));
+
+    await waitFor((): void => {
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        "Message sent, but failed to resume session: resume failed"
+      );
+    });
+
+    expect(mockShowToast).toHaveBeenCalledWith(
+      "Message sent, but failed to resume session: resume failed",
+      "error"
+    );
+  });
+});

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

@@ -0,0 +1,203 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+interface MockContainerProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+}
+
+interface MockSession {
+  id: string;
+  providerId: string;
+  providerType: string;
+  status: "active" | "paused" | "killed";
+  createdAt: string;
+  updatedAt: string;
+  metadata?: Record<string, unknown>;
+}
+
+const mockApiGet = vi.fn<(endpoint: string) => Promise<MockSession[]>>();
+const mockApiPost = vi.fn<(endpoint: string, body?: unknown) => Promise<{ message: string }>>();
+const mockKillAllDialog = vi.fn<() => React.JSX.Element>();
+
+vi.mock("@/lib/api/client", () => ({
+  apiGet: (endpoint: string): Promise<MockSession[]> => mockApiGet(endpoint),
+  apiPost: (endpoint: string, body?: unknown): Promise<{ message: string }> =>
+    mockApiPost(endpoint, body),
+}));
+
+vi.mock("@/components/mission-control/KillAllDialog", () => ({
+  KillAllDialog: (): React.JSX.Element => mockKillAllDialog(),
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+vi.mock("@/components/ui/badge", () => ({
+  Badge: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <span {...props}>{children}</span>
+  ),
+}));
+
+vi.mock("@/components/ui/card", () => ({
+  Card: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <section {...props}>{children}</section>
+  ),
+  CardHeader: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <header {...props}>{children}</header>
+  ),
+  CardContent: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <div {...props}>{children}</div>
+  ),
+  CardTitle: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <h2 {...props}>{children}</h2>
+  ),
+}));
+
+import { GlobalAgentRoster } from "./GlobalAgentRoster";
+
+function renderWithQueryClient(ui: React.JSX.Element): ReturnType<typeof render> {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+}
+
+function makeSession(overrides: Partial<MockSession>): MockSession {
+  return {
+    id: "session-12345678",
+    providerId: "internal",
+    providerType: "internal",
+    status: "active",
+    createdAt: "2026-03-07T10:00:00.000Z",
+    updatedAt: "2026-03-07T10:01:00.000Z",
+    ...overrides,
+  };
+}
+
+function getRowForSessionLabel(label: string): HTMLElement {
+  const sessionLabel = screen.getByText(label);
+  const row = sessionLabel.closest('[role="button"]');
+
+  if (!(row instanceof HTMLElement)) {
+    throw new Error(`Expected a row element for session label ${label}`);
+  }
+
+  return row;
+}
+
+describe("GlobalAgentRoster", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    vi.stubGlobal("fetch", vi.fn());
+
+    mockApiGet.mockResolvedValue([]);
+    mockApiPost.mockResolvedValue({ message: "ok" });
+
+    mockKillAllDialog.mockImplementation(
+      (): React.JSX.Element => <div data-testid="kill-all-dialog">kill-all-dialog</div>
+    );
+  });
+
+  afterEach((): void => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders the empty state when no active sessions are returned", async (): Promise<void> => {
+    renderWithQueryClient(<GlobalAgentRoster />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("No active agents")).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId("kill-all-dialog")).not.toBeInTheDocument();
+  });
+
+  it("groups sessions by provider and shows kill-all control when sessions exist", async (): Promise<void> => {
+    mockApiGet.mockResolvedValue([
+      makeSession({ id: "alpha123456", providerId: "internal", providerType: "internal" }),
+      makeSession({ id: "bravo123456", providerId: "codex", providerType: "openai" }),
+    ]);
+
+    renderWithQueryClient(<GlobalAgentRoster />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("internal")).toBeInTheDocument();
+      expect(screen.getByText("codex (openai)")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("alpha123")).toBeInTheDocument();
+    expect(screen.getByText("bravo123")).toBeInTheDocument();
+    expect(screen.getByTestId("kill-all-dialog")).toBeInTheDocument();
+  });
+
+  it("calls onSelectSession on row click and keyboard activation", async (): Promise<void> => {
+    const onSelectSession = vi.fn<(sessionId: string) => void>();
+
+    mockApiGet.mockResolvedValue([makeSession({ id: "target123456" })]);
+
+    renderWithQueryClient(<GlobalAgentRoster onSelectSession={onSelectSession} />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("target12")).toBeInTheDocument();
+    });
+
+    const row = getRowForSessionLabel("target12");
+
+    fireEvent.click(row);
+
+    fireEvent.keyDown(row, { key: "Enter" });
+
+    expect(onSelectSession).toHaveBeenCalledTimes(2);
+    expect(onSelectSession).toHaveBeenNthCalledWith(1, "target123456");
+    expect(onSelectSession).toHaveBeenNthCalledWith(2, "target123456");
+  });
+
+  it("kills a session from the roster", async (): Promise<void> => {
+    mockApiGet.mockResolvedValue([makeSession({ id: "killme123456" })]);
+
+    renderWithQueryClient(<GlobalAgentRoster />);
+
+    await waitFor((): void => {
+      expect(screen.getByRole("button", { name: "Kill session killme12" })).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Kill session killme12" }));
+
+    await waitFor((): void => {
+      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/killme123456/kill", {
+        force: false,
+      });
+    });
+  });
+
+  it("collapses and reopens provider groups", async (): Promise<void> => {
+    mockApiGet.mockResolvedValue([makeSession({ id: "grouped12345" })]);
+
+    renderWithQueryClient(<GlobalAgentRoster />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("grouped1")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /internal/i }));
+
+    expect(screen.queryByText("grouped1")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /internal/i }));
+
+    expect(screen.getByText("grouped1")).toBeInTheDocument();
+  });
+});

apps/web/src/components/mission-control/MissionControlLayout.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from "@testing-library/react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+const mockGlobalAgentRoster = vi.fn();
+const mockMissionControlPanel = vi.fn();
+
+vi.mock("@/components/mission-control/AuditLogDrawer", () => ({
+  AuditLogDrawer: ({ trigger }: { trigger: ReactNode }): React.JSX.Element => (
+    <div data-testid="audit-log-drawer">{trigger}</div>
+  ),
+}));
+
+vi.mock("@/components/mission-control/GlobalAgentRoster", () => ({
+  GlobalAgentRoster: (props: unknown): React.JSX.Element => {
+    mockGlobalAgentRoster(props);
+    return <div data-testid="global-agent-roster" />;
+  },
+}));
+
+vi.mock("@/components/mission-control/MissionControlPanel", () => ({
+  MissionControlPanel: (props: unknown): React.JSX.Element => {
+    mockMissionControlPanel(props);
+    return <div data-testid="mission-control-panel" />;
+  },
+  MAX_PANEL_COUNT: 6,
+  MIN_PANEL_COUNT: 1,
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+import { MissionControlLayout } from "./MissionControlLayout";
+
+describe("MissionControlLayout", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    vi.stubGlobal("fetch", vi.fn());
+  });
+
+  afterEach((): void => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders without crashing", (): void => {
+    render(<MissionControlLayout />);
+
+    expect(screen.getByRole("region", { name: "Mission Control" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Audit Log" })).toBeInTheDocument();
+  });
+
+  it("renders sidebar and panel grid container", (): void => {
+    render(<MissionControlLayout />);
+
+    const region = screen.getByRole("region", { name: "Mission Control" });
+
+    expect(region.querySelector(".grid")).toBeInTheDocument();
+    expect(region.querySelector("aside")).toBeInTheDocument();
+    expect(region.querySelector("main")).toBeInTheDocument();
+    expect(screen.getByTestId("global-agent-roster")).toBeInTheDocument();
+    expect(screen.getByTestId("mission-control-panel")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,218 @@
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+interface MockContainerProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+}
+
+type MockConnectionStatus = "connected" | "connecting" | "error";
+type MockRole = "user" | "assistant" | "tool" | "system";
+
+interface MockMessage {
+  id: string;
+  role: MockRole;
+  content: string;
+  timestamp: string;
+}
+
+interface MockSession {
+  id: string;
+  status: string;
+}
+
+interface MockSessionStreamResult {
+  messages: MockMessage[];
+  status: MockConnectionStatus;
+  error: string | null;
+}
+
+interface MockSessionsResult {
+  sessions: MockSession[];
+  loading: boolean;
+  error: Error | null;
+}
+
+interface MockPanelControlsProps {
+  sessionId: string;
+  status: string;
+  onStatusChange?: (nextStatus: string) => void;
+}
+
+interface MockBargeInInputProps {
+  sessionId: string;
+}
+
+const mockUseSessionStream = vi.fn<(sessionId: string) => MockSessionStreamResult>();
+const mockUseSessions = vi.fn<() => MockSessionsResult>();
+const mockPanelControls = vi.fn<(props: MockPanelControlsProps) => React.JSX.Element>();
+const mockBargeInInput = vi.fn<(props: MockBargeInInputProps) => React.JSX.Element>();
+
+vi.mock("date-fns", () => ({
+  formatDistanceToNow: (): string => "moments ago",
+}));
+
+vi.mock("@/hooks/useMissionControl", () => ({
+  useSessionStream: (sessionId: string): MockSessionStreamResult => mockUseSessionStream(sessionId),
+  useSessions: (): MockSessionsResult => mockUseSessions(),
+}));
+
+vi.mock("@/components/mission-control/PanelControls", () => ({
+  PanelControls: (props: MockPanelControlsProps): React.JSX.Element => mockPanelControls(props),
+}));
+
+vi.mock("@/components/mission-control/BargeInInput", () => ({
+  BargeInInput: (props: MockBargeInInputProps): React.JSX.Element => mockBargeInInput(props),
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+vi.mock("@/components/ui/badge", () => ({
+  Badge: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <span {...props}>{children}</span>
+  ),
+}));
+
+vi.mock("@/components/ui/card", () => ({
+  Card: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <section {...props}>{children}</section>
+  ),
+  CardHeader: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <header {...props}>{children}</header>
+  ),
+  CardContent: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <div {...props}>{children}</div>
+  ),
+  CardTitle: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <h2 {...props}>{children}</h2>
+  ),
+}));
+
+vi.mock("@/components/ui/scroll-area", () => ({
+  ScrollArea: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <div {...props}>{children}</div>
+  ),
+}));
+
+import { OrchestratorPanel } from "./OrchestratorPanel";
+
+beforeAll((): void => {
+  Object.defineProperty(window.HTMLElement.prototype, "scrollIntoView", {
+    configurable: true,
+    value: vi.fn(),
+  });
+});
+
+describe("OrchestratorPanel", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    vi.stubGlobal("fetch", vi.fn());
+
+    mockUseSessionStream.mockReturnValue({
+      messages: [],
+      status: "connecting",
+      error: null,
+    });
+
+    mockUseSessions.mockReturnValue({
+      sessions: [],
+      loading: false,
+      error: null,
+    });
+
+    mockPanelControls.mockImplementation(
+      ({ status }: MockPanelControlsProps): React.JSX.Element => (
+        <div data-testid="panel-controls">status:{status}</div>
+      )
+    );
+
+    mockBargeInInput.mockImplementation(
+      ({ sessionId }: MockBargeInInputProps): React.JSX.Element => (
+        <textarea aria-label="barge-input" data-session-id={sessionId} />
+      )
+    );
+  });
+
+  afterEach((): void => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders a selectable empty state when no session is provided", (): void => {
+    render(<OrchestratorPanel />);
+
+    expect(screen.getByText("Select an agent to view its stream")).toBeInTheDocument();
+    expect(screen.queryByText("Session: session-1")).not.toBeInTheDocument();
+  });
+
+  it("renders connection indicator and panel controls for an active session", (): void => {
+    mockUseSessionStream.mockReturnValue({
+      messages: [],
+      status: "connected",
+      error: null,
+    });
+
+    mockUseSessions.mockReturnValue({
+      sessions: [{ id: "session-1", status: "paused" }],
+      loading: false,
+      error: null,
+    });
+
+    render(<OrchestratorPanel sessionId="session-1" />);
+
+    expect(screen.getByText("Connected")).toBeInTheDocument();
+    expect(screen.getByText("Session: session-1")).toBeInTheDocument();
+    expect(screen.getByText("Waiting for messages...")).toBeInTheDocument();
+    expect(screen.getByTestId("panel-controls")).toHaveTextContent("status:paused");
+  });
+
+  it("renders stream messages with role and content", (): void => {
+    mockUseSessionStream.mockReturnValue({
+      status: "connected",
+      error: null,
+      messages: [
+        {
+          id: "msg-1",
+          role: "assistant",
+          content: "Mission accepted.",
+          timestamp: "2026-03-07T18:42:00.000Z",
+        },
+      ],
+    });
+
+    render(<OrchestratorPanel sessionId="session-2" />);
+
+    expect(screen.getByText("assistant")).toBeInTheDocument();
+    expect(screen.getByText("Mission accepted.")).toBeInTheDocument();
+    expect(screen.getByText("moments ago")).toBeInTheDocument();
+    expect(screen.getByLabelText("barge-input")).toHaveAttribute("data-session-id", "session-2");
+  });
+
+  it("renders stream error text when the session has no messages", (): void => {
+    mockUseSessionStream.mockReturnValue({
+      messages: [],
+      status: "error",
+      error: "Mission Control stream disconnected.",
+    });
+
+    render(<OrchestratorPanel sessionId="session-3" />);
+
+    expect(screen.getByText("Error")).toBeInTheDocument();
+    expect(screen.getByText("Mission Control stream disconnected.")).toBeInTheDocument();
+  });
+
+  it("respects close button disabled state in panel actions", (): void => {
+    const onClose = vi.fn<() => void>();
+
+    render(<OrchestratorPanel onClose={onClose} closeDisabled />);
+
+    expect(screen.getByRole("button", { name: "Remove panel" })).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,161 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+interface MockBadgeProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+}
+
+const mockApiPost = vi.fn<(endpoint: string, body?: unknown) => Promise<{ message: string }>>();
+
+vi.mock("@/lib/api/client", () => ({
+  apiPost: (endpoint: string, body?: unknown): Promise<{ message: string }> =>
+    mockApiPost(endpoint, body),
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+vi.mock("@/components/ui/badge", () => ({
+  Badge: ({ children, ...props }: MockBadgeProps): React.JSX.Element => (
+    <span {...props}>{children}</span>
+  ),
+}));
+
+import { PanelControls } from "./PanelControls";
+
+function renderWithQueryClient(ui: React.JSX.Element): ReturnType<typeof render> {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+}
+
+describe("PanelControls", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    vi.stubGlobal("fetch", vi.fn());
+    mockApiPost.mockResolvedValue({ message: "ok" });
+  });
+
+  afterEach((): void => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders action buttons with correct disabled state for active sessions", (): void => {
+    renderWithQueryClient(<PanelControls sessionId="session-1" status="active" />);
+
+    expect(screen.getByRole("button", { name: "Pause session" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Resume session" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Gracefully kill session" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Force kill session" })).toBeEnabled();
+  });
+
+  it("disables all action buttons when session is already killed", (): void => {
+    renderWithQueryClient(<PanelControls sessionId="session-2" status="killed" />);
+
+    expect(screen.getByRole("button", { name: "Pause session" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Resume session" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Gracefully kill session" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Force kill session" })).toBeDisabled();
+  });
+
+  it("pauses a running session and reports the next status", async (): Promise<void> => {
+    const onStatusChange = vi.fn<(status: string) => void>();
+    const user = userEvent.setup();
+
+    renderWithQueryClient(
+      <PanelControls
+        sessionId="session with space"
+        status="active"
+        onStatusChange={onStatusChange}
+      />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Pause session" }));
+
+    await waitFor((): void => {
+      expect(mockApiPost).toHaveBeenCalledWith(
+        "/api/mission-control/sessions/session%20with%20space/pause",
+        undefined
+      );
+    });
+
+    expect(onStatusChange).toHaveBeenCalledWith("paused");
+  });
+
+  it("asks for graceful kill confirmation before submitting", async (): Promise<void> => {
+    const onStatusChange = vi.fn<(status: string) => void>();
+    const user = userEvent.setup();
+
+    renderWithQueryClient(
+      <PanelControls sessionId="session-4" status="active" onStatusChange={onStatusChange} />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Gracefully kill session" }));
+
+    expect(
+      screen.getByText("Gracefully stop this agent after it finishes the current step?")
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Confirm" }));
+
+    await waitFor((): void => {
+      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/session-4/kill", {
+        force: false,
+      });
+    });
+
+    expect(onStatusChange).toHaveBeenCalledWith("killed");
+  });
+
+  it("sends force kill after confirmation", async (): Promise<void> => {
+    const onStatusChange = vi.fn<(status: string) => void>();
+    const user = userEvent.setup();
+
+    renderWithQueryClient(
+      <PanelControls sessionId="session-5" status="paused" onStatusChange={onStatusChange} />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Force kill session" }));
+
+    expect(screen.getByText("This will hard-kill the agent immediately.")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Confirm" }));
+
+    await waitFor((): void => {
+      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/session-5/kill", {
+        force: true,
+      });
+    });
+
+    expect(onStatusChange).toHaveBeenCalledWith("killed");
+  });
+
+  it("shows an error badge when an action fails", async (): Promise<void> => {
+    const user = userEvent.setup();
+
+    mockApiPost.mockRejectedValueOnce(new Error("unable to pause"));
+
+    renderWithQueryClient(<PanelControls sessionId="session-6" status="active" />);
+
+    await user.click(screen.getByRole("button", { name: "Pause session" }));
+
+    await waitFor((): void => {
+      expect(screen.getByText("unable to pause")).toBeInTheDocument();
+    });
+  });
+});