Compare commits
6 Commits
feat/ms22-
...
feat/ms22-
| Author | SHA1 | Date | |
|---|---|---|---|
| 29663f7ff8 | |||
| 029c190c05 | |||
| 477d0c8fdf | |||
| 03af39def9 | |||
| dc7e0c805c | |||
| 2b010fadda |
@@ -36,6 +36,7 @@
|
||||
"@nestjs/mapped-types": "^2.1.0",
|
||||
"@nestjs/platform-express": "^11.1.12",
|
||||
"@nestjs/platform-socket.io": "^11.1.12",
|
||||
"@nestjs/schedule": "^6.1.1",
|
||||
"@nestjs/throttler": "^6.5.0",
|
||||
"@nestjs/websockets": "^11.1.12",
|
||||
"@opentelemetry/api": "^1.9.0",
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Module } from "@nestjs/common";
|
||||
import { APP_INTERCEPTOR, APP_GUARD } from "@nestjs/core";
|
||||
import { ThrottlerModule } from "@nestjs/throttler";
|
||||
import { BullModule } from "@nestjs/bullmq";
|
||||
import { ScheduleModule } from "@nestjs/schedule";
|
||||
import { ThrottlerValkeyStorageService, ThrottlerApiKeyGuard } from "./common/throttler";
|
||||
import { CsrfGuard } from "./common/guards/csrf.guard";
|
||||
import { CsrfService } from "./common/services/csrf.service";
|
||||
@@ -53,7 +54,10 @@ import { ConversationArchiveModule } from "./conversation-archive/conversation-a
|
||||
import { RlsContextInterceptor } from "./common/interceptors/rls-context.interceptor";
|
||||
import { AgentConfigModule } from "./agent-config/agent-config.module";
|
||||
import { ContainerLifecycleModule } from "./container-lifecycle/container-lifecycle.module";
|
||||
import { ContainerReaperModule } from "./container-reaper/container-reaper.module";
|
||||
import { FleetSettingsModule } from "./fleet-settings/fleet-settings.module";
|
||||
import { OnboardingModule } from "./onboarding/onboarding.module";
|
||||
import { ChatProxyModule } from "./chat-proxy/chat-proxy.module";
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
@@ -84,6 +88,7 @@ import { FleetSettingsModule } from "./fleet-settings/fleet-settings.module";
|
||||
};
|
||||
})(),
|
||||
}),
|
||||
ScheduleModule.forRoot(),
|
||||
TelemetryModule,
|
||||
PrismaModule,
|
||||
DatabaseModule,
|
||||
@@ -128,7 +133,10 @@ import { FleetSettingsModule } from "./fleet-settings/fleet-settings.module";
|
||||
ConversationArchiveModule,
|
||||
AgentConfigModule,
|
||||
ContainerLifecycleModule,
|
||||
ContainerReaperModule,
|
||||
FleetSettingsModule,
|
||||
OnboardingModule,
|
||||
ChatProxyModule,
|
||||
],
|
||||
controllers: [AppController, CsrfController],
|
||||
providers: [
|
||||
|
||||
72
apps/api/src/chat-proxy/chat-proxy.controller.ts
Normal file
72
apps/api/src/chat-proxy/chat-proxy.controller.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { Body, Controller, Post, Req, Res, UnauthorizedException, UseGuards } from "@nestjs/common";
|
||||
import type { Response } from "express";
|
||||
import { AuthGuard } from "../auth/guards/auth.guard";
|
||||
import type { MaybeAuthenticatedRequest } from "../auth/types/better-auth-request.interface";
|
||||
import { ChatStreamDto } from "./chat-proxy.dto";
|
||||
import { ChatProxyService } from "./chat-proxy.service";
|
||||
|
||||
@Controller("chat")
|
||||
@UseGuards(AuthGuard)
|
||||
export class ChatProxyController {
|
||||
constructor(private readonly chatProxyService: ChatProxyService) {}
|
||||
|
||||
// POST /api/chat/stream
|
||||
// Request: { messages: Array<{role, content}> }
|
||||
// Response: SSE stream of chat completion events
|
||||
@Post("stream")
|
||||
async streamChat(
|
||||
@Body() body: ChatStreamDto,
|
||||
@Req() req: MaybeAuthenticatedRequest,
|
||||
@Res() res: Response
|
||||
): Promise<void> {
|
||||
const userId = req.user?.id;
|
||||
if (!userId) {
|
||||
throw new UnauthorizedException("No authenticated user found on request");
|
||||
}
|
||||
|
||||
const abortController = new AbortController();
|
||||
req.once("close", () => {
|
||||
abortController.abort();
|
||||
});
|
||||
|
||||
res.setHeader("Content-Type", "text/event-stream");
|
||||
res.setHeader("Cache-Control", "no-cache");
|
||||
res.setHeader("Connection", "keep-alive");
|
||||
res.setHeader("X-Accel-Buffering", "no");
|
||||
|
||||
try {
|
||||
const upstreamResponse = await this.chatProxyService.proxyChat(
|
||||
userId,
|
||||
body.messages,
|
||||
abortController.signal
|
||||
);
|
||||
|
||||
const upstreamContentType = upstreamResponse.headers.get("content-type");
|
||||
if (upstreamContentType) {
|
||||
res.setHeader("Content-Type", upstreamContentType);
|
||||
}
|
||||
|
||||
if (!upstreamResponse.body) {
|
||||
throw new Error("OpenClaw response did not include a stream body");
|
||||
}
|
||||
|
||||
for await (const chunk of upstreamResponse.body as unknown as AsyncIterable<Uint8Array>) {
|
||||
if (res.writableEnded || res.destroyed) {
|
||||
break;
|
||||
}
|
||||
|
||||
res.write(Buffer.from(chunk));
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
if (!res.writableEnded && !res.destroyed) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
res.write("event: error\n");
|
||||
res.write(`data: ${JSON.stringify({ error: message })}\n\n`);
|
||||
}
|
||||
} finally {
|
||||
if (!res.writableEnded && !res.destroyed) {
|
||||
res.end();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
25
apps/api/src/chat-proxy/chat-proxy.dto.ts
Normal file
25
apps/api/src/chat-proxy/chat-proxy.dto.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Type } from "class-transformer";
|
||||
import { ArrayMinSize, IsArray, IsNotEmpty, IsString, ValidateNested } from "class-validator";
|
||||
|
||||
export interface ChatMessage {
|
||||
role: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export class ChatMessageDto implements ChatMessage {
|
||||
@IsString({ message: "role must be a string" })
|
||||
@IsNotEmpty({ message: "role is required" })
|
||||
role!: string;
|
||||
|
||||
@IsString({ message: "content must be a string" })
|
||||
@IsNotEmpty({ message: "content is required" })
|
||||
content!: string;
|
||||
}
|
||||
|
||||
export class ChatStreamDto {
|
||||
@IsArray({ message: "messages must be an array" })
|
||||
@ArrayMinSize(1, { message: "messages must contain at least one message" })
|
||||
@ValidateNested({ each: true })
|
||||
@Type(() => ChatMessageDto)
|
||||
messages!: ChatMessageDto[];
|
||||
}
|
||||
14
apps/api/src/chat-proxy/chat-proxy.module.ts
Normal file
14
apps/api/src/chat-proxy/chat-proxy.module.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Module } from "@nestjs/common";
|
||||
import { AgentConfigModule } from "../agent-config/agent-config.module";
|
||||
import { ContainerLifecycleModule } from "../container-lifecycle/container-lifecycle.module";
|
||||
import { PrismaModule } from "../prisma/prisma.module";
|
||||
import { ChatProxyController } from "./chat-proxy.controller";
|
||||
import { ChatProxyService } from "./chat-proxy.service";
|
||||
|
||||
@Module({
|
||||
imports: [PrismaModule, ContainerLifecycleModule, AgentConfigModule],
|
||||
controllers: [ChatProxyController],
|
||||
providers: [ChatProxyService],
|
||||
exports: [ChatProxyService],
|
||||
})
|
||||
export class ChatProxyModule {}
|
||||
107
apps/api/src/chat-proxy/chat-proxy.service.spec.ts
Normal file
107
apps/api/src/chat-proxy/chat-proxy.service.spec.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
import { ServiceUnavailableException } from "@nestjs/common";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { ChatProxyService } from "./chat-proxy.service";
|
||||
|
||||
describe("ChatProxyService", () => {
|
||||
const userId = "user-123";
|
||||
|
||||
const prisma = {
|
||||
userAgentConfig: {
|
||||
findUnique: vi.fn(),
|
||||
},
|
||||
};
|
||||
|
||||
const containerLifecycle = {
|
||||
ensureRunning: vi.fn(),
|
||||
touch: vi.fn(),
|
||||
};
|
||||
|
||||
let service: ChatProxyService;
|
||||
let fetchMock: ReturnType<typeof vi.fn>;
|
||||
|
||||
beforeEach(() => {
|
||||
fetchMock = vi.fn();
|
||||
vi.stubGlobal("fetch", fetchMock);
|
||||
service = new ChatProxyService(prisma as never, containerLifecycle as never);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.unstubAllGlobals();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("getContainerUrl", () => {
|
||||
it("calls ensureRunning and touch for the user", async () => {
|
||||
containerLifecycle.ensureRunning.mockResolvedValue({
|
||||
url: "http://mosaic-user-user-123:19000",
|
||||
token: "gateway-token",
|
||||
});
|
||||
containerLifecycle.touch.mockResolvedValue(undefined);
|
||||
|
||||
const url = await service.getContainerUrl(userId);
|
||||
|
||||
expect(url).toBe("http://mosaic-user-user-123:19000");
|
||||
expect(containerLifecycle.ensureRunning).toHaveBeenCalledWith(userId);
|
||||
expect(containerLifecycle.touch).toHaveBeenCalledWith(userId);
|
||||
});
|
||||
});
|
||||
|
||||
describe("proxyChat", () => {
|
||||
it("forwards the request to the user's OpenClaw container", async () => {
|
||||
containerLifecycle.ensureRunning.mockResolvedValue({
|
||||
url: "http://mosaic-user-user-123:19000",
|
||||
token: "gateway-token",
|
||||
});
|
||||
containerLifecycle.touch.mockResolvedValue(undefined);
|
||||
fetchMock.mockResolvedValue(new Response("event: token\ndata: hello\n\n"));
|
||||
|
||||
const messages = [{ role: "user", content: "Hello from Mosaic" }];
|
||||
const response = await service.proxyChat(userId, messages);
|
||||
|
||||
expect(response).toBeInstanceOf(Response);
|
||||
expect(fetchMock).toHaveBeenCalledWith(
|
||||
"http://mosaic-user-user-123:19000/v1/chat/completions",
|
||||
expect.objectContaining({
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const [, request] = fetchMock.mock.calls[0] as [string, RequestInit];
|
||||
const parsedBody = JSON.parse(String(request.body));
|
||||
expect(parsedBody).toEqual({
|
||||
messages,
|
||||
model: "openclaw:default",
|
||||
stream: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("throws ServiceUnavailableException on connection refused errors", async () => {
|
||||
containerLifecycle.ensureRunning.mockResolvedValue({
|
||||
url: "http://mosaic-user-user-123:19000",
|
||||
token: "gateway-token",
|
||||
});
|
||||
containerLifecycle.touch.mockResolvedValue(undefined);
|
||||
fetchMock.mockRejectedValue(new Error("connect ECONNREFUSED 127.0.0.1:19000"));
|
||||
|
||||
await expect(service.proxyChat(userId, [])).rejects.toBeInstanceOf(
|
||||
ServiceUnavailableException
|
||||
);
|
||||
});
|
||||
|
||||
it("throws ServiceUnavailableException on timeout errors", async () => {
|
||||
containerLifecycle.ensureRunning.mockResolvedValue({
|
||||
url: "http://mosaic-user-user-123:19000",
|
||||
token: "gateway-token",
|
||||
});
|
||||
containerLifecycle.touch.mockResolvedValue(undefined);
|
||||
fetchMock.mockRejectedValue(new Error("The operation was aborted due to timeout"));
|
||||
|
||||
await expect(service.proxyChat(userId, [])).rejects.toBeInstanceOf(
|
||||
ServiceUnavailableException
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
89
apps/api/src/chat-proxy/chat-proxy.service.ts
Normal file
89
apps/api/src/chat-proxy/chat-proxy.service.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { BadGatewayException, Injectable, ServiceUnavailableException } from "@nestjs/common";
|
||||
import { ContainerLifecycleService } from "../container-lifecycle/container-lifecycle.service";
|
||||
import { PrismaService } from "../prisma/prisma.service";
|
||||
import type { ChatMessage } from "./chat-proxy.dto";
|
||||
|
||||
const DEFAULT_OPENCLAW_MODEL = "openclaw:default";
|
||||
|
||||
@Injectable()
|
||||
export class ChatProxyService {
|
||||
constructor(
|
||||
private readonly prisma: PrismaService,
|
||||
private readonly containerLifecycle: ContainerLifecycleService
|
||||
) {}
|
||||
|
||||
// Get the user's OpenClaw container URL and mark it active.
|
||||
async getContainerUrl(userId: string): Promise<string> {
|
||||
const { url } = await this.containerLifecycle.ensureRunning(userId);
|
||||
await this.containerLifecycle.touch(userId);
|
||||
return url;
|
||||
}
|
||||
|
||||
// Proxy chat request to OpenClaw.
|
||||
async proxyChat(
|
||||
userId: string,
|
||||
messages: ChatMessage[],
|
||||
signal?: AbortSignal
|
||||
): Promise<Response> {
|
||||
const containerUrl = await this.getContainerUrl(userId);
|
||||
const model = await this.getPreferredModel(userId);
|
||||
const requestInit: RequestInit = {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
messages,
|
||||
model,
|
||||
stream: true,
|
||||
}),
|
||||
};
|
||||
|
||||
if (signal) {
|
||||
requestInit.signal = signal;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${containerUrl}/v1/chat/completions`, requestInit);
|
||||
|
||||
if (!response.ok) {
|
||||
const detail = await this.readResponseText(response);
|
||||
const status = `${String(response.status)} ${response.statusText}`.trim();
|
||||
const message = detail
|
||||
? `OpenClaw returned ${status}: ${detail}`
|
||||
: `OpenClaw returned ${status}`;
|
||||
throw new BadGatewayException(message);
|
||||
}
|
||||
|
||||
return response;
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof BadGatewayException) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
throw new ServiceUnavailableException(`Failed to proxy chat to OpenClaw: ${message}`);
|
||||
}
|
||||
}
|
||||
|
||||
private async getPreferredModel(userId: string): Promise<string> {
|
||||
const config = await this.prisma.userAgentConfig.findUnique({
|
||||
where: { userId },
|
||||
select: { primaryModel: true },
|
||||
});
|
||||
|
||||
const primaryModel = config?.primaryModel?.trim();
|
||||
if (!primaryModel) {
|
||||
return DEFAULT_OPENCLAW_MODEL;
|
||||
}
|
||||
|
||||
return primaryModel;
|
||||
}
|
||||
|
||||
private async readResponseText(response: Response): Promise<string | null> {
|
||||
try {
|
||||
const text = (await response.text()).trim();
|
||||
return text.length > 0 ? text : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
10
apps/api/src/container-reaper/container-reaper.module.ts
Normal file
10
apps/api/src/container-reaper/container-reaper.module.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { Module } from "@nestjs/common";
|
||||
import { ScheduleModule } from "@nestjs/schedule";
|
||||
import { ContainerLifecycleModule } from "../container-lifecycle/container-lifecycle.module";
|
||||
import { ContainerReaperService } from "./container-reaper.service";
|
||||
|
||||
@Module({
|
||||
imports: [ScheduleModule, ContainerLifecycleModule],
|
||||
providers: [ContainerReaperService],
|
||||
})
|
||||
export class ContainerReaperModule {}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import type { ContainerLifecycleService } from "../container-lifecycle/container-lifecycle.service";
|
||||
import { ContainerReaperService } from "./container-reaper.service";
|
||||
|
||||
describe("ContainerReaperService", () => {
|
||||
let service: ContainerReaperService;
|
||||
let containerLifecycle: Pick<ContainerLifecycleService, "reapIdle">;
|
||||
|
||||
beforeEach(() => {
|
||||
containerLifecycle = {
|
||||
reapIdle: vi.fn(),
|
||||
};
|
||||
service = new ContainerReaperService(containerLifecycle as ContainerLifecycleService);
|
||||
});
|
||||
|
||||
it("reapIdleContainers calls containerLifecycle.reapIdle()", async () => {
|
||||
vi.mocked(containerLifecycle.reapIdle).mockResolvedValue({ stopped: [] });
|
||||
|
||||
await service.reapIdleContainers();
|
||||
|
||||
expect(containerLifecycle.reapIdle).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("reapIdleContainers handles errors gracefully", async () => {
|
||||
const error = new Error("reap failure");
|
||||
vi.mocked(containerLifecycle.reapIdle).mockRejectedValue(error);
|
||||
const loggerError = vi.spyOn(service["logger"], "error").mockImplementation(() => {});
|
||||
|
||||
await expect(service.reapIdleContainers()).resolves.toBeUndefined();
|
||||
|
||||
expect(loggerError).toHaveBeenCalledWith(
|
||||
"Failed to reap idle containers",
|
||||
expect.stringContaining("reap failure")
|
||||
);
|
||||
});
|
||||
|
||||
it("reapIdleContainers logs stopped container count", async () => {
|
||||
vi.mocked(containerLifecycle.reapIdle).mockResolvedValue({ stopped: ["user-1", "user-2"] });
|
||||
const loggerLog = vi.spyOn(service["logger"], "log").mockImplementation(() => {});
|
||||
|
||||
await service.reapIdleContainers();
|
||||
|
||||
expect(loggerLog).toHaveBeenCalledWith("Stopped 2 idle containers: user-1, user-2");
|
||||
});
|
||||
});
|
||||
30
apps/api/src/container-reaper/container-reaper.service.ts
Normal file
30
apps/api/src/container-reaper/container-reaper.service.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Injectable, Logger } from "@nestjs/common";
|
||||
import { Cron, CronExpression } from "@nestjs/schedule";
|
||||
import { ContainerLifecycleService } from "../container-lifecycle/container-lifecycle.service";
|
||||
|
||||
@Injectable()
|
||||
export class ContainerReaperService {
|
||||
private readonly logger = new Logger(ContainerReaperService.name);
|
||||
|
||||
constructor(private readonly containerLifecycle: ContainerLifecycleService) {}
|
||||
|
||||
@Cron(CronExpression.EVERY_5_MINUTES)
|
||||
async reapIdleContainers(): Promise<void> {
|
||||
this.logger.log("Running idle container reap cycle...");
|
||||
try {
|
||||
const result = await this.containerLifecycle.reapIdle();
|
||||
if (result.stopped.length > 0) {
|
||||
this.logger.log(
|
||||
`Stopped ${String(result.stopped.length)} idle containers: ${result.stopped.join(", ")}`
|
||||
);
|
||||
} else {
|
||||
this.logger.debug("No idle containers to stop");
|
||||
}
|
||||
} catch (error) {
|
||||
this.logger.error(
|
||||
"Failed to reap idle containers",
|
||||
error instanceof Error ? error.stack : String(error)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
63
apps/api/src/onboarding/onboarding.controller.ts
Normal file
63
apps/api/src/onboarding/onboarding.controller.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import { Body, Controller, Get, HttpCode, HttpStatus, Post, UseGuards } from "@nestjs/common";
|
||||
import {
|
||||
AddProviderDto,
|
||||
ConfigureOidcDto,
|
||||
CreateBreakglassDto,
|
||||
TestProviderDto,
|
||||
} from "./onboarding.dto";
|
||||
import { OnboardingGuard } from "./onboarding.guard";
|
||||
import { OnboardingService } from "./onboarding.service";
|
||||
|
||||
@Controller("onboarding")
|
||||
export class OnboardingController {
|
||||
constructor(private readonly onboardingService: OnboardingService) {}
|
||||
|
||||
// GET /api/onboarding/status — returns { completed: boolean }
|
||||
@Get("status")
|
||||
async status(): Promise<{ completed: boolean }> {
|
||||
return {
|
||||
completed: await this.onboardingService.isCompleted(),
|
||||
};
|
||||
}
|
||||
|
||||
// POST /api/onboarding/breakglass — body: { username, password } → create admin
|
||||
@Post("breakglass")
|
||||
@UseGuards(OnboardingGuard)
|
||||
async createBreakglass(
|
||||
@Body() body: CreateBreakglassDto
|
||||
): Promise<{ id: string; username: string }> {
|
||||
return this.onboardingService.createBreakglassUser(body.username, body.password);
|
||||
}
|
||||
|
||||
// POST /api/onboarding/oidc — body: { issuerUrl, clientId, clientSecret } → save OIDC
|
||||
@Post("oidc")
|
||||
@UseGuards(OnboardingGuard)
|
||||
@HttpCode(HttpStatus.NO_CONTENT)
|
||||
async configureOidc(@Body() body: ConfigureOidcDto): Promise<void> {
|
||||
await this.onboardingService.configureOidc(body.issuerUrl, body.clientId, body.clientSecret);
|
||||
}
|
||||
|
||||
// POST /api/onboarding/provider — body: { name, displayName, type, baseUrl?, apiKey?, models? } → add provider
|
||||
@Post("provider")
|
||||
@UseGuards(OnboardingGuard)
|
||||
async addProvider(@Body() body: AddProviderDto): Promise<{ id: string }> {
|
||||
const userId = await this.onboardingService.getBreakglassUserId();
|
||||
|
||||
return this.onboardingService.addProvider(userId, body);
|
||||
}
|
||||
|
||||
// POST /api/onboarding/provider/test — body: { type, baseUrl?, apiKey? } → test connection
|
||||
@Post("provider/test")
|
||||
@UseGuards(OnboardingGuard)
|
||||
async testProvider(@Body() body: TestProviderDto): Promise<{ success: boolean; error?: string }> {
|
||||
return this.onboardingService.testProvider(body.type, body.baseUrl, body.apiKey);
|
||||
}
|
||||
|
||||
// POST /api/onboarding/complete — mark done
|
||||
@Post("complete")
|
||||
@UseGuards(OnboardingGuard)
|
||||
@HttpCode(HttpStatus.NO_CONTENT)
|
||||
async complete(): Promise<void> {
|
||||
await this.onboardingService.complete();
|
||||
}
|
||||
}
|
||||
71
apps/api/src/onboarding/onboarding.dto.ts
Normal file
71
apps/api/src/onboarding/onboarding.dto.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { Type } from "class-transformer";
|
||||
import { IsArray, IsOptional, IsString, IsUrl, MinLength, ValidateNested } from "class-validator";
|
||||
|
||||
export class CreateBreakglassDto {
|
||||
@IsString()
|
||||
@MinLength(3)
|
||||
username!: string;
|
||||
|
||||
@IsString()
|
||||
@MinLength(8)
|
||||
password!: string;
|
||||
}
|
||||
|
||||
export class ConfigureOidcDto {
|
||||
@IsString()
|
||||
@IsUrl({ require_tld: false })
|
||||
issuerUrl!: string;
|
||||
|
||||
@IsString()
|
||||
clientId!: string;
|
||||
|
||||
@IsString()
|
||||
clientSecret!: string;
|
||||
}
|
||||
|
||||
export class ProviderModelDto {
|
||||
@IsString()
|
||||
id!: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export class AddProviderDto {
|
||||
@IsString()
|
||||
name!: string;
|
||||
|
||||
@IsString()
|
||||
displayName!: string;
|
||||
|
||||
@IsString()
|
||||
type!: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
baseUrl?: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
apiKey?: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsArray()
|
||||
@ValidateNested({ each: true })
|
||||
@Type(() => ProviderModelDto)
|
||||
models?: ProviderModelDto[];
|
||||
}
|
||||
|
||||
export class TestProviderDto {
|
||||
@IsString()
|
||||
type!: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
baseUrl?: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
apiKey?: string;
|
||||
}
|
||||
17
apps/api/src/onboarding/onboarding.guard.ts
Normal file
17
apps/api/src/onboarding/onboarding.guard.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { CanActivate, ExecutionContext, ForbiddenException, Injectable } from "@nestjs/common";
|
||||
import { OnboardingService } from "./onboarding.service";
|
||||
|
||||
@Injectable()
|
||||
export class OnboardingGuard implements CanActivate {
|
||||
constructor(private readonly onboardingService: OnboardingService) {}
|
||||
|
||||
async canActivate(_context: ExecutionContext): Promise<boolean> {
|
||||
const completed = await this.onboardingService.isCompleted();
|
||||
|
||||
if (completed) {
|
||||
throw new ForbiddenException("Onboarding already completed");
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
15
apps/api/src/onboarding/onboarding.module.ts
Normal file
15
apps/api/src/onboarding/onboarding.module.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Module } from "@nestjs/common";
|
||||
import { ConfigModule } from "@nestjs/config";
|
||||
import { PrismaModule } from "../prisma/prisma.module";
|
||||
import { CryptoModule } from "../crypto/crypto.module";
|
||||
import { OnboardingController } from "./onboarding.controller";
|
||||
import { OnboardingService } from "./onboarding.service";
|
||||
import { OnboardingGuard } from "./onboarding.guard";
|
||||
|
||||
@Module({
|
||||
imports: [PrismaModule, CryptoModule, ConfigModule],
|
||||
controllers: [OnboardingController],
|
||||
providers: [OnboardingService, OnboardingGuard],
|
||||
exports: [OnboardingService],
|
||||
})
|
||||
export class OnboardingModule {}
|
||||
206
apps/api/src/onboarding/onboarding.service.spec.ts
Normal file
206
apps/api/src/onboarding/onboarding.service.spec.ts
Normal file
@@ -0,0 +1,206 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { hash } from "bcryptjs";
|
||||
import { OnboardingService } from "./onboarding.service";
|
||||
import { PrismaService } from "../prisma/prisma.service";
|
||||
import { CryptoService } from "../crypto/crypto.service";
|
||||
|
||||
vi.mock("bcryptjs", () => ({
|
||||
hash: vi.fn(),
|
||||
}));
|
||||
|
||||
describe("OnboardingService", () => {
|
||||
let service: OnboardingService;
|
||||
|
||||
const mockPrismaService = {
|
||||
systemConfig: {
|
||||
findUnique: vi.fn(),
|
||||
upsert: vi.fn(),
|
||||
},
|
||||
breakglassUser: {
|
||||
count: vi.fn(),
|
||||
create: vi.fn(),
|
||||
findFirst: vi.fn(),
|
||||
},
|
||||
llmProvider: {
|
||||
create: vi.fn(),
|
||||
},
|
||||
};
|
||||
|
||||
const mockCryptoService = {
|
||||
encrypt: vi.fn(),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
|
||||
service = new OnboardingService(
|
||||
mockPrismaService as unknown as PrismaService,
|
||||
mockCryptoService as unknown as CryptoService
|
||||
);
|
||||
});
|
||||
|
||||
it("isCompleted returns false when no config exists", async () => {
|
||||
mockPrismaService.systemConfig.findUnique.mockResolvedValue(null);
|
||||
|
||||
await expect(service.isCompleted()).resolves.toBe(false);
|
||||
expect(mockPrismaService.systemConfig.findUnique).toHaveBeenCalledWith({
|
||||
where: { key: "onboarding.completed" },
|
||||
});
|
||||
});
|
||||
|
||||
it("isCompleted returns true when completed", async () => {
|
||||
mockPrismaService.systemConfig.findUnique.mockResolvedValue({
|
||||
id: "cfg-1",
|
||||
key: "onboarding.completed",
|
||||
value: "true",
|
||||
encrypted: false,
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
|
||||
await expect(service.isCompleted()).resolves.toBe(true);
|
||||
});
|
||||
|
||||
it("createBreakglassUser hashes password and creates record", async () => {
|
||||
const mockedHash = vi.mocked(hash);
|
||||
mockedHash.mockResolvedValue("hashed-password");
|
||||
|
||||
mockPrismaService.breakglassUser.count.mockResolvedValue(0);
|
||||
mockPrismaService.breakglassUser.create.mockResolvedValue({
|
||||
id: "breakglass-1",
|
||||
username: "admin",
|
||||
});
|
||||
|
||||
const result = await service.createBreakglassUser("admin", "supersecret123");
|
||||
|
||||
expect(mockedHash).toHaveBeenCalledWith("supersecret123", 12);
|
||||
expect(mockPrismaService.breakglassUser.create).toHaveBeenCalledWith({
|
||||
data: {
|
||||
username: "admin",
|
||||
passwordHash: "hashed-password",
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({ id: "breakglass-1", username: "admin" });
|
||||
});
|
||||
|
||||
it("createBreakglassUser rejects if user already exists", async () => {
|
||||
mockPrismaService.breakglassUser.count.mockResolvedValue(1);
|
||||
|
||||
await expect(service.createBreakglassUser("admin", "supersecret123")).rejects.toThrow(
|
||||
"Breakglass user already exists"
|
||||
);
|
||||
});
|
||||
|
||||
it("configureOidc encrypts secret and saves to SystemConfig", async () => {
|
||||
mockCryptoService.encrypt.mockReturnValue("enc:oidc-secret");
|
||||
mockPrismaService.systemConfig.upsert.mockResolvedValue({
|
||||
id: "cfg",
|
||||
key: "oidc.clientSecret",
|
||||
value: "enc:oidc-secret",
|
||||
encrypted: true,
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
|
||||
await service.configureOidc("https://auth.example.com", "client-id", "client-secret");
|
||||
|
||||
expect(mockCryptoService.encrypt).toHaveBeenCalledWith("client-secret");
|
||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledTimes(3);
|
||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledWith({
|
||||
where: { key: "oidc.issuerUrl" },
|
||||
create: {
|
||||
key: "oidc.issuerUrl",
|
||||
value: "https://auth.example.com",
|
||||
encrypted: false,
|
||||
},
|
||||
update: {
|
||||
value: "https://auth.example.com",
|
||||
encrypted: false,
|
||||
},
|
||||
});
|
||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledWith({
|
||||
where: { key: "oidc.clientId" },
|
||||
create: {
|
||||
key: "oidc.clientId",
|
||||
value: "client-id",
|
||||
encrypted: false,
|
||||
},
|
||||
update: {
|
||||
value: "client-id",
|
||||
encrypted: false,
|
||||
},
|
||||
});
|
||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledWith({
|
||||
where: { key: "oidc.clientSecret" },
|
||||
create: {
|
||||
key: "oidc.clientSecret",
|
||||
value: "enc:oidc-secret",
|
||||
encrypted: true,
|
||||
},
|
||||
update: {
|
||||
value: "enc:oidc-secret",
|
||||
encrypted: true,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("addProvider encrypts apiKey and creates LlmProvider", async () => {
|
||||
mockCryptoService.encrypt.mockReturnValue("enc:api-key");
|
||||
mockPrismaService.llmProvider.create.mockResolvedValue({
|
||||
id: "provider-1",
|
||||
});
|
||||
|
||||
const result = await service.addProvider("breakglass-1", {
|
||||
name: "my-openai",
|
||||
displayName: "OpenAI",
|
||||
type: "openai",
|
||||
baseUrl: "https://api.openai.com/v1",
|
||||
apiKey: "sk-test",
|
||||
models: [{ id: "gpt-4o-mini", name: "GPT-4o Mini" }],
|
||||
});
|
||||
|
||||
expect(mockCryptoService.encrypt).toHaveBeenCalledWith("sk-test");
|
||||
expect(mockPrismaService.llmProvider.create).toHaveBeenCalledWith({
|
||||
data: {
|
||||
userId: "breakglass-1",
|
||||
name: "my-openai",
|
||||
displayName: "OpenAI",
|
||||
type: "openai",
|
||||
baseUrl: "https://api.openai.com/v1",
|
||||
apiKey: "enc:api-key",
|
||||
models: [{ id: "gpt-4o-mini", name: "GPT-4o Mini" }],
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({ id: "provider-1" });
|
||||
});
|
||||
|
||||
it("complete sets SystemConfig flag", async () => {
|
||||
mockPrismaService.systemConfig.upsert.mockResolvedValue({
|
||||
id: "cfg-1",
|
||||
key: "onboarding.completed",
|
||||
value: "true",
|
||||
encrypted: false,
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
|
||||
await service.complete();
|
||||
|
||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledWith({
|
||||
where: { key: "onboarding.completed" },
|
||||
create: {
|
||||
key: "onboarding.completed",
|
||||
value: "true",
|
||||
encrypted: false,
|
||||
},
|
||||
update: {
|
||||
value: "true",
|
||||
encrypted: false,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
191
apps/api/src/onboarding/onboarding.service.ts
Normal file
191
apps/api/src/onboarding/onboarding.service.ts
Normal file
@@ -0,0 +1,191 @@
|
||||
import { BadRequestException, ConflictException, Injectable } from "@nestjs/common";
|
||||
import type { InputJsonValue } from "@prisma/client/runtime/library";
|
||||
import { hash } from "bcryptjs";
|
||||
import { PrismaService } from "../prisma/prisma.service";
|
||||
import { CryptoService } from "../crypto/crypto.service";
|
||||
|
||||
const BCRYPT_ROUNDS = 12;
|
||||
const TEST_PROVIDER_TIMEOUT_MS = 8000;
|
||||
|
||||
const ONBOARDING_COMPLETED_KEY = "onboarding.completed";
|
||||
const OIDC_ISSUER_URL_KEY = "oidc.issuerUrl";
|
||||
const OIDC_CLIENT_ID_KEY = "oidc.clientId";
|
||||
const OIDC_CLIENT_SECRET_KEY = "oidc.clientSecret";
|
||||
|
||||
interface ProviderModelInput {
|
||||
id: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
interface AddProviderInput {
|
||||
name: string;
|
||||
displayName: string;
|
||||
type: string;
|
||||
baseUrl?: string;
|
||||
apiKey?: string;
|
||||
models?: ProviderModelInput[];
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class OnboardingService {
|
||||
constructor(
|
||||
private readonly prisma: PrismaService,
|
||||
private readonly crypto: CryptoService
|
||||
) {}
|
||||
|
||||
// Check if onboarding is completed
|
||||
async isCompleted(): Promise<boolean> {
|
||||
const completedFlag = await this.prisma.systemConfig.findUnique({
|
||||
where: { key: ONBOARDING_COMPLETED_KEY },
|
||||
});
|
||||
|
||||
return completedFlag?.value === "true";
|
||||
}
|
||||
|
||||
// Step 1: Create breakglass admin user
|
||||
async createBreakglassUser(
|
||||
username: string,
|
||||
password: string
|
||||
): Promise<{ id: string; username: string }> {
|
||||
const breakglassCount = await this.prisma.breakglassUser.count();
|
||||
if (breakglassCount > 0) {
|
||||
throw new ConflictException("Breakglass user already exists");
|
||||
}
|
||||
|
||||
const passwordHash = await hash(password, BCRYPT_ROUNDS);
|
||||
|
||||
return this.prisma.breakglassUser.create({
|
||||
data: {
|
||||
username,
|
||||
passwordHash,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Step 2: Configure OIDC provider (optional)
|
||||
async configureOidc(issuerUrl: string, clientId: string, clientSecret: string): Promise<void> {
|
||||
const encryptedSecret = this.crypto.encrypt(clientSecret);
|
||||
|
||||
await Promise.all([
|
||||
this.upsertSystemConfig(OIDC_ISSUER_URL_KEY, issuerUrl, false),
|
||||
this.upsertSystemConfig(OIDC_CLIENT_ID_KEY, clientId, false),
|
||||
this.upsertSystemConfig(OIDC_CLIENT_SECRET_KEY, encryptedSecret, true),
|
||||
]);
|
||||
}
|
||||
|
||||
// Step 3: Add first LLM provider
|
||||
async addProvider(userId: string, data: AddProviderInput): Promise<{ id: string }> {
|
||||
const encryptedApiKey = data.apiKey ? this.crypto.encrypt(data.apiKey) : undefined;
|
||||
|
||||
return this.prisma.llmProvider.create({
|
||||
data: {
|
||||
userId,
|
||||
name: data.name,
|
||||
displayName: data.displayName,
|
||||
type: data.type,
|
||||
baseUrl: data.baseUrl ?? null,
|
||||
apiKey: encryptedApiKey ?? null,
|
||||
models: (data.models ?? []) as unknown as InputJsonValue,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Step 3b: Test LLM provider connection
|
||||
async testProvider(
|
||||
type: string,
|
||||
baseUrl?: string,
|
||||
apiKey?: string
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
const normalizedType = type.trim().toLowerCase();
|
||||
if (!normalizedType) {
|
||||
return { success: false, error: "Provider type is required" };
|
||||
}
|
||||
|
||||
let probeUrl: string;
|
||||
try {
|
||||
probeUrl = this.buildProbeUrl(normalizedType, baseUrl);
|
||||
} catch (error: unknown) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
return { success: false, error: message };
|
||||
}
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
Accept: "application/json",
|
||||
};
|
||||
if (apiKey) {
|
||||
headers.Authorization = `Bearer ${apiKey}`;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(probeUrl, {
|
||||
method: "GET",
|
||||
headers,
|
||||
signal: AbortSignal.timeout(TEST_PROVIDER_TIMEOUT_MS),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return {
|
||||
success: false,
|
||||
error: `Provider returned ${String(response.status)} ${response.statusText}`.trim(),
|
||||
};
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
} catch (error: unknown) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
return { success: false, error: message };
|
||||
}
|
||||
}
|
||||
|
||||
// Step 4: Mark onboarding complete
|
||||
async complete(): Promise<void> {
|
||||
await this.upsertSystemConfig(ONBOARDING_COMPLETED_KEY, "true", false);
|
||||
}
|
||||
|
||||
async getBreakglassUserId(): Promise<string> {
|
||||
const user = await this.prisma.breakglassUser.findFirst({
|
||||
where: { isActive: true },
|
||||
orderBy: { createdAt: "asc" },
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
throw new BadRequestException("Create a breakglass user before adding a provider");
|
||||
}
|
||||
|
||||
return user.id;
|
||||
}
|
||||
|
||||
private async upsertSystemConfig(key: string, value: string, encrypted: boolean): Promise<void> {
|
||||
await this.prisma.systemConfig.upsert({
|
||||
where: { key },
|
||||
create: { key, value, encrypted },
|
||||
update: { value, encrypted },
|
||||
});
|
||||
}
|
||||
|
||||
private buildProbeUrl(type: string, baseUrl?: string): string {
|
||||
const resolvedBaseUrl = baseUrl ?? this.getDefaultProviderBaseUrl(type);
|
||||
const normalizedBaseUrl = resolvedBaseUrl.endsWith("/")
|
||||
? resolvedBaseUrl
|
||||
: `${resolvedBaseUrl}/`;
|
||||
const endpointPath = type === "ollama" ? "api/tags" : "models";
|
||||
|
||||
return new URL(endpointPath, normalizedBaseUrl).toString();
|
||||
}
|
||||
|
||||
private getDefaultProviderBaseUrl(type: string): string {
|
||||
if (type === "ollama") {
|
||||
return "http://localhost:11434";
|
||||
}
|
||||
|
||||
return "https://api.openai.com/v1";
|
||||
}
|
||||
}
|
||||
9
apps/web/src/app/onboarding/layout.tsx
Normal file
9
apps/web/src/app/onboarding/layout.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export default function OnboardingLayout({ children }: { children: ReactNode }): React.JSX.Element {
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center bg-gradient-to-b from-slate-50 to-white p-4 sm:p-6">
|
||||
<div className="w-full max-w-3xl">{children}</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
36
apps/web/src/app/onboarding/page.tsx
Normal file
36
apps/web/src/app/onboarding/page.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { OnboardingWizard } from "@/components/onboarding/OnboardingWizard";
|
||||
import { API_BASE_URL } from "@/lib/config";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
interface OnboardingStatusResponse {
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
async function getOnboardingStatus(): Promise<OnboardingStatusResponse> {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/onboarding/status`, {
|
||||
method: "GET",
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return { completed: false };
|
||||
}
|
||||
|
||||
return (await response.json()) as OnboardingStatusResponse;
|
||||
} catch {
|
||||
return { completed: false };
|
||||
}
|
||||
}
|
||||
|
||||
export default async function OnboardingPage(): Promise<React.JSX.Element> {
|
||||
const status = await getOnboardingStatus();
|
||||
|
||||
if (status.completed) {
|
||||
redirect("/");
|
||||
}
|
||||
|
||||
return <OnboardingWizard />;
|
||||
}
|
||||
106
apps/web/src/components/onboarding/OnboardingWizard.test.tsx
Normal file
106
apps/web/src/components/onboarding/OnboardingWizard.test.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { OnboardingWizard } from "./OnboardingWizard";
|
||||
|
||||
const mockPush = vi.fn();
|
||||
const mockGetStatus = vi.fn();
|
||||
const mockCreateBreakglass = vi.fn();
|
||||
const mockConfigureOidc = vi.fn();
|
||||
const mockTestProvider = vi.fn();
|
||||
const mockAddProvider = vi.fn();
|
||||
const mockCompleteOnboarding = vi.fn();
|
||||
|
||||
vi.mock("next/navigation", () => ({
|
||||
useRouter: (): { push: typeof mockPush } => ({
|
||||
push: mockPush,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/api/onboarding", () => ({
|
||||
fetchOnboardingStatus: (): ReturnType<typeof mockGetStatus> => mockGetStatus(),
|
||||
createBreakglassAdmin: (...args: unknown[]): ReturnType<typeof mockCreateBreakglass> =>
|
||||
mockCreateBreakglass(...args),
|
||||
configureOidcProvider: (...args: unknown[]): ReturnType<typeof mockConfigureOidc> =>
|
||||
mockConfigureOidc(...args),
|
||||
testOnboardingProvider: (...args: unknown[]): ReturnType<typeof mockTestProvider> =>
|
||||
mockTestProvider(...args),
|
||||
addOnboardingProvider: (...args: unknown[]): ReturnType<typeof mockAddProvider> =>
|
||||
mockAddProvider(...args),
|
||||
completeOnboarding: (): ReturnType<typeof mockCompleteOnboarding> => mockCompleteOnboarding(),
|
||||
}));
|
||||
|
||||
describe("OnboardingWizard", () => {
|
||||
beforeEach(() => {
|
||||
mockPush.mockReset();
|
||||
mockGetStatus.mockReset();
|
||||
mockCreateBreakglass.mockReset();
|
||||
mockConfigureOidc.mockReset();
|
||||
mockTestProvider.mockReset();
|
||||
mockAddProvider.mockReset();
|
||||
mockCompleteOnboarding.mockReset();
|
||||
|
||||
mockGetStatus.mockResolvedValue({ completed: false });
|
||||
mockCreateBreakglass.mockResolvedValue({ id: "bg-1", username: "admin" });
|
||||
mockConfigureOidc.mockResolvedValue(undefined);
|
||||
mockTestProvider.mockResolvedValue({ success: true });
|
||||
mockAddProvider.mockResolvedValue({ id: "provider-1" });
|
||||
mockCompleteOnboarding.mockResolvedValue(undefined);
|
||||
});
|
||||
|
||||
it("renders the first step with admin setup fields", async () => {
|
||||
render(<OnboardingWizard />);
|
||||
|
||||
expect(
|
||||
await screen.findByText("Welcome to Mosaic Stack. Let's get you set up.")
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByLabelText("Username")).toBeInTheDocument();
|
||||
expect(screen.getByLabelText("Password")).toBeInTheDocument();
|
||||
expect(screen.getByLabelText("Confirm Password")).toBeInTheDocument();
|
||||
expect(screen.getByText("1. Admin")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("validates admin form fields before submit", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<OnboardingWizard />);
|
||||
|
||||
await screen.findByText("Welcome to Mosaic Stack. Let's get you set up.");
|
||||
await user.click(screen.getByRole("button", { name: "Create Admin" }));
|
||||
|
||||
expect(screen.getByText("Username must be at least 3 characters.")).toBeInTheDocument();
|
||||
expect(mockCreateBreakglass).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("supports happy path with OIDC skipped", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<OnboardingWizard />);
|
||||
|
||||
await screen.findByText("Welcome to Mosaic Stack. Let's get you set up.");
|
||||
|
||||
await user.type(screen.getByLabelText("Username"), "admin");
|
||||
await user.type(screen.getByLabelText("Password"), "verysecurepassword");
|
||||
await user.type(screen.getByLabelText("Confirm Password"), "verysecurepassword");
|
||||
await user.click(screen.getByRole("button", { name: "Create Admin" }));
|
||||
|
||||
await screen.findByText("Configure OIDC Provider (Optional)");
|
||||
await user.click(screen.getByRole("button", { name: "Skip" }));
|
||||
|
||||
await screen.findByText("Add Your First LLM Provider");
|
||||
await user.type(screen.getByLabelText("Display Name"), "My OpenAI");
|
||||
await user.type(screen.getByLabelText("API Key"), "sk-test-key");
|
||||
|
||||
await user.click(screen.getByRole("button", { name: "Test Connection" }));
|
||||
await screen.findByText("Connection successful.");
|
||||
|
||||
const addProviderButton = screen.getByRole("button", { name: "Add Provider" });
|
||||
expect(addProviderButton).toBeEnabled();
|
||||
await user.click(addProviderButton);
|
||||
|
||||
await screen.findByText("You're all set");
|
||||
await user.click(screen.getByRole("button", { name: "Launch Mosaic Stack" }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockPush).toHaveBeenCalledWith("/");
|
||||
});
|
||||
});
|
||||
});
|
||||
791
apps/web/src/components/onboarding/OnboardingWizard.tsx
Normal file
791
apps/web/src/components/onboarding/OnboardingWizard.tsx
Normal file
@@ -0,0 +1,791 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Check, Loader2 } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
addOnboardingProvider,
|
||||
completeOnboarding,
|
||||
configureOidcProvider,
|
||||
createBreakglassAdmin,
|
||||
fetchOnboardingStatus,
|
||||
testOnboardingProvider,
|
||||
} from "@/lib/api/onboarding";
|
||||
|
||||
type WizardStep = 1 | 2 | 3 | 4;
|
||||
type ProviderType = "openai" | "anthropic" | "zai" | "ollama" | "custom";
|
||||
|
||||
interface StepDefinition {
|
||||
id: WizardStep;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface ProviderOption {
|
||||
value: ProviderType;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const STEPS: StepDefinition[] = [
|
||||
{ id: 1, label: "1. Admin" },
|
||||
{ id: 2, label: "2. Auth" },
|
||||
{ id: 3, label: "3. Provider" },
|
||||
{ id: 4, label: "4. Launch" },
|
||||
];
|
||||
|
||||
const PROVIDER_OPTIONS: ProviderOption[] = [
|
||||
{ value: "openai", label: "OpenAI" },
|
||||
{ value: "anthropic", label: "Anthropic" },
|
||||
{ value: "zai", label: "Z.ai" },
|
||||
{ value: "ollama", label: "Ollama" },
|
||||
{ value: "custom", label: "Custom" },
|
||||
];
|
||||
|
||||
const CLOUD_PROVIDER_TYPES = new Set<ProviderType>(["openai", "anthropic", "zai"]);
|
||||
const BASE_URL_PROVIDER_TYPES = new Set<ProviderType>(["ollama", "custom"]);
|
||||
|
||||
function getErrorMessage(error: unknown, fallback: string): string {
|
||||
if (error instanceof Error && error.message.trim().length > 0) {
|
||||
return error.message;
|
||||
}
|
||||
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function isValidHttpUrl(value: string): boolean {
|
||||
try {
|
||||
const parsed = new URL(value);
|
||||
return parsed.protocol === "http:" || parsed.protocol === "https:";
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function mapProviderTypeToApi(type: ProviderType): string {
|
||||
switch (type) {
|
||||
case "anthropic":
|
||||
return "claude";
|
||||
case "zai":
|
||||
return "openai";
|
||||
case "custom":
|
||||
return "openai";
|
||||
default:
|
||||
return type;
|
||||
}
|
||||
}
|
||||
|
||||
function getProviderDefaultBaseUrl(type: ProviderType): string | undefined {
|
||||
switch (type) {
|
||||
case "ollama":
|
||||
return "http://localhost:11434";
|
||||
case "anthropic":
|
||||
return "https://api.anthropic.com/v1";
|
||||
case "zai":
|
||||
return "https://api.z.ai/v1";
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function buildProviderName(displayName: string, type: ProviderType): string {
|
||||
const slug = displayName
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-+/, "")
|
||||
.replace(/-+$/, "");
|
||||
|
||||
if (slug.length > 0) {
|
||||
return slug;
|
||||
}
|
||||
|
||||
return `${type}-provider`;
|
||||
}
|
||||
|
||||
function constantTimeEquals(left: string, right: string): boolean {
|
||||
if (left.length !== right.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let mismatch = 0;
|
||||
for (let index = 0; index < left.length; index += 1) {
|
||||
mismatch |= left.charCodeAt(index) ^ right.charCodeAt(index);
|
||||
}
|
||||
|
||||
return mismatch === 0;
|
||||
}
|
||||
|
||||
export function OnboardingWizard(): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
|
||||
const [currentStep, setCurrentStep] = useState<WizardStep>(1);
|
||||
const [isCheckingStatus, setIsCheckingStatus] = useState(true);
|
||||
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [isCreatingAdmin, setIsCreatingAdmin] = useState(false);
|
||||
const [configuredUsername, setConfiguredUsername] = useState<string | null>(null);
|
||||
|
||||
const [issuerUrl, setIssuerUrl] = useState("");
|
||||
const [clientId, setClientId] = useState("");
|
||||
const [clientSecret, setClientSecret] = useState("");
|
||||
const [isConfiguringOidc, setIsConfiguringOidc] = useState(false);
|
||||
const [oidcConfigured, setOidcConfigured] = useState(false);
|
||||
|
||||
const [providerType, setProviderType] = useState<ProviderType>("openai");
|
||||
const [displayName, setDisplayName] = useState("");
|
||||
const [providerApiKey, setProviderApiKey] = useState("");
|
||||
const [providerBaseUrl, setProviderBaseUrl] = useState("");
|
||||
const [isTestingProvider, setIsTestingProvider] = useState(false);
|
||||
const [isAddingProvider, setIsAddingProvider] = useState(false);
|
||||
const [providerConfigured, setProviderConfigured] = useState<{
|
||||
displayName: string;
|
||||
type: ProviderType;
|
||||
} | null>(null);
|
||||
const [providerTestMessage, setProviderTestMessage] = useState<string | null>(null);
|
||||
const [providerTestSucceeded, setProviderTestSucceeded] = useState(false);
|
||||
const [testedProviderSignature, setTestedProviderSignature] = useState<string | null>(null);
|
||||
|
||||
const [isCompleting, setIsCompleting] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
const requiresApiKey = CLOUD_PROVIDER_TYPES.has(providerType);
|
||||
const requiresBaseUrl = BASE_URL_PROVIDER_TYPES.has(providerType);
|
||||
const apiProviderType = mapProviderTypeToApi(providerType);
|
||||
const resolvedProviderBaseUrl =
|
||||
requiresBaseUrl && providerBaseUrl.trim().length > 0
|
||||
? providerBaseUrl.trim()
|
||||
: getProviderDefaultBaseUrl(providerType);
|
||||
|
||||
const providerTestPayload = useMemo(() => {
|
||||
const payload: { type: string; baseUrl?: string; apiKey?: string } = {
|
||||
type: apiProviderType,
|
||||
};
|
||||
|
||||
if (resolvedProviderBaseUrl !== undefined && resolvedProviderBaseUrl.length > 0) {
|
||||
payload.baseUrl = resolvedProviderBaseUrl;
|
||||
}
|
||||
|
||||
const trimmedApiKey = providerApiKey.trim();
|
||||
if (requiresApiKey && trimmedApiKey.length > 0) {
|
||||
payload.apiKey = trimmedApiKey;
|
||||
}
|
||||
|
||||
return payload;
|
||||
}, [apiProviderType, providerApiKey, requiresApiKey, resolvedProviderBaseUrl]);
|
||||
|
||||
const providerPayloadSignature = useMemo(
|
||||
() => JSON.stringify(providerTestPayload),
|
||||
[providerTestPayload]
|
||||
);
|
||||
|
||||
const canAddProvider =
|
||||
providerTestSucceeded &&
|
||||
testedProviderSignature === providerPayloadSignature &&
|
||||
!isTestingProvider &&
|
||||
!isAddingProvider;
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
async function loadStatus(): Promise<void> {
|
||||
try {
|
||||
const status = await fetchOnboardingStatus();
|
||||
if (!cancelled && status.completed) {
|
||||
router.push("/");
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
// Status check failure should not block setup UI.
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
setIsCheckingStatus(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void loadStatus();
|
||||
|
||||
return (): void => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
const resetProviderVerification = (): void => {
|
||||
setProviderTestSucceeded(false);
|
||||
setTestedProviderSignature(null);
|
||||
setProviderTestMessage(null);
|
||||
};
|
||||
|
||||
const validateAdminStep = (): boolean => {
|
||||
if (username.trim().length < 3) {
|
||||
setErrorMessage("Username must be at least 3 characters.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
setErrorMessage("Password must be at least 8 characters.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!constantTimeEquals(password, confirmPassword)) {
|
||||
setErrorMessage("Passwords do not match.");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const validateOidcStep = (): boolean => {
|
||||
if (issuerUrl.trim().length === 0 || !isValidHttpUrl(issuerUrl.trim())) {
|
||||
setErrorMessage("Issuer URL must be a valid URL.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (clientId.trim().length === 0) {
|
||||
setErrorMessage("Client ID is required.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (clientSecret.trim().length === 0) {
|
||||
setErrorMessage("Client secret is required.");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const validateProviderStep = (): boolean => {
|
||||
if (displayName.trim().length === 0) {
|
||||
setErrorMessage("Display name is required.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (requiresApiKey && providerApiKey.trim().length === 0) {
|
||||
setErrorMessage("API key is required for this provider.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (requiresBaseUrl && providerBaseUrl.trim().length === 0) {
|
||||
setErrorMessage("Base URL is required for this provider.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (requiresBaseUrl && !isValidHttpUrl(providerBaseUrl.trim())) {
|
||||
setErrorMessage("Base URL must be a valid URL.");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleCreateAdmin = async (event: React.SyntheticEvent<HTMLFormElement>): Promise<void> => {
|
||||
event.preventDefault();
|
||||
|
||||
setErrorMessage(null);
|
||||
if (!validateAdminStep()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCreatingAdmin(true);
|
||||
try {
|
||||
const result = await createBreakglassAdmin({
|
||||
username: username.trim(),
|
||||
password,
|
||||
});
|
||||
setConfiguredUsername(result.username);
|
||||
setCurrentStep(2);
|
||||
} catch (error) {
|
||||
setErrorMessage(getErrorMessage(error, "Failed to create admin account."));
|
||||
} finally {
|
||||
setIsCreatingAdmin(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfigureOidc = async (
|
||||
event: React.SyntheticEvent<HTMLFormElement>
|
||||
): Promise<void> => {
|
||||
event.preventDefault();
|
||||
|
||||
setErrorMessage(null);
|
||||
if (!validateOidcStep()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConfiguringOidc(true);
|
||||
try {
|
||||
await configureOidcProvider({
|
||||
issuerUrl: issuerUrl.trim(),
|
||||
clientId: clientId.trim(),
|
||||
clientSecret: clientSecret.trim(),
|
||||
});
|
||||
setOidcConfigured(true);
|
||||
setCurrentStep(3);
|
||||
} catch (error) {
|
||||
setErrorMessage(getErrorMessage(error, "Failed to configure OIDC provider."));
|
||||
} finally {
|
||||
setIsConfiguringOidc(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSkipOidc = (): void => {
|
||||
setErrorMessage(null);
|
||||
setOidcConfigured(false);
|
||||
setCurrentStep(3);
|
||||
};
|
||||
|
||||
const handleTestProvider = async (): Promise<void> => {
|
||||
setErrorMessage(null);
|
||||
setProviderTestMessage(null);
|
||||
if (!validateProviderStep()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsTestingProvider(true);
|
||||
try {
|
||||
const response = await testOnboardingProvider(providerTestPayload);
|
||||
if (!response.success) {
|
||||
setProviderTestSucceeded(false);
|
||||
setTestedProviderSignature(null);
|
||||
setErrorMessage(response.error ?? "Connection test failed.");
|
||||
return;
|
||||
}
|
||||
|
||||
setProviderTestSucceeded(true);
|
||||
setTestedProviderSignature(providerPayloadSignature);
|
||||
setProviderTestMessage("Connection successful.");
|
||||
} catch (error) {
|
||||
setProviderTestSucceeded(false);
|
||||
setTestedProviderSignature(null);
|
||||
setErrorMessage(getErrorMessage(error, "Connection test failed."));
|
||||
} finally {
|
||||
setIsTestingProvider(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddProvider = async (): Promise<void> => {
|
||||
setErrorMessage(null);
|
||||
if (!validateProviderStep()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!canAddProvider) {
|
||||
setErrorMessage("Test connection successfully before adding the provider.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsAddingProvider(true);
|
||||
try {
|
||||
const trimmedDisplayName = displayName.trim();
|
||||
const payload: {
|
||||
name: string;
|
||||
displayName: string;
|
||||
type: string;
|
||||
baseUrl?: string;
|
||||
apiKey?: string;
|
||||
} = {
|
||||
name: buildProviderName(trimmedDisplayName, providerType),
|
||||
displayName: trimmedDisplayName,
|
||||
type: apiProviderType,
|
||||
};
|
||||
|
||||
if (resolvedProviderBaseUrl !== undefined && resolvedProviderBaseUrl.length > 0) {
|
||||
payload.baseUrl = resolvedProviderBaseUrl;
|
||||
}
|
||||
|
||||
const trimmedApiKey = providerApiKey.trim();
|
||||
if (requiresApiKey && trimmedApiKey.length > 0) {
|
||||
payload.apiKey = trimmedApiKey;
|
||||
}
|
||||
|
||||
await addOnboardingProvider(payload);
|
||||
|
||||
setProviderConfigured({ displayName: trimmedDisplayName, type: providerType });
|
||||
setCurrentStep(4);
|
||||
} catch (error) {
|
||||
setErrorMessage(getErrorMessage(error, "Failed to add provider."));
|
||||
} finally {
|
||||
setIsAddingProvider(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCompleteOnboarding = async (): Promise<void> => {
|
||||
setErrorMessage(null);
|
||||
setIsCompleting(true);
|
||||
try {
|
||||
await completeOnboarding();
|
||||
router.push("/");
|
||||
} catch (error) {
|
||||
setErrorMessage(getErrorMessage(error, "Failed to complete onboarding."));
|
||||
} finally {
|
||||
setIsCompleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const providerLabel =
|
||||
PROVIDER_OPTIONS.find((option) => option.value === providerConfigured?.type)?.label ??
|
||||
providerConfigured?.type ??
|
||||
"Unknown";
|
||||
|
||||
return (
|
||||
<Card className="mx-auto w-full max-w-2xl shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>First-boot onboarding</CardTitle>
|
||||
<CardDescription>Set up your admin access, auth, and first provider.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{STEPS.map((step) => {
|
||||
const isActive = currentStep === step.id;
|
||||
const isComplete = currentStep > step.id;
|
||||
const badgeClass = isComplete
|
||||
? "bg-emerald-100 text-emerald-700 border-emerald-200"
|
||||
: isActive
|
||||
? "bg-blue-100 text-blue-700 border-blue-200"
|
||||
: "bg-gray-100 text-gray-500 border-gray-200";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={step.id}
|
||||
className={`rounded-md border px-3 py-2 text-sm ${badgeClass}`}
|
||||
aria-current={isActive ? "step" : undefined}
|
||||
>
|
||||
<div className="flex items-center gap-2 font-medium">
|
||||
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-current text-xs">
|
||||
{isComplete ? <Check className="h-3.5 w-3.5" aria-hidden="true" /> : step.id}
|
||||
</span>
|
||||
<span>{step.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{isCheckingStatus ? (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
|
||||
<span>Checking onboarding status...</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{currentStep === 1 && (
|
||||
<form onSubmit={handleCreateAdmin} className="space-y-4" noValidate>
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-semibold">
|
||||
Welcome to Mosaic Stack. Let's get you set up.
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600">
|
||||
Create a breakglass admin account for emergency access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-username">Username</Label>
|
||||
<Input
|
||||
id="onboarding-username"
|
||||
value={username}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUsername(event.target.value);
|
||||
}}
|
||||
disabled={isCreatingAdmin}
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-password">Password</Label>
|
||||
<Input
|
||||
id="onboarding-password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setPassword(event.target.value);
|
||||
}}
|
||||
disabled={isCreatingAdmin}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-confirm-password">Confirm Password</Label>
|
||||
<Input
|
||||
id="onboarding-confirm-password"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setConfirmPassword(event.target.value);
|
||||
}}
|
||||
disabled={isCreatingAdmin}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={isCreatingAdmin}>
|
||||
{isCreatingAdmin && (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
||||
)}
|
||||
<span>Create Admin</span>
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{currentStep === 2 && (
|
||||
<form onSubmit={handleConfigureOidc} className="space-y-4" noValidate>
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-semibold">Configure OIDC Provider (Optional)</h2>
|
||||
<p className="text-sm text-gray-600">
|
||||
You can skip this for now and continue with breakglass-only authentication.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-issuer-url">OIDC Issuer URL</Label>
|
||||
<Input
|
||||
id="onboarding-issuer-url"
|
||||
value={issuerUrl}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setIssuerUrl(event.target.value);
|
||||
}}
|
||||
disabled={isConfiguringOidc}
|
||||
placeholder="https://auth.example.com/application/o/mosaic/"
|
||||
autoComplete="url"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-client-id">Client ID</Label>
|
||||
<Input
|
||||
id="onboarding-client-id"
|
||||
value={clientId}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setClientId(event.target.value);
|
||||
}}
|
||||
disabled={isConfiguringOidc}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-client-secret">Client Secret</Label>
|
||||
<Input
|
||||
id="onboarding-client-secret"
|
||||
type="password"
|
||||
value={clientSecret}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setClientSecret(event.target.value);
|
||||
}}
|
||||
disabled={isConfiguringOidc}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button type="submit" disabled={isConfiguringOidc}>
|
||||
{isConfiguringOidc && (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
||||
)}
|
||||
<span>Configure OIDC</span>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleSkipOidc}
|
||||
disabled={isConfiguringOidc}
|
||||
>
|
||||
Skip
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{currentStep === 3 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-semibold">Add Your First LLM Provider</h2>
|
||||
<p className="text-sm text-gray-600">
|
||||
Test the connection before adding your provider.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-provider-type">Provider Type</Label>
|
||||
<Select
|
||||
value={providerType}
|
||||
onValueChange={(value) => {
|
||||
const nextType = value as ProviderType;
|
||||
setProviderType(nextType);
|
||||
setProviderApiKey("");
|
||||
setProviderBaseUrl(
|
||||
BASE_URL_PROVIDER_TYPES.has(nextType)
|
||||
? (getProviderDefaultBaseUrl(nextType) ?? "")
|
||||
: ""
|
||||
);
|
||||
resetProviderVerification();
|
||||
setErrorMessage(null);
|
||||
}}
|
||||
disabled={isTestingProvider || isAddingProvider}
|
||||
>
|
||||
<SelectTrigger id="onboarding-provider-type">
|
||||
<SelectValue placeholder="Select provider type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PROVIDER_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-provider-display-name">Display Name</Label>
|
||||
<Input
|
||||
id="onboarding-provider-display-name"
|
||||
value={displayName}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setDisplayName(event.target.value);
|
||||
resetProviderVerification();
|
||||
setErrorMessage(null);
|
||||
}}
|
||||
disabled={isTestingProvider || isAddingProvider}
|
||||
placeholder="My OpenAI Provider"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{requiresApiKey && (
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-provider-api-key">API Key</Label>
|
||||
<Input
|
||||
id="onboarding-provider-api-key"
|
||||
type="password"
|
||||
value={providerApiKey}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setProviderApiKey(event.target.value);
|
||||
resetProviderVerification();
|
||||
setErrorMessage(null);
|
||||
}}
|
||||
disabled={isTestingProvider || isAddingProvider}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{requiresBaseUrl && (
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="onboarding-provider-base-url">Base URL</Label>
|
||||
<Input
|
||||
id="onboarding-provider-base-url"
|
||||
value={providerBaseUrl}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setProviderBaseUrl(event.target.value);
|
||||
resetProviderVerification();
|
||||
setErrorMessage(null);
|
||||
}}
|
||||
disabled={isTestingProvider || isAddingProvider}
|
||||
placeholder="http://localhost:11434"
|
||||
autoComplete="url"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{providerTestMessage && (
|
||||
<p className="text-sm text-emerald-700" role="status">
|
||||
{providerTestMessage}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
void handleTestProvider();
|
||||
}}
|
||||
disabled={isTestingProvider || isAddingProvider}
|
||||
>
|
||||
{isTestingProvider && (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
||||
)}
|
||||
<span>Test Connection</span>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
void handleAddProvider();
|
||||
}}
|
||||
disabled={!canAddProvider}
|
||||
>
|
||||
{isAddingProvider && (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
||||
)}
|
||||
<span>Add Provider</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 4 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-semibold">You're all set</h2>
|
||||
<p className="text-sm text-gray-600">
|
||||
Review the setup summary and launch Mosaic Stack.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border bg-gray-50 p-4">
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<span className="font-medium">Admin:</span>{" "}
|
||||
{configuredUsername ? `${configuredUsername} configured` : "Not configured"}
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-medium">OIDC:</span>{" "}
|
||||
{oidcConfigured ? "Configured" : "Skipped for now"}
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-medium">LLM Provider:</span>{" "}
|
||||
{providerConfigured
|
||||
? `${providerConfigured.displayName} (${providerLabel})`
|
||||
: "Not configured"}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => void handleCompleteOnboarding()}
|
||||
disabled={isCompleting}
|
||||
>
|
||||
{isCompleting && (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
||||
)}
|
||||
<span>Launch Mosaic Stack</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{errorMessage && (
|
||||
<p className="text-sm text-red-600" role="alert">
|
||||
{errorMessage}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default OnboardingWizard;
|
||||
80
apps/web/src/lib/api/onboarding.ts
Normal file
80
apps/web/src/lib/api/onboarding.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
import { apiGet, apiPost } from "./client";
|
||||
|
||||
export interface OnboardingStatus {
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
export interface BreakglassAdminRequest {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface BreakglassAdminResponse {
|
||||
id: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export interface ConfigureOidcRequest {
|
||||
issuerUrl: string;
|
||||
clientId: string;
|
||||
clientSecret: string;
|
||||
}
|
||||
|
||||
export interface ProviderModel {
|
||||
id: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export interface AddOnboardingProviderRequest {
|
||||
name: string;
|
||||
displayName: string;
|
||||
type: string;
|
||||
baseUrl?: string;
|
||||
apiKey?: string;
|
||||
models?: ProviderModel[];
|
||||
}
|
||||
|
||||
export interface AddOnboardingProviderResponse {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export interface TestOnboardingProviderRequest {
|
||||
type: string;
|
||||
baseUrl?: string;
|
||||
apiKey?: string;
|
||||
}
|
||||
|
||||
export interface TestOnboardingProviderResponse {
|
||||
success: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export async function fetchOnboardingStatus(): Promise<OnboardingStatus> {
|
||||
return apiGet<OnboardingStatus>("/api/onboarding/status");
|
||||
}
|
||||
|
||||
export async function createBreakglassAdmin(
|
||||
request: BreakglassAdminRequest
|
||||
): Promise<BreakglassAdminResponse> {
|
||||
return apiPost<BreakglassAdminResponse>("/api/onboarding/breakglass", request);
|
||||
}
|
||||
|
||||
export async function configureOidcProvider(request: ConfigureOidcRequest): Promise<void> {
|
||||
await apiPost<unknown>("/api/onboarding/oidc", request);
|
||||
}
|
||||
|
||||
export async function addOnboardingProvider(
|
||||
request: AddOnboardingProviderRequest
|
||||
): Promise<AddOnboardingProviderResponse> {
|
||||
return apiPost<AddOnboardingProviderResponse>("/api/onboarding/provider", request);
|
||||
}
|
||||
|
||||
export async function testOnboardingProvider(
|
||||
request: TestOnboardingProviderRequest
|
||||
): Promise<TestOnboardingProviderResponse> {
|
||||
return apiPost<TestOnboardingProviderResponse>("/api/onboarding/provider/test", request);
|
||||
}
|
||||
|
||||
export async function completeOnboarding(): Promise<void> {
|
||||
await apiPost<unknown>("/api/onboarding/complete");
|
||||
}
|
||||
3
docker/.env.example
Normal file
3
docker/.env.example
Normal file
@@ -0,0 +1,3 @@
|
||||
DATABASE_URL=postgresql://mosaic:changeme@postgres:5432/mosaic
|
||||
DATABASE_PASSWORD=changeme
|
||||
MOSAIC_SECRET_KEY=your-secret-key-at-least-32-characters-long
|
||||
40
docker/README.md
Normal file
40
docker/README.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# Mosaic Docker (Core Services)
|
||||
|
||||
This folder includes the Compose stack for **core Mosaic services only**:
|
||||
|
||||
- `mosaic-api`
|
||||
- `mosaic-web`
|
||||
- `postgres`
|
||||
|
||||
User OpenClaw containers are **not** defined in Compose. They are created and managed dynamically by the API's `ContainerLifecycleService` through Docker socket access.
|
||||
|
||||
## Start the stack
|
||||
|
||||
```bash
|
||||
docker compose -f docker/mosaic-compose.yml up -d
|
||||
```
|
||||
|
||||
## Required environment variables
|
||||
|
||||
- `DATABASE_URL`
|
||||
- `MOSAIC_SECRET_KEY`
|
||||
- `DATABASE_PASSWORD`
|
||||
|
||||
Use [`docker/.env.example`](./.env.example) as a starting point.
|
||||
|
||||
## Architecture overview
|
||||
|
||||
See the design doc: [`docs/design/MS22-DB-CENTRIC-ARCHITECTURE.md`](../docs/design/MS22-DB-CENTRIC-ARCHITECTURE.md)
|
||||
|
||||
`mosaic-agents` is an internal-only bridge network reserved for dynamically created user containers.
|
||||
|
||||
## OpenClaw entrypoint behavior
|
||||
|
||||
`docker/openclaw-entrypoint.sh` is intended for dynamically created user OpenClaw containers:
|
||||
|
||||
1. Validates required env vars (`MOSAIC_API_URL`, `AGENT_TOKEN`, `AGENT_ID`).
|
||||
2. Fetches agent-specific OpenClaw config from Mosaic API internal endpoint.
|
||||
3. Writes the config to `/tmp/openclaw.json`.
|
||||
4. Starts OpenClaw gateway with `OPENCLAW_CONFIG_PATH=/tmp/openclaw.json`.
|
||||
|
||||
`docker/openclaw-healthcheck.sh` probes `http://localhost:18789/health` for container health.
|
||||
53
docker/mosaic-compose.yml
Normal file
53
docker/mosaic-compose.yml
Normal file
@@ -0,0 +1,53 @@
|
||||
services:
|
||||
mosaic-api:
|
||||
image: mosaic/api:latest
|
||||
environment:
|
||||
DATABASE_URL: ${DATABASE_URL}
|
||||
MOSAIC_SECRET_KEY: ${MOSAIC_SECRET_KEY}
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
networks:
|
||||
- internal
|
||||
healthcheck:
|
||||
test: ["CMD", "curl", "-f", "http://localhost:4000/api/health"]
|
||||
interval: 30s
|
||||
timeout: 10s
|
||||
retries: 3
|
||||
|
||||
mosaic-web:
|
||||
image: mosaic/web:latest
|
||||
environment:
|
||||
NEXT_PUBLIC_API_URL: http://mosaic-api:4000
|
||||
ports:
|
||||
- "3000:3000"
|
||||
networks:
|
||||
- internal
|
||||
depends_on:
|
||||
mosaic-api:
|
||||
condition: service_healthy
|
||||
|
||||
postgres:
|
||||
image: postgres:17-alpine
|
||||
environment:
|
||||
POSTGRES_DB: mosaic
|
||||
POSTGRES_USER: mosaic
|
||||
POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
|
||||
volumes:
|
||||
- postgres-data:/var/lib/postgresql/data
|
||||
networks:
|
||||
- internal
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U mosaic"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
|
||||
networks:
|
||||
internal:
|
||||
driver: bridge
|
||||
mosaic-agents:
|
||||
driver: bridge
|
||||
internal: true
|
||||
|
||||
volumes:
|
||||
postgres-data:
|
||||
20
docker/openclaw-entrypoint.sh
Executable file
20
docker/openclaw-entrypoint.sh
Executable file
@@ -0,0 +1,20 @@
|
||||
#!/bin/sh
|
||||
set -e
|
||||
: "${MOSAIC_API_URL:?MOSAIC_API_URL is required}"
|
||||
: "${AGENT_TOKEN:?AGENT_TOKEN is required}"
|
||||
: "${AGENT_ID:?AGENT_ID is required}"
|
||||
|
||||
echo "[entrypoint] Fetching config for agent ${AGENT_ID}..."
|
||||
HTTP_CODE=$(curl -sf -w "%{http_code}" \
|
||||
"${MOSAIC_API_URL}/api/internal/agent-config/${AGENT_ID}" \
|
||||
-H "Authorization: Bearer ${AGENT_TOKEN}" \
|
||||
-o /tmp/openclaw.json)
|
||||
|
||||
if [ "$HTTP_CODE" != "200" ]; then
|
||||
echo "[entrypoint] ERROR: Config fetch failed with HTTP ${HTTP_CODE}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "[entrypoint] Config loaded. Starting OpenClaw gateway..."
|
||||
export OPENCLAW_CONFIG_PATH=/tmp/openclaw.json
|
||||
exec openclaw gateway run --bind lan --auth token
|
||||
2
docker/openclaw-healthcheck.sh
Executable file
2
docker/openclaw-healthcheck.sh
Executable file
@@ -0,0 +1,2 @@
|
||||
#!/bin/sh
|
||||
curl -sf http://localhost:18789/health || exit 1
|
||||
29
pnpm-lock.yaml
generated
29
pnpm-lock.yaml
generated
@@ -102,6 +102,9 @@ importers:
|
||||
'@nestjs/platform-socket.io':
|
||||
specifier: ^11.1.12
|
||||
version: 11.1.12(@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/websockets@11.1.12)(rxjs@7.8.2)
|
||||
'@nestjs/schedule':
|
||||
specifier: ^6.1.1
|
||||
version: 6.1.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))(@nestjs/core@11.1.12)
|
||||
'@nestjs/throttler':
|
||||
specifier: ^6.5.0
|
||||
version: 6.5.0(@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)(reflect-metadata@0.2.2)
|
||||
@@ -1741,6 +1744,12 @@ packages:
|
||||
'@nestjs/websockets': ^11.0.0
|
||||
rxjs: ^7.1.0
|
||||
|
||||
'@nestjs/schedule@6.1.1':
|
||||
resolution: {integrity: sha512-kQl1RRgi02GJ0uaUGCrXHCcwISsCsJDciCKe38ykJZgnAeeoeVWs8luWtBo4AqAAXm4nS5K8RlV0smHUJ4+2FA==}
|
||||
peerDependencies:
|
||||
'@nestjs/common': ^10.0.0 || ^11.0.0
|
||||
'@nestjs/core': ^10.0.0 || ^11.0.0
|
||||
|
||||
'@nestjs/schematics@11.0.9':
|
||||
resolution: {integrity: sha512-0NfPbPlEaGwIT8/TCThxLzrlz3yzDNkfRNpbL7FiplKq3w4qXpJg0JYwqgMEJnLQZm3L/L/5XjoyfJHUO3qX9g==}
|
||||
peerDependencies:
|
||||
@@ -3241,6 +3250,9 @@ packages:
|
||||
'@types/linkify-it@5.0.0':
|
||||
resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
|
||||
|
||||
'@types/luxon@3.7.1':
|
||||
resolution: {integrity: sha512-H3iskjFIAn5SlJU7OuxUmTEpebK6TKB8rxZShDslBMZJ5u9S//KM1sbdAisiSrqwLQncVjnpi2OK2J51h+4lsg==}
|
||||
|
||||
'@types/markdown-it@13.0.9':
|
||||
resolution: {integrity: sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==}
|
||||
|
||||
@@ -4251,6 +4263,10 @@ packages:
|
||||
resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
|
||||
cron@4.4.0:
|
||||
resolution: {integrity: sha512-fkdfq+b+AHI4cKdhZlppHveI/mgz2qpiYxcm+t5E5TsxX7QrLS1VE0+7GENEk9z0EeGPcpSciGv6ez24duWhwQ==}
|
||||
engines: {node: '>=18.x'}
|
||||
|
||||
cross-spawn@7.0.6:
|
||||
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
|
||||
engines: {node: '>= 8'}
|
||||
@@ -8863,6 +8879,12 @@ snapshots:
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
|
||||
'@nestjs/schedule@6.1.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))(@nestjs/core@11.1.12)':
|
||||
dependencies:
|
||||
'@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(@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/platform-express@11.1.12)(@nestjs/websockets@11.1.12)(reflect-metadata@0.2.2)(rxjs@7.8.2)
|
||||
cron: 4.4.0
|
||||
|
||||
'@nestjs/schematics@11.0.9(chokidar@4.0.3)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@angular-devkit/core': 19.2.17(chokidar@4.0.3)
|
||||
@@ -10593,6 +10615,8 @@ snapshots:
|
||||
|
||||
'@types/linkify-it@5.0.0': {}
|
||||
|
||||
'@types/luxon@3.7.1': {}
|
||||
|
||||
'@types/markdown-it@13.0.9':
|
||||
dependencies:
|
||||
'@types/linkify-it': 3.0.5
|
||||
@@ -11787,6 +11811,11 @@ snapshots:
|
||||
dependencies:
|
||||
luxon: 3.7.2
|
||||
|
||||
cron@4.4.0:
|
||||
dependencies:
|
||||
'@types/luxon': 3.7.1
|
||||
luxon: 3.7.2
|
||||
|
||||
cross-spawn@7.0.6:
|
||||
dependencies:
|
||||
path-key: 3.1.1
|
||||
|
||||
Reference in New Issue
Block a user