Merge pull request 'fix(mission-control): increase rate limit for events/recent, add error handling' (#742) from fix/mission-control-ratelimit into main

apps/orchestrator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mosaic/orchestrator",
-  "version": "0.0.20",
+  "version": "0.0.23",
   "private": true,
   "scripts": {
     "build": "nest build",
@@ -22,6 +22,7 @@
     "@anthropic-ai/sdk": "^0.72.1",
     "@mosaic/config": "workspace:*",
     "@mosaic/shared": "workspace:*",
+    "@nestjs/axios": "^4.0.1",
     "@nestjs/bullmq": "^11.0.4",
     "@nestjs/common": "^11.1.12",
     "@nestjs/config": "^4.0.2",

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

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

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

@@ -1,5 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { NotFoundException } from "@nestjs/common";
+import { EncryptionService } from "../../security/encryption.service";
 import { AgentProvidersService } from "./agent-providers.service";
 import { PrismaService } from "../../prisma/prisma.service";
 
@@ -14,6 +15,9 @@ describe("AgentProvidersService", () => {
       delete: ReturnType<typeof vi.fn>;
     };
   };
+  let encryptionService: {
+    encryptIfNeeded: ReturnType<typeof vi.fn>;
+  };
 
   beforeEach(() => {
     prisma = {
@@ -26,7 +30,14 @@ describe("AgentProvidersService", () => {
       },
     };
 
-    service = new AgentProvidersService(prisma as unknown as PrismaService);
+    encryptionService = {
+      encryptIfNeeded: vi.fn((value: string) => `enc:${value}`),
+    };
+
+    service = new AgentProvidersService(
+      prisma as unknown as PrismaService,
+      encryptionService as unknown as EncryptionService
+    );
   });
 
   it("lists all provider configs", async () => {
@@ -111,6 +122,42 @@ describe("AgentProvidersService", () => {
         credentials: {},
       },
     });
+    expect(encryptionService.encryptIfNeeded).not.toHaveBeenCalled();
+    expect(result).toEqual(created);
+  });
+
+  it("encrypts openclaw token credentials when creating provider config", async () => {
+    const created = {
+      id: "cfg-openclaw",
+      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
+      name: "OpenClaw",
+      provider: "openclaw",
+      gatewayUrl: "https://openclaw.example.com",
+      credentials: { apiToken: "enc:top-secret" },
+      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: "OpenClaw",
+      provider: "openclaw",
+      gatewayUrl: "https://openclaw.example.com",
+      credentials: { apiToken: "top-secret" },
+    });
+
+    expect(encryptionService.encryptIfNeeded).toHaveBeenCalledWith("top-secret");
+    expect(prisma.agentProviderConfig.create).toHaveBeenCalledWith({
+      data: {
+        workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
+        name: "OpenClaw",
+        provider: "openclaw",
+        gatewayUrl: "https://openclaw.example.com",
+        credentials: { apiToken: "enc:top-secret" },
+      },
+    });
     expect(result).toEqual(created);
   });
 
@@ -156,6 +203,47 @@ describe("AgentProvidersService", () => {
         isActive: false,
       },
     });
+    expect(encryptionService.encryptIfNeeded).not.toHaveBeenCalled();
+    expect(result).toEqual(updated);
+  });
+
+  it("encrypts openclaw token credentials when updating provider config", async () => {
+    prisma.agentProviderConfig.findUnique.mockResolvedValue({
+      id: "cfg-openclaw",
+      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
+      name: "OpenClaw",
+      provider: "openclaw",
+      gatewayUrl: "https://openclaw.example.com",
+      credentials: { apiToken: "enc:existing" },
+      isActive: true,
+      createdAt: new Date("2026-03-07T18:00:00.000Z"),
+      updatedAt: new Date("2026-03-07T18:00:00.000Z"),
+    });
+
+    const updated = {
+      id: "cfg-openclaw",
+      workspaceId: "8bcd7eda-a122-4d6c-adfd-b152f6f75369",
+      name: "OpenClaw",
+      provider: "openclaw",
+      gatewayUrl: "https://openclaw.example.com",
+      credentials: { apiToken: "enc:rotated-token" },
+      isActive: true,
+      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-openclaw", {
+      credentials: { apiToken: "rotated-token" },
+    });
+
+    expect(encryptionService.encryptIfNeeded).toHaveBeenCalledWith("rotated-token");
+    expect(prisma.agentProviderConfig.update).toHaveBeenCalledWith({
+      where: { id: "cfg-openclaw" },
+      data: {
+        credentials: { apiToken: "enc:rotated-token" },
+      },
+    });
     expect(result).toEqual(updated);
   });
 

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

@@ -1,12 +1,19 @@
 import { Injectable, NotFoundException } from "@nestjs/common";
 import type { AgentProviderConfig, Prisma } from "@prisma/client";
+import { EncryptionService } from "../../security/encryption.service";
 import { PrismaService } from "../../prisma/prisma.service";
 import { CreateAgentProviderDto } from "./dto/create-agent-provider.dto";
 import { UpdateAgentProviderDto } from "./dto/update-agent-provider.dto";
 
+const OPENCLAW_PROVIDER_TYPE = "openclaw";
+const OPENCLAW_TOKEN_KEYS = ["apiToken", "token", "bearerToken"] as const;
+
 @Injectable()
 export class AgentProvidersService {
-  constructor(private readonly prisma: PrismaService) {}
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly encryptionService: EncryptionService
+  ) {}
 
   async list(): Promise<AgentProviderConfig[]> {
     return this.prisma.agentProviderConfig.findMany({
@@ -27,20 +34,23 @@ export class AgentProvidersService {
   }
 
   async create(dto: CreateAgentProviderDto): Promise<AgentProviderConfig> {
+    const credentials = this.sanitizeCredentials(dto.provider, dto.credentials ?? {});
+
     return this.prisma.agentProviderConfig.create({
       data: {
         workspaceId: dto.workspaceId,
         name: dto.name,
         provider: dto.provider,
         gatewayUrl: dto.gatewayUrl,
-        credentials: this.toJsonValue(dto.credentials ?? {}),
+        credentials: this.toJsonValue(credentials),
         ...(dto.isActive !== undefined ? { isActive: dto.isActive } : {}),
       },
     });
   }
 
   async update(id: string, dto: UpdateAgentProviderDto): Promise<AgentProviderConfig> {
-    await this.getById(id);
+    const existingConfig = await this.getById(id);
+    const provider = dto.provider ?? existingConfig.provider;
 
     const data: Prisma.AgentProviderConfigUpdateInput = {
       ...(dto.workspaceId !== undefined ? { workspaceId: dto.workspaceId } : {}),
@@ -48,7 +58,9 @@ export class AgentProvidersService {
       ...(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) } : {}),
+      ...(dto.credentials !== undefined
+        ? { credentials: this.toJsonValue(this.sanitizeCredentials(provider, dto.credentials)) }
+        : {}),
     };
 
     return this.prisma.agentProviderConfig.update({
@@ -65,6 +77,25 @@ export class AgentProvidersService {
     });
   }
 
+  private sanitizeCredentials(
+    provider: string,
+    credentials: Record<string, unknown>
+  ): Record<string, unknown> {
+    if (provider.toLowerCase() !== OPENCLAW_PROVIDER_TYPE) {
+      return credentials;
+    }
+
+    const nextCredentials: Record<string, unknown> = { ...credentials };
+    for (const key of OPENCLAW_TOKEN_KEYS) {
+      const tokenValue = nextCredentials[key];
+      if (typeof tokenValue === "string" && tokenValue.length > 0) {
+        nextCredentials[key] = this.encryptionService.encryptIfNeeded(tokenValue);
+      }
+    }
+
+    return nextCredentials;
+  }
+
   private toJsonValue(value: Record<string, unknown>): Prisma.InputJsonValue {
     return value as Prisma.InputJsonValue;
   }

apps/orchestrator/src/api/agents/agents.controller.ts

@@ -146,7 +146,7 @@ export class AgentsController {
    * Return recent orchestrator events for non-streaming consumers.
    */
   @Get("events/recent")
-  @Throttle({ status: { limit: 200, ttl: 60000 } })
+  @Throttle({ default: { limit: 1000, ttl: 60000 } })
   getRecentEvents(@Query("limit") limit?: string): {
     events: ReturnType<AgentEventsService["getRecentEvents"]>;
   } {

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

@@ -0,0 +1,21 @@
+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.ts

@@ -18,9 +18,10 @@ 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 } from "./mission-control.service";
+import { MissionControlService, type MissionControlAuditLogPage } from "./mission-control.service";
 
 const DEFAULT_OPERATOR_ID = "mission-control";
 
@@ -61,6 +62,14 @@ 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,6 +8,24 @@ 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(
@@ -33,6 +51,35 @@ 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/orchestrator/src/api/providers/openclaw/openclaw-sse.bridge.spec.ts

@@ -0,0 +1,145 @@
+import type { HttpService } from "@nestjs/axios";
+import type { AgentMessage } from "@mosaic/shared";
+import { Readable } from "node:stream";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { OpenClawSseBridge } from "./openclaw-sse.bridge";
+
+describe("OpenClawSseBridge", () => {
+  let bridge: OpenClawSseBridge;
+  let httpService: {
+    axiosRef: {
+      get: ReturnType<typeof vi.fn>;
+    };
+  };
+
+  beforeEach(() => {
+    httpService = {
+      axiosRef: {
+        get: vi.fn(),
+      },
+    };
+
+    bridge = new OpenClawSseBridge(httpService as unknown as HttpService);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("maps message and status events, and skips heartbeats", async () => {
+    httpService.axiosRef.get.mockResolvedValue({
+      data: Readable.from([
+        'event: message\ndata: {"id":"msg-1","role":"assistant","content":"hello","timestamp":"2026-03-07T16:00:00.000Z"}\n\n',
+        "event: heartbeat\ndata: {}\n\n",
+        'event: status\ndata: {"status":"paused","timestamp":"2026-03-07T16:00:01.000Z"}\n\n',
+        "data: [DONE]\n\n",
+      ]),
+    });
+
+    const messages = await collectMessages(
+      bridge.streamSession("https://gateway.example.com/", "session-1", {
+        Authorization: "Bearer test-token",
+      })
+    );
+
+    expect(httpService.axiosRef.get).toHaveBeenCalledWith(
+      "https://gateway.example.com/api/sessions/session-1/stream",
+      {
+        headers: {
+          Authorization: "Bearer test-token",
+          Accept: "text/event-stream",
+        },
+        responseType: "stream",
+      }
+    );
+
+    expect(messages).toHaveLength(2);
+    expect(messages[0]).toEqual({
+      id: "msg-1",
+      sessionId: "session-1",
+      role: "assistant",
+      content: "hello",
+      timestamp: new Date("2026-03-07T16:00:00.000Z"),
+    });
+
+    expect(messages[1]).toEqual({
+      id: expect.any(String),
+      sessionId: "session-1",
+      role: "system",
+      content: "Session status changed to paused",
+      timestamp: new Date("2026-03-07T16:00:01.000Z"),
+      metadata: {
+        status: "paused",
+        timestamp: "2026-03-07T16:00:01.000Z",
+      },
+    });
+  });
+
+  it("retries after disconnect and resumes streaming", async () => {
+    vi.useFakeTimers();
+
+    httpService.axiosRef.get
+      .mockResolvedValueOnce({
+        data: Readable.from([
+          'event: message\ndata: {"id":"msg-1","content":"first","timestamp":"2026-03-07T16:10:00.000Z"}\n\n',
+        ]),
+      })
+      .mockResolvedValueOnce({
+        data: Readable.from(["data: [DONE]\n\n"]),
+      });
+
+    const consumePromise = collectMessages(
+      bridge.streamSession("https://gateway.example.com", "session-1", {
+        Authorization: "Bearer test-token",
+      })
+    );
+
+    await vi.advanceTimersByTimeAsync(2000);
+
+    const messages = await consumePromise;
+
+    expect(httpService.axiosRef.get).toHaveBeenCalledTimes(2);
+    expect(messages).toEqual([
+      {
+        id: "msg-1",
+        sessionId: "session-1",
+        role: "user",
+        content: "first",
+        timestamp: new Date("2026-03-07T16:10:00.000Z"),
+      },
+    ]);
+  });
+
+  it("throws after exhausting reconnect retries", async () => {
+    vi.useFakeTimers();
+
+    httpService.axiosRef.get.mockRejectedValue(new Error("socket closed"));
+
+    const consumePromise = collectMessages(
+      bridge.streamSession("https://gateway.example.com", "session-1", {
+        Authorization: "Bearer test-token",
+      })
+    );
+
+    const rejection = expect(consumePromise).rejects.toThrow(
+      "Failed to reconnect OpenClaw stream for session session-1 after 5 retries: socket closed"
+    );
+
+    for (let attempt = 0; attempt < 5; attempt += 1) {
+      await vi.advanceTimersByTimeAsync(2000);
+    }
+
+    await rejection;
+    expect(httpService.axiosRef.get).toHaveBeenCalledTimes(6);
+  });
+});
+
+async function collectMessages(stream: AsyncIterable<AgentMessage>): Promise<AgentMessage[]> {
+  const messages: AgentMessage[] = [];
+
+  for await (const message of stream) {
+    messages.push(message);
+  }
+
+  return messages;
+}

apps/orchestrator/src/api/providers/openclaw/openclaw-sse.bridge.ts

@@ -0,0 +1,420 @@
+import { HttpService } from "@nestjs/axios";
+import { Injectable } from "@nestjs/common";
+import type { AgentMessage, AgentMessageRole } from "@mosaic/shared";
+import { randomUUID } from "node:crypto";
+
+const STREAM_RETRY_DELAY_MS = 2000;
+const STREAM_MAX_RETRIES = 5;
+
+type JsonRecord = Record<string, unknown>;
+type AsyncChunkStream = AsyncIterable<string | Uint8Array | Buffer>;
+
+type ParsedStreamEvent =
+  | {
+      type: "message";
+      message: AgentMessage;
+    }
+  | {
+      type: "done";
+    };
+
+@Injectable()
+export class OpenClawSseBridge {
+  constructor(private readonly httpService: HttpService) {}
+
+  async *streamSession(
+    baseUrl: string,
+    sessionId: string,
+    headers: Record<string, string>
+  ): AsyncIterable<AgentMessage> {
+    let retryCount = 0;
+    let lastError: unknown = new Error("OpenClaw stream disconnected");
+
+    while (retryCount <= STREAM_MAX_RETRIES) {
+      try {
+        const response = await this.httpService.axiosRef.get(
+          this.buildStreamUrl(baseUrl, sessionId),
+          {
+            headers: {
+              ...headers,
+              Accept: "text/event-stream",
+            },
+            responseType: "stream",
+          }
+        );
+
+        const stream = this.asAsyncChunkStream(response.data);
+        if (stream === null) {
+          throw new Error("OpenClaw stream response is not readable");
+        }
+
+        retryCount = 0;
+        let streamCompleted = false;
+
+        for await (const event of this.parseStream(stream, sessionId)) {
+          if (event.type === "done") {
+            streamCompleted = true;
+            break;
+          }
+
+          yield event.message;
+        }
+
+        if (streamCompleted) {
+          return;
+        }
+
+        lastError = new Error("OpenClaw stream disconnected");
+      } catch (error) {
+        lastError = error;
+      }
+
+      if (retryCount >= STREAM_MAX_RETRIES) {
+        throw new Error(
+          `Failed to reconnect OpenClaw stream for session ${sessionId} after ${String(STREAM_MAX_RETRIES)} retries: ${this.toErrorMessage(lastError)}`
+        );
+      }
+
+      retryCount += 1;
+      await this.delay(STREAM_RETRY_DELAY_MS);
+    }
+  }
+
+  private async *parseStream(
+    stream: AsyncChunkStream,
+    sessionId: string
+  ): AsyncGenerator<ParsedStreamEvent> {
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    for await (const chunk of stream) {
+      const textChunk = typeof chunk === "string" ? chunk : decoder.decode(chunk, { stream: true });
+      buffer += textChunk.replace(/\r\n/gu, "\n");
+
+      const rawEvents = buffer.split("\n\n");
+      buffer = rawEvents.pop() ?? "";
+
+      for (const rawEvent of rawEvents) {
+        const parsedEvent = this.parseRawEvent(rawEvent);
+        if (parsedEvent === null) {
+          continue;
+        }
+
+        if (parsedEvent.data === "[DONE]") {
+          yield {
+            type: "done",
+          };
+          return;
+        }
+
+        const payload = this.tryParseJson(parsedEvent.data) ?? parsedEvent.data;
+        const message = this.mapEventToMessage(parsedEvent.type, payload, sessionId);
+        if (message !== null) {
+          yield {
+            type: "message",
+            message,
+          };
+        }
+      }
+    }
+
+    buffer += decoder.decode();
+
+    const trailingEvent = this.parseRawEvent(buffer.trim());
+    if (trailingEvent === null) {
+      return;
+    }
+
+    if (trailingEvent.data === "[DONE]") {
+      yield {
+        type: "done",
+      };
+      return;
+    }
+
+    const payload = this.tryParseJson(trailingEvent.data) ?? trailingEvent.data;
+    const message = this.mapEventToMessage(trailingEvent.type, payload, sessionId);
+    if (message !== null) {
+      yield {
+        type: "message",
+        message,
+      };
+    }
+  }
+
+  private parseRawEvent(rawEvent: string): { type: string; data: string } | null {
+    if (rawEvent.trim().length === 0) {
+      return null;
+    }
+
+    let type = "message";
+    const dataLines: string[] = [];
+
+    for (const line of rawEvent.split("\n")) {
+      const trimmedLine = line.trimEnd();
+      if (trimmedLine.length === 0 || trimmedLine.startsWith(":")) {
+        continue;
+      }
+
+      if (trimmedLine.startsWith("event:")) {
+        type = trimmedLine.slice(6).trim().toLowerCase();
+        continue;
+      }
+
+      if (trimmedLine.startsWith("data:")) {
+        dataLines.push(trimmedLine.slice(5).trimStart());
+      }
+    }
+
+    if (dataLines.length > 0) {
+      return {
+        type,
+        data: dataLines.join("\n").trim(),
+      };
+    }
+
+    const trimmedEvent = rawEvent.trim();
+    if (trimmedEvent.startsWith("{") || trimmedEvent.startsWith("[")) {
+      return {
+        type,
+        data: trimmedEvent,
+      };
+    }
+
+    return null;
+  }
+
+  private mapEventToMessage(
+    eventType: string,
+    payload: unknown,
+    fallbackSessionId: string
+  ): AgentMessage | null {
+    switch (eventType) {
+      case "heartbeat":
+        return null;
+      case "status":
+        return this.toStatusMessage(payload, fallbackSessionId);
+      case "message":
+      default:
+        return this.toAgentMessage(payload, fallbackSessionId);
+    }
+  }
+
+  private toStatusMessage(value: unknown, sessionId: string): AgentMessage | null {
+    if (typeof value === "string") {
+      const status = value.trim();
+      if (status.length === 0) {
+        return null;
+      }
+
+      return {
+        id: randomUUID(),
+        sessionId,
+        role: "system",
+        content: `Session status changed to ${status}`,
+        timestamp: new Date(),
+        metadata: {
+          status,
+        },
+      };
+    }
+
+    if (!this.isRecord(value)) {
+      return null;
+    }
+
+    const status = this.readString(value.status);
+    if (!status) {
+      return null;
+    }
+
+    return {
+      id: randomUUID(),
+      sessionId,
+      role: "system",
+      content: `Session status changed to ${status}`,
+      timestamp: this.parseDate(value.timestamp ?? value.updatedAt),
+      metadata: value,
+    };
+  }
+
+  private toAgentMessage(value: unknown, fallbackSessionId: string): AgentMessage | null {
+    if (typeof value === "string") {
+      const content = value.trim();
+      if (content.length === 0) {
+        return null;
+      }
+
+      return {
+        id: randomUUID(),
+        sessionId: fallbackSessionId,
+        role: "assistant",
+        content,
+        timestamp: new Date(),
+      };
+    }
+
+    let candidate: JsonRecord | null = null;
+
+    if (this.isRecord(value) && this.isRecord(value.message)) {
+      candidate = value.message;
+    } else if (this.isRecord(value)) {
+      candidate = value;
+    }
+
+    if (candidate === null) {
+      return null;
+    }
+
+    const sessionId = this.readString(candidate.sessionId) ?? fallbackSessionId;
+    if (!sessionId) {
+      return null;
+    }
+
+    const content = this.extractMessageContent(
+      candidate.content ?? candidate.text ?? candidate.message
+    );
+    if (content.length === 0) {
+      return null;
+    }
+
+    const metadata = this.toMetadata(candidate.metadata);
+
+    return {
+      id: this.readString(candidate.id) ?? this.readString(candidate.messageId) ?? randomUUID(),
+      sessionId,
+      role: this.toMessageRole(this.readString(candidate.role) ?? this.readString(candidate.type)),
+      content,
+      timestamp: this.parseDate(candidate.timestamp ?? candidate.createdAt),
+      ...(metadata !== undefined ? { metadata } : {}),
+    };
+  }
+
+  private extractMessageContent(content: unknown): string {
+    if (typeof content === "string") {
+      return content.trim();
+    }
+
+    if (Array.isArray(content)) {
+      const parts: string[] = [];
+
+      for (const part of content) {
+        if (typeof part === "string") {
+          const trimmed = part.trim();
+          if (trimmed.length > 0) {
+            parts.push(trimmed);
+          }
+          continue;
+        }
+
+        if (!this.isRecord(part)) {
+          continue;
+        }
+
+        const text = this.readString(part.text) ?? this.readString(part.content);
+        if (text !== undefined && text.trim().length > 0) {
+          parts.push(text.trim());
+        }
+      }
+
+      return parts.join("\n\n").trim();
+    }
+
+    if (this.isRecord(content)) {
+      const text = this.readString(content.text) ?? this.readString(content.content);
+      return text?.trim() ?? "";
+    }
+
+    return "";
+  }
+
+  private toMessageRole(role?: string): AgentMessageRole {
+    switch (role?.toLowerCase()) {
+      case "assistant":
+      case "agent":
+        return "assistant";
+      case "system":
+        return "system";
+      case "tool":
+        return "tool";
+      case "operator":
+      case "user":
+      default:
+        return "user";
+    }
+  }
+
+  private parseDate(value: unknown, fallback = new Date()): Date {
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === "string" || typeof value === "number") {
+      const parsed = new Date(value);
+      if (!Number.isNaN(parsed.getTime())) {
+        return parsed;
+      }
+    }
+
+    return fallback;
+  }
+
+  private toMetadata(value: unknown): Record<string, unknown> | undefined {
+    if (this.isRecord(value)) {
+      return value;
+    }
+
+    return undefined;
+  }
+
+  private buildStreamUrl(baseUrl: string, sessionId: string): string {
+    const normalizedBaseUrl = baseUrl.replace(/\/$/u, "");
+    return new URL(
+      `/api/sessions/${encodeURIComponent(sessionId)}/stream`,
+      `${normalizedBaseUrl}/`
+    ).toString();
+  }
+
+  private tryParseJson(value: string): unknown {
+    try {
+      return JSON.parse(value) as unknown;
+    } catch {
+      return null;
+    }
+  }
+
+  private asAsyncChunkStream(value: unknown): AsyncChunkStream | null {
+    if (value !== null && typeof value === "object" && Symbol.asyncIterator in value) {
+      return value as AsyncChunkStream;
+    }
+
+    return null;
+  }
+
+  private isRecord(value: unknown): value is JsonRecord {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  }
+
+  private readString(value: unknown): string | undefined {
+    if (typeof value !== "string") {
+      return undefined;
+    }
+
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+  }
+
+  private async delay(ms: number): Promise<void> {
+    await new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  }
+
+  private toErrorMessage(error: unknown): string {
+    if (error instanceof Error) {
+      return error.message;
+    }
+
+    return String(error);
+  }
+}

apps/orchestrator/src/api/providers/openclaw/openclaw.provider-factory.ts

@@ -0,0 +1,24 @@
+import { HttpService } from "@nestjs/axios";
+import { Injectable } from "@nestjs/common";
+import type { AgentProviderConfig } from "@prisma/client";
+import { EncryptionService } from "../../../security/encryption.service";
+import { OpenClawSseBridge } from "./openclaw-sse.bridge";
+import { OpenClawProvider } from "./openclaw.provider";
+
+@Injectable()
+export class OpenClawProviderFactory {
+  constructor(
+    private readonly encryptionService: EncryptionService,
+    private readonly httpService: HttpService,
+    private readonly openClawSseBridge: OpenClawSseBridge
+  ) {}
+
+  createProvider(config: AgentProviderConfig): OpenClawProvider {
+    return new OpenClawProvider(
+      config,
+      this.encryptionService,
+      this.httpService,
+      this.openClawSseBridge
+    );
+  }
+}

apps/orchestrator/src/api/providers/openclaw/openclaw.provider.integration.spec.ts

@@ -0,0 +1,183 @@
+import type { HttpService } from "@nestjs/axios";
+import { ServiceUnavailableException } from "@nestjs/common";
+import type { AgentMessage } from "@mosaic/shared";
+import type { AgentProviderConfig } from "@prisma/client";
+import { Readable } from "node:stream";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { EncryptionService } from "../../../security/encryption.service";
+import { OpenClawSseBridge } from "./openclaw-sse.bridge";
+import { OpenClawProvider } from "./openclaw.provider";
+
+describe("Phase 3 gate: OpenClaw provider config registered in DB → provider loaded on boot → sessions returned from /api/mission-control/sessions → inject/pause/kill proxied to gateway", () => {
+  let provider: OpenClawProvider;
+  let httpService: {
+    axiosRef: {
+      get: ReturnType<typeof vi.fn>;
+      post: ReturnType<typeof vi.fn>;
+    };
+  };
+  let encryptionService: {
+    decryptIfNeeded: ReturnType<typeof vi.fn>;
+  };
+
+  const config: AgentProviderConfig = {
+    id: "cfg-openclaw-1",
+    workspaceId: "workspace-1",
+    name: "openclaw-home",
+    provider: "openclaw",
+    gatewayUrl: "https://gateway.example.com",
+    credentials: {
+      apiToken: "enc:token",
+    },
+    isActive: true,
+    createdAt: new Date("2026-03-07T15:00:00.000Z"),
+    updatedAt: new Date("2026-03-07T15:00:00.000Z"),
+  };
+
+  beforeEach(() => {
+    httpService = {
+      axiosRef: {
+        get: vi.fn(),
+        post: vi.fn(),
+      },
+    };
+
+    encryptionService = {
+      decryptIfNeeded: vi.fn().mockReturnValue("plain-token"),
+    };
+
+    provider = new OpenClawProvider(
+      config,
+      encryptionService as unknown as EncryptionService,
+      httpService as unknown as HttpService,
+      new OpenClawSseBridge(httpService as unknown as HttpService)
+    );
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("maps listSessions from mocked OpenClaw gateway HTTP responses", async () => {
+    httpService.axiosRef.get.mockResolvedValue({
+      data: {
+        sessions: [
+          {
+            id: "session-1",
+            status: "running",
+            createdAt: "2026-03-07T15:01:00.000Z",
+            updatedAt: "2026-03-07T15:02:00.000Z",
+          },
+        ],
+        total: 1,
+      },
+    });
+
+    await expect(provider.listSessions()).resolves.toEqual({
+      sessions: [
+        {
+          id: "session-1",
+          providerId: "openclaw-home",
+          providerType: "openclaw",
+          status: "active",
+          createdAt: new Date("2026-03-07T15:01:00.000Z"),
+          updatedAt: new Date("2026-03-07T15:02:00.000Z"),
+        },
+      ],
+      total: 1,
+    });
+
+    expect(httpService.axiosRef.get).toHaveBeenCalledWith(
+      "https://gateway.example.com/api/sessions",
+      {
+        headers: {
+          Authorization: "Bearer plain-token",
+        },
+        params: {
+          limit: 50,
+        },
+      }
+    );
+  });
+
+  it("maps streamMessages from mock SSE events into AgentMessage output", async () => {
+    httpService.axiosRef.get.mockResolvedValue({
+      data: Readable.from([
+        'event: message\ndata: {"id":"msg-1","role":"assistant","content":"hello from stream","timestamp":"2026-03-07T15:03:00.000Z"}\n\n',
+        'event: status\ndata: {"status":"paused","timestamp":"2026-03-07T15:04:00.000Z"}\n\n',
+        "data: [DONE]\n\n",
+      ]),
+    });
+
+    const messages = await collectMessages(provider.streamMessages("session-1"));
+
+    expect(messages).toEqual([
+      {
+        id: "msg-1",
+        sessionId: "session-1",
+        role: "assistant",
+        content: "hello from stream",
+        timestamp: new Date("2026-03-07T15:03:00.000Z"),
+      },
+      {
+        id: expect.any(String),
+        sessionId: "session-1",
+        role: "system",
+        content: "Session status changed to paused",
+        timestamp: new Date("2026-03-07T15:04:00.000Z"),
+        metadata: {
+          status: "paused",
+          timestamp: "2026-03-07T15:04:00.000Z",
+        },
+      },
+    ]);
+  });
+
+  it("handles unavailable gateway errors", async () => {
+    httpService.axiosRef.get.mockRejectedValue(new Error("gateway unavailable"));
+
+    await expect(provider.listSessions()).rejects.toBeInstanceOf(ServiceUnavailableException);
+    await expect(provider.listSessions()).rejects.toThrow("gateway unavailable");
+  });
+
+  it("handles bad token decryption errors", async () => {
+    encryptionService.decryptIfNeeded.mockImplementation(() => {
+      throw new Error("bad token");
+    });
+
+    await expect(provider.listSessions()).rejects.toBeInstanceOf(ServiceUnavailableException);
+    await expect(provider.listSessions()).rejects.toThrow("Failed to decrypt API token");
+  });
+
+  it("handles malformed SSE stream responses", async () => {
+    vi.useFakeTimers();
+
+    httpService.axiosRef.get.mockResolvedValue({
+      data: {
+        malformed: true,
+      },
+    });
+
+    const streamPromise = collectMessages(provider.streamMessages("session-malformed"));
+    const rejection = expect(streamPromise).rejects.toThrow(
+      "OpenClaw provider openclaw-home failed to stream messages for session session-malformed"
+    );
+
+    for (let attempt = 0; attempt < 5; attempt += 1) {
+      await vi.advanceTimersByTimeAsync(2000);
+    }
+
+    await rejection;
+    expect(httpService.axiosRef.get).toHaveBeenCalledTimes(6);
+  });
+});
+
+async function collectMessages(stream: AsyncIterable<AgentMessage>): Promise<AgentMessage[]> {
+  const messages: AgentMessage[] = [];
+
+  for await (const message of stream) {
+    messages.push(message);
+  }
+
+  return messages;
+}

apps/orchestrator/src/api/providers/openclaw/openclaw.provider.spec.ts

@@ -0,0 +1,271 @@
+import type { HttpService } from "@nestjs/axios";
+import { ServiceUnavailableException } from "@nestjs/common";
+import type { AgentProviderConfig } from "@prisma/client";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { EncryptionService } from "../../../security/encryption.service";
+import { OpenClawSseBridge } from "./openclaw-sse.bridge";
+import { OpenClawProvider } from "./openclaw.provider";
+
+describe("OpenClawProvider", () => {
+  let provider: OpenClawProvider;
+  let httpService: {
+    axiosRef: {
+      get: ReturnType<typeof vi.fn>;
+      post: ReturnType<typeof vi.fn>;
+    };
+  };
+  let encryptionService: {
+    decryptIfNeeded: ReturnType<typeof vi.fn>;
+  };
+  let sseBridge: {
+    streamSession: ReturnType<typeof vi.fn>;
+  };
+
+  const config: AgentProviderConfig = {
+    id: "cfg-openclaw-1",
+    workspaceId: "workspace-1",
+    name: "openclaw-home",
+    provider: "openclaw",
+    gatewayUrl: "https://gateway.example.com/",
+    credentials: {
+      apiToken: "enc:token-value",
+      displayName: "Home OpenClaw",
+    },
+    isActive: true,
+    createdAt: new Date("2026-03-07T15:00:00.000Z"),
+    updatedAt: new Date("2026-03-07T15:00:00.000Z"),
+  };
+
+  beforeEach(() => {
+    httpService = {
+      axiosRef: {
+        get: vi.fn(),
+        post: vi.fn(),
+      },
+    };
+
+    encryptionService = {
+      decryptIfNeeded: vi.fn().mockReturnValue("plain-token"),
+    };
+
+    sseBridge = {
+      streamSession: vi.fn(),
+    };
+
+    provider = new OpenClawProvider(
+      config,
+      encryptionService as unknown as EncryptionService,
+      httpService as unknown as HttpService,
+      sseBridge as unknown as OpenClawSseBridge
+    );
+  });
+
+  it("maps listSessions from OpenClaw API", async () => {
+    httpService.axiosRef.get.mockResolvedValue({
+      data: {
+        sessions: [
+          {
+            id: "session-1",
+            status: "running",
+            createdAt: "2026-03-07T15:01:00.000Z",
+            updatedAt: "2026-03-07T15:02:00.000Z",
+          },
+        ],
+        total: 1,
+        cursor: "next-cursor",
+      },
+    });
+
+    const result = await provider.listSessions("cursor-1", 25);
+
+    expect(httpService.axiosRef.get).toHaveBeenCalledWith(
+      "https://gateway.example.com/api/sessions",
+      {
+        headers: {
+          Authorization: "Bearer plain-token",
+        },
+        params: {
+          cursor: "cursor-1",
+          limit: 25,
+        },
+      }
+    );
+    expect(result).toEqual({
+      sessions: [
+        {
+          id: "session-1",
+          providerId: "openclaw-home",
+          providerType: "openclaw",
+          status: "active",
+          createdAt: new Date("2026-03-07T15:01:00.000Z"),
+          updatedAt: new Date("2026-03-07T15:02:00.000Z"),
+        },
+      ],
+      total: 1,
+      cursor: "next-cursor",
+    });
+    expect(encryptionService.decryptIfNeeded).toHaveBeenCalledWith("enc:token-value");
+  });
+
+  it("returns null from getSession when OpenClaw returns 404", async () => {
+    httpService.axiosRef.get.mockRejectedValue({
+      response: {
+        status: 404,
+      },
+    });
+
+    await expect(provider.getSession("missing-session")).resolves.toBeNull();
+  });
+
+  it("maps getMessages response", async () => {
+    httpService.axiosRef.get.mockResolvedValue({
+      data: {
+        messages: [
+          {
+            id: "message-1",
+            sessionId: "session-1",
+            role: "agent",
+            content: "hello",
+            timestamp: "2026-03-07T15:03:00.000Z",
+            metadata: {
+              tokens: 128,
+            },
+          },
+        ],
+      },
+    });
+
+    const result = await provider.getMessages("session-1", 20, "before-cursor");
+
+    expect(httpService.axiosRef.get).toHaveBeenCalledWith(
+      "https://gateway.example.com/api/messages",
+      {
+        headers: {
+          Authorization: "Bearer plain-token",
+        },
+        params: {
+          sessionId: "session-1",
+          limit: 20,
+          before: "before-cursor",
+        },
+      }
+    );
+    expect(result).toEqual([
+      {
+        id: "message-1",
+        sessionId: "session-1",
+        role: "assistant",
+        content: "hello",
+        timestamp: new Date("2026-03-07T15:03:00.000Z"),
+        metadata: {
+          tokens: 128,
+        },
+      },
+    ]);
+  });
+
+  it("maps inject and control endpoints", async () => {
+    httpService.axiosRef.post
+      .mockResolvedValueOnce({
+        data: {
+          accepted: true,
+          messageId: "message-2",
+        },
+      })
+      .mockResolvedValueOnce({ data: {} })
+      .mockResolvedValueOnce({ data: {} })
+      .mockResolvedValueOnce({ data: {} });
+
+    await expect(provider.injectMessage("session-1", "barge in")).resolves.toEqual({
+      accepted: true,
+      messageId: "message-2",
+    });
+
+    await provider.pauseSession("session-1");
+    await provider.resumeSession("session-1");
+    await provider.killSession("session-1", false);
+
+    expect(httpService.axiosRef.post).toHaveBeenNthCalledWith(
+      1,
+      "https://gateway.example.com/api/sessions/session-1/inject",
+      { content: "barge in" },
+      {
+        headers: {
+          Authorization: "Bearer plain-token",
+        },
+      }
+    );
+    expect(httpService.axiosRef.post).toHaveBeenNthCalledWith(
+      2,
+      "https://gateway.example.com/api/sessions/session-1/pause",
+      {},
+      {
+        headers: {
+          Authorization: "Bearer plain-token",
+        },
+      }
+    );
+    expect(httpService.axiosRef.post).toHaveBeenNthCalledWith(
+      3,
+      "https://gateway.example.com/api/sessions/session-1/resume",
+      {},
+      {
+        headers: {
+          Authorization: "Bearer plain-token",
+        },
+      }
+    );
+    expect(httpService.axiosRef.post).toHaveBeenNthCalledWith(
+      4,
+      "https://gateway.example.com/api/sessions/session-1/kill",
+      { force: false },
+      {
+        headers: {
+          Authorization: "Bearer plain-token",
+        },
+      }
+    );
+  });
+
+  it("delegates streaming to OpenClawSseBridge", async () => {
+    const streamedMessage = {
+      id: "message-stream",
+      sessionId: "session-stream",
+      role: "assistant",
+      content: "stream hello",
+      timestamp: new Date("2026-03-07T16:00:00.000Z"),
+    };
+
+    sseBridge.streamSession.mockReturnValue(
+      (async function* () {
+        yield streamedMessage;
+      })()
+    );
+
+    const messages: Array<unknown> = [];
+    for await (const message of provider.streamMessages("session-stream")) {
+      messages.push(message);
+    }
+
+    expect(sseBridge.streamSession).toHaveBeenCalledWith(
+      "https://gateway.example.com",
+      "session-stream",
+      {
+        Authorization: "Bearer plain-token",
+      }
+    );
+    expect(messages).toEqual([streamedMessage]);
+  });
+
+  it("throws ServiceUnavailableException for request failures", async () => {
+    httpService.axiosRef.get.mockRejectedValue(new Error("gateway unreachable"));
+
+    await expect(provider.listSessions()).rejects.toBeInstanceOf(ServiceUnavailableException);
+  });
+
+  it("returns false from isAvailable when gateway check fails", async () => {
+    httpService.axiosRef.get.mockRejectedValue(new Error("gateway unreachable"));
+
+    await expect(provider.isAvailable()).resolves.toBe(false);
+  });
+});

apps/orchestrator/src/api/providers/openclaw/openclaw.provider.ts

@@ -0,0 +1,613 @@
+import { HttpService } from "@nestjs/axios";
+import { Injectable, ServiceUnavailableException } from "@nestjs/common";
+import type {
+  AgentMessage,
+  AgentMessageRole,
+  AgentSession,
+  AgentSessionList,
+  AgentSessionStatus,
+  IAgentProvider,
+  InjectResult,
+} from "@mosaic/shared";
+import type { AgentProviderConfig } from "@prisma/client";
+import { randomUUID } from "node:crypto";
+import { EncryptionService } from "../../../security/encryption.service";
+import { OpenClawSseBridge } from "./openclaw-sse.bridge";
+
+const DEFAULT_SESSION_LIMIT = 50;
+const DEFAULT_MESSAGE_LIMIT = 50;
+const MAX_MESSAGE_LIMIT = 200;
+const OPENCLAW_PROVIDER_TYPE = "openclaw";
+const API_TOKEN_KEYS = ["apiToken", "token", "bearerToken"] as const;
+const DISPLAY_NAME_KEYS = ["displayName", "label"] as const;
+
+type JsonRecord = Record<string, unknown>;
+
+interface HttpErrorWithResponse {
+  response?: {
+    status?: number;
+  };
+}
+
+@Injectable()
+export class OpenClawProvider implements IAgentProvider {
+  readonly providerId: string;
+  readonly providerType = OPENCLAW_PROVIDER_TYPE;
+  readonly displayName: string;
+
+  constructor(
+    private readonly config: AgentProviderConfig,
+    private readonly encryptionService: EncryptionService,
+    private readonly httpService: HttpService,
+    private readonly sseBridge: OpenClawSseBridge
+  ) {
+    this.providerId = this.config.name;
+    this.displayName = this.resolveDisplayName();
+  }
+
+  validateBaseUrl(): void {
+    void this.resolveBaseUrl();
+  }
+
+  validateToken(): void {
+    void this.resolveApiToken();
+  }
+
+  async listSessions(cursor?: string, limit = DEFAULT_SESSION_LIMIT): Promise<AgentSessionList> {
+    const safeLimit = this.normalizeLimit(limit, DEFAULT_SESSION_LIMIT);
+    const params: Record<string, number | string> = { limit: safeLimit };
+    if (typeof cursor === "string" && cursor.length > 0) {
+      params.cursor = cursor;
+    }
+
+    try {
+      const response = await this.httpService.axiosRef.get(this.buildUrl("/api/sessions"), {
+        headers: this.authHeaders(),
+        params,
+      });
+
+      const page = this.extractSessionPage(response.data);
+      const sessions = page.records
+        .map((record) => this.toAgentSession(record))
+        .filter((session): session is AgentSession => session !== null);
+
+      return {
+        sessions,
+        total: page.total ?? sessions.length,
+        ...(page.cursor !== undefined ? { cursor: page.cursor } : {}),
+      };
+    } catch (error) {
+      throw this.toServiceUnavailable("list sessions", error);
+    }
+  }
+
+  async getSession(sessionId: string): Promise<AgentSession | null> {
+    try {
+      const response = await this.httpService.axiosRef.get(
+        this.buildUrl(`/api/sessions/${encodeURIComponent(sessionId)}`),
+        {
+          headers: this.authHeaders(),
+        }
+      );
+
+      const payload = this.unwrapContainer(response.data, ["session", "data"]);
+      return this.toAgentSession(payload);
+    } catch (error) {
+      if (this.getHttpStatus(error) === 404) {
+        return null;
+      }
+
+      throw this.toServiceUnavailable(`get session ${sessionId}`, error);
+    }
+  }
+
+  async getMessages(
+    sessionId: string,
+    limit = DEFAULT_MESSAGE_LIMIT,
+    before?: string
+  ): Promise<AgentMessage[]> {
+    const safeLimit = this.normalizeLimit(limit, DEFAULT_MESSAGE_LIMIT);
+    const params: Record<string, number | string> = {
+      sessionId,
+      limit: safeLimit,
+    };
+
+    if (typeof before === "string" && before.length > 0) {
+      params.before = before;
+    }
+
+    try {
+      const response = await this.httpService.axiosRef.get(this.buildUrl("/api/messages"), {
+        headers: this.authHeaders(),
+        params,
+      });
+
+      return this.extractMessageRecords(response.data)
+        .map((record) => this.toAgentMessage(record, sessionId))
+        .filter((message): message is AgentMessage => message !== null);
+    } catch (error) {
+      throw this.toServiceUnavailable(`get messages for session ${sessionId}`, error);
+    }
+  }
+
+  async injectMessage(sessionId: string, content: string): Promise<InjectResult> {
+    try {
+      const response = await this.httpService.axiosRef.post(
+        this.buildUrl(`/api/sessions/${encodeURIComponent(sessionId)}/inject`),
+        { content },
+        {
+          headers: this.authHeaders(),
+        }
+      );
+
+      const payload = this.isRecord(response.data) ? response.data : {};
+
+      return {
+        accepted: typeof payload.accepted === "boolean" ? payload.accepted : true,
+        ...(this.readString(payload.messageId) !== undefined
+          ? { messageId: this.readString(payload.messageId) }
+          : {}),
+      };
+    } catch (error) {
+      throw this.toServiceUnavailable(`inject message into session ${sessionId}`, error);
+    }
+  }
+
+  async pauseSession(sessionId: string): Promise<void> {
+    try {
+      await this.httpService.axiosRef.post(
+        this.buildUrl(`/api/sessions/${encodeURIComponent(sessionId)}/pause`),
+        {},
+        {
+          headers: this.authHeaders(),
+        }
+      );
+    } catch (error) {
+      throw this.toServiceUnavailable(`pause session ${sessionId}`, error);
+    }
+  }
+
+  async resumeSession(sessionId: string): Promise<void> {
+    try {
+      await this.httpService.axiosRef.post(
+        this.buildUrl(`/api/sessions/${encodeURIComponent(sessionId)}/resume`),
+        {},
+        {
+          headers: this.authHeaders(),
+        }
+      );
+    } catch (error) {
+      throw this.toServiceUnavailable(`resume session ${sessionId}`, error);
+    }
+  }
+
+  async killSession(sessionId: string, force = true): Promise<void> {
+    try {
+      await this.httpService.axiosRef.post(
+        this.buildUrl(`/api/sessions/${encodeURIComponent(sessionId)}/kill`),
+        { force },
+        {
+          headers: this.authHeaders(),
+        }
+      );
+    } catch (error) {
+      throw this.toServiceUnavailable(`kill session ${sessionId}`, error);
+    }
+  }
+
+  async *streamMessages(sessionId: string): AsyncIterable<AgentMessage> {
+    try {
+      yield* this.sseBridge.streamSession(this.resolveBaseUrl(), sessionId, this.authHeaders());
+    } catch (error) {
+      throw this.toServiceUnavailable(`stream messages for session ${sessionId}`, error);
+    }
+  }
+
+  async isAvailable(): Promise<boolean> {
+    try {
+      this.validateBaseUrl();
+      this.validateToken();
+
+      await this.httpService.axiosRef.get(this.buildUrl("/api/sessions"), {
+        headers: this.authHeaders(),
+        params: { limit: 1 },
+      });
+
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  private extractSessionPage(payload: unknown): {
+    records: unknown[];
+    total?: number;
+    cursor?: string;
+  } {
+    if (Array.isArray(payload)) {
+      return {
+        records: payload,
+        total: payload.length,
+      };
+    }
+
+    if (!this.isRecord(payload)) {
+      return {
+        records: [],
+      };
+    }
+
+    let records: unknown[] = [];
+    if (Array.isArray(payload.sessions)) {
+      records = payload.sessions;
+    } else if (Array.isArray(payload.items)) {
+      records = payload.items;
+    } else if (Array.isArray(payload.data)) {
+      records = payload.data;
+    }
+
+    const total = typeof payload.total === "number" ? payload.total : undefined;
+    const cursor = this.readString(payload.cursor) ?? this.readString(payload.nextCursor);
+
+    return {
+      records,
+      total,
+      ...(cursor !== undefined ? { cursor } : {}),
+    };
+  }
+
+  private extractMessageRecords(payload: unknown): unknown[] {
+    if (Array.isArray(payload)) {
+      return payload;
+    }
+
+    if (!this.isRecord(payload)) {
+      return [];
+    }
+
+    if (Array.isArray(payload.messages)) {
+      return payload.messages;
+    }
+
+    if (Array.isArray(payload.items)) {
+      return payload.items;
+    }
+
+    if (Array.isArray(payload.data)) {
+      return payload.data;
+    }
+
+    return [];
+  }
+
+  private unwrapContainer(payload: unknown, keys: string[]): unknown {
+    if (!this.isRecord(payload)) {
+      return payload;
+    }
+
+    for (const key of keys) {
+      if (key in payload) {
+        return payload[key];
+      }
+    }
+
+    return payload;
+  }
+
+  private toAgentSession(record: unknown): AgentSession | null {
+    if (!this.isRecord(record)) {
+      return null;
+    }
+
+    const id =
+      this.readString(record.id) ??
+      this.readString(record.sessionId) ??
+      this.readString(record.key);
+    if (!id) {
+      return null;
+    }
+
+    const createdAt = this.parseDate(record.createdAt ?? record.spawnedAt ?? record.startedAt);
+    const updatedAt = this.parseDate(
+      record.updatedAt ?? record.completedAt ?? record.lastActivityAt ?? record.endedAt,
+      createdAt
+    );
+
+    const label =
+      this.readString(record.label) ??
+      this.readString(record.title) ??
+      this.readString(record.name) ??
+      undefined;
+
+    const parentSessionId = this.readString(record.parentSessionId) ?? undefined;
+    const metadata = this.toMetadata(record.metadata);
+
+    return {
+      id,
+      providerId: this.providerId,
+      providerType: this.providerType,
+      ...(label !== undefined ? { label } : {}),
+      status: this.toSessionStatus(this.readString(record.status)),
+      ...(parentSessionId !== undefined ? { parentSessionId } : {}),
+      createdAt,
+      updatedAt,
+      ...(metadata !== undefined ? { metadata } : {}),
+    };
+  }
+
+  private toAgentMessage(value: unknown, fallbackSessionId?: string): AgentMessage | null {
+    if (typeof value === "string") {
+      const content = value.trim();
+      if (content.length === 0 || fallbackSessionId === undefined) {
+        return null;
+      }
+
+      return {
+        id: randomUUID(),
+        sessionId: fallbackSessionId,
+        role: "assistant",
+        content,
+        timestamp: new Date(),
+      };
+    }
+
+    let candidate: JsonRecord | null = null;
+
+    if (this.isRecord(value) && this.isRecord(value.message)) {
+      candidate = value.message;
+    } else if (this.isRecord(value)) {
+      candidate = value;
+    }
+
+    if (candidate === null) {
+      return null;
+    }
+
+    const sessionId = this.readString(candidate.sessionId) ?? fallbackSessionId;
+    if (!sessionId) {
+      return null;
+    }
+
+    const content = this.extractMessageContent(
+      candidate.content ?? candidate.text ?? candidate.message
+    );
+    if (content.length === 0) {
+      return null;
+    }
+
+    const metadata = this.toMetadata(candidate.metadata);
+
+    return {
+      id: this.readString(candidate.id) ?? this.readString(candidate.messageId) ?? randomUUID(),
+      sessionId,
+      role: this.toMessageRole(this.readString(candidate.role) ?? this.readString(candidate.type)),
+      content,
+      timestamp: this.parseDate(candidate.timestamp ?? candidate.createdAt),
+      ...(metadata !== undefined ? { metadata } : {}),
+    };
+  }
+
+  private extractMessageContent(content: unknown): string {
+    if (typeof content === "string") {
+      return content.trim();
+    }
+
+    if (Array.isArray(content)) {
+      const parts: string[] = [];
+
+      for (const part of content) {
+        if (typeof part === "string") {
+          const trimmed = part.trim();
+          if (trimmed.length > 0) {
+            parts.push(trimmed);
+          }
+          continue;
+        }
+
+        if (!this.isRecord(part)) {
+          continue;
+        }
+
+        const text = this.readString(part.text) ?? this.readString(part.content);
+        if (text !== undefined && text.trim().length > 0) {
+          parts.push(text.trim());
+        }
+      }
+
+      return parts.join("\n\n").trim();
+    }
+
+    if (this.isRecord(content)) {
+      const text = this.readString(content.text) ?? this.readString(content.content);
+      return text?.trim() ?? "";
+    }
+
+    return "";
+  }
+
+  private toSessionStatus(status?: string): AgentSessionStatus {
+    switch (status?.toLowerCase()) {
+      case "active":
+      case "running":
+        return "active";
+      case "paused":
+        return "paused";
+      case "completed":
+      case "done":
+      case "succeeded":
+        return "completed";
+      case "failed":
+      case "error":
+      case "killed":
+      case "terminated":
+      case "cancelled":
+        return "failed";
+      case "idle":
+      case "pending":
+      case "queued":
+      default:
+        return "idle";
+    }
+  }
+
+  private toMessageRole(role?: string): AgentMessageRole {
+    switch (role?.toLowerCase()) {
+      case "assistant":
+      case "agent":
+        return "assistant";
+      case "system":
+        return "system";
+      case "tool":
+        return "tool";
+      case "operator":
+      case "user":
+      default:
+        return "user";
+    }
+  }
+
+  private normalizeLimit(value: number, fallback: number): number {
+    const normalized = Number.isFinite(value) ? Math.trunc(value) : fallback;
+    if (normalized < 1) {
+      return 1;
+    }
+
+    return Math.min(normalized, MAX_MESSAGE_LIMIT);
+  }
+
+  private parseDate(value: unknown, fallback = new Date()): Date {
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === "string" || typeof value === "number") {
+      const parsed = new Date(value);
+      if (!Number.isNaN(parsed.getTime())) {
+        return parsed;
+      }
+    }
+
+    return fallback;
+  }
+
+  private toMetadata(value: unknown): Record<string, unknown> | undefined {
+    if (this.isRecord(value)) {
+      return value;
+    }
+
+    return undefined;
+  }
+
+  private resolveDisplayName(): string {
+    const credentials = this.readCredentials();
+
+    for (const key of DISPLAY_NAME_KEYS) {
+      const value = this.readString(credentials[key]);
+      if (value !== undefined) {
+        return value;
+      }
+    }
+
+    return this.config.name;
+  }
+
+  private resolveBaseUrl(): string {
+    const configRecord = this.config as unknown as JsonRecord;
+    const rawBaseUrl =
+      this.readString(this.config.gatewayUrl) ?? this.readString(configRecord.baseUrl);
+
+    if (rawBaseUrl === undefined) {
+      throw new Error(`OpenClaw provider ${this.providerId} is missing gateway URL`);
+    }
+
+    try {
+      const parsed = new URL(rawBaseUrl);
+      return parsed.toString().replace(/\/$/u, "");
+    } catch {
+      throw new Error(`OpenClaw provider ${this.providerId} has invalid gateway URL`);
+    }
+  }
+
+  private resolveApiToken(): string {
+    const configRecord = this.config as unknown as JsonRecord;
+    const credentials = this.readCredentials();
+
+    const rawToken =
+      this.readString(configRecord.apiToken) ??
+      this.readString(configRecord.token) ??
+      this.readString(configRecord.bearerToken) ??
+      this.findFirstString(credentials, API_TOKEN_KEYS);
+
+    if (rawToken === undefined) {
+      throw new Error(`OpenClaw provider ${this.providerId} is missing apiToken credentials`);
+    }
+
+    try {
+      return this.encryptionService.decryptIfNeeded(rawToken);
+    } catch (error) {
+      throw new Error(`Failed to decrypt API token: ${this.toErrorMessage(error)}`);
+    }
+  }
+
+  private readCredentials(): JsonRecord {
+    return this.isRecord(this.config.credentials) ? this.config.credentials : {};
+  }
+
+  private findFirstString(record: JsonRecord, keys: readonly string[]): string | undefined {
+    for (const key of keys) {
+      const value = this.readString(record[key]);
+      if (value !== undefined) {
+        return value;
+      }
+    }
+
+    return undefined;
+  }
+
+  private authHeaders(extraHeaders: Record<string, string> = {}): Record<string, string> {
+    return {
+      Authorization: `Bearer ${this.resolveApiToken()}`,
+      ...extraHeaders,
+    };
+  }
+
+  private buildUrl(path: string): string {
+    return new URL(path, `${this.resolveBaseUrl()}/`).toString();
+  }
+
+  private isRecord(value: unknown): value is JsonRecord {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  }
+
+  private readString(value: unknown): string | undefined {
+    if (typeof value !== "string") {
+      return undefined;
+    }
+
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+  }
+
+  private getHttpStatus(error: unknown): number | undefined {
+    if (typeof error !== "object" || error === null || !("response" in error)) {
+      return undefined;
+    }
+
+    const response = (error as HttpErrorWithResponse).response;
+    return typeof response?.status === "number" ? response.status : undefined;
+  }
+
+  private toServiceUnavailable(operation: string, error: unknown): ServiceUnavailableException {
+    return new ServiceUnavailableException(
+      `OpenClaw provider ${this.providerId} failed to ${operation}: ${this.toErrorMessage(error)}`
+    );
+  }
+
+  private toErrorMessage(error: unknown): string {
+    if (error instanceof Error) {
+      return error.message;
+    }
+
+    return String(error);
+  }
+}

apps/orchestrator/src/api/providers/providers.module.spec.ts

@@ -0,0 +1,131 @@
+import { Logger } from "@nestjs/common";
+import type { AgentProviderConfig } from "@prisma/client";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { PrismaService } from "../../prisma/prisma.service";
+import { AgentProviderRegistry } from "../agents/agent-provider.registry";
+import { OpenClawProviderFactory } from "./openclaw/openclaw.provider-factory";
+import { ProvidersModule } from "./providers.module";
+
+type MockOpenClawProvider = {
+  providerId: string;
+  validateBaseUrl: ReturnType<typeof vi.fn>;
+  validateToken: ReturnType<typeof vi.fn>;
+  isAvailable: ReturnType<typeof vi.fn>;
+};
+
+describe("ProvidersModule", () => {
+  let moduleRef: ProvidersModule;
+  let prisma: {
+    agentProviderConfig: {
+      findMany: ReturnType<typeof vi.fn>;
+    };
+  };
+  let registry: {
+    registerProvider: ReturnType<typeof vi.fn>;
+  };
+  let factory: {
+    createProvider: ReturnType<typeof vi.fn>;
+  };
+
+  const config: AgentProviderConfig = {
+    id: "cfg-openclaw-1",
+    workspaceId: "workspace-1",
+    name: "openclaw-home",
+    provider: "openclaw",
+    gatewayUrl: "https://gateway.example.com",
+    credentials: { apiToken: "enc:token-value" },
+    isActive: true,
+    createdAt: new Date("2026-03-07T15:00:00.000Z"),
+    updatedAt: new Date("2026-03-07T15:00:00.000Z"),
+  };
+
+  beforeEach(() => {
+    prisma = {
+      agentProviderConfig: {
+        findMany: vi.fn(),
+      },
+    };
+
+    registry = {
+      registerProvider: vi.fn(),
+    };
+
+    factory = {
+      createProvider: vi.fn(),
+    };
+
+    moduleRef = new ProvidersModule(
+      prisma as unknown as PrismaService,
+      registry as unknown as AgentProviderRegistry,
+      factory as unknown as OpenClawProviderFactory
+    );
+  });
+
+  it("registers reachable OpenClaw providers", async () => {
+    const provider: MockOpenClawProvider = {
+      providerId: "openclaw-home",
+      validateBaseUrl: vi.fn(),
+      validateToken: vi.fn(),
+      isAvailable: vi.fn().mockResolvedValue(true),
+    };
+
+    prisma.agentProviderConfig.findMany.mockResolvedValue([config]);
+    factory.createProvider.mockReturnValue(provider);
+
+    await moduleRef.onModuleInit();
+
+    expect(prisma.agentProviderConfig.findMany).toHaveBeenCalledWith({
+      where: {
+        provider: "openclaw",
+        isActive: true,
+      },
+      orderBy: [{ createdAt: "asc" }, { id: "asc" }],
+    });
+    expect(factory.createProvider).toHaveBeenCalledWith(config);
+    expect(provider.validateBaseUrl).toHaveBeenCalledTimes(1);
+    expect(provider.validateToken).toHaveBeenCalledTimes(1);
+    expect(provider.isAvailable).toHaveBeenCalledTimes(1);
+    expect(registry.registerProvider).toHaveBeenCalledWith(provider);
+  });
+
+  it("skips provider registration when gateway is unreachable", async () => {
+    const warnSpy = vi.spyOn(Logger.prototype, "warn").mockImplementation(() => undefined);
+    const provider: MockOpenClawProvider = {
+      providerId: "openclaw-home",
+      validateBaseUrl: vi.fn(),
+      validateToken: vi.fn(),
+      isAvailable: vi.fn().mockResolvedValue(false),
+    };
+
+    prisma.agentProviderConfig.findMany.mockResolvedValue([config]);
+    factory.createProvider.mockReturnValue(provider);
+
+    await moduleRef.onModuleInit();
+
+    expect(registry.registerProvider).not.toHaveBeenCalled();
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("Skipping OpenClaw provider openclaw-home")
+    );
+  });
+
+  it("skips provider registration when token decryption fails", async () => {
+    const errorSpy = vi.spyOn(Logger.prototype, "error").mockImplementation(() => undefined);
+    const provider: MockOpenClawProvider = {
+      providerId: "openclaw-home",
+      validateBaseUrl: vi.fn(),
+      validateToken: vi.fn().mockImplementation(() => {
+        throw new Error("Failed to decrypt API token");
+      }),
+      isAvailable: vi.fn().mockResolvedValue(true),
+    };
+
+    prisma.agentProviderConfig.findMany.mockResolvedValue([config]);
+    factory.createProvider.mockReturnValue(provider);
+
+    await moduleRef.onModuleInit();
+
+    expect(registry.registerProvider).not.toHaveBeenCalled();
+    expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining("token decryption failed"));
+    expect(provider.isAvailable).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,95 @@
+import { HttpModule } from "@nestjs/axios";
+import { Logger, Module, OnModuleInit } from "@nestjs/common";
+import type { AgentProviderConfig } from "@prisma/client";
+import { PrismaModule } from "../../prisma/prisma.module";
+import { PrismaService } from "../../prisma/prisma.service";
+import { EncryptionService } from "../../security/encryption.service";
+import { AgentProviderRegistry } from "../agents/agent-provider.registry";
+import { AgentsModule } from "../agents/agents.module";
+import { OpenClawProviderFactory } from "./openclaw/openclaw.provider-factory";
+import { OpenClawSseBridge } from "./openclaw/openclaw-sse.bridge";
+
+const OPENCLAW_PROVIDER_TYPE = "openclaw";
+
+@Module({
+  imports: [
+    AgentsModule,
+    PrismaModule,
+    HttpModule.register({
+      timeout: 10000,
+      maxRedirects: 5,
+    }),
+  ],
+  providers: [EncryptionService, OpenClawSseBridge, OpenClawProviderFactory],
+})
+export class ProvidersModule implements OnModuleInit {
+  private readonly logger = new Logger(ProvidersModule.name);
+
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly registry: AgentProviderRegistry,
+    private readonly openClawProviderFactory: OpenClawProviderFactory
+  ) {}
+
+  async onModuleInit(): Promise<void> {
+    const configs = await this.prisma.agentProviderConfig.findMany({
+      where: {
+        provider: OPENCLAW_PROVIDER_TYPE,
+        isActive: true,
+      },
+      orderBy: [{ createdAt: "asc" }, { id: "asc" }],
+    });
+
+    for (const config of configs) {
+      await this.registerProvider(config);
+    }
+  }
+
+  private async registerProvider(config: AgentProviderConfig): Promise<void> {
+    const provider = this.openClawProviderFactory.createProvider(config);
+
+    try {
+      provider.validateBaseUrl();
+    } catch (error) {
+      this.logger.warn(
+        `Skipping OpenClaw provider ${config.name}: invalid configuration (${this.toErrorMessage(error)})`
+      );
+      return;
+    }
+
+    try {
+      provider.validateToken();
+    } catch (error) {
+      this.logger.error(
+        `Skipping OpenClaw provider ${config.name}: token decryption failed (${this.toErrorMessage(error)})`
+      );
+      return;
+    }
+
+    try {
+      const available = await provider.isAvailable();
+      if (!available) {
+        this.logger.warn(
+          `Skipping OpenClaw provider ${config.name}: gateway ${config.gatewayUrl} is unreachable`
+        );
+        return;
+      }
+    } catch (error) {
+      this.logger.warn(
+        `Skipping OpenClaw provider ${config.name}: gateway ${config.gatewayUrl} is unreachable (${this.toErrorMessage(error)})`
+      );
+      return;
+    }
+
+    this.registry.registerProvider(provider);
+    this.logger.log(`Registered OpenClaw provider ${provider.providerId}`);
+  }
+
+  private toErrorMessage(error: unknown): string {
+    if (error instanceof Error) {
+      return error.message;
+    }
+
+    return String(error);
+  }
+}

apps/orchestrator/src/app.module.ts

@@ -7,6 +7,7 @@ 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 { ProvidersModule } from "./api/providers/providers.module";
 import { CoordinatorModule } from "./coordinator/coordinator.module";
 import { BudgetModule } from "./budget/budget.module";
 import { CIModule } from "./ci";
@@ -54,6 +55,7 @@ import { orchestratorConfig } from "./config/orchestrator.config";
     HealthModule,
     AgentsModule,
     AgentProvidersModule,
+    ProvidersModule,
     MissionControlModule,
     QueueApiModule,
     CoordinatorModule,

apps/orchestrator/src/auth/auth.module.ts

@@ -4,6 +4,6 @@ import { AuthGuard } from "./guards/auth.guard";
 
 @Module({
   providers: [OrchestratorApiKeyGuard, AuthGuard],
-  exports: [AuthGuard],
+  exports: [OrchestratorApiKeyGuard, AuthGuard],
 })
 export class AuthModule {}

apps/orchestrator/src/security/encryption.service.ts

@@ -0,0 +1,106 @@
+import { Injectable } from "@nestjs/common";
+import { ConfigService } from "@nestjs/config";
+import { createCipheriv, createDecipheriv, hkdfSync, randomBytes } from "node:crypto";
+
+const ALGORITHM = "aes-256-gcm";
+const ENCRYPTED_PREFIX = "enc:";
+const IV_LENGTH = 12;
+const AUTH_TAG_LENGTH = 16;
+const DERIVED_KEY_LENGTH = 32;
+const HKDF_SALT = "mosaic.crypto.v1";
+const HKDF_INFO = "mosaic-db-secret-encryption";
+
+@Injectable()
+export class EncryptionService {
+  private key: Buffer | null = null;
+
+  constructor(private readonly configService: ConfigService) {}
+
+  encryptIfNeeded(value: string): string {
+    if (this.isEncrypted(value)) {
+      return value;
+    }
+
+    return this.encrypt(value);
+  }
+
+  encrypt(plaintext: string): string {
+    try {
+      const iv = randomBytes(IV_LENGTH);
+      const cipher = createCipheriv(ALGORITHM, this.getOrCreateKey(), iv);
+      const ciphertext = Buffer.concat([cipher.update(plaintext, "utf8"), cipher.final()]);
+      const authTag = cipher.getAuthTag();
+      const payload = Buffer.concat([iv, ciphertext, authTag]);
+      return `${ENCRYPTED_PREFIX}${payload.toString("base64")}`;
+    } catch {
+      throw new Error("Failed to encrypt value");
+    }
+  }
+
+  decryptIfNeeded(value: string): string {
+    if (!this.isEncrypted(value)) {
+      return value;
+    }
+
+    return this.decrypt(value);
+  }
+
+  decrypt(encrypted: string): string {
+    if (!this.isEncrypted(encrypted)) {
+      throw new Error("Value is not encrypted");
+    }
+
+    const payloadBase64 = encrypted.slice(ENCRYPTED_PREFIX.length);
+
+    try {
+      const payload = Buffer.from(payloadBase64, "base64");
+      if (payload.length < IV_LENGTH + AUTH_TAG_LENGTH) {
+        throw new Error("Encrypted payload is too short");
+      }
+
+      const iv = payload.subarray(0, IV_LENGTH);
+      const authTag = payload.subarray(payload.length - AUTH_TAG_LENGTH);
+      const ciphertext = payload.subarray(IV_LENGTH, payload.length - AUTH_TAG_LENGTH);
+
+      const decipher = createDecipheriv(ALGORITHM, this.getOrCreateKey(), iv);
+      decipher.setAuthTag(authTag);
+
+      return Buffer.concat([decipher.update(ciphertext), decipher.final()]).toString("utf8");
+    } catch {
+      throw new Error("Failed to decrypt value");
+    }
+  }
+
+  isEncrypted(value: string): boolean {
+    return value.startsWith(ENCRYPTED_PREFIX);
+  }
+
+  private getOrCreateKey(): Buffer {
+    if (this.key !== null) {
+      return this.key;
+    }
+
+    const secret = this.configService.get<string>("MOSAIC_SECRET_KEY");
+    if (!secret) {
+      throw new Error(
+        "orchestrator: MOSAIC_SECRET_KEY is required. Set it in your config or via MOSAIC_SECRET_KEY."
+      );
+    }
+
+    if (secret.length < 32) {
+      throw new Error("MOSAIC_SECRET_KEY must be at least 32 characters");
+    }
+
+    this.key = Buffer.from(
+      hkdfSync(
+        "sha256",
+        Buffer.from(secret, "utf8"),
+        Buffer.from(HKDF_SALT, "utf8"),
+        Buffer.from(HKDF_INFO, "utf8"),
+        DERIVED_KEY_LENGTH
+      )
+    );
+
+    return this.key;
+  }
+}

apps/orchestrator/tests/integration/ms23-p3-gate.spec.ts

@@ -0,0 +1,315 @@
+import type { HttpService } from "@nestjs/axios";
+import type {
+  AgentMessage,
+  AgentSession,
+  AgentSessionList,
+  IAgentProvider,
+  InjectResult,
+} from "@mosaic/shared";
+import type { AgentProviderConfig } from "@prisma/client";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { InternalAgentProvider } from "../../src/api/agents/internal-agent.provider";
+import { AgentProviderRegistry } from "../../src/api/agents/agent-provider.registry";
+import { MissionControlController } from "../../src/api/mission-control/mission-control.controller";
+import { MissionControlService } from "../../src/api/mission-control/mission-control.service";
+import { OpenClawProviderFactory } from "../../src/api/providers/openclaw/openclaw.provider-factory";
+import { OpenClawSseBridge } from "../../src/api/providers/openclaw/openclaw-sse.bridge";
+import { ProvidersModule } from "../../src/api/providers/providers.module";
+import type { PrismaService } from "../../src/prisma/prisma.service";
+import type { EncryptionService } from "../../src/security/encryption.service";
+
+type MockProvider = IAgentProvider & {
+  listSessions: ReturnType<typeof vi.fn>;
+  getSession: ReturnType<typeof vi.fn>;
+  injectMessage: ReturnType<typeof vi.fn>;
+  pauseSession: ReturnType<typeof vi.fn>;
+  killSession: ReturnType<typeof vi.fn>;
+};
+
+type MockPrisma = {
+  agentProviderConfig: {
+    create: ReturnType<typeof vi.fn>;
+    findMany: ReturnType<typeof vi.fn>;
+  };
+  operatorAuditLog: {
+    create: ReturnType<typeof vi.fn>;
+  };
+};
+
+const emptyMessageStream = async function* (): AsyncIterable<AgentMessage> {
+  return;
+};
+
+describe("MS23-P3-004 API integration", () => {
+  let controller: MissionControlController;
+  let providersModule: ProvidersModule;
+  let registry: AgentProviderRegistry;
+  let prisma: MockPrisma;
+  let httpService: {
+    axiosRef: {
+      get: ReturnType<typeof vi.fn>;
+      post: ReturnType<typeof vi.fn>;
+    };
+  };
+
+  const gatewayUrl = "https://openclaw-gateway.example.com";
+  const internalSession: AgentSession = {
+    id: "session-internal-1",
+    providerId: "internal",
+    providerType: "internal",
+    status: "active",
+    createdAt: new Date("2026-03-07T16:00:00.000Z"),
+    updatedAt: new Date("2026-03-07T16:02:00.000Z"),
+  };
+
+  const openClawGatewaySession = {
+    id: "session-openclaw-1",
+    status: "running",
+    createdAt: "2026-03-07T16:01:00.000Z",
+    updatedAt: "2026-03-07T16:03:00.000Z",
+  };
+
+  const createInternalProvider = (session: AgentSession): MockProvider => ({
+    providerId: "internal",
+    providerType: "internal",
+    displayName: "Internal",
+    listSessions: vi.fn().mockResolvedValue({ sessions: [session], total: 1 } as AgentSessionList),
+    getSession: vi.fn().mockImplementation(async (sessionId: string) => {
+      return sessionId === session.id ? session : null;
+    }),
+    getMessages: vi.fn().mockResolvedValue([]),
+    injectMessage: vi.fn().mockResolvedValue({ accepted: true } as InjectResult),
+    pauseSession: vi.fn().mockResolvedValue(undefined),
+    resumeSession: vi.fn().mockResolvedValue(undefined),
+    killSession: vi.fn().mockResolvedValue(undefined),
+    streamMessages: vi.fn().mockReturnValue(emptyMessageStream()),
+    isAvailable: vi.fn().mockResolvedValue(true),
+  });
+
+  beforeEach(() => {
+    const providerConfigs: AgentProviderConfig[] = [];
+
+    prisma = {
+      agentProviderConfig: {
+        create: vi.fn().mockImplementation(async (args: { data: Record<string, unknown> }) => {
+          const now = new Date("2026-03-07T15:00:00.000Z");
+          const record: AgentProviderConfig = {
+            id: `cfg-${String(providerConfigs.length + 1)}`,
+            workspaceId: String(args.data.workspaceId),
+            name: String(args.data.name),
+            provider: String(args.data.provider),
+            gatewayUrl: String(args.data.gatewayUrl),
+            credentials: (args.data.credentials ?? {}) as AgentProviderConfig["credentials"],
+            isActive: args.data.isActive !== false,
+            createdAt: now,
+            updatedAt: now,
+          };
+
+          providerConfigs.push(record);
+          return record;
+        }),
+        findMany: vi
+          .fn()
+          .mockImplementation(
+            async (args: { where?: { provider?: string; isActive?: boolean } }) => {
+              const where = args.where ?? {};
+              return providerConfigs.filter((config) => {
+                if (where.provider !== undefined && config.provider !== where.provider) {
+                  return false;
+                }
+
+                if (where.isActive !== undefined && config.isActive !== where.isActive) {
+                  return false;
+                }
+
+                return true;
+              });
+            }
+          ),
+      },
+      operatorAuditLog: {
+        create: vi.fn().mockResolvedValue(undefined),
+      },
+    };
+
+    httpService = {
+      axiosRef: {
+        get: vi.fn().mockImplementation(async (url: string) => {
+          if (url === `${gatewayUrl}/api/sessions`) {
+            return {
+              data: {
+                sessions: [openClawGatewaySession],
+                total: 1,
+              },
+            };
+          }
+
+          if (url === `${gatewayUrl}/api/sessions/${openClawGatewaySession.id}`) {
+            return {
+              data: {
+                session: openClawGatewaySession,
+              },
+            };
+          }
+
+          throw new Error(`Unexpected GET ${url}`);
+        }),
+        post: vi.fn().mockImplementation(async (url: string) => {
+          if (url.endsWith("/inject")) {
+            return { data: { accepted: true, messageId: "msg-inject-1" } };
+          }
+
+          if (url.endsWith("/pause") || url.endsWith("/kill")) {
+            return { data: {} };
+          }
+
+          throw new Error(`Unexpected POST ${url}`);
+        }),
+      },
+    };
+
+    const internalProvider = createInternalProvider(internalSession);
+    registry = new AgentProviderRegistry(internalProvider as unknown as InternalAgentProvider);
+    registry.onModuleInit();
+
+    const encryptionService = {
+      decryptIfNeeded: vi.fn().mockReturnValue("plain-openclaw-token"),
+    };
+
+    const sseBridge = new OpenClawSseBridge(httpService as unknown as HttpService);
+    const openClawProviderFactory = new OpenClawProviderFactory(
+      encryptionService as unknown as EncryptionService,
+      httpService as unknown as HttpService,
+      sseBridge
+    );
+
+    providersModule = new ProvidersModule(
+      prisma as unknown as PrismaService,
+      registry,
+      openClawProviderFactory
+    );
+
+    const missionControlService = new MissionControlService(
+      registry,
+      prisma as unknown as PrismaService
+    );
+
+    controller = new MissionControlController(missionControlService);
+  });
+
+  it("Phase 3 gate: OpenClaw provider config registered in DB → provider loaded on boot → sessions returned from /api/mission-control/sessions → inject/pause/kill proxied to gateway", async () => {
+    await prisma.agentProviderConfig.create({
+      data: {
+        workspaceId: "workspace-ms23",
+        name: "openclaw-home",
+        provider: "openclaw",
+        gatewayUrl,
+        credentials: {
+          apiToken: "enc:test-openclaw-token",
+        },
+        isActive: true,
+      },
+    });
+
+    await providersModule.onModuleInit();
+
+    // Equivalent to GET /api/mission-control/sessions
+    const sessionsResponse = await controller.listSessions();
+
+    expect(sessionsResponse.sessions.map((session) => session.id)).toEqual([
+      "session-openclaw-1",
+      "session-internal-1",
+    ]);
+    expect(sessionsResponse.sessions).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: "session-internal-1",
+          providerId: "internal",
+        }),
+        expect.objectContaining({
+          id: "session-openclaw-1",
+          providerId: "openclaw-home",
+          providerType: "openclaw",
+        }),
+      ])
+    );
+
+    const operatorRequest = {
+      user: {
+        id: "operator-ms23",
+      },
+    };
+
+    await expect(
+      controller.injectMessage(
+        "session-openclaw-1",
+        {
+          message: "Ship it",
+        },
+        operatorRequest
+      )
+    ).resolves.toEqual({ accepted: true, messageId: "msg-inject-1" });
+
+    await expect(controller.pauseSession("session-openclaw-1", operatorRequest)).resolves.toEqual({
+      message: "Session session-openclaw-1 paused",
+    });
+
+    await expect(
+      controller.killSession(
+        "session-openclaw-1",
+        {
+          force: false,
+        },
+        operatorRequest
+      )
+    ).resolves.toEqual({ message: "Session session-openclaw-1 killed" });
+
+    expect(httpService.axiosRef.post).toHaveBeenNthCalledWith(
+      1,
+      `${gatewayUrl}/api/sessions/session-openclaw-1/inject`,
+      { content: "Ship it" },
+      {
+        headers: {
+          Authorization: "Bearer plain-openclaw-token",
+        },
+      }
+    );
+
+    expect(httpService.axiosRef.post).toHaveBeenNthCalledWith(
+      2,
+      `${gatewayUrl}/api/sessions/session-openclaw-1/pause`,
+      {},
+      {
+        headers: {
+          Authorization: "Bearer plain-openclaw-token",
+        },
+      }
+    );
+
+    expect(httpService.axiosRef.post).toHaveBeenNthCalledWith(
+      3,
+      `${gatewayUrl}/api/sessions/session-openclaw-1/kill`,
+      { force: false },
+      {
+        headers: {
+          Authorization: "Bearer plain-openclaw-token",
+        },
+      }
+    );
+
+    expect(prisma.operatorAuditLog.create).toHaveBeenNthCalledWith(1, {
+      data: {
+        sessionId: "session-openclaw-1",
+        userId: "operator-ms23",
+        provider: "openclaw-home",
+        action: "inject",
+        content: "Ship it",
+        metadata: {
+          payload: {
+            message: "Ship it",
+          },
+        },
+      },
+    });
+  });
+});

apps/orchestrator/tests/integration/vitest.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: "node",
-    include: ["**/*.e2e-spec.ts"],
+    include: ["tests/integration/**/*.e2e-spec.ts", "tests/integration/**/*.spec.ts"],
     testTimeout: 30000,
   },
 });

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mosaic/web",
-  "version": "0.0.20",
+  "version": "0.0.23",
   "private": true,
   "scripts": {
     "build": "next build",

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 = screen.getAllByRole("button", { name: /\+ Add task/i });
+    const addTaskButtons = await screen.findAllByRole("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 = screen.getAllByRole("button", { name: /\+ Add task/i });
+    const addTaskButtons = await screen.findAllByRole("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

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

apps/web/src/app/(authenticated)/settings/agent-providers/page.tsx

@@ -0,0 +1,528 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type ChangeEvent,
+  type ReactElement,
+  type SyntheticEvent,
+} from "react";
+import { Pencil, Trash2 } from "lucide-react";
+import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
+import {
+  createAgentProvider,
+  deleteAgentProvider,
+  fetchAgentProviders,
+  updateAgentProvider,
+  type AgentProviderConfig,
+  type CreateAgentProviderRequest,
+  type UpdateAgentProviderRequest,
+} from "@/lib/api/agent-providers";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
+interface ProviderFormData {
+  name: string;
+  provider: "openclaw";
+  gatewayUrl: string;
+  apiToken: string;
+  isActive: boolean;
+}
+
+const NAME_PATTERN = /^[a-zA-Z0-9-]+$/;
+
+const INITIAL_FORM: ProviderFormData = {
+  name: "",
+  provider: "openclaw",
+  gatewayUrl: "",
+  apiToken: "",
+  isActive: true,
+};
+
+function getErrorMessage(error: unknown, fallback: string): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+
+  return fallback;
+}
+
+function isValidHttpsUrl(value: string): boolean {
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function formatCreatedDate(value: string): string {
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) {
+    return "Unknown";
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(parsed);
+}
+
+function validateForm(form: ProviderFormData, isEditing: boolean): string | null {
+  const name = form.name.trim();
+  if (name.length === 0) {
+    return "Name is required.";
+  }
+
+  if (!NAME_PATTERN.test(name)) {
+    return "Name must contain only letters, numbers, and hyphens.";
+  }
+
+  const gatewayUrl = form.gatewayUrl.trim();
+  if (gatewayUrl.length === 0) {
+    return "Gateway URL is required.";
+  }
+
+  if (!isValidHttpsUrl(gatewayUrl)) {
+    return "Gateway URL must be a valid https:// URL.";
+  }
+
+  if (!isEditing && form.apiToken.trim().length === 0) {
+    return "API token is required when creating a provider.";
+  }
+
+  return null;
+}
+
+export default function AgentProvidersSettingsPage(): ReactElement {
+  const [providers, setProviders] = useState<AgentProviderConfig[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+  const [editingProvider, setEditingProvider] = useState<AgentProviderConfig | null>(null);
+  const [form, setForm] = useState<ProviderFormData>(INITIAL_FORM);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+
+  const [deleteTarget, setDeleteTarget] = useState<AgentProviderConfig | null>(null);
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+
+  const loadProviders = useCallback(async (showLoadingState: boolean): Promise<void> => {
+    if (showLoadingState) {
+      setIsLoading(true);
+    } else {
+      setIsRefreshing(true);
+    }
+
+    try {
+      const data = await fetchAgentProviders();
+      setProviders(data);
+      setError(null);
+    } catch (loadError: unknown) {
+      setError(getErrorMessage(loadError, "Failed to load agent providers."));
+    } finally {
+      setIsLoading(false);
+      setIsRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProviders(true);
+  }, [loadProviders]);
+
+  function openCreateDialog(): void {
+    setEditingProvider(null);
+    setForm(INITIAL_FORM);
+    setFormError(null);
+    setIsDialogOpen(true);
+  }
+
+  function openEditDialog(provider: AgentProviderConfig): void {
+    setEditingProvider(provider);
+    setForm({
+      name: provider.name,
+      provider: "openclaw",
+      gatewayUrl: provider.gatewayUrl,
+      apiToken: "",
+      isActive: provider.isActive,
+    });
+    setFormError(null);
+    setIsDialogOpen(true);
+  }
+
+  function closeDialog(): void {
+    if (isSaving) {
+      return;
+    }
+
+    setIsDialogOpen(false);
+    setEditingProvider(null);
+    setForm(INITIAL_FORM);
+    setFormError(null);
+  }
+
+  async function handleSubmit(event: SyntheticEvent): Promise<void> {
+    event.preventDefault();
+    setFormError(null);
+    setSuccessMessage(null);
+
+    const validationError = validateForm(form, editingProvider !== null);
+    if (validationError !== null) {
+      setFormError(validationError);
+      return;
+    }
+
+    const name = form.name.trim();
+    const gatewayUrl = form.gatewayUrl.trim();
+    const apiToken = form.apiToken.trim();
+
+    try {
+      setIsSaving(true);
+
+      if (editingProvider) {
+        const updatePayload: UpdateAgentProviderRequest = {
+          name,
+          provider: form.provider,
+          gatewayUrl,
+          isActive: form.isActive,
+        };
+
+        if (apiToken.length > 0) {
+          updatePayload.credentials = { apiToken };
+        }
+
+        await updateAgentProvider(editingProvider.id, updatePayload);
+        setSuccessMessage(`Updated provider "${name}".`);
+      } else {
+        const createPayload: CreateAgentProviderRequest = {
+          name,
+          provider: form.provider,
+          gatewayUrl,
+          credentials: { apiToken },
+          isActive: form.isActive,
+        };
+
+        await createAgentProvider(createPayload);
+        setSuccessMessage(`Added provider "${name}".`);
+      }
+
+      setIsDialogOpen(false);
+      setEditingProvider(null);
+      setForm(INITIAL_FORM);
+      await loadProviders(false);
+    } catch (saveError: unknown) {
+      setFormError(getErrorMessage(saveError, "Unable to save agent provider."));
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function handleDeleteProvider(): Promise<void> {
+    if (!deleteTarget) {
+      return;
+    }
+
+    try {
+      setIsDeleting(true);
+      await deleteAgentProvider(deleteTarget.id);
+      setSuccessMessage(`Deleted provider "${deleteTarget.name}".`);
+      setDeleteTarget(null);
+      await loadProviders(false);
+    } catch (deleteError: unknown) {
+      setError(getErrorMessage(deleteError, "Failed to delete agent provider."));
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      <div className="space-y-4">
+        <div>
+          <h1 className="text-3xl font-bold">Agent Providers</h1>
+          <p className="text-muted-foreground mt-1">
+            Register OpenClaw gateways and API tokens used for external agent sessions.
+          </p>
+        </div>
+        <FleetSettingsNav />
+      </div>
+
+      <Card>
+        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle>OpenClaw Gateways</CardTitle>
+            <CardDescription>
+              Add one or more OpenClaw gateway endpoints and control which ones are active.
+            </CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                void loadProviders(false);
+              }}
+              disabled={isLoading || isRefreshing}
+            >
+              {isRefreshing ? "Refreshing..." : "Refresh"}
+            </Button>
+            <Button onClick={openCreateDialog}>Add Provider</Button>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-3">
+          {error ? (
+            <p className="text-sm text-destructive" role="alert">
+              {error}
+            </p>
+          ) : null}
+
+          {successMessage ? <p className="text-sm text-emerald-600">{successMessage}</p> : null}
+
+          {isLoading ? (
+            <p className="text-sm text-muted-foreground">Loading agent providers...</p>
+          ) : providers.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              No agent providers configured yet. Add one to register an OpenClaw gateway.
+            </p>
+          ) : (
+            providers.map((provider) => (
+              <div
+                key={provider.id}
+                className="rounded-lg border p-4 flex flex-col gap-4 md:flex-row md:items-start md:justify-between"
+              >
+                <div className="space-y-2 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <p className="font-semibold truncate">{provider.name}</p>
+                    <Badge variant={provider.isActive ? "default" : "secondary"}>
+                      {provider.isActive ? "Active" : "Inactive"}
+                    </Badge>
+                    <Badge variant="outline">{provider.provider}</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground break-all">
+                    Gateway URL: {provider.gatewayUrl}
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    Created: {formatCreatedDate(provider.createdAt)}
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      openEditDialog(provider);
+                    }}
+                  >
+                    <Pencil className="h-4 w-4 mr-2" />
+                    Edit
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => {
+                      setDeleteTarget(provider);
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            ))
+          )}
+        </CardContent>
+      </Card>
+
+      <Dialog
+        open={isDialogOpen}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            closeDialog();
+            return;
+          }
+
+          setIsDialogOpen(true);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {editingProvider ? "Edit Agent Provider" : "Add Agent Provider"}
+            </DialogTitle>
+            <DialogDescription>
+              Configure an OpenClaw gateway URL and API token for agent provider registration.
+            </DialogDescription>
+          </DialogHeader>
+
+          <form onSubmit={(event) => void handleSubmit(event)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="agent-provider-name">Name</Label>
+              <Input
+                id="agent-provider-name"
+                value={form.name}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setForm((previous) => ({ ...previous, name: event.target.value }));
+                }}
+                placeholder="openclaw-primary"
+                maxLength={100}
+                disabled={isSaving}
+                required
+              />
+              <p className="text-xs text-muted-foreground">
+                Use letters, numbers, and hyphens only.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="agent-provider-type">Provider Type</Label>
+              <Select
+                value={form.provider}
+                onValueChange={(value) => {
+                  if (value === "openclaw") {
+                    setForm((previous) => ({ ...previous, provider: value }));
+                  }
+                }}
+                disabled={isSaving}
+              >
+                <SelectTrigger id="agent-provider-type">
+                  <SelectValue placeholder="Select provider type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="openclaw">openclaw</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="agent-provider-gateway-url">Gateway URL</Label>
+              <Input
+                id="agent-provider-gateway-url"
+                value={form.gatewayUrl}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setForm((previous) => ({ ...previous, gatewayUrl: event.target.value }));
+                }}
+                placeholder="https://my-openclaw.example.com"
+                disabled={isSaving}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="agent-provider-api-token">API Token</Label>
+              <Input
+                id="agent-provider-api-token"
+                type="password"
+                value={form.apiToken}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setForm((previous) => ({ ...previous, apiToken: event.target.value }));
+                }}
+                placeholder={
+                  editingProvider ? "Leave blank to keep existing token" : "Enter API token"
+                }
+                autoComplete="new-password"
+                disabled={isSaving}
+              />
+              <p className="text-xs text-muted-foreground">
+                {editingProvider
+                  ? "Leave blank to keep the currently stored token."
+                  : "Required when creating a provider."}
+              </p>
+            </div>
+
+            <div className="flex items-center justify-between rounded-md border px-3 py-2">
+              <div>
+                <Label htmlFor="agent-provider-active">Provider Status</Label>
+                <p className="text-xs text-muted-foreground">
+                  Inactive providers remain saved but are excluded from routing.
+                </p>
+              </div>
+              <Switch
+                id="agent-provider-active"
+                checked={form.isActive}
+                onCheckedChange={(checked) => {
+                  setForm((previous) => ({ ...previous, isActive: checked }));
+                }}
+                disabled={isSaving}
+              />
+            </div>
+
+            {formError ? (
+              <p className="text-sm text-destructive" role="alert">
+                {formError}
+              </p>
+            ) : null}
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={closeDialog} disabled={isSaving}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {isSaving ? "Saving..." : editingProvider ? "Save Changes" : "Create Provider"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open && !isDeleting) {
+            setDeleteTarget(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Agent Provider</AlertDialogTitle>
+            <AlertDialogDescription>
+              Delete provider "{deleteTarget?.name}"? This permanently removes its gateway and token
+              configuration.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteProvider} disabled={isDeleting}>
+              {isDeleting ? "Deleting..." : "Delete Provider"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

apps/web/src/app/(authenticated)/settings/page.tsx

@@ -227,6 +227,33 @@ const categories: CategoryConfig[] = [
       </svg>
     ),
   },
+  {
+    title: "Agent Providers",
+    description:
+      "Register OpenClaw gateway URLs and API tokens for external agent provider routing.",
+    href: "/settings/agent-providers",
+    accent: "var(--ms-blue-400)",
+    iconBg: "rgba(47, 128, 255, 0.12)",
+    icon: (
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M4 6.5h12" />
+        <path d="M6.5 10h7" />
+        <path d="M4 13.5h12" />
+        <circle cx="5.5" cy="10" r="1.5" />
+        <circle cx="14.5" cy="10" r="1.5" />
+      </svg>
+    ),
+  },
   {
     title: "Agent Config",
     description: "Choose primary and fallback models, plus optional personality/SOUL instructions.",

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

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

@@ -0,0 +1,348 @@
+"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;
+  notice?: string;
+}
+
+function createEmptyAuditLogResponse(page: number, notice?: string): AuditLogResponse {
+  return {
+    items: [],
+    total: 0,
+    page,
+    pages: 0,
+    ...(notice !== undefined ? { notice } : {}),
+  };
+}
+
+function isRateLimitError(error: unknown): boolean {
+  if (!(error instanceof Error)) {
+    return false;
+  }
+
+  return /429|rate limit|too many requests/i.test(error.message);
+}
+
+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);
+  }
+
+  try {
+    return await apiGet<AuditLogResponse>(`/api/mission-control/audit-log?${params.toString()}`);
+  } catch (error) {
+    if (isRateLimitError(error)) {
+      return createEmptyAuditLogResponse(page, "Rate limited - retrying...");
+    }
+
+    return createEmptyAuditLogResponse(page);
+  }
+}
+
+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 notice = auditLogQuery.data?.notice;
+
+  const canGoPrevious = page > 1;
+  const canGoNext = totalPages > 0 && page < totalPages;
+
+  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>
+                  ) : notice ? (
+                    <tr>
+                      <td colSpan={5} className="px-3 py-6 text-center text-sm text-muted-foreground">
+                        {notice}
+                      </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

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

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

@@ -0,0 +1,147 @@
+"use client";
+
+import { useCallback, useState, type KeyboardEvent } from "react";
+import { Loader2 } from "lucide-react";
+import { useToast } from "@mosaic/ui";
+import { Button } from "@/components/ui/button";
+import { apiPost } from "@/lib/api/client";
+
+const MAX_ROWS = 4;
+const TEXTAREA_MAX_HEIGHT_REM = 6.5;
+
+interface BargeInMutationResponse {
+  message?: string;
+}
+
+export interface BargeInInputProps {
+  sessionId: string;
+  onSent?: () => void;
+}
+
+function getErrorMessage(error: unknown): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+  return "Failed to send message to the session.";
+}
+
+export function BargeInInput({ sessionId, onSent }: BargeInInputProps): React.JSX.Element {
+  const { showToast } = useToast();
+  const [content, setContent] = useState("");
+  const [pauseBeforeSend, setPauseBeforeSend] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleSend = useCallback(async (): Promise<void> => {
+    const trimmedContent = content.trim();
+    if (!trimmedContent || isSending) {
+      return;
+    }
+
+    const encodedSessionId = encodeURIComponent(sessionId);
+    const baseEndpoint = `/api/mission-control/sessions/${encodedSessionId}`;
+    let didPause = false;
+    let didInject = false;
+
+    setIsSending(true);
+    setErrorMessage(null);
+
+    try {
+      if (pauseBeforeSend) {
+        await apiPost<BargeInMutationResponse>(`${baseEndpoint}/pause`);
+        didPause = true;
+      }
+
+      await apiPost<BargeInMutationResponse>(`${baseEndpoint}/inject`, { content: trimmedContent });
+      didInject = true;
+      setContent("");
+      onSent?.();
+    } catch (error) {
+      const message = getErrorMessage(error);
+      setErrorMessage(message);
+      showToast(message, "error");
+    } finally {
+      if (didPause) {
+        try {
+          await apiPost<BargeInMutationResponse>(`${baseEndpoint}/resume`);
+        } catch (resumeError) {
+          const resumeMessage = getErrorMessage(resumeError);
+          const message = didInject
+            ? `Message sent, but failed to resume session: ${resumeMessage}`
+            : `Failed to resume session: ${resumeMessage}`;
+          setErrorMessage(message);
+          showToast(message, "error");
+        }
+      }
+
+      setIsSending(false);
+    }
+  }, [content, isSending, onSent, pauseBeforeSend, sessionId, showToast]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        void handleSend();
+      }
+    },
+    [handleSend]
+  );
+
+  const isSendDisabled = isSending || content.trim().length === 0;
+
+  return (
+    <div className="space-y-2">
+      <textarea
+        value={content}
+        onChange={(event) => {
+          setContent(event.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+        disabled={isSending}
+        rows={MAX_ROWS}
+        placeholder="Inject a message into this session..."
+        className="block w-full resize-y rounded-md border border-border bg-background px-3 py-2 text-sm leading-5 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60"
+        style={{ maxHeight: `${String(TEXTAREA_MAX_HEIGHT_REM)}rem` }}
+        aria-label="Inject message"
+      />
+      <div className="flex items-center justify-between gap-3">
+        <label className="flex items-center gap-2 text-sm text-muted-foreground">
+          <input
+            type="checkbox"
+            checked={pauseBeforeSend}
+            onChange={(event) => {
+              setPauseBeforeSend(event.target.checked);
+            }}
+            disabled={isSending}
+            className="h-4 w-4 rounded border-border"
+          />
+          <span>Pause before send</span>
+        </label>
+        <Button
+          type="button"
+          variant="primary"
+          size="sm"
+          disabled={isSendDisabled}
+          onClick={() => {
+            void handleSend();
+          }}
+        >
+          {isSending ? (
+            <span className="flex items-center gap-2">
+              <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+              Sending...
+            </span>
+          ) : (
+            "Send"
+          )}
+        </Button>
+      </div>
+      {errorMessage ? (
+        <p role="alert" className="text-sm text-red-500">
+          {errorMessage}
+        </p>
+      ) : null}
+    </div>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,259 @@
+"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/onboarding/OnboardingWizard.test.tsx

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

apps/web/src/components/settings/FleetSettingsNav.tsx

@@ -11,6 +11,7 @@ interface FleetSettingsLink {
 
 const FLEET_SETTINGS_LINKS: FleetSettingsLink[] = [
   { href: "/settings/providers", label: "Providers" },
+  { href: "/settings/agent-providers", label: "Agent Providers" },
   { href: "/settings/agent-config", label: "Agent Config" },
   { href: "/settings/auth", label: "Authentication" },
 ];

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

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

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

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

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

@@ -0,0 +1,189 @@
+"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,
+  };
+}

apps/web/src/lib/api/agent-providers.test.ts

@@ -0,0 +1,79 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import * as client from "./client";
+import {
+  createAgentProvider,
+  deleteAgentProvider,
+  fetchAgentProviders,
+  updateAgentProvider,
+} from "./agent-providers";
+
+vi.mock("./client");
+
+beforeEach((): void => {
+  vi.clearAllMocks();
+});
+
+describe("fetchAgentProviders", (): void => {
+  it("calls provider list endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
+
+    await fetchAgentProviders();
+
+    expect(client.apiGet).toHaveBeenCalledWith("/api/agent-providers");
+  });
+});
+
+describe("createAgentProvider", (): void => {
+  it("posts create payload", async (): Promise<void> => {
+    vi.mocked(client.apiPost).mockResolvedValueOnce({ id: "provider-1" } as never);
+
+    await createAgentProvider({
+      name: "openclaw-primary",
+      provider: "openclaw",
+      gatewayUrl: "https://openclaw.example.com",
+      credentials: {
+        apiToken: "top-secret",
+      },
+      isActive: true,
+    });
+
+    expect(client.apiPost).toHaveBeenCalledWith("/api/agent-providers", {
+      name: "openclaw-primary",
+      provider: "openclaw",
+      gatewayUrl: "https://openclaw.example.com",
+      credentials: {
+        apiToken: "top-secret",
+      },
+      isActive: true,
+    });
+  });
+});
+
+describe("updateAgentProvider", (): void => {
+  it("sends PUT request with update payload", async (): Promise<void> => {
+    vi.mocked(client.apiRequest).mockResolvedValueOnce({ id: "provider-1" } as never);
+
+    await updateAgentProvider("provider-1", {
+      gatewayUrl: "https://new-openclaw.example.com",
+      isActive: false,
+    });
+
+    expect(client.apiRequest).toHaveBeenCalledWith("/api/agent-providers/provider-1", {
+      method: "PUT",
+      body: JSON.stringify({
+        gatewayUrl: "https://new-openclaw.example.com",
+        isActive: false,
+      }),
+    });
+  });
+});
+
+describe("deleteAgentProvider", (): void => {
+  it("calls delete endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
+
+    await deleteAgentProvider("provider-1");
+
+    expect(client.apiDelete).toHaveBeenCalledWith("/api/agent-providers/provider-1");
+  });
+});

apps/web/src/lib/api/agent-providers.ts

@@ -0,0 +1,61 @@
+import { apiDelete, apiGet, apiPost, apiRequest } from "./client";
+
+export type AgentProviderType = "openclaw";
+
+export interface AgentProviderCredentials {
+  apiToken?: string;
+}
+
+export interface AgentProviderConfig {
+  id: string;
+  workspaceId: string;
+  name: string;
+  provider: AgentProviderType;
+  gatewayUrl: string;
+  credentials: AgentProviderCredentials | null;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateAgentProviderRequest {
+  name: string;
+  provider: AgentProviderType;
+  gatewayUrl: string;
+  credentials: {
+    apiToken: string;
+  };
+  isActive: boolean;
+}
+
+export interface UpdateAgentProviderRequest {
+  name?: string;
+  provider?: AgentProviderType;
+  gatewayUrl?: string;
+  credentials?: AgentProviderCredentials;
+  isActive?: boolean;
+}
+
+export async function fetchAgentProviders(): Promise<AgentProviderConfig[]> {
+  return apiGet<AgentProviderConfig[]>("/api/agent-providers");
+}
+
+export async function createAgentProvider(
+  data: CreateAgentProviderRequest
+): Promise<AgentProviderConfig> {
+  return apiPost<AgentProviderConfig>("/api/agent-providers", data);
+}
+
+export async function updateAgentProvider(
+  providerId: string,
+  data: UpdateAgentProviderRequest
+): Promise<AgentProviderConfig> {
+  return apiRequest<AgentProviderConfig>(`/api/agent-providers/${providerId}`, {
+    method: "PUT",
+    body: JSON.stringify(data),
+  });
+}
+
+export async function deleteAgentProvider(providerId: string): Promise<void> {
+  await apiDelete<unknown>(`/api/agent-providers/${providerId}`);
+}

apps/web/src/lib/api/index.ts

@@ -18,4 +18,5 @@ export * from "./projects";
 export * from "./workspaces";
 export * from "./admin";
 export * from "./fleet-settings";
+export * from "./agent-providers";
 export * from "./activity";

docs/CHANGELOG.md

@@ -62,6 +62,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated Makefile with Traefik deployment shortcuts
 - Enhanced docker-compose.override.yml.example with Traefik examples
 
+## [0.0.23] - 2026-03-07
+
+### Added
+
+- **Mission Control Dashboard** — real-time agent orchestration UI at `/mission-control`
+  - Live SSE message streams per agent (`OrchestratorPanel`)
+  - Barge-in input with optional pause-before-send
+  - Pause / Resume / Graceful Kill / Force Kill controls per agent panel
+  - Global agent roster sidebar with tree view and per-agent kill
+  - KillAllDialog with scope selector (requires typing `KILL ALL` to confirm)
+  - AuditLogDrawer with paginated operator action history
+  - Responsive panel grid: up to 6 panels, add/remove, full-screen expand
+- **Agent Provider Interface** — extensible `IAgentProvider` plugin system
+  - `InternalAgentProvider` wrapping existing orchestrator services
+  - `AgentProviderRegistry` aggregating sessions across providers
+  - `AgentProviderConfig` CRUD API (`/api/agent-providers`)
+  - Mission Control proxy API (`/api/mission-control/*`) with SSE proxying and audit log
+- **OpenClaw Provider Adapter** — connect external OpenClaw instances
+  - `OpenClawProvider` implementing `IAgentProvider` against OpenClaw REST API
+  - Dedicated `OpenClawSseBridge` with retry logic (5 retries, 2s backoff)
+  - Provider config UI in Settings for registering OpenClaw gateways
+  - Tokens encrypted at rest via `EncryptionService` (AES-256-GCM)
+- **OperatorAuditLog** — every inject/pause/resume/kill persisted to DB
+
+### Changed
+
+- Orchestrator app: extended with `AgentsModule` exports for provider registry
+- Settings navigation: added "Agent Providers" section
+
+### Fixed
+
+- Flaky web tests: async query timing in Kanban and OnboardingWizard tests
+
 ## [0.0.1] - 2026-01-28
 
 ### Added
@@ -79,5 +112,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Documentation structure (Bookstack-compatible hierarchy)
 - Development workflow and coding standards
 
-[Unreleased]: https://git.mosaicstack.dev/mosaic/stack/compare/v0.0.1...HEAD
+[Unreleased]: https://git.mosaicstack.dev/mosaic/stack/compare/v0.0.23...HEAD
+[0.0.23]: https://git.mosaicstack.dev/mosaic/stack/releases/tag/v0.0.23
 [0.0.1]: https://git.mosaicstack.dev/mosaic/stack/releases/tag/v0.0.1

docs/ROADMAP.md

@@ -1,6 +1,6 @@
 # Mosaic Stack Roadmap
 
-**Last Updated:** 2026-01-29  
+**Last Updated:** 2026-03-07  
 **Authoritative Source:** [Issues & Milestones](https://git.mosaicstack.dev/mosaic/stack/issues)
 
 ## Versioning Policy
@@ -12,6 +12,20 @@
 | `0.x.y` | Pre-stable iteration, API may change with notice |
 | `1.0.0` | Stable release, public API contract              |
 
+## Release Track (Current)
+
+### ✅ v0.0.23 — Mission Control Dashboard (Complete)
+
+- Mission Control dashboard shipped at `/mission-control`
+- Agent provider plugin system and Mission Control proxy API shipped
+- OpenClaw provider adapter shipped with encrypted token storage
+- Operator audit logging persisted for inject/pause/resume/kill actions
+
+### 📋 v0.0.24 — Placeholder
+
+- Scope TBD (to be defined after v0.0.23 production deployment)
+- Initial release notes and roadmap breakdown pending
+
 ---
 
 ## Milestone Overview

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mosaic-stack",
-  "version": "0.0.20",
+  "version": "0.0.23",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@10.19.0",

pnpm-lock.yaml

@@ -319,6 +319,9 @@ importers:
       '@mosaic/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      '@nestjs/axios':
+        specifier: ^4.0.1
+        version: 4.0.1(@nestjs/common@11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(axios@1.13.5)(rxjs@7.8.2)
       '@nestjs/bullmq':
         specifier: ^11.0.4
         version: 11.0.4(@nestjs/common@11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.12)(bullmq@5.67.2)