Compare commits

..

11 Commits

Author SHA1 Message Date
495d78115e feat(orchestrator): add OpenClaw SSE bridge streaming
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 16:20:27 -06:00
563d59ad5d Merge pull request 'feat(orchestrator): MS23-P3-001 OpenClawProvider' (#735) from feat/ms23-p3-openclaw-provider into main
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 22:06:31 +00:00
da6e055113 feat(orchestrator): MS23-P3-001 OpenClawProvider
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 15:58:56 -06:00
0441d44f42 Merge pull request 'test(web): MS23-P2-009 Mission Control frontend tests' (#733) from test/ms23-p2 into main
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 21:38:36 +00:00
7147dc3503 test(web): MS23-P2-009 Mission Control frontend tests
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 15:27:36 -06:00
f0aa3b5a75 test(web): add Mission Control frontend tests for phase 2 gate
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 15:25:39 -06:00
11d64341b1 Merge pull request 'fix(web): MS23-P2 restore main branch CI' (#732) from fix/ms23-p2-main into main
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 21:08:54 +00:00
90d2fa7563 fix(web): MS23-P2 fix broken lint/typecheck on main
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 14:55:04 -06:00
31af6c26ec Merge pull request 'feat(web): MS23-P2-008 Panel grid responsive layout' (#731) from feat/ms23-p2-grid into main
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 20:48:36 +00:00
e4f942dde7 feat(web): MS23-P2-008 panel grid responsive layout
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 14:47:39 -06:00
4ea31c5749 Merge pull request 'feat: MS23-P2-007 AuditLogDrawer + audit log endpoint' (#730) from feat/ms23-p2-audit into main
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-07 20:40:21 +00:00
24 changed files with 3393 additions and 43 deletions

View File

@@ -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",

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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,

View File

@@ -0,0 +1,85 @@
import { Injectable } from "@nestjs/common";
import { ConfigService } from "@nestjs/config";
import { createDecipheriv, hkdfSync } 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) {}
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;
}
}

View File

@@ -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]!);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,21 +1,86 @@
"use client";
import { useState } from "react";
import { useCallback, useState } from "react";
import { AuditLogDrawer } from "@/components/mission-control/AuditLogDrawer";
import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";
import {
MAX_PANEL_COUNT,
MIN_PANEL_COUNT,
MissionControlPanel,
type PanelConfig,
} from "@/components/mission-control/MissionControlPanel";
import { Button } from "@/components/ui/button";
import { useSessions } from "@/hooks/useMissionControl";
const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as const;
const INITIAL_PANELS: PanelConfig[] = [{}];
export function MissionControlLayout(): React.JSX.Element {
const { sessions } = useSessions();
const [panels, setPanels] = useState<PanelConfig[]>(INITIAL_PANELS);
const [selectedSessionId, setSelectedSessionId] = useState<string>();
// First panel: selected session (from roster click) or first available session
const firstPanelSessionId = selectedSessionId ?? sessions[0]?.id;
const panelSessionIds = [firstPanelSessionId, undefined, undefined, undefined] as const;
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">
@@ -32,12 +97,17 @@ export function MissionControlLayout(): React.JSX.Element {
<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={setSelectedSessionId}
onSelectSession={handleSelectSession}
{...(selectedSessionId !== undefined ? { selectedSessionId } : {})}
/>
</aside>
<main className="h-full min-h-0 overflow-hidden">
<MissionControlPanel panels={DEFAULT_PANEL_SLOTS} panelSessionIds={panelSessionIds} />
<MissionControlPanel
panels={panels}
onAddPanel={handleAddPanel}
onRemovePanel={handleRemovePanel}
onExpandPanel={handleExpandPanel}
/>
</main>
</div>
</section>

View File

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

View File

@@ -1,27 +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: readonly string[];
panelSessionIds?: readonly (string | undefined)[];
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,
panelSessionIds,
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="grid h-full min-h-0 auto-rows-fr grid-cols-1 gap-4 overflow-y-auto pr-1 md:grid-cols-2">
{panels.map((panelId, index) => {
const sessionId = panelSessionIds?.[index];
if (sessionId === undefined) {
return <OrchestratorPanel key={panelId} />;
}
return <OrchestratorPanel key={panelId} sessionId={sessionId} />;
})}
<div 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>
);
}

View File

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

View File

@@ -5,6 +5,7 @@ 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";
@@ -36,6 +37,64 @@ const CONNECTION_TEXT: Record<MissionControlConnectionStatus, string> = {
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 {
@@ -47,7 +106,13 @@ function formatRelativeTimestamp(timestamp: string): string {
return formatDistanceToNow(parsedDate, { addSuffix: true });
}
export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.JSX.Element {
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);
@@ -55,6 +120,12 @@ export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.
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" });
@@ -68,7 +139,10 @@ export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.
return (
<Card className="flex h-full min-h-[220px] flex-col">
<CardHeader>
<CardTitle className="text-base">Orchestrator Panel</CardTitle>
<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
@@ -80,24 +154,25 @@ export function OrchestratorPanel({ sessionId }: OrchestratorPanelProps): React.
return (
<Card className="flex h-full min-h-[220px] flex-col">
<CardHeader className="space-y-2">
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
<div className="flex items-start justify-between gap-2">
<CardTitle className="text-base">Orchestrator Panel</CardTitle>
<div className="flex flex-col items-start gap-2 sm:items-end">
<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}
<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>

View File

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

View File

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

3
pnpm-lock.yaml generated
View File

@@ -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)