feat(web): add Mission Control page layout shell

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,211 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,67 @@
+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,6 +6,7 @@ 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";
@@ -52,6 +53,7 @@ import { orchestratorConfig } from "./config/orchestrator.config";
     ]),
     HealthModule,
     AgentsModule,
+    AgentProvidersModule,
     MissionControlModule,
     QueueApiModule,
     CoordinatorModule,

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

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

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

@@ -156,6 +156,26 @@ 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
@@ -260,6 +280,11 @@ const NAV_GROUPS: NavGroup[] = [
         label: "Terminal",
         icon: <IconTerminal />,
       },
+      {
+        href: "/mission-control",
+        label: "Mission Control",
+        icon: <IconMissionControl />,
+      },
     ],
   },
   {

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

@@ -0,0 +1,16 @@
+"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

@@ -0,0 +1,21 @@
+"use client";
+
+import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
+import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";
+
+const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as const;
+
+export function MissionControlLayout(): React.JSX.Element {
+  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} />
+        </main>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { OrchestratorPanel } from "@/components/mission-control/OrchestratorPanel";
+
+interface MissionControlPanelProps {
+  panels: readonly string[];
+}
+
+export function MissionControlPanel({ panels }: 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) => (
+        <OrchestratorPanel key={panelId} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function OrchestratorPanel(): React.JSX.Element {
+  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
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/hooks/useMissionControl.ts

@@ -0,0 +1,10 @@
+interface UseMissionControlResult {
+  sessions: [];
+  loading: boolean;
+  error: null;
+}
+
+// Stub — will be wired in P2-002
+export function useMissionControl(): UseMissionControlResult {
+  return { sessions: [], loading: false, error: null };
+}