Compare commits

..

4 Commits

Author SHA1 Message Date
29663f7ff8 feat(web): onboarding wizard UI (MS22-P1f)
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
2026-03-01 10:06:18 -06:00
029c190c05 feat(api): chat proxy (MS22-P1i) (#615)
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>
2026-03-01 15:59:00 +00:00
477d0c8fdf feat(api): idle container reaper (MS22-P1k) (#614)
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>
2026-03-01 15:50:34 +00:00
03af39def9 feat(docker): core compose + entrypoint (MS22-P1j) (#613)
All checks were successful
ci/woodpecker/push/infra Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>
2026-03-01 15:50:33 +00:00
16 changed files with 1449 additions and 0 deletions

View File

@@ -57,6 +57,7 @@ import { ContainerLifecycleModule } from "./container-lifecycle/container-lifecy
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: [
@@ -135,6 +136,7 @@ import { OnboardingModule } from "./onboarding/onboarding.module";
ContainerReaperModule,
FleetSettingsModule,
OnboardingModule,
ChatProxyModule,
],
controllers: [AppController, CsrfController],
providers: [

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

View 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[];
}

View 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 {}

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

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

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

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

View 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("/");
});
});
});

View 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;

View 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
View 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
View 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
View 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
View 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
View File

@@ -0,0 +1,2 @@
#!/bin/sh
curl -sf http://localhost:18789/health || exit 1