feat(orchestrator): add mission control proxy api

apps/orchestrator/src/api/mission-control/dto/get-mission-control-audit-log-query.dto.ts

@@ -1,21 +0,0 @@
-import { Type } from "class-transformer";
-import { IsInt, IsOptional, IsString, Max, Min } from "class-validator";
-
-export class GetMissionControlAuditLogQueryDto {
-  @IsOptional()
-  @IsString()
-  sessionId?: string;
-
-  @IsOptional()
-  @Type(() => Number)
-  @IsInt()
-  @Min(1)
-  page = 1;
-
-  @IsOptional()
-  @Type(() => Number)
-  @IsInt()
-  @Min(1)
-  @Max(200)
-  limit = 50;
-}

apps/orchestrator/src/api/mission-control/mission-control.controller.spec.ts

@@ -1,67 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import type { AgentSession } from "@mosaic/shared";
-import type { PrismaService } from "../../prisma/prisma.service";
-import { AgentProviderRegistry } from "../agents/agent-provider.registry";
-import { MissionControlController } from "./mission-control.controller";
-import { MissionControlService } from "./mission-control.service";
-
-describe("MissionControlController", () => {
-  let controller: MissionControlController;
-  let registry: {
-    listAllSessions: ReturnType<typeof vi.fn>;
-    getProviderForSession: ReturnType<typeof vi.fn>;
-  };
-
-  beforeEach(() => {
-    registry = {
-      listAllSessions: vi.fn(),
-      getProviderForSession: vi.fn(),
-    };
-
-    const prisma = {
-      operatorAuditLog: {
-        create: vi.fn().mockResolvedValue(undefined),
-      },
-    };
-
-    const service = new MissionControlService(
-      registry as unknown as AgentProviderRegistry,
-      prisma as unknown as PrismaService
-    );
-
-    controller = new MissionControlController(service);
-  });
-
-  it("Phase 1 gate: unified sessions endpoint returns internal provider sessions", async () => {
-    const internalSession: AgentSession = {
-      id: "session-internal-1",
-      providerId: "internal",
-      providerType: "internal",
-      status: "active",
-      createdAt: new Date("2026-03-07T20:00:00.000Z"),
-      updatedAt: new Date("2026-03-07T20:01:00.000Z"),
-    };
-
-    const externalSession: AgentSession = {
-      id: "session-openclaw-1",
-      providerId: "openclaw",
-      providerType: "external",
-      status: "active",
-      createdAt: new Date("2026-03-07T20:02:00.000Z"),
-      updatedAt: new Date("2026-03-07T20:03:00.000Z"),
-    };
-
-    registry.listAllSessions.mockResolvedValue([internalSession, externalSession]);
-
-    const response = await controller.listSessions();
-
-    expect(registry.listAllSessions).toHaveBeenCalledTimes(1);
-    expect(response.sessions).toEqual([internalSession, externalSession]);
-    expect(response.sessions).toContainEqual(
-      expect.objectContaining({
-        id: "session-internal-1",
-        providerId: "internal",
-      })
-    );
-  });
-});

apps/orchestrator/src/api/mission-control/mission-control.controller.ts

@@ -18,10 +18,9 @@ import type { AgentMessage, AgentSession, InjectResult } from "@mosaic/shared";
 import { Observable } from "rxjs";
 import { AuthGuard } from "../../auth/guards/auth.guard";
 import { InjectAgentDto } from "../agents/dto/inject-agent.dto";
-import { GetMissionControlAuditLogQueryDto } from "./dto/get-mission-control-audit-log-query.dto";
 import { GetMissionControlMessagesQueryDto } from "./dto/get-mission-control-messages-query.dto";
 import { KillSessionDto } from "./dto/kill-session.dto";
-import { MissionControlService, type MissionControlAuditLogPage } from "./mission-control.service";
+import { MissionControlService } from "./mission-control.service";
 
 const DEFAULT_OPERATOR_ID = "mission-control";
 
@@ -62,14 +61,6 @@ export class MissionControlController {
     return { messages };
   }
 
-  @Get("audit-log")
-  @UsePipes(new ValidationPipe({ transform: true, whitelist: true }))
-  getAuditLog(
-    @Query() query: GetMissionControlAuditLogQueryDto
-  ): Promise<MissionControlAuditLogPage> {
-    return this.missionControlService.getAuditLog(query.sessionId, query.page, query.limit);
-  }
-
   @Post("sessions/:sessionId/inject")
   @HttpCode(200)
   @UsePipes(new ValidationPipe({ transform: true, whitelist: true }))

apps/orchestrator/src/api/mission-control/mission-control.service.ts

@@ -8,24 +8,6 @@ type MissionControlAction = "inject" | "pause" | "resume" | "kill";
 
 const DEFAULT_OPERATOR_ID = "mission-control";
 
-export interface AuditLogEntry {
-  id: string;
-  userId: string;
-  sessionId: string;
-  provider: string;
-  action: string;
-  content: string | null;
-  metadata: Prisma.JsonValue;
-  createdAt: Date;
-}
-
-export interface MissionControlAuditLogPage {
-  items: AuditLogEntry[];
-  total: number;
-  page: number;
-  pages: number;
-}
-
 @Injectable()
 export class MissionControlService {
   constructor(
@@ -51,35 +33,6 @@ export class MissionControlService {
     return provider.getMessages(sessionId, limit, before);
   }
 
-  async getAuditLog(
-    sessionId: string | undefined,
-    page: number,
-    limit: number
-  ): Promise<MissionControlAuditLogPage> {
-    const normalizedSessionId = sessionId?.trim();
-    const where: Prisma.OperatorAuditLogWhereInput =
-      normalizedSessionId && normalizedSessionId.length > 0
-        ? { sessionId: normalizedSessionId }
-        : {};
-
-    const [total, items] = await this.prisma.$transaction([
-      this.prisma.operatorAuditLog.count({ where }),
-      this.prisma.operatorAuditLog.findMany({
-        where,
-        orderBy: { createdAt: "desc" },
-        skip: (page - 1) * limit,
-        take: limit,
-      }),
-    ]);
-
-    return {
-      items,
-      total,
-      page,
-      pages: total === 0 ? 0 : Math.ceil(total / limit),
-    };
-  }
-
   async injectMessage(
     sessionId: string,
     message: string,

apps/web/src/app/(authenticated)/kanban/page.test.tsx

@@ -132,7 +132,7 @@ describe("KanbanPage add task flow", (): void => {
     });
 
     // Click the "+ Add task" button in the To Do column
-    const addTaskButtons = await screen.findAllByRole("button", { name: /\+ Add task/i });
+    const addTaskButtons = screen.getAllByRole("button", { name: /\+ Add task/i });
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     await user.click(addTaskButtons[0]!); // First column is "To Do"
 
@@ -165,7 +165,7 @@ describe("KanbanPage add task flow", (): void => {
     });
 
     // Click the "+ Add task" button
-    const addTaskButtons = await screen.findAllByRole("button", { name: /\+ Add task/i });
+    const addTaskButtons = screen.getAllByRole("button", { name: /\+ Add task/i });
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     await user.click(addTaskButtons[0]!);
 

apps/web/src/app/(authenticated)/mission-control/page.tsx

@@ -1,5 +0,0 @@
-import { MissionControlLayout } from "@/components/mission-control/MissionControlLayout";
-
-export default function MissionControlPage(): React.JSX.Element {
-  return <MissionControlLayout />;
-}

apps/web/src/components/layout/AppSidebar.tsx

@@ -156,26 +156,6 @@ function IconTerminal(): React.JSX.Element {
   );
 }
 
-function IconMissionControl(): React.JSX.Element {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      aria-hidden="true"
-    >
-      <circle cx="8" cy="8" r="1.5" />
-      <path d="M11 5a4.25 4.25 0 0 1 0 6" />
-      <path d="M5 5a4.25 4.25 0 0 0 0 6" />
-      <path d="M13.5 2.5a7.75 7.75 0 0 1 0 11" />
-      <path d="M2.5 2.5a7.75 7.75 0 0 0 0 11" />
-    </svg>
-  );
-}
-
 function IconSettings(): React.JSX.Element {
   return (
     <svg
@@ -280,11 +260,6 @@ const NAV_GROUPS: NavGroup[] = [
         label: "Terminal",
         icon: <IconTerminal />,
       },
-      {
-        href: "/mission-control",
-        label: "Mission Control",
-        icon: <IconMissionControl />,
-      },
     ],
   },
   {

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

@@ -1,205 +0,0 @@
-import { 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;
-}
-
-interface AuditLogEntry {
-  id: string;
-  userId: string;
-  sessionId: string;
-  provider: string;
-  action: string;
-  content: string | null;
-  metadata: unknown;
-  createdAt: string;
-}
-
-interface AuditLogResponse {
-  items: AuditLogEntry[];
-  total: number;
-  page: number;
-  pages: number;
-}
-
-const mockApiGet = vi.fn<(endpoint: string) => Promise<AuditLogResponse>>();
-
-vi.mock("@/lib/api/client", () => ({
-  apiGet: (endpoint: string): Promise<AuditLogResponse> => mockApiGet(endpoint),
-}));
-
-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 { AuditLogDrawer } from "./AuditLogDrawer";
-
-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 responseWith(items: AuditLogEntry[], page: number, pages: number): AuditLogResponse {
-  return {
-    items,
-    total: items.length,
-    page,
-    pages,
-  };
-}
-
-describe("AuditLogDrawer", (): void => {
-  beforeEach((): void => {
-    vi.clearAllMocks();
-    mockApiGet.mockResolvedValue(responseWith([], 1, 0));
-  });
-
-  it("opens from trigger text and renders empty state", async (): Promise<void> => {
-    const user = userEvent.setup();
-
-    renderWithQueryClient(<AuditLogDrawer trigger="Audit" />);
-
-    await user.click(screen.getByRole("button", { name: "Audit" }));
-
-    await waitFor((): void => {
-      expect(screen.getByText("Audit Log")).toBeInTheDocument();
-      expect(screen.getByText("No audit entries found.")).toBeInTheDocument();
-    });
-  });
-
-  it("renders audit entries with action, session id, and payload", async (): Promise<void> => {
-    const user = userEvent.setup();
-
-    mockApiGet.mockResolvedValue(
-      responseWith(
-        [
-          {
-            id: "entry-1",
-            userId: "operator-1",
-            sessionId: "1234567890abcdef",
-            provider: "internal",
-            action: "inject",
-            content: "Run diagnostics",
-            metadata: { payload: { ignored: true } },
-            createdAt: "2026-03-07T19:00:00.000Z",
-          },
-        ],
-        1,
-        1
-      )
-    );
-
-    renderWithQueryClient(<AuditLogDrawer trigger="Audit" />);
-
-    await user.click(screen.getByRole("button", { name: "Audit" }));
-
-    await waitFor((): void => {
-      expect(screen.getByText("inject")).toBeInTheDocument();
-      expect(screen.getByText("12345678")).toBeInTheDocument();
-      expect(screen.getByText("Run diagnostics")).toBeInTheDocument();
-    });
-  });
-
-  it("supports pagination and metadata payload summary", async (): Promise<void> => {
-    const user = userEvent.setup();
-
-    mockApiGet.mockImplementation((endpoint: string): Promise<AuditLogResponse> => {
-      const query = endpoint.split("?")[1] ?? "";
-      const params = new URLSearchParams(query);
-      const page = Number(params.get("page") ?? "1");
-
-      if (page === 1) {
-        return Promise.resolve({
-          items: [
-            {
-              id: "entry-page-1",
-              userId: "operator-2",
-              sessionId: "abcdefgh12345678",
-              provider: "internal",
-              action: "pause",
-              content: "",
-              metadata: { payload: { reason: "hold" } },
-              createdAt: "2026-03-07T19:01:00.000Z",
-            },
-          ],
-          total: 2,
-          page: 1,
-          pages: 2,
-        });
-      }
-
-      return Promise.resolve({
-        items: [
-          {
-            id: "entry-page-2",
-            userId: "operator-3",
-            sessionId: "zzzz111122223333",
-            provider: "internal",
-            action: "kill",
-            content: null,
-            metadata: { payload: { force: true } },
-            createdAt: "2026-03-07T19:02:00.000Z",
-          },
-        ],
-        total: 2,
-        page: 2,
-        pages: 2,
-      });
-    });
-
-    renderWithQueryClient(<AuditLogDrawer trigger="Audit" />);
-
-    await user.click(screen.getByRole("button", { name: "Audit" }));
-
-    await waitFor((): void => {
-      expect(screen.getByText("Page 1 of 2")).toBeInTheDocument();
-      expect(screen.getByText("reason=hold")).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByRole("button", { name: "Next" }));
-
-    await waitFor((): void => {
-      expect(screen.getByText("Page 2 of 2")).toBeInTheDocument();
-      expect(screen.getByText("force=true")).toBeInTheDocument();
-    });
-  });
-
-  it("includes sessionId filter in query string", async (): Promise<void> => {
-    const user = userEvent.setup();
-
-    renderWithQueryClient(<AuditLogDrawer trigger="Audit" sessionId="session 7" />);
-
-    await user.click(screen.getByRole("button", { name: "Audit" }));
-
-    await waitFor((): void => {
-      expect(mockApiGet).toHaveBeenCalled();
-    });
-
-    const firstCall = mockApiGet.mock.calls[0];
-    const endpoint = firstCall?.[0] ?? "";
-
-    expect(endpoint).toContain("sessionId=session+7");
-  });
-});

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

@@ -1,322 +0,0 @@
-"use client";
-
-import { isValidElement, useEffect, useMemo, useState } from "react";
-import type { ReactNode } from "react";
-import { format } from "date-fns";
-import { useQuery } from "@tanstack/react-query";
-import { Loader2 } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import type { BadgeVariant } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet";
-import { apiGet } from "@/lib/api/client";
-
-const AUDIT_LOG_REFRESH_INTERVAL_MS = 10_000;
-const AUDIT_LOG_PAGE_SIZE = 50;
-const SUMMARY_MAX_LENGTH = 120;
-
-interface AuditLogDrawerProps {
-  sessionId?: string;
-  trigger: ReactNode;
-}
-
-interface AuditLogEntry {
-  id: string;
-  userId: string;
-  sessionId: string;
-  provider: string;
-  action: string;
-  content: string | null;
-  metadata: unknown;
-  createdAt: string;
-}
-
-interface AuditLogResponse {
-  items: AuditLogEntry[];
-  total: number;
-  page: number;
-  pages: number;
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null;
-}
-
-function truncateText(value: string, maxLength: number): string {
-  if (value.length <= maxLength) {
-    return value;
-  }
-
-  return `${value.slice(0, maxLength - 1)}…`;
-}
-
-function truncateSessionId(sessionId: string): string {
-  return sessionId.slice(0, 8);
-}
-
-function formatTimestamp(value: string): string {
-  const parsed = new Date(value);
-
-  if (Number.isNaN(parsed.getTime())) {
-    return "Unknown";
-  }
-
-  return format(parsed, "yyyy-MM-dd HH:mm:ss");
-}
-
-function stringifyPayloadValue(value: unknown): string {
-  if (typeof value === "string") {
-    return value;
-  }
-
-  if (typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return "[unserializable]";
-  }
-}
-
-function getPayloadSummary(entry: AuditLogEntry): string {
-  const metadata = isRecord(entry.metadata) ? entry.metadata : undefined;
-  const payload = metadata && isRecord(metadata.payload) ? metadata.payload : undefined;
-
-  if (typeof entry.content === "string" && entry.content.trim().length > 0) {
-    return truncateText(entry.content.trim(), SUMMARY_MAX_LENGTH);
-  }
-
-  if (payload) {
-    const summary = Object.entries(payload)
-      .map(([key, value]) => `${key}=${stringifyPayloadValue(value)}`)
-      .join(", ");
-
-    if (summary.length > 0) {
-      return truncateText(summary, SUMMARY_MAX_LENGTH);
-    }
-  }
-
-  return "—";
-}
-
-function getActionVariant(action: string): BadgeVariant {
-  switch (action) {
-    case "inject":
-      return "badge-blue";
-    case "pause":
-      return "status-warning";
-    case "resume":
-      return "status-success";
-    case "kill":
-      return "status-error";
-    default:
-      return "status-neutral";
-  }
-}
-
-async function fetchAuditLog(
-  sessionId: string | undefined,
-  page: number
-): Promise<AuditLogResponse> {
-  const params = new URLSearchParams({
-    page: String(page),
-    limit: String(AUDIT_LOG_PAGE_SIZE),
-  });
-
-  const normalizedSessionId = sessionId?.trim();
-  if (normalizedSessionId && normalizedSessionId.length > 0) {
-    params.set("sessionId", normalizedSessionId);
-  }
-
-  return apiGet<AuditLogResponse>(`/api/mission-control/audit-log?${params.toString()}`);
-}
-
-export function AuditLogDrawer({ sessionId, trigger }: AuditLogDrawerProps): React.JSX.Element {
-  const [open, setOpen] = useState(false);
-  const [page, setPage] = useState(1);
-
-  const triggerElement = useMemo(
-    () =>
-      isValidElement(trigger) ? (
-        trigger
-      ) : (
-        <Button variant="outline" size="sm">
-          {trigger}
-        </Button>
-      ),
-    [trigger]
-  );
-
-  const auditLogQuery = useQuery<AuditLogResponse>({
-    queryKey: ["mission-control", "audit-log", sessionId ?? "all", page],
-    queryFn: async (): Promise<AuditLogResponse> => fetchAuditLog(sessionId, page),
-    enabled: open,
-    refetchInterval: open ? AUDIT_LOG_REFRESH_INTERVAL_MS : false,
-  });
-
-  useEffect(() => {
-    if (open) {
-      setPage(1);
-    }
-  }, [open, sessionId]);
-
-  useEffect(() => {
-    const pages = auditLogQuery.data?.pages;
-    if (pages !== undefined && pages > 0 && page > pages) {
-      setPage(pages);
-    }
-  }, [auditLogQuery.data?.pages, page]);
-
-  const totalItems = auditLogQuery.data?.total ?? 0;
-  const totalPages = auditLogQuery.data?.pages ?? 0;
-  const items = auditLogQuery.data?.items ?? [];
-
-  const canGoPrevious = page > 1;
-  const canGoNext = totalPages > 0 && page < totalPages;
-  const errorMessage =
-    auditLogQuery.error instanceof Error ? auditLogQuery.error.message : "Failed to load audit log";
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>{triggerElement}</SheetTrigger>
-      <SheetContent className="sm:max-w-[920px]">
-        <SheetHeader>
-          <div className="flex items-center justify-between gap-3">
-            <SheetTitle>Audit Log</SheetTitle>
-            {auditLogQuery.isFetching ? (
-              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden="true" />
-            ) : null}
-          </div>
-          <SheetDescription>
-            {sessionId
-              ? `Showing actions for session ${sessionId}.`
-              : "Showing operator actions across all mission control sessions."}
-          </SheetDescription>
-        </SheetHeader>
-
-        <div className="mt-4 flex min-h-0 flex-1 flex-col gap-3">
-          <div className="rounded-md border border-border/70">
-            <ScrollArea className="h-[64vh]">
-              <table className="w-full min-w-[760px] border-collapse text-sm">
-                <thead className="sticky top-0 z-10 bg-muted/90">
-                  <tr>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Timestamp
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Action
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Session
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Operator
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
-                      Payload
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {auditLogQuery.isLoading ? (
-                    <tr>
-                      <td
-                        colSpan={5}
-                        className="px-3 py-6 text-center text-sm text-muted-foreground"
-                      >
-                        Loading audit log...
-                      </td>
-                    </tr>
-                  ) : auditLogQuery.error ? (
-                    <tr>
-                      <td colSpan={5} className="px-3 py-6 text-center text-sm text-red-500">
-                        {errorMessage}
-                      </td>
-                    </tr>
-                  ) : items.length === 0 ? (
-                    <tr>
-                      <td
-                        colSpan={5}
-                        className="px-3 py-6 text-center text-sm text-muted-foreground"
-                      >
-                        No audit entries found.
-                      </td>
-                    </tr>
-                  ) : (
-                    items.map((entry) => {
-                      const payloadSummary = getPayloadSummary(entry);
-
-                      return (
-                        <tr key={entry.id} className="border-t border-border/60 align-top">
-                          <td className="px-3 py-2 font-mono text-xs text-muted-foreground">
-                            {formatTimestamp(entry.createdAt)}
-                          </td>
-                          <td className="px-3 py-2">
-                            <Badge variant={getActionVariant(entry.action)} className="capitalize">
-                              {entry.action}
-                            </Badge>
-                          </td>
-                          <td className="px-3 py-2 font-mono text-xs" title={entry.sessionId}>
-                            {truncateSessionId(entry.sessionId)}
-                          </td>
-                          <td
-                            className="px-3 py-2 text-xs text-muted-foreground"
-                            title={entry.userId}
-                          >
-                            {entry.userId}
-                          </td>
-                          <td className="px-3 py-2 text-xs" title={payloadSummary}>
-                            {payloadSummary}
-                          </td>
-                        </tr>
-                      );
-                    })
-                  )}
-                </tbody>
-              </table>
-            </ScrollArea>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <p className="text-xs text-muted-foreground">{totalItems} total entries</p>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!canGoPrevious || auditLogQuery.isFetching}
-                onClick={() => {
-                  setPage((currentPage) => Math.max(1, currentPage - 1));
-                }}
-              >
-                Previous
-              </Button>
-              <span className="text-xs text-muted-foreground">
-                Page {page} of {Math.max(totalPages, 1)}
-              </span>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!canGoNext || auditLogQuery.isFetching}
-                onClick={() => {
-                  setPage((currentPage) => currentPage + 1);
-                }}
-              >
-                Next
-              </Button>
-            </div>
-          </div>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}

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

@@ -1,155 +0,0 @@
-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/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.test.tsx

@@ -1,203 +0,0 @@
-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/GlobalAgentRoster.tsx

@@ -1,292 +0,0 @@
-"use client";
-
-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";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Collapsible } from "@/components/ui/collapsible";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Skeleton } from "@/components/ui/skeleton";
-import { apiGet, apiPost } from "@/lib/api/client";
-
-const SESSIONS_QUERY_KEY = ["mission-control", "sessions"] as const;
-const SESSIONS_POLL_INTERVAL_MS = 5_000;
-
-type MissionControlSessionStatus = AgentSession["status"] | "killed";
-
-interface MissionControlSession extends Omit<AgentSession, "status" | "createdAt" | "updatedAt"> {
-  status: MissionControlSessionStatus;
-  createdAt: string | Date;
-  updatedAt: string | Date;
-}
-
-interface SessionsPayload {
-  sessions: MissionControlSession[];
-}
-
-interface ProviderSessionGroup {
-  providerId: string;
-  providerType: string;
-  sessions: MissionControlSession[];
-}
-
-export interface GlobalAgentRosterProps {
-  onSelectSession?: (sessionId: string) => void;
-  selectedSessionId?: string | undefined;
-}
-
-function getStatusVariant(status: MissionControlSessionStatus): BadgeVariant {
-  switch (status) {
-    case "active":
-      return "status-success";
-    case "paused":
-      return "status-warning";
-    case "killed":
-      return "status-error";
-    default:
-      return "status-neutral";
-  }
-}
-
-function truncateSessionId(sessionId: string): string {
-  return sessionId.slice(0, 8);
-}
-
-function resolveProviderName(providerId: string, providerType: string): string {
-  return providerId === providerType ? providerId : `${providerId} (${providerType})`;
-}
-
-function groupByProvider(sessions: MissionControlSession[]): ProviderSessionGroup[] {
-  const grouped = new Map<string, ProviderSessionGroup>();
-
-  for (const session of sessions) {
-    const existing = grouped.get(session.providerId);
-    if (existing) {
-      existing.sessions.push(session);
-      continue;
-    }
-
-    grouped.set(session.providerId, {
-      providerId: session.providerId,
-      providerType: session.providerType,
-      sessions: [session],
-    });
-  }
-
-  return Array.from(grouped.values()).sort((a, b) => a.providerId.localeCompare(b.providerId));
-}
-
-async function fetchSessions(): Promise<MissionControlSession[]> {
-  const payload = await apiGet<MissionControlSession[] | SessionsPayload>(
-    "/api/mission-control/sessions"
-  );
-  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,
-}: GlobalAgentRosterProps): React.JSX.Element {
-  const queryClient = useQueryClient();
-  const [openProviders, setOpenProviders] = useState<Record<string, boolean>>({});
-
-  const sessionsQuery = useQuery<MissionControlSession[]>({
-    queryKey: SESSIONS_QUERY_KEY,
-    queryFn: fetchSessions,
-    refetchInterval: SESSIONS_POLL_INTERVAL_MS,
-  });
-
-  const killMutation = useMutation({
-    mutationFn: async (sessionId: string): Promise<string> => {
-      await apiPost<{ message: string }>(`/api/mission-control/sessions/${sessionId}/kill`, {
-        force: false,
-      });
-      return sessionId;
-    },
-    onSuccess: (): void => {
-      void queryClient.invalidateQueries({ queryKey: SESSIONS_QUERY_KEY });
-    },
-  });
-
-  const groupedSessions = useMemo(
-    () => groupByProvider(sessionsQuery.data ?? []),
-    [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 => {
-    setOpenProviders((prev) => ({
-      ...prev,
-      [providerId]: !(prev[providerId] ?? true),
-    }));
-  };
-
-  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">
-          <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">
-        {sessionsQuery.isLoading ? (
-          <ScrollArea className="h-full">
-            <div className="space-y-2 pr-1">
-              {Array.from({ length: 6 }).map((_, index) => (
-                <Skeleton key={`roster-skeleton-${String(index)}`} className="h-10 w-full" />
-              ))}
-            </div>
-          </ScrollArea>
-        ) : sessionsQuery.error ? (
-          <div className="flex h-full items-center justify-center text-center text-sm text-red-500">
-            Failed to load agents: {sessionsQuery.error.message}
-          </div>
-        ) : groupedSessions.length === 0 ? (
-          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-            No active agents
-          </div>
-        ) : (
-          <ScrollArea className="h-full">
-            <div className="space-y-3 pr-1">
-              {groupedSessions.map((group) => {
-                const providerOpen = isProviderOpen(group.providerId);
-
-                return (
-                  <Collapsible key={group.providerId} open={providerOpen} className="space-y-1">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        toggleProvider(group.providerId);
-                      }}
-                      className="flex w-full items-center gap-2 rounded-md px-1 py-1 text-left text-sm hover:bg-muted/40"
-                      aria-expanded={providerOpen}
-                    >
-                      <ChevronRight
-                        className={`h-4 w-4 text-muted-foreground transition-transform ${providerOpen ? "rotate-90" : ""}`}
-                        aria-hidden="true"
-                      />
-                      <span className="font-medium">
-                        {resolveProviderName(group.providerId, group.providerType)}
-                      </span>
-                      <span className="ml-auto text-xs text-muted-foreground">
-                        {group.sessions.length}
-                      </span>
-                    </button>
-                    {providerOpen ? (
-                      <div className="space-y-1 pl-2">
-                        {group.sessions.map((session) => {
-                          const isSelected = selectedSessionId === session.id;
-                          const isKilling = pendingKillSessionId === session.id;
-
-                          return (
-                            <div
-                              key={session.id}
-                              role="button"
-                              tabIndex={0}
-                              onClick={() => {
-                                onSelectSession?.(session.id);
-                              }}
-                              onKeyDown={(event) => {
-                                if (event.key === "Enter" || event.key === " ") {
-                                  event.preventDefault();
-                                  onSelectSession?.(session.id);
-                                }
-                              }}
-                              className="flex items-center justify-between gap-2 rounded-md border border-transparent px-2 py-1.5 transition-colors hover:bg-muted/40"
-                              style={
-                                isSelected
-                                  ? {
-                                      borderColor: "rgba(47, 128, 255, 0.35)",
-                                      backgroundColor: "rgba(47, 128, 255, 0.08)",
-                                    }
-                                  : undefined
-                              }
-                            >
-                              <div className="flex min-w-0 items-center gap-2">
-                                <span className="font-mono text-xs" title={session.id}>
-                                  {truncateSessionId(session.id)}
-                                </span>
-                                <Badge
-                                  variant={getStatusVariant(session.status)}
-                                  className="capitalize"
-                                >
-                                  {session.status}
-                                </Badge>
-                              </div>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="h-7 min-h-7 w-7 min-w-7 p-0"
-                                disabled={isKilling}
-                                onClick={(event) => {
-                                  event.stopPropagation();
-                                  killMutation.mutate(session.id);
-                                }}
-                                aria-label={`Kill session ${truncateSessionId(session.id)}`}
-                              >
-                                {isKilling ? (
-                                  <Loader2
-                                    className="h-3.5 w-3.5 animate-spin"
-                                    aria-hidden="true"
-                                  />
-                                ) : (
-                                  <X className="h-3.5 w-3.5" aria-hidden="true" />
-                                )}
-                              </Button>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    ) : null}
-                  </Collapsible>
-                );
-              })}
-            </div>
-          </ScrollArea>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -1,170 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import type {
-  ButtonHTMLAttributes,
-  InputHTMLAttributes,
-  LabelHTMLAttributes,
-  ReactNode,
-} from "react";
-
-interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children: ReactNode;
-}
-
-interface MockInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  children?: ReactNode;
-}
-
-interface MockLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-  children: ReactNode;
-}
-
-interface MockSession {
-  id: string;
-  providerId: string;
-  providerType: string;
-  status: "active" | "paused";
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-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/input", () => ({
-  Input: ({ ...props }: MockInputProps): React.JSX.Element => <input {...props} />,
-}));
-
-vi.mock("@/components/ui/label", () => ({
-  Label: ({ children, ...props }: MockLabelProps): React.JSX.Element => (
-    <label {...props}>{children}</label>
-  ),
-}));
-
-import { KillAllDialog } from "./KillAllDialog";
-
-function makeSession(overrides: Partial<MockSession>): MockSession {
-  return {
-    id: "session-1",
-    providerId: "internal",
-    providerType: "internal",
-    status: "active",
-    createdAt: new Date("2026-03-07T10:00:00.000Z"),
-    updatedAt: new Date("2026-03-07T10:01:00.000Z"),
-    ...overrides,
-  };
-}
-
-describe("KillAllDialog", (): void => {
-  beforeEach((): void => {
-    vi.clearAllMocks();
-    mockApiPost.mockResolvedValue({ message: "killed" });
-  });
-
-  it("renders trigger button and requires exact confirmation text", async (): Promise<void> => {
-    const user = userEvent.setup();
-
-    render(<KillAllDialog sessions={[makeSession({})]} />);
-
-    await user.click(screen.getByRole("button", { name: "Kill All" }));
-
-    const confirmInput = screen.getByLabelText("Type KILL ALL to confirm");
-    const confirmButton = screen.getByRole("button", { name: "Kill All Agents" });
-
-    expect(confirmButton).toBeDisabled();
-
-    await user.type(confirmInput, "kill all");
-    expect(confirmButton).toBeDisabled();
-
-    await user.clear(confirmInput);
-    await user.type(confirmInput, "KILL ALL");
-
-    expect(confirmButton).toBeEnabled();
-  });
-
-  it("kills only internal sessions by default and invokes completion callback", async (): Promise<void> => {
-    const onComplete = vi.fn<() => void>();
-    const user = userEvent.setup();
-
-    render(
-      <KillAllDialog
-        sessions={[
-          makeSession({ id: "internal-1", providerType: "internal" }),
-          makeSession({ id: "external-1", providerType: "external" }),
-        ]}
-        onComplete={onComplete}
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Kill All" }));
-    await user.type(screen.getByLabelText("Type KILL ALL to confirm"), "KILL ALL");
-    await user.click(screen.getByRole("button", { name: "Kill All Agents" }));
-
-    await waitFor((): void => {
-      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/internal-1/kill", {
-        force: true,
-      });
-    });
-
-    expect(mockApiPost).not.toHaveBeenCalledWith("/api/mission-control/sessions/external-1/kill", {
-      force: true,
-    });
-    expect(onComplete).toHaveBeenCalledTimes(1);
-  });
-
-  it("kills all providers when all scope is selected", async (): Promise<void> => {
-    const user = userEvent.setup();
-
-    render(
-      <KillAllDialog
-        sessions={[
-          makeSession({ id: "internal-2", providerType: "internal" }),
-          makeSession({ id: "external-2", providerType: "external" }),
-        ]}
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Kill All" }));
-    await user.click(screen.getByRole("radio", { name: /All providers \(2\)/ }));
-    await user.type(screen.getByLabelText("Type KILL ALL to confirm"), "KILL ALL");
-    await user.click(screen.getByRole("button", { name: "Kill All Agents" }));
-
-    await waitFor((): void => {
-      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/internal-2/kill", {
-        force: true,
-      });
-      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/external-2/kill", {
-        force: true,
-      });
-    });
-  });
-
-  it("shows empty-scope warning when internal sessions are unavailable", async (): Promise<void> => {
-    const user = userEvent.setup();
-
-    render(
-      <KillAllDialog
-        sessions={[
-          makeSession({ id: "external-only", providerId: "ext", providerType: "external" }),
-        ]}
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Kill All" }));
-    await user.type(screen.getByLabelText("Type KILL ALL to confirm"), "KILL ALL");
-
-    expect(screen.getByText("No sessions in the selected scope.")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Kill All Agents" })).toBeDisabled();
-  });
-});

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.test.tsx

@@ -1,70 +0,0 @@
-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/MissionControlLayout.tsx

@@ -1,115 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import { AuditLogDrawer } from "@/components/mission-control/AuditLogDrawer";
-import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
-import {
-  MAX_PANEL_COUNT,
-  MIN_PANEL_COUNT,
-  MissionControlPanel,
-  type PanelConfig,
-} from "@/components/mission-control/MissionControlPanel";
-import { Button } from "@/components/ui/button";
-
-const INITIAL_PANELS: PanelConfig[] = [{}];
-
-export function MissionControlLayout(): React.JSX.Element {
-  const [panels, setPanels] = useState<PanelConfig[]>(INITIAL_PANELS);
-  const [selectedSessionId, setSelectedSessionId] = useState<string>();
-
-  const handleSelectSession = useCallback((sessionId: string): void => {
-    setSelectedSessionId(sessionId);
-
-    setPanels((currentPanels) => {
-      if (currentPanels.some((panel) => panel.sessionId === sessionId)) {
-        return currentPanels;
-      }
-
-      const firstEmptyPanelIndex = currentPanels.findIndex(
-        (panel) => panel.sessionId === undefined
-      );
-      if (firstEmptyPanelIndex >= 0) {
-        return currentPanels.map((panel, index) =>
-          index === firstEmptyPanelIndex ? { ...panel, sessionId } : panel
-        );
-      }
-
-      if (currentPanels.length >= MAX_PANEL_COUNT) {
-        return currentPanels;
-      }
-
-      return [...currentPanels, { sessionId }];
-    });
-  }, []);
-
-  const handleAddPanel = useCallback((): void => {
-    setPanels((currentPanels) => {
-      if (currentPanels.length >= MAX_PANEL_COUNT) {
-        return currentPanels;
-      }
-
-      return [...currentPanels, {}];
-    });
-  }, []);
-
-  const handleRemovePanel = useCallback((panelIndex: number): void => {
-    setPanels((currentPanels) => {
-      if (panelIndex < 0 || panelIndex >= currentPanels.length) {
-        return currentPanels;
-      }
-
-      if (currentPanels.length <= MIN_PANEL_COUNT) {
-        return currentPanels;
-      }
-
-      const nextPanels = currentPanels.filter((_, index) => index !== panelIndex);
-      return nextPanels.length === 0 ? INITIAL_PANELS : nextPanels;
-    });
-  }, []);
-
-  const handleExpandPanel = useCallback((panelIndex: number): void => {
-    setPanels((currentPanels) => {
-      if (panelIndex < 0 || panelIndex >= currentPanels.length) {
-        return currentPanels;
-      }
-
-      const shouldExpand = !currentPanels[panelIndex]?.expanded;
-
-      return currentPanels.map((panel, index) => ({
-        ...panel,
-        expanded: shouldExpand && index === panelIndex,
-      }));
-    });
-  }, []);
-
-  return (
-    <section className="flex h-full min-h-0 flex-col overflow-hidden" aria-label="Mission Control">
-      <header className="mb-3 flex items-center justify-end">
-        <AuditLogDrawer
-          trigger={
-            <Button variant="outline" size="sm">
-              Audit Log
-            </Button>
-          }
-        />
-      </header>
-
-      <div className="grid min-h-0 flex-1 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
-        <aside className="h-full min-h-0">
-          <GlobalAgentRoster
-            onSelectSession={handleSelectSession}
-            {...(selectedSessionId !== undefined ? { selectedSessionId } : {})}
-          />
-        </aside>
-        <main className="h-full min-h-0 overflow-hidden">
-          <MissionControlPanel
-            panels={panels}
-            onAddPanel={handleAddPanel}
-            onRemovePanel={handleRemovePanel}
-            onExpandPanel={handleExpandPanel}
-          />
-        </main>
-      </div>
-    </section>
-  );
-}

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

@@ -1,153 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import type { ButtonHTMLAttributes, ReactNode } from "react";
-import { MAX_PANEL_COUNT, MissionControlPanel, type PanelConfig } from "./MissionControlPanel";
-
-interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children: ReactNode;
-}
-
-interface MockOrchestratorPanelProps {
-  sessionId?: string;
-  onClose?: () => void;
-  closeDisabled?: boolean;
-  onExpand?: () => void;
-  expanded?: boolean;
-}
-
-const mockOrchestratorPanel = vi.fn<(props: MockOrchestratorPanelProps) => React.JSX.Element>();
-
-vi.mock("@/components/mission-control/OrchestratorPanel", () => ({
-  OrchestratorPanel: (props: MockOrchestratorPanelProps): React.JSX.Element =>
-    mockOrchestratorPanel(props),
-}));
-
-vi.mock("@/components/ui/button", () => ({
-  Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
-    <button {...props}>{children}</button>
-  ),
-}));
-
-function buildPanels(count: number): PanelConfig[] {
-  return Array.from({ length: count }, (_, index) => ({
-    sessionId: `session-${String(index + 1)}`,
-  }));
-}
-
-describe("MissionControlPanel", (): void => {
-  beforeEach((): void => {
-    vi.clearAllMocks();
-
-    mockOrchestratorPanel.mockImplementation(
-      ({ sessionId, closeDisabled, expanded }: MockOrchestratorPanelProps): React.JSX.Element => (
-        <div
-          data-testid="orchestrator-panel"
-          data-session-id={sessionId ?? ""}
-          data-close-disabled={String(closeDisabled ?? false)}
-          data-expanded={String(expanded ?? false)}
-        />
-      )
-    );
-  });
-
-  it("renders the panel grid and default heading", (): void => {
-    render(
-      <MissionControlPanel
-        panels={[{}]}
-        onAddPanel={vi.fn<() => void>()}
-        onRemovePanel={vi.fn<(index: number) => void>()}
-        onExpandPanel={vi.fn<(index: number) => void>()}
-      />
-    );
-
-    expect(screen.getByRole("heading", { name: "Panels" })).toBeInTheDocument();
-    expect(screen.getAllByTestId("orchestrator-panel")).toHaveLength(1);
-  });
-
-  it("calls onAddPanel when the add button is clicked", (): void => {
-    const onAddPanel = vi.fn<() => void>();
-
-    render(
-      <MissionControlPanel
-        panels={[{}]}
-        onAddPanel={onAddPanel}
-        onRemovePanel={vi.fn<(index: number) => void>()}
-        onExpandPanel={vi.fn<(index: number) => void>()}
-      />
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Add panel" }));
-
-    expect(onAddPanel).toHaveBeenCalledTimes(1);
-  });
-
-  it("disables add panel at the configured maximum", (): void => {
-    render(
-      <MissionControlPanel
-        panels={buildPanels(MAX_PANEL_COUNT)}
-        onAddPanel={vi.fn<() => void>()}
-        onRemovePanel={vi.fn<(index: number) => void>()}
-        onExpandPanel={vi.fn<(index: number) => void>()}
-      />
-    );
-
-    const addButton = screen.getByRole("button", { name: "Add panel" });
-
-    expect(addButton).toBeDisabled();
-    expect(addButton).toHaveAttribute("title", "Maximum of 6 panels");
-  });
-
-  it("passes closeDisabled=false when more than one panel exists", (): void => {
-    render(
-      <MissionControlPanel
-        panels={buildPanels(2)}
-        onAddPanel={vi.fn<() => void>()}
-        onRemovePanel={vi.fn<(index: number) => void>()}
-        onExpandPanel={vi.fn<(index: number) => void>()}
-      />
-    );
-
-    const renderedPanels = screen.getAllByTestId("orchestrator-panel");
-    expect(renderedPanels).toHaveLength(2);
-
-    for (const panel of renderedPanels) {
-      expect(panel).toHaveAttribute("data-close-disabled", "false");
-    }
-  });
-
-  it("renders only the expanded panel in focused mode", (): void => {
-    render(
-      <MissionControlPanel
-        panels={[{ sessionId: "session-1" }, { sessionId: "session-2", expanded: true }]}
-        onAddPanel={vi.fn<() => void>()}
-        onRemovePanel={vi.fn<(index: number) => void>()}
-        onExpandPanel={vi.fn<(index: number) => void>()}
-      />
-    );
-
-    const renderedPanels = screen.getAllByTestId("orchestrator-panel");
-
-    expect(renderedPanels).toHaveLength(1);
-    expect(renderedPanels[0]).toHaveAttribute("data-session-id", "session-2");
-    expect(renderedPanels[0]).toHaveAttribute("data-expanded", "true");
-  });
-
-  it("handles Escape key by toggling expanded panel", async (): Promise<void> => {
-    const onExpandPanel = vi.fn<(index: number) => void>();
-
-    render(
-      <MissionControlPanel
-        panels={[{ sessionId: "session-1", expanded: true }, { sessionId: "session-2" }]}
-        onAddPanel={vi.fn<() => void>()}
-        onRemovePanel={vi.fn<(index: number) => void>()}
-        onExpandPanel={onExpandPanel}
-      />
-    );
-
-    fireEvent.keyDown(window, { key: "Escape" });
-
-    await waitFor((): void => {
-      expect(onExpandPanel).toHaveBeenCalledWith(0);
-    });
-  });
-});

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

@@ -1,107 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { OrchestratorPanel } from "@/components/mission-control/OrchestratorPanel";
-import { Button } from "@/components/ui/button";
-
-export interface PanelConfig {
-  sessionId?: string;
-  expanded?: boolean;
-}
-
-interface MissionControlPanelProps {
-  panels: PanelConfig[];
-  onAddPanel: () => void;
-  onRemovePanel: (index: number) => void;
-  onExpandPanel: (index: number) => void;
-}
-
-export const MIN_PANEL_COUNT = 1;
-export const MAX_PANEL_COUNT = 6;
-
-export function MissionControlPanel({
-  panels,
-  onAddPanel,
-  onRemovePanel,
-  onExpandPanel,
-}: MissionControlPanelProps): React.JSX.Element {
-  const expandedPanelIndex = panels.findIndex((panel) => panel.expanded);
-  const expandedPanel = expandedPanelIndex >= 0 ? panels[expandedPanelIndex] : undefined;
-  const canAddPanel = panels.length < MAX_PANEL_COUNT;
-  const canRemovePanel = panels.length > MIN_PANEL_COUNT;
-
-  useEffect(() => {
-    if (expandedPanelIndex < 0) {
-      return;
-    }
-
-    const handleKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
-        onExpandPanel(expandedPanelIndex);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return (): void => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [expandedPanelIndex, onExpandPanel]);
-
-  return (
-    <div className="flex h-full min-h-0 flex-col gap-3">
-      <div className="flex items-center justify-between">
-        <h2 className="text-sm font-medium text-muted-foreground">Panels</h2>
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          onClick={onAddPanel}
-          disabled={!canAddPanel}
-          aria-label="Add panel"
-          title={canAddPanel ? "Add panel" : "Maximum of 6 panels"}
-        >
-          <span aria-hidden="true" className="text-lg leading-none">
-            +
-          </span>
-        </Button>
-      </div>
-      <div className="min-h-0 flex-1">
-        {expandedPanelIndex >= 0 && expandedPanel ? (
-          <div className="h-full min-h-0">
-            <OrchestratorPanel
-              {...(expandedPanel.sessionId !== undefined
-                ? { sessionId: expandedPanel.sessionId }
-                : {})}
-              onClose={() => {
-                onRemovePanel(expandedPanelIndex);
-              }}
-              closeDisabled={!canRemovePanel}
-              onExpand={() => {
-                onExpandPanel(expandedPanelIndex);
-              }}
-              expanded
-            />
-          </div>
-        ) : (
-          <div className="grid h-full min-h-0 auto-rows-fr grid-cols-1 gap-4 overflow-y-auto pr-1 md:grid-cols-2 xl:grid-cols-3">
-            {panels.map((panel, index) => (
-              <OrchestratorPanel
-                key={`panel-${String(index)}`}
-                {...(panel.sessionId !== undefined ? { sessionId: panel.sessionId } : {})}
-                onClose={() => {
-                  onRemovePanel(index);
-                }}
-                closeDisabled={!canRemovePanel}
-                onExpand={() => {
-                  onExpandPanel(index);
-                }}
-                expanded={panel.expanded ?? false}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,218 +0,0 @@
-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/OrchestratorPanel.tsx

@@ -1,217 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } 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 { Button } from "@/components/ui/button";
-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";
-
-const ROLE_BADGE_VARIANT: Record<MissionControlMessageRole, BadgeVariant> = {
-  user: "badge-blue",
-  assistant: "status-success",
-  tool: "badge-amber",
-  system: "badge-muted",
-};
-
-const CONNECTION_DOT_CLASS: Record<MissionControlConnectionStatus, string> = {
-  connected: "bg-emerald-500",
-  connecting: "bg-amber-500",
-  error: "bg-red-500",
-};
-
-const CONNECTION_TEXT: Record<MissionControlConnectionStatus, string> = {
-  connected: "Connected",
-  connecting: "Connecting",
-  error: "Error",
-};
-
-export interface OrchestratorPanelProps {
-  sessionId?: string;
-  onClose?: () => void;
-  closeDisabled?: boolean;
-  onExpand?: () => void;
-  expanded?: boolean;
-}
-
-interface PanelHeaderActionsProps {
-  onClose?: () => void;
-  closeDisabled?: boolean;
-  onExpand?: () => void;
-  expanded?: boolean;
-}
-
-function PanelHeaderActions({
-  onClose,
-  closeDisabled = false,
-  onExpand,
-  expanded = false,
-}: PanelHeaderActionsProps): React.JSX.Element | null {
-  if (!onClose && !onExpand) {
-    return null;
-  }
-
-  return (
-    <div className="flex items-center gap-1">
-      {onExpand ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={onExpand}
-          aria-label={expanded ? "Collapse panel" : "Expand panel"}
-          title={expanded ? "Collapse panel" : "Expand panel"}
-        >
-          <span aria-hidden="true" className="text-base leading-none">
-            {expanded ? "↙" : "↗"}
-          </span>
-        </Button>
-      ) : null}
-      {onClose ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={onClose}
-          disabled={closeDisabled}
-          aria-label="Remove panel"
-          title="Remove panel"
-        >
-          <span aria-hidden="true" className="text-base leading-none">
-            ×
-          </span>
-        </Button>
-      ) : null}
-    </div>
-  );
-}
-
-function formatRelativeTimestamp(timestamp: string): string {
-  const parsedDate = new Date(timestamp);
-  if (Number.isNaN(parsedDate.getTime())) {
-    return "just now";
-  }
-
-  return formatDistanceToNow(parsedDate, { addSuffix: true });
-}
-
-export function OrchestratorPanel({
-  sessionId,
-  onClose,
-  closeDisabled,
-  onExpand,
-  expanded,
-}: 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";
-  const panelHeaderActionProps = {
-    ...(onClose !== undefined ? { onClose } : {}),
-    ...(closeDisabled !== undefined ? { closeDisabled } : {}),
-    ...(onExpand !== undefined ? { onExpand } : {}),
-    ...(expanded !== undefined ? { expanded } : {}),
-  };
-
-  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">
-        <CardHeader>
-          <div className="flex items-start justify-between gap-2">
-            <CardTitle className="text-base">Orchestrator Panel</CardTitle>
-            <PanelHeaderActions {...panelHeaderActionProps} />
-          </div>
-        </CardHeader>
-        <CardContent className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
-          Select an agent to view its stream
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className="flex h-full min-h-[220px] flex-col">
-      <CardHeader className="space-y-2">
-        <div className="flex items-start justify-between gap-2">
-          <CardTitle className="text-base">Orchestrator Panel</CardTitle>
-          <PanelHeaderActions {...panelHeaderActionProps} />
-        </div>
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <span
-              className={`h-2.5 w-2.5 rounded-full ${CONNECTION_DOT_CLASS[status]} ${
-                status === "connecting" ? "animate-pulse" : ""
-              }`}
-              aria-hidden="true"
-            />
-            <span>{CONNECTION_TEXT[status]}</span>
-          </div>
-          <PanelControls
-            sessionId={sessionId}
-            status={controlsStatus}
-            onStatusChange={setOptimisticStatus}
-          />
-        </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">
-        <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>
-  );
-}

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

@@ -1,161 +0,0 @@
-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();
-    });
-  });
-});

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

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

@@ -1,133 +0,0 @@
-import type { ReactElement } from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { GlobalAgentRoster } from "../GlobalAgentRoster";
-
-const { mockApiGet, mockApiPost } = vi.hoisted(() => ({
-  mockApiGet: vi.fn(),
-  mockApiPost: vi.fn(),
-}));
-
-vi.mock("@/lib/api/client", () => ({
-  apiGet: mockApiGet,
-  apiPost: mockApiPost,
-}));
-
-function renderWithQueryClient(ui: ReactElement): void {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { retry: false, gcTime: 0 },
-      mutations: { retry: false },
-    },
-  });
-
-  render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
-}
-
-describe("GlobalAgentRoster (__tests__)", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.stubGlobal("fetch", vi.fn());
-    mockApiGet.mockReset();
-    mockApiPost.mockReset();
-  });
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  it("renders empty state when no sessions", async () => {
-    mockApiGet.mockResolvedValueOnce([]);
-
-    renderWithQueryClient(<GlobalAgentRoster />);
-
-    expect(await screen.findByText("No active agents")).toBeInTheDocument();
-  });
-
-  it("renders session rows grouped by provider", async () => {
-    mockApiGet.mockResolvedValueOnce([
-      {
-        id: "sess-int-123456",
-        providerId: "internal",
-        providerType: "internal",
-        status: "active",
-        createdAt: "2026-03-07T19:00:00.000Z",
-        updatedAt: "2026-03-07T19:00:00.000Z",
-      },
-      {
-        id: "sess-rem-654321",
-        providerId: "remote-a",
-        providerType: "remote",
-        status: "paused",
-        createdAt: "2026-03-07T19:00:00.000Z",
-        updatedAt: "2026-03-07T19:00:00.000Z",
-      },
-    ]);
-
-    renderWithQueryClient(<GlobalAgentRoster />);
-
-    expect(await screen.findByText("internal")).toBeInTheDocument();
-    expect(screen.getByText("remote-a (remote)")).toBeInTheDocument();
-    expect(screen.getByText("sess-int")).toBeInTheDocument();
-    expect(screen.getByText("sess-rem")).toBeInTheDocument();
-  });
-
-  it("kill button per row calls the API", async () => {
-    const user = userEvent.setup();
-
-    mockApiGet.mockResolvedValueOnce([
-      {
-        id: "killme123456",
-        providerId: "internal",
-        providerType: "internal",
-        status: "active",
-        createdAt: "2026-03-07T19:00:00.000Z",
-        updatedAt: "2026-03-07T19:00:00.000Z",
-      },
-    ]);
-
-    mockApiPost.mockResolvedValue({ message: "ok" });
-
-    renderWithQueryClient(<GlobalAgentRoster />);
-
-    const killButton = await screen.findByRole("button", { name: "Kill session killme12" });
-    await user.click(killButton);
-
-    await waitFor(() => {
-      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/killme123456/kill", {
-        force: false,
-      });
-    });
-  });
-
-  it("onSelectSession callback fires on row click", async () => {
-    const user = userEvent.setup();
-    const onSelectSession = vi.fn();
-
-    mockApiGet.mockResolvedValueOnce([
-      {
-        id: "selectme123456",
-        providerId: "internal",
-        providerType: "internal",
-        status: "active",
-        createdAt: "2026-03-07T19:00:00.000Z",
-        updatedAt: "2026-03-07T19:00:00.000Z",
-      },
-    ]);
-
-    renderWithQueryClient(<GlobalAgentRoster onSelectSession={onSelectSession} />);
-
-    const sessionLabel = await screen.findByText("selectme");
-    const row = sessionLabel.closest('[role="button"]');
-
-    if (!row) {
-      throw new Error("Expected session row for selectme123456");
-    }
-
-    await user.click(row);
-
-    expect(onSelectSession).toHaveBeenCalledWith("selectme123456");
-  });
-});

apps/web/src/components/mission-control/__tests__/KillAllDialog.test.tsx

@@ -1,96 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import type { AgentSession } from "@mosaic/shared";
-import { KillAllDialog } from "../KillAllDialog";
-import * as apiClient from "@/lib/api/client";
-
-vi.mock("@/lib/api/client", () => ({
-  apiPost: vi.fn(),
-}));
-
-const mockApiPost = vi.mocked(apiClient.apiPost);
-const baseDate = new Date("2026-03-07T14:00:00.000Z");
-
-const sessions: AgentSession[] = [
-  {
-    id: "session-internal-1",
-    providerId: "provider-internal-1",
-    providerType: "internal",
-    status: "active",
-    createdAt: baseDate,
-    updatedAt: baseDate,
-  },
-  {
-    id: "session-internal-2",
-    providerId: "provider-internal-2",
-    providerType: "internal",
-    status: "paused",
-    createdAt: baseDate,
-    updatedAt: baseDate,
-  },
-  {
-    id: "session-external-1",
-    providerId: "provider-openclaw-1",
-    providerType: "openclaw",
-    status: "active",
-    createdAt: baseDate,
-    updatedAt: baseDate,
-  },
-];
-
-describe("KillAllDialog (__tests__)", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.stubGlobal("fetch", vi.fn());
-    mockApiPost.mockResolvedValue({ message: "killed" } as never);
-  });
-
-  it('Confirm button disabled until "KILL ALL" typed exactly', async () => {
-    const user = userEvent.setup();
-
-    render(<KillAllDialog sessions={sessions} />);
-
-    await user.click(screen.getByRole("button", { name: "Kill All" }));
-
-    const input = screen.getByLabelText("Type KILL ALL to confirm");
-    const confirmButton = screen.getByRole("button", { name: "Kill All Agents" });
-
-    expect(confirmButton).toBeDisabled();
-
-    await user.type(input, "kill all");
-    expect(confirmButton).toBeDisabled();
-
-    await user.clear(input);
-    await user.type(input, "KILL ALL");
-    expect(confirmButton).toBeEnabled();
-  });
-
-  it("fires kill API for each session on confirm", async () => {
-    const user = userEvent.setup();
-
-    render(<KillAllDialog sessions={sessions} />);
-
-    await user.click(screen.getByRole("button", { name: "Kill All" }));
-    await user.click(screen.getByLabelText("All providers (3)"));
-    await user.type(screen.getByLabelText("Type KILL ALL to confirm"), "KILL ALL");
-    await user.click(screen.getByRole("button", { name: "Kill All Agents" }));
-
-    await waitFor(() => {
-      expect(mockApiPost).toHaveBeenCalledTimes(3);
-    });
-
-    expect(mockApiPost).toHaveBeenCalledWith(
-      "/api/mission-control/sessions/session-internal-1/kill",
-      { force: true }
-    );
-    expect(mockApiPost).toHaveBeenCalledWith(
-      "/api/mission-control/sessions/session-internal-2/kill",
-      { force: true }
-    );
-    expect(mockApiPost).toHaveBeenCalledWith(
-      "/api/mission-control/sessions/session-external-1/kill",
-      { force: true }
-    );
-  });
-});

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

@@ -1,93 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
-import { OrchestratorPanel } from "../OrchestratorPanel";
-import * as missionControlHooks from "@/hooks/useMissionControl";
-
-vi.mock("@/hooks/useMissionControl", () => ({
-  useSessionStream: vi.fn(),
-  useSessions: vi.fn(),
-}));
-
-vi.mock("@/components/mission-control/PanelControls", () => ({
-  PanelControls: (): React.JSX.Element => <div data-testid="panel-controls" />,
-}));
-
-vi.mock("@/components/mission-control/BargeInInput", () => ({
-  BargeInInput: ({ sessionId }: { sessionId: string }): React.JSX.Element => (
-    <div data-testid="barge-in-input">barge-in:{sessionId}</div>
-  ),
-}));
-
-vi.mock("date-fns", () => ({
-  formatDistanceToNow: (): string => "moments ago",
-}));
-
-const mockUseSessionStream = vi.mocked(missionControlHooks.useSessionStream);
-const mockUseSessions = vi.mocked(missionControlHooks.useSessions);
-
-beforeAll(() => {
-  Object.defineProperty(window.HTMLElement.prototype, "scrollIntoView", {
-    configurable: true,
-    value: vi.fn(),
-  });
-});
-
-describe("OrchestratorPanel (__tests__)", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-
-    mockUseSessionStream.mockReturnValue({
-      messages: [],
-      status: "connected",
-      error: null,
-    });
-
-    mockUseSessions.mockReturnValue({
-      sessions: [],
-      loading: false,
-      error: null,
-    });
-  });
-
-  it("renders empty state when no sessionId", () => {
-    render(<OrchestratorPanel />);
-
-    expect(screen.getByText("Select an agent to view its stream")).toBeInTheDocument();
-  });
-
-  it("renders connection indicator", () => {
-    const { container } = render(<OrchestratorPanel sessionId="session-1" />);
-
-    expect(screen.getByText("Connected")).toBeInTheDocument();
-    expect(container.querySelector(".bg-emerald-500")).toBeInTheDocument();
-  });
-
-  it("renders message list when messages are present", () => {
-    mockUseSessionStream.mockReturnValue({
-      messages: [
-        {
-          id: "msg-1",
-          sessionId: "session-1",
-          role: "assistant",
-          content: "Mission update one",
-          timestamp: "2026-03-07T21:00:00.000Z",
-        },
-        {
-          id: "msg-2",
-          sessionId: "session-1",
-          role: "tool",
-          content: "Mission update two",
-          timestamp: "2026-03-07T21:00:01.000Z",
-        },
-      ],
-      status: "connected",
-      error: null,
-    });
-
-    render(<OrchestratorPanel sessionId="session-1" />);
-
-    expect(screen.getByText("Mission update one")).toBeInTheDocument();
-    expect(screen.getByText("Mission update two")).toBeInTheDocument();
-    expect(screen.queryByText("Waiting for messages...")).not.toBeInTheDocument();
-  });
-});

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

@@ -1,70 +0,0 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { PanelControls } from "../PanelControls";
-import * as apiClient from "@/lib/api/client";
-
-vi.mock("@/lib/api/client", () => ({
-  apiPost: vi.fn(),
-}));
-
-const mockApiPost = vi.mocked(apiClient.apiPost);
-
-function renderPanelControls(status: string): void {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { retry: false },
-      mutations: { retry: false },
-    },
-  });
-
-  render(
-    <QueryClientProvider client={queryClient}>
-      <PanelControls sessionId="session-1" status={status} />
-    </QueryClientProvider>
-  );
-}
-
-describe("PanelControls (__tests__)", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.stubGlobal("fetch", vi.fn());
-    mockApiPost.mockResolvedValue({ message: "ok" } as never);
-  });
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  it("Pause button disabled when status=paused", () => {
-    renderPanelControls("paused");
-
-    expect(screen.getByRole("button", { name: "Pause session" })).toBeDisabled();
-  });
-
-  it("Resume button disabled when status=active", () => {
-    renderPanelControls("active");
-
-    expect(screen.getByRole("button", { name: "Resume session" })).toBeDisabled();
-  });
-
-  it("Kill buttons disabled when status=killed", () => {
-    renderPanelControls("killed");
-
-    expect(screen.getByRole("button", { name: "Gracefully kill session" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "Force kill session" })).toBeDisabled();
-  });
-
-  it("clicking pause calls the API", async () => {
-    const user = userEvent.setup();
-
-    renderPanelControls("active");
-
-    await user.click(screen.getByRole("button", { name: "Pause session" }));
-
-    await waitFor(() => {
-      expect(mockApiPost).toHaveBeenCalledWith("/api/mission-control/sessions/session-1/pause");
-    });
-  });
-});

apps/web/src/components/mission-control/__tests__/mission-control-phase2.gate.test.tsx

@@ -1,34 +0,0 @@
-import type { ReactNode } from "react";
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { MissionControlLayout } from "../MissionControlLayout";
-
-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: (): React.JSX.Element => <div data-testid="global-agent-roster" />,
-}));
-
-vi.mock("@/components/mission-control/MissionControlPanel", () => ({
-  MissionControlPanel: (): React.JSX.Element => <div data-testid="mission-control-panel" />,
-  MIN_PANEL_COUNT: 1,
-  MAX_PANEL_COUNT: 6,
-}));
-
-describe("Mission Control Phase 2 Gate", () => {
-  it("Phase 2 gate: MissionControlLayout renders with all components present", () => {
-    const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation((..._args) => undefined);
-
-    render(<MissionControlLayout />);
-
-    expect(screen.getByTestId("global-agent-roster")).toBeInTheDocument();
-    expect(screen.getByTestId("mission-control-panel")).toBeInTheDocument();
-    expect(consoleErrorSpy).not.toHaveBeenCalled();
-
-    consoleErrorSpy.mockRestore();
-  });
-});

apps/web/src/components/onboarding/OnboardingWizard.test.tsx

@@ -102,5 +102,5 @@ describe("OnboardingWizard", () => {
     await waitFor(() => {
       expect(mockPush).toHaveBeenCalledWith("/");
     });
-  }, 10_000);
+  });
 });

apps/web/src/components/ui/collapsible.tsx

@@ -1,13 +0,0 @@
-import * as React from "react";
-
-export interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
-  open?: boolean;
-}
-
-export function Collapsible({
-  open = true,
-  className = "",
-  ...props
-}: CollapsibleProps): React.JSX.Element {
-  return <div data-state={open ? "open" : "closed"} className={className} {...props} />;
-}

apps/web/src/components/ui/scroll-area.tsx

@@ -1,15 +0,0 @@
-import * as React from "react";
-
-export type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement>;
-
-export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
-  ({ className = "", children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={`relative overflow-hidden ${className}`} {...props}>
-        <div className="h-full w-full overflow-auto">{children}</div>
-      </div>
-    );
-  }
-);
-
-ScrollArea.displayName = "ScrollArea";

apps/web/src/components/ui/sheet.tsx

@@ -1,137 +0,0 @@
-import * as React from "react";
-import { X } from "lucide-react";
-
-export interface SheetProps {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  children?: React.ReactNode;
-}
-
-export interface SheetTriggerProps {
-  children?: React.ReactNode;
-  asChild?: boolean;
-}
-
-export interface SheetContentProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export interface SheetHeaderProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export interface SheetTitleProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export interface SheetDescriptionProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const SheetContext = React.createContext<{
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}>({});
-
-export function Sheet({ open, onOpenChange, children }: SheetProps): React.JSX.Element {
-  const contextValue: { open?: boolean; onOpenChange?: (open: boolean) => void } = {};
-
-  if (open !== undefined) {
-    contextValue.open = open;
-  }
-
-  if (onOpenChange !== undefined) {
-    contextValue.onOpenChange = onOpenChange;
-  }
-
-  return <SheetContext.Provider value={contextValue}>{children}</SheetContext.Provider>;
-}
-
-export function SheetTrigger({ children, asChild }: SheetTriggerProps): React.JSX.Element {
-  const { onOpenChange } = React.useContext(SheetContext);
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children, {
-      onClick: () => onOpenChange?.(true),
-    } as React.HTMLAttributes<HTMLElement>);
-  }
-
-  return (
-    <button type="button" onClick={() => onOpenChange?.(true)}>
-      {children}
-    </button>
-  );
-}
-
-export function SheetContent({
-  children,
-  className = "",
-}: SheetContentProps): React.JSX.Element | null {
-  const { open, onOpenChange } = React.useContext(SheetContext);
-
-  React.useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    const onKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
-        onOpenChange?.(false);
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    return (): void => {
-      window.removeEventListener("keydown", onKeyDown);
-    };
-  }, [onOpenChange, open]);
-
-  if (!open) {
-    return null;
-  }
-
-  return (
-    <div className="fixed inset-0 z-50">
-      <button
-        type="button"
-        aria-label="Close sheet"
-        className="absolute inset-0 h-full w-full bg-black/50"
-        onClick={() => onOpenChange?.(false)}
-      />
-
-      <div
-        className={`absolute inset-y-0 right-0 z-10 flex h-full w-full max-w-3xl flex-col border-l border-border bg-background p-6 shadow-xl ${className}`}
-      >
-        <button
-          type="button"
-          onClick={() => onOpenChange?.(false)}
-          className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100"
-        >
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </button>
-
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export function SheetHeader({ children, className = "" }: SheetHeaderProps): React.JSX.Element {
-  return <div className={`space-y-1 pr-8 ${className}`}>{children}</div>;
-}
-
-export function SheetTitle({ children, className = "" }: SheetTitleProps): React.JSX.Element {
-  return <h2 className={`text-lg font-semibold ${className}`}>{children}</h2>;
-}
-
-export function SheetDescription({
-  children,
-  className = "",
-}: SheetDescriptionProps): React.JSX.Element {
-  return <p className={`text-sm text-muted-foreground ${className}`}>{children}</p>;
-}

apps/web/src/components/ui/skeleton.tsx

@@ -1,15 +0,0 @@
-import * as React from "react";
-
-export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
-
-export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
-  ({ className = "", ...props }, ref) => (
-    <div
-      ref={ref}
-      className={`animate-pulse rounded-md bg-[rgb(var(--surface-2))] ${className}`}
-      {...props}
-    />
-  )
-);
-
-Skeleton.displayName = "Skeleton";

apps/web/src/hooks/useMissionControl.ts

@@ -1,189 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import type { AgentMessageRole, AgentSessionStatus } from "@mosaic/shared";
-import { apiGet } from "@/lib/api/client";
-
-const MISSION_CONTROL_SESSIONS_QUERY_KEY = ["mission-control", "sessions"] as const;
-const SESSIONS_REFRESH_INTERVAL_MS = 15_000;
-
-export type MissionControlMessageRole = AgentMessageRole;
-
-export interface MissionControlSession {
-  id: string;
-  providerId: string;
-  providerType: string;
-  label?: string;
-  status: AgentSessionStatus;
-  parentSessionId?: string;
-  createdAt: string;
-  updatedAt: string;
-  metadata?: Record<string, unknown>;
-}
-
-interface MissionControlSessionsResponse {
-  sessions: MissionControlSession[];
-}
-
-export interface MissionControlStreamMessage {
-  id: string;
-  sessionId: string;
-  role: MissionControlMessageRole;
-  content: string;
-  timestamp: string;
-  metadata?: Record<string, unknown>;
-}
-
-export type MissionControlConnectionStatus = "connecting" | "connected" | "error";
-
-export interface UseSessionsResult {
-  sessions: MissionControlSession[];
-  loading: boolean;
-  error: Error | null;
-}
-
-export interface UseSessionStreamResult {
-  messages: MissionControlStreamMessage[];
-  status: MissionControlConnectionStatus;
-  error: string | null;
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null;
-}
-
-function isMessageRole(value: unknown): value is MissionControlMessageRole {
-  return value === "assistant" || value === "system" || value === "tool" || value === "user";
-}
-
-function isMissionControlStreamMessage(value: unknown): value is MissionControlStreamMessage {
-  if (!isRecord(value)) {
-    return false;
-  }
-
-  const { id, sessionId, role, content, timestamp, metadata } = value;
-
-  if (
-    typeof id !== "string" ||
-    typeof sessionId !== "string" ||
-    !isMessageRole(role) ||
-    typeof content !== "string" ||
-    typeof timestamp !== "string"
-  ) {
-    return false;
-  }
-
-  if (metadata !== undefined && !isRecord(metadata)) {
-    return false;
-  }
-
-  return true;
-}
-
-/**
- * Fetches Mission Control sessions.
- */
-export function useSessions(): UseSessionsResult {
-  const query = useQuery<MissionControlSessionsResponse>({
-    queryKey: MISSION_CONTROL_SESSIONS_QUERY_KEY,
-    queryFn: async (): Promise<MissionControlSessionsResponse> => {
-      return apiGet<MissionControlSessionsResponse>("/api/mission-control/sessions");
-    },
-    refetchInterval: SESSIONS_REFRESH_INTERVAL_MS,
-  });
-
-  return {
-    sessions: query.data?.sessions ?? [],
-    loading: query.isLoading,
-    error: query.error ?? null,
-  };
-}
-
-/**
- * Backward-compatible alias for early Mission Control integration.
- */
-export function useMissionControl(): UseSessionsResult {
-  return useSessions();
-}
-
-/**
- * Streams Mission Control session messages over SSE.
- */
-export function useSessionStream(sessionId: string): UseSessionStreamResult {
-  const [messages, setMessages] = useState<MissionControlStreamMessage[]>([]);
-  const [status, setStatus] = useState<MissionControlConnectionStatus>("connecting");
-  const [error, setError] = useState<string | null>(null);
-
-  const eventSourceRef = useRef<EventSource | null>(null);
-
-  useEffect(() => {
-    if (eventSourceRef.current !== null) {
-      eventSourceRef.current.close();
-      eventSourceRef.current = null;
-    }
-
-    setMessages([]);
-    setError(null);
-
-    if (!sessionId) {
-      setStatus("connecting");
-      return;
-    }
-
-    if (typeof EventSource === "undefined") {
-      setStatus("error");
-      setError("Mission Control stream is not supported by this browser.");
-      return;
-    }
-
-    setStatus("connecting");
-
-    const source = new EventSource(
-      `/api/mission-control/sessions/${encodeURIComponent(sessionId)}/stream`
-    );
-    eventSourceRef.current = source;
-
-    source.onopen = (): void => {
-      setStatus("connected");
-      setError(null);
-    };
-
-    source.onmessage = (event: MessageEvent<string>): void => {
-      try {
-        const parsed = JSON.parse(event.data) as unknown;
-        if (!isMissionControlStreamMessage(parsed)) {
-          return;
-        }
-
-        setMessages((previousMessages) => [...previousMessages, parsed]);
-      } catch {
-        // Ignore malformed events from the stream.
-      }
-    };
-
-    source.onerror = (): void => {
-      if (source.readyState === EventSource.CONNECTING) {
-        setStatus("connecting");
-        setError(null);
-        return;
-      }
-
-      setStatus("error");
-      setError("Mission Control stream disconnected.");
-    };
-
-    return (): void => {
-      source.close();
-      if (eventSourceRef.current === source) {
-        eventSourceRef.current = null;
-      }
-    };
-  }, [sessionId]);
-
-  return {
-    messages,
-    status,
-    error,
-  };
-}