feat(orchestrator): add mission control proxy api

apps/orchestrator/src/api/agent-providers/agent-providers.controller.ts

@@ -1,54 +0,0 @@
-import {
-  Body,
-  Controller,
-  Delete,
-  Get,
-  Param,
-  Patch,
-  Post,
-  UseGuards,
-  UsePipes,
-  ValidationPipe,
-} from "@nestjs/common";
-import type { AgentProviderConfig } from "@prisma/client";
-import { OrchestratorApiKeyGuard } from "../../common/guards/api-key.guard";
-import { OrchestratorThrottlerGuard } from "../../common/guards/throttler.guard";
-import { AgentProvidersService } from "./agent-providers.service";
-import { CreateAgentProviderDto } from "./dto/create-agent-provider.dto";
-import { UpdateAgentProviderDto } from "./dto/update-agent-provider.dto";
-
-@Controller("agent-providers")
-@UseGuards(OrchestratorApiKeyGuard, OrchestratorThrottlerGuard)
-export class AgentProvidersController {
-  constructor(private readonly agentProvidersService: AgentProvidersService) {}
-
-  @Get()
-  async list(): Promise<AgentProviderConfig[]> {
-    return this.agentProvidersService.list();
-  }
-
-  @Get(":id")
-  async getById(@Param("id") id: string): Promise<AgentProviderConfig> {
-    return this.agentProvidersService.getById(id);
-  }
-
-  @Post()
-  @UsePipes(new ValidationPipe({ transform: true, whitelist: true }))
-  async create(@Body() dto: CreateAgentProviderDto): Promise<AgentProviderConfig> {
-    return this.agentProvidersService.create(dto);
-  }
-
-  @Patch(":id")
-  @UsePipes(new ValidationPipe({ transform: true, whitelist: true }))
-  async update(
-    @Param("id") id: string,
-    @Body() dto: UpdateAgentProviderDto
-  ): Promise<AgentProviderConfig> {
-    return this.agentProvidersService.update(id, dto);
-  }
-
-  @Delete(":id")
-  async delete(@Param("id") id: string): Promise<AgentProviderConfig> {
-    return this.agentProvidersService.delete(id);
-  }
-}

apps/orchestrator/src/api/agent-providers/agent-providers.module.ts

@@ -1,12 +0,0 @@
-import { Module } from "@nestjs/common";
-import { PrismaModule } from "../../prisma/prisma.module";
-import { OrchestratorApiKeyGuard } from "../../common/guards/api-key.guard";
-import { AgentProvidersController } from "./agent-providers.controller";
-import { AgentProvidersService } from "./agent-providers.service";
-
-@Module({
-  imports: [PrismaModule],
-  controllers: [AgentProvidersController],
-  providers: [OrchestratorApiKeyGuard, AgentProvidersService],
-})
-export class AgentProvidersModule {}

apps/orchestrator/src/api/agent-providers/agent-providers.service.spec.ts

@@ -1,211 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { NotFoundException } from "@nestjs/common";
-import { AgentProvidersService } from "./agent-providers.service";
-import { PrismaService } from "../../prisma/prisma.service";
-
-describe("AgentProvidersService", () => {
-  let service: AgentProvidersService;
-  let prisma: {
-    agentProviderConfig: {
-      findMany: ReturnType<typeof vi.fn>;
-      findUnique: ReturnType<typeof vi.fn>;
-      create: ReturnType<typeof vi.fn>;
-      update: ReturnType<typeof vi.fn>;
-      delete: ReturnType<typeof vi.fn>;
-    };
-  };
-
-  beforeEach(() => {
-    prisma = {
-      agentProviderConfig: {
-        findMany: vi.fn(),
-        findUnique: vi.fn(),
-        create: vi.fn(),
-        update: vi.fn(),
-        delete: vi.fn(),
-      },
-    };
-
-    service = new AgentProvidersService(prisma as unknown as PrismaService);
-  });
-
-  it("lists all provider configs", async () => {
-    const expected = [
-      {
-        id: "cfg-1",
-        workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
-        name: "Primary",
-        provider: "openai",
-        gatewayUrl: "https://gateway.example.com",
-        credentials: {},
-        isActive: true,
-        createdAt: new Date("2026-03-07T18:00:00.000Z"),
-        updatedAt: new Date("2026-03-07T18:00:00.000Z"),
-      },
-    ];
-    prisma.agentProviderConfig.findMany.mockResolvedValue(expected);
-
-    const result = await service.list();
-
-    expect(prisma.agentProviderConfig.findMany).toHaveBeenCalledWith({
-      orderBy: [{ createdAt: "desc" }, { id: "desc" }],
-    });
-    expect(result).toEqual(expected);
-  });
-
-  it("returns a single provider config", async () => {
-    const expected = {
-      id: "cfg-1",
-      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
-      name: "Primary",
-      provider: "openai",
-      gatewayUrl: "https://gateway.example.com",
-      credentials: { apiKeyRef: "vault:openai" },
-      isActive: true,
-      createdAt: new Date("2026-03-07T18:00:00.000Z"),
-      updatedAt: new Date("2026-03-07T18:00:00.000Z"),
-    };
-    prisma.agentProviderConfig.findUnique.mockResolvedValue(expected);
-
-    const result = await service.getById("cfg-1");
-
-    expect(prisma.agentProviderConfig.findUnique).toHaveBeenCalledWith({
-      where: { id: "cfg-1" },
-    });
-    expect(result).toEqual(expected);
-  });
-
-  it("throws NotFoundException when provider config is missing", async () => {
-    prisma.agentProviderConfig.findUnique.mockResolvedValue(null);
-
-    await expect(service.getById("missing")).rejects.toBeInstanceOf(NotFoundException);
-  });
-
-  it("creates a provider config with default credentials", async () => {
-    const created = {
-      id: "cfg-created",
-      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
-      name: "New Provider",
-      provider: "claude",
-      gatewayUrl: "https://gateway.example.com",
-      credentials: {},
-      isActive: true,
-      createdAt: new Date("2026-03-07T18:00:00.000Z"),
-      updatedAt: new Date("2026-03-07T18:00:00.000Z"),
-    };
-    prisma.agentProviderConfig.create.mockResolvedValue(created);
-
-    const result = await service.create({
-      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
-      name: "New Provider",
-      provider: "claude",
-      gatewayUrl: "https://gateway.example.com",
-    });
-
-    expect(prisma.agentProviderConfig.create).toHaveBeenCalledWith({
-      data: {
-        workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
-        name: "New Provider",
-        provider: "claude",
-        gatewayUrl: "https://gateway.example.com",
-        credentials: {},
-      },
-    });
-    expect(result).toEqual(created);
-  });
-
-  it("updates a provider config", async () => {
-    prisma.agentProviderConfig.findUnique.mockResolvedValue({
-      id: "cfg-1",
-      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
-      name: "Primary",
-      provider: "openai",
-      gatewayUrl: "https://gateway.example.com",
-      credentials: {},
-      isActive: true,
-      createdAt: new Date("2026-03-07T18:00:00.000Z"),
-      updatedAt: new Date("2026-03-07T18:00:00.000Z"),
-    });
-
-    const updated = {
-      id: "cfg-1",
-      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
-      name: "Secondary",
-      provider: "openai",
-      gatewayUrl: "https://gateway2.example.com",
-      credentials: { apiKeyRef: "vault:new" },
-      isActive: false,
-      createdAt: new Date("2026-03-07T18:00:00.000Z"),
-      updatedAt: new Date("2026-03-07T19:00:00.000Z"),
-    };
-    prisma.agentProviderConfig.update.mockResolvedValue(updated);
-
-    const result = await service.update("cfg-1", {
-      name: "Secondary",
-      gatewayUrl: "https://gateway2.example.com",
-      credentials: { apiKeyRef: "vault:new" },
-      isActive: false,
-    });
-
-    expect(prisma.agentProviderConfig.update).toHaveBeenCalledWith({
-      where: { id: "cfg-1" },
-      data: {
-        name: "Secondary",
-        gatewayUrl: "https://gateway2.example.com",
-        credentials: { apiKeyRef: "vault:new" },
-        isActive: false,
-      },
-    });
-    expect(result).toEqual(updated);
-  });
-
-  it("throws NotFoundException when updating a missing provider config", async () => {
-    prisma.agentProviderConfig.findUnique.mockResolvedValue(null);
-
-    await expect(service.update("missing", { name: "Updated" })).rejects.toBeInstanceOf(
-      NotFoundException
-    );
-    expect(prisma.agentProviderConfig.update).not.toHaveBeenCalled();
-  });
-
-  it("deletes a provider config", async () => {
-    prisma.agentProviderConfig.findUnique.mockResolvedValue({
-      id: "cfg-1",
-      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
-      name: "Primary",
-      provider: "openai",
-      gatewayUrl: "https://gateway.example.com",
-      credentials: {},
-      isActive: true,
-      createdAt: new Date("2026-03-07T18:00:00.000Z"),
-      updatedAt: new Date("2026-03-07T18:00:00.000Z"),
-    });
-
-    const deleted = {
-      id: "cfg-1",
-      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
-      name: "Primary",
-      provider: "openai",
-      gatewayUrl: "https://gateway.example.com",
-      credentials: {},
-      isActive: true,
-      createdAt: new Date("2026-03-07T18:00:00.000Z"),
-      updatedAt: new Date("2026-03-07T18:00:00.000Z"),
-    };
-    prisma.agentProviderConfig.delete.mockResolvedValue(deleted);
-
-    const result = await service.delete("cfg-1");
-
-    expect(prisma.agentProviderConfig.delete).toHaveBeenCalledWith({
-      where: { id: "cfg-1" },
-    });
-    expect(result).toEqual(deleted);
-  });
-
-  it("throws NotFoundException when deleting a missing provider config", async () => {
-    prisma.agentProviderConfig.findUnique.mockResolvedValue(null);
-
-    await expect(service.delete("missing")).rejects.toBeInstanceOf(NotFoundException);
-    expect(prisma.agentProviderConfig.delete).not.toHaveBeenCalled();
-  });
-});

apps/orchestrator/src/api/agent-providers/agent-providers.service.ts

@@ -1,71 +0,0 @@
-import { Injectable, NotFoundException } from "@nestjs/common";
-import type { AgentProviderConfig, Prisma } from "@prisma/client";
-import { PrismaService } from "../../prisma/prisma.service";
-import { CreateAgentProviderDto } from "./dto/create-agent-provider.dto";
-import { UpdateAgentProviderDto } from "./dto/update-agent-provider.dto";
-
-@Injectable()
-export class AgentProvidersService {
-  constructor(private readonly prisma: PrismaService) {}
-
-  async list(): Promise<AgentProviderConfig[]> {
-    return this.prisma.agentProviderConfig.findMany({
-      orderBy: [{ createdAt: "desc" }, { id: "desc" }],
-    });
-  }
-
-  async getById(id: string): Promise<AgentProviderConfig> {
-    const providerConfig = await this.prisma.agentProviderConfig.findUnique({
-      where: { id },
-    });
-
-    if (!providerConfig) {
-      throw new NotFoundException(`Agent provider config with id ${id} not found`);
-    }
-
-    return providerConfig;
-  }
-
-  async create(dto: CreateAgentProviderDto): Promise<AgentProviderConfig> {
-    return this.prisma.agentProviderConfig.create({
-      data: {
-        workspaceId: dto.workspaceId,
-        name: dto.name,
-        provider: dto.provider,
-        gatewayUrl: dto.gatewayUrl,
-        credentials: this.toJsonValue(dto.credentials ?? {}),
-        ...(dto.isActive !== undefined ? { isActive: dto.isActive } : {}),
-      },
-    });
-  }
-
-  async update(id: string, dto: UpdateAgentProviderDto): Promise<AgentProviderConfig> {
-    await this.getById(id);
-
-    const data: Prisma.AgentProviderConfigUpdateInput = {
-      ...(dto.workspaceId !== undefined ? { workspaceId: dto.workspaceId } : {}),
-      ...(dto.name !== undefined ? { name: dto.name } : {}),
-      ...(dto.provider !== undefined ? { provider: dto.provider } : {}),
-      ...(dto.gatewayUrl !== undefined ? { gatewayUrl: dto.gatewayUrl } : {}),
-      ...(dto.isActive !== undefined ? { isActive: dto.isActive } : {}),
-      ...(dto.credentials !== undefined ? { credentials: this.toJsonValue(dto.credentials) } : {}),
-    };
-
-    return this.prisma.agentProviderConfig.update({
-      where: { id },
-      data,
-    });
-  }
-
-  async delete(id: string): Promise<AgentProviderConfig> {
-    await this.getById(id);
-
-    return this.prisma.agentProviderConfig.delete({
-      where: { id },
-    });
-  }
-
-  private toJsonValue(value: Record<string, unknown>): Prisma.InputJsonValue {
-    return value as Prisma.InputJsonValue;
-  }
-}

apps/orchestrator/src/api/agent-providers/dto/create-agent-provider.dto.ts

@@ -1,26 +0,0 @@
-import { IsBoolean, IsNotEmpty, IsObject, IsOptional, IsString, IsUUID } from "class-validator";
-
-export class CreateAgentProviderDto {
-  @IsUUID()
-  workspaceId!: string;
-
-  @IsString()
-  @IsNotEmpty()
-  name!: string;
-
-  @IsString()
-  @IsNotEmpty()
-  provider!: string;
-
-  @IsString()
-  @IsNotEmpty()
-  gatewayUrl!: string;
-
-  @IsOptional()
-  @IsObject()
-  credentials?: Record<string, unknown>;
-
-  @IsOptional()
-  @IsBoolean()
-  isActive?: boolean;
-}

apps/orchestrator/src/api/agent-providers/dto/update-agent-provider.dto.ts

@@ -1,30 +0,0 @@
-import { IsBoolean, IsNotEmpty, IsObject, IsOptional, IsString, IsUUID } from "class-validator";
-
-export class UpdateAgentProviderDto {
-  @IsOptional()
-  @IsUUID()
-  workspaceId?: string;
-
-  @IsOptional()
-  @IsString()
-  @IsNotEmpty()
-  name?: string;
-
-  @IsOptional()
-  @IsString()
-  @IsNotEmpty()
-  provider?: string;
-
-  @IsOptional()
-  @IsString()
-  @IsNotEmpty()
-  gatewayUrl?: string;
-
-  @IsOptional()
-  @IsObject()
-  credentials?: Record<string, unknown>;
-
-  @IsOptional()
-  @IsBoolean()
-  isActive?: boolean;
-}

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/app.module.ts

@@ -6,7 +6,6 @@ import { HealthModule } from "./api/health/health.module";
 import { AgentsModule } from "./api/agents/agents.module";
 import { MissionControlModule } from "./api/mission-control/mission-control.module";
 import { QueueApiModule } from "./api/queue/queue-api.module";
-import { AgentProvidersModule } from "./api/agent-providers/agent-providers.module";
 import { CoordinatorModule } from "./coordinator/coordinator.module";
 import { BudgetModule } from "./budget/budget.module";
 import { CIModule } from "./ci";
@@ -53,7 +52,6 @@ import { orchestratorConfig } from "./config/orchestrator.config";
     ]),
     HealthModule,
     AgentsModule,
-    AgentProvidersModule,
     MissionControlModule,
     QueueApiModule,
     CoordinatorModule,

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/GlobalAgentRoster.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export function GlobalAgentRoster(): React.JSX.Element {
-  return (
-    <Card className="flex h-full min-h-0 flex-col">
-      <CardHeader>
-        <CardTitle className="text-base">Agent Roster</CardTitle>
-      </CardHeader>
-      <CardContent className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
-        No active agents
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -1,26 +0,0 @@
-"use client";
-
-import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
-import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";
-import { useSessions } from "@/hooks/useMissionControl";
-
-const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as const;
-
-export function MissionControlLayout(): React.JSX.Element {
-  const { sessions } = useSessions();
-
-  const panelSessionIds = [sessions[0]?.id, undefined, undefined, undefined] as const;
-
-  return (
-    <section className="h-full min-h-0 overflow-hidden" aria-label="Mission Control">
-      <div className="grid h-full min-h-0 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
-        <aside className="h-full min-h-0">
-          <GlobalAgentRoster />
-        </aside>
-        <main className="h-full min-h-0 overflow-hidden">
-          <MissionControlPanel panels={DEFAULT_PANEL_SLOTS} panelSessionIds={panelSessionIds} />
-        </main>
-      </div>
-    </section>
-  );
-}

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

@@ -1,27 +0,0 @@
-"use client";
-
-import { OrchestratorPanel } from "@/components/mission-control/OrchestratorPanel";
-
-interface MissionControlPanelProps {
-  panels: readonly string[];
-  panelSessionIds?: readonly (string | undefined)[];
-}
-
-export function MissionControlPanel({
-  panels,
-  panelSessionIds,
-}: MissionControlPanelProps): React.JSX.Element {
-  return (
-    <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">
-      {panels.map((panelId, index) => {
-        const sessionId = panelSessionIds?.[index];
-
-        if (sessionId === undefined) {
-          return <OrchestratorPanel key={panelId} />;
-        }
-
-        return <OrchestratorPanel key={panelId} sessionId={sessionId} />;
-      })}
-    </div>
-  );
-}

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

@@ -1,118 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { formatDistanceToNow } from "date-fns";
-import { Badge } from "@/components/ui/badge";
-import type { BadgeVariant } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  useSessionStream,
-  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;
-}
-
-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 }: OrchestratorPanelProps): React.JSX.Element {
-  const { messages, status, error } = useSessionStream(sessionId ?? "");
-  const bottomAnchorRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    bottomAnchorRef.current?.scrollIntoView({ block: "end" });
-  }, [messages.length]);
-
-  if (!sessionId) {
-    return (
-      <Card className="flex h-full min-h-[220px] flex-col">
-        <CardHeader>
-          <CardTitle className="text-base">Orchestrator Panel</CardTitle>
-        </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-center justify-between gap-2">
-          <CardTitle className="text-base">Orchestrator Panel</CardTitle>
-          <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>
-        </div>
-        <p className="truncate text-xs text-muted-foreground">Session: {sessionId}</p>
-      </CardHeader>
-      <CardContent className="flex min-h-0 flex-1 p-0">
-        <ScrollArea className="h-full w-full">
-          <div className="flex min-h-full flex-col gap-3 p-4">
-            {messages.length === 0 ? (
-              <p className="mt-6 text-center text-sm text-muted-foreground">
-                {error ?? "Waiting for messages..."}
-              </p>
-            ) : (
-              messages.map((message) => (
-                <article
-                  key={message.id}
-                  className="rounded-lg border border-border/70 bg-card px-3 py-2"
-                >
-                  <div className="mb-2 flex items-center justify-between gap-2">
-                    <Badge variant={ROLE_BADGE_VARIANT[message.role]} className="uppercase">
-                      {message.role}
-                    </Badge>
-                    <time className="text-xs text-muted-foreground">
-                      {formatRelativeTimestamp(message.timestamp)}
-                    </time>
-                  </div>
-                  <p className="whitespace-pre-wrap break-words text-sm text-foreground">
-                    {message.content}
-                  </p>
-                </article>
-              ))
-            )}
-            <div ref={bottomAnchorRef} />
-          </div>
-        </ScrollArea>
-      </CardContent>
-    </Card>
-  );
-}

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/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,
-  };
-}