Compare commits
1 Commits
fix/contai
...
feat/ms22-
| Author | SHA1 | Date | |
|---|---|---|---|
| 9a4d4e750b |
@@ -1,11 +1,10 @@
|
||||
import { Module } from "@nestjs/common";
|
||||
import { ConfigModule } from "@nestjs/config";
|
||||
import { PrismaModule } from "../prisma/prisma.module";
|
||||
import { CryptoModule } from "../crypto/crypto.module";
|
||||
import { ContainerLifecycleService } from "./container-lifecycle.service";
|
||||
|
||||
@Module({
|
||||
imports: [ConfigModule, PrismaModule, CryptoModule],
|
||||
imports: [PrismaModule, CryptoModule],
|
||||
providers: [ContainerLifecycleService],
|
||||
exports: [ContainerLifecycleService],
|
||||
})
|
||||
|
||||
@@ -1,356 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
type ChangeEvent,
|
||||
type ReactElement,
|
||||
type SyntheticEvent,
|
||||
} from "react";
|
||||
import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
fetchFleetAgentConfig,
|
||||
fetchFleetProviders,
|
||||
updateFleetAgentConfig,
|
||||
type FleetProvider,
|
||||
type FleetProviderModel,
|
||||
type UpdateFleetAgentConfigRequest,
|
||||
} from "@/lib/api/fleet-settings";
|
||||
|
||||
function getErrorMessage(error: unknown, fallback: string): string {
|
||||
if (error instanceof Error && error.message.trim().length > 0) {
|
||||
return error.message;
|
||||
}
|
||||
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function normalizeProviderModels(models: unknown): FleetProviderModel[] {
|
||||
if (!Array.isArray(models)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const parsed: FleetProviderModel[] = [];
|
||||
|
||||
models.forEach((entry) => {
|
||||
if (typeof entry === "string" && entry.trim().length > 0) {
|
||||
parsed.push({ id: entry.trim(), name: entry.trim() });
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry && typeof entry === "object") {
|
||||
const record = entry as Record<string, unknown>;
|
||||
const id =
|
||||
typeof record.id === "string"
|
||||
? record.id.trim()
|
||||
: typeof record.name === "string"
|
||||
? record.name.trim()
|
||||
: "";
|
||||
|
||||
if (id.length > 0) {
|
||||
parsed.push({ id, name: id });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const seen = new Set<string>();
|
||||
return parsed.filter((model) => {
|
||||
if (seen.has(model.id)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
seen.add(model.id);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function parseModelList(value: string): string[] {
|
||||
const seen = new Set<string>();
|
||||
|
||||
return value
|
||||
.split(/\n|,/g)
|
||||
.map((segment) => segment.trim())
|
||||
.filter((segment) => segment.length > 0)
|
||||
.filter((segment) => {
|
||||
if (seen.has(segment)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
seen.add(segment);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function deriveAvailableModels(providers: FleetProvider[]): string[] {
|
||||
const seen = new Set<string>();
|
||||
const models: string[] = [];
|
||||
|
||||
providers.forEach((provider) => {
|
||||
normalizeProviderModels(provider.models).forEach((model) => {
|
||||
if (seen.has(model.id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
seen.add(model.id);
|
||||
models.push(model.id);
|
||||
});
|
||||
});
|
||||
|
||||
return models.sort((left, right) => left.localeCompare(right));
|
||||
}
|
||||
|
||||
export default function AgentConfigSettingsPage(): ReactElement {
|
||||
const [providers, setProviders] = useState<FleetProvider[]>([]);
|
||||
const [primaryModel, setPrimaryModel] = useState<string>("");
|
||||
const [fallbackModelsText, setFallbackModelsText] = useState<string>("");
|
||||
const [personality, setPersonality] = useState<string>("");
|
||||
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [isSaving, setIsSaving] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
const availableModels = useMemo(() => deriveAvailableModels(providers), [providers]);
|
||||
const fallbackModels = useMemo(() => parseModelList(fallbackModelsText), [fallbackModelsText]);
|
||||
|
||||
const modelSelectOptions = useMemo(() => {
|
||||
if (primaryModel.length > 0 && !availableModels.includes(primaryModel)) {
|
||||
return [primaryModel, ...availableModels];
|
||||
}
|
||||
|
||||
return availableModels;
|
||||
}, [availableModels, primaryModel]);
|
||||
|
||||
const loadSettings = useCallback(async (): Promise<void> => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const [providerData, agentConfig] = await Promise.all([
|
||||
fetchFleetProviders(),
|
||||
fetchFleetAgentConfig(),
|
||||
]);
|
||||
setProviders(providerData);
|
||||
setPrimaryModel(agentConfig.primaryModel ?? "");
|
||||
setFallbackModelsText(agentConfig.fallbackModels.join("\n"));
|
||||
setPersonality(agentConfig.personality ?? "");
|
||||
setError(null);
|
||||
} catch (loadError: unknown) {
|
||||
setError(getErrorMessage(loadError, "Failed to load agent configuration."));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadSettings();
|
||||
}, [loadSettings]);
|
||||
|
||||
function appendFallbackModel(model: string): void {
|
||||
const current = parseModelList(fallbackModelsText);
|
||||
if (current.includes(model)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const next = [...current, model];
|
||||
setFallbackModelsText(next.join("\n"));
|
||||
}
|
||||
|
||||
async function handleSave(event: SyntheticEvent): Promise<void> {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
const updatePayload: UpdateFleetAgentConfigRequest = {
|
||||
personality: personality.trim(),
|
||||
};
|
||||
|
||||
if (primaryModel.trim().length > 0) {
|
||||
updatePayload.primaryModel = primaryModel.trim();
|
||||
}
|
||||
|
||||
const parsedFallbacks = parseModelList(fallbackModelsText).filter(
|
||||
(model) => model !== primaryModel.trim()
|
||||
);
|
||||
if (parsedFallbacks.length > 0) {
|
||||
updatePayload.fallbackModels = parsedFallbacks;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSaving(true);
|
||||
await updateFleetAgentConfig(updatePayload);
|
||||
setSuccessMessage("Agent configuration saved.");
|
||||
await loadSettings();
|
||||
} catch (saveError: unknown) {
|
||||
setError(getErrorMessage(saveError, "Failed to save agent configuration."));
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6 space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Agent Configuration</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Assign primary and fallback models for your agent runtime behavior.
|
||||
</p>
|
||||
</div>
|
||||
<FleetSettingsNav />
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Current Assignment</CardTitle>
|
||||
<CardDescription>
|
||||
Snapshot of your currently saved model routing configuration.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading configuration...</p>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Primary Model</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{primaryModel.length > 0 ? primaryModel : "No primary model configured"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-medium">Fallback Models</p>
|
||||
{fallbackModels.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No fallback models configured</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{fallbackModels.map((model) => (
|
||||
<Badge key={`current-${model}`} variant="outline">
|
||||
{model}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Update Agent Config</CardTitle>
|
||||
<CardDescription>
|
||||
Select a primary model and define fallback ordering. Models come from your provider
|
||||
settings.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={(event) => void handleSave(event)} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="primary-model">Primary Model</Label>
|
||||
<Select
|
||||
value={primaryModel.length > 0 ? primaryModel : "__none__"}
|
||||
onValueChange={(value) => {
|
||||
setPrimaryModel(value === "__none__" ? "" : value);
|
||||
}}
|
||||
disabled={isLoading || isSaving}
|
||||
>
|
||||
<SelectTrigger id="primary-model">
|
||||
<SelectValue placeholder="Select a primary model" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__">No primary model selected</SelectItem>
|
||||
{modelSelectOptions.map((model) => (
|
||||
<SelectItem key={model} value={model}>
|
||||
{model}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{availableModels.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
No models available yet. Add provider models first in Providers settings.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="fallback-models">Fallback Models</Label>
|
||||
<Textarea
|
||||
id="fallback-models"
|
||||
value={fallbackModelsText}
|
||||
onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setFallbackModelsText(event.target.value);
|
||||
}}
|
||||
rows={4}
|
||||
placeholder={"One model per line\nExample: gpt-4.1-mini"}
|
||||
disabled={isLoading || isSaving}
|
||||
/>
|
||||
{availableModels.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{availableModels
|
||||
.filter((model) => model !== primaryModel)
|
||||
.map((model) => (
|
||||
<Button
|
||||
key={`suggest-${model}`}
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
appendFallbackModel(model);
|
||||
}}
|
||||
disabled={fallbackModels.includes(model) || isSaving}
|
||||
>
|
||||
{fallbackModels.includes(model) ? `Added: ${model}` : `Add ${model}`}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="agent-personality">Personality / SOUL</Label>
|
||||
<Textarea
|
||||
id="agent-personality"
|
||||
value={personality}
|
||||
onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setPersonality(event.target.value);
|
||||
}}
|
||||
rows={8}
|
||||
placeholder="Optional system personality instructions..."
|
||||
disabled={isLoading || isSaving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{successMessage ? <p className="text-sm text-emerald-600">{successMessage}</p> : null}
|
||||
|
||||
<Button type="submit" disabled={isLoading || isSaving}>
|
||||
{isSaving ? "Saving..." : "Save Agent Config"}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,492 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
type ChangeEvent,
|
||||
type ReactElement,
|
||||
type SyntheticEvent,
|
||||
} from "react";
|
||||
import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
|
||||
import { SettingsAccessDenied } from "@/components/settings/SettingsAccessDenied";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
deleteFleetOidcConfig,
|
||||
fetchFleetOidcConfig,
|
||||
resetBreakglassAdminPassword,
|
||||
updateFleetOidcConfig,
|
||||
type FleetOidcConfig,
|
||||
} from "@/lib/api/fleet-settings";
|
||||
import { fetchOnboardingStatus } from "@/lib/api/onboarding";
|
||||
|
||||
interface OidcFormState {
|
||||
issuerUrl: string;
|
||||
clientId: string;
|
||||
clientSecret: string;
|
||||
}
|
||||
|
||||
interface BreakglassFormState {
|
||||
username: string;
|
||||
currentPassword: string;
|
||||
newPassword: string;
|
||||
confirmPassword: string;
|
||||
}
|
||||
|
||||
const INITIAL_OIDC_FORM: OidcFormState = {
|
||||
issuerUrl: "",
|
||||
clientId: "",
|
||||
clientSecret: "",
|
||||
};
|
||||
|
||||
const INITIAL_BREAKGLASS_FORM: BreakglassFormState = {
|
||||
username: "",
|
||||
currentPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
};
|
||||
|
||||
function getErrorMessage(error: unknown, fallback: string): string {
|
||||
if (error instanceof Error && error.message.trim().length > 0) {
|
||||
return error.message;
|
||||
}
|
||||
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function isAdminGuardError(error: unknown): boolean {
|
||||
if (!(error instanceof Error)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const normalized = error.message.toLowerCase();
|
||||
return (
|
||||
normalized.includes("requires system administrator") ||
|
||||
normalized.includes("forbidden") ||
|
||||
normalized.includes("403")
|
||||
);
|
||||
}
|
||||
|
||||
export default function AuthSettingsPage(): ReactElement {
|
||||
const [oidcConfig, setOidcConfig] = useState<FleetOidcConfig | null>(null);
|
||||
const [oidcForm, setOidcForm] = useState<OidcFormState>(INITIAL_OIDC_FORM);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [isSavingOidc, setIsSavingOidc] = useState<boolean>(false);
|
||||
const [isDeletingOidc, setIsDeletingOidc] = useState<boolean>(false);
|
||||
const [oidcError, setOidcError] = useState<string | null>(null);
|
||||
const [oidcSuccessMessage, setOidcSuccessMessage] = useState<string | null>(null);
|
||||
const [showRemoveOidcDialog, setShowRemoveOidcDialog] = useState<boolean>(false);
|
||||
|
||||
const [breakglassForm, setBreakglassForm] =
|
||||
useState<BreakglassFormState>(INITIAL_BREAKGLASS_FORM);
|
||||
const [breakglassStatus, setBreakglassStatus] = useState<"active" | "inactive">("inactive");
|
||||
const [isResettingPassword, setIsResettingPassword] = useState<boolean>(false);
|
||||
const [breakglassError, setBreakglassError] = useState<string | null>(null);
|
||||
const [breakglassSuccessMessage, setBreakglassSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
const [isAccessDenied, setIsAccessDenied] = useState<boolean>(false);
|
||||
|
||||
const loadAuthSettings = useCallback(async (): Promise<void> => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const [oidcResponse, onboardingStatus] = await Promise.all([
|
||||
fetchFleetOidcConfig(),
|
||||
fetchOnboardingStatus().catch(() => ({ completed: false })),
|
||||
]);
|
||||
|
||||
setOidcConfig(oidcResponse);
|
||||
setOidcForm({
|
||||
issuerUrl: oidcResponse.issuerUrl ?? "",
|
||||
clientId: oidcResponse.clientId ?? "",
|
||||
clientSecret: "",
|
||||
});
|
||||
setBreakglassStatus(onboardingStatus.completed ? "active" : "inactive");
|
||||
setIsAccessDenied(false);
|
||||
setOidcError(null);
|
||||
} catch (loadError: unknown) {
|
||||
if (isAdminGuardError(loadError)) {
|
||||
setIsAccessDenied(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setOidcError(getErrorMessage(loadError, "Failed to load authentication settings."));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadAuthSettings();
|
||||
}, [loadAuthSettings]);
|
||||
|
||||
async function handleSaveOidc(event: SyntheticEvent): Promise<void> {
|
||||
event.preventDefault();
|
||||
setOidcError(null);
|
||||
setOidcSuccessMessage(null);
|
||||
|
||||
const issuerUrl = oidcForm.issuerUrl.trim();
|
||||
const clientId = oidcForm.clientId.trim();
|
||||
const clientSecret = oidcForm.clientSecret.trim();
|
||||
|
||||
if (issuerUrl.length === 0 || clientId.length === 0 || clientSecret.length === 0) {
|
||||
setOidcError("Issuer URL, client ID, and client secret are required.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSavingOidc(true);
|
||||
await updateFleetOidcConfig({
|
||||
issuerUrl,
|
||||
clientId,
|
||||
clientSecret,
|
||||
});
|
||||
setOidcSuccessMessage("OIDC configuration updated.");
|
||||
await loadAuthSettings();
|
||||
} catch (saveError: unknown) {
|
||||
setOidcError(getErrorMessage(saveError, "Failed to update OIDC configuration."));
|
||||
} finally {
|
||||
setIsSavingOidc(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveOidc(): Promise<void> {
|
||||
try {
|
||||
setIsDeletingOidc(true);
|
||||
await deleteFleetOidcConfig();
|
||||
setOidcSuccessMessage("OIDC configuration removed.");
|
||||
setShowRemoveOidcDialog(false);
|
||||
await loadAuthSettings();
|
||||
} catch (deleteError: unknown) {
|
||||
setOidcError(getErrorMessage(deleteError, "Failed to remove OIDC configuration."));
|
||||
} finally {
|
||||
setIsDeletingOidc(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleResetBreakglassPassword(event: SyntheticEvent): Promise<void> {
|
||||
event.preventDefault();
|
||||
setBreakglassError(null);
|
||||
setBreakglassSuccessMessage(null);
|
||||
|
||||
const username = breakglassForm.username.trim();
|
||||
const newPassword = breakglassForm.newPassword;
|
||||
const confirmPassword = breakglassForm.confirmPassword;
|
||||
|
||||
if (username.length === 0) {
|
||||
setBreakglassError("Username is required.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 8) {
|
||||
setBreakglassError("New password must be at least 8 characters.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setBreakglassError("Password confirmation does not match.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsResettingPassword(true);
|
||||
await resetBreakglassAdminPassword({
|
||||
username,
|
||||
newPassword,
|
||||
});
|
||||
setBreakglassSuccessMessage(`Password reset for "${username}".`);
|
||||
setBreakglassStatus("active");
|
||||
setBreakglassForm((previous) => ({
|
||||
...previous,
|
||||
currentPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
}));
|
||||
} catch (resetError: unknown) {
|
||||
setBreakglassError(getErrorMessage(resetError, "Failed to reset breakglass password."));
|
||||
} finally {
|
||||
setIsResettingPassword(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6 space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Authentication Settings</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Configure OIDC and breakglass admin recovery credentials.
|
||||
</p>
|
||||
</div>
|
||||
<FleetSettingsNav />
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-sm text-muted-foreground">
|
||||
Loading authentication settings...
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{!isLoading && isAccessDenied ? (
|
||||
<SettingsAccessDenied message="Authentication settings require system administrator privileges." />
|
||||
) : null}
|
||||
|
||||
{!isLoading && !isAccessDenied ? (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>OIDC Provider</CardTitle>
|
||||
<CardDescription>
|
||||
Manage your OpenID Connect issuer and OAuth client credentials.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
<div className="rounded-lg border p-4 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">Configured</p>
|
||||
<Badge variant={oidcConfig?.configured ? "default" : "secondary"}>
|
||||
{oidcConfig?.configured ? "Yes" : "No"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Issuer URL: {oidcConfig?.issuerUrl ?? "Not configured"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Client ID: {oidcConfig?.clientId ?? "Not configured"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">Client secret: hidden</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={(event) => void handleSaveOidc(event)} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="oidc-issuer-url">Issuer URL</Label>
|
||||
<Input
|
||||
id="oidc-issuer-url"
|
||||
value={oidcForm.issuerUrl}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setOidcForm((previous) => ({ ...previous, issuerUrl: event.target.value }));
|
||||
}}
|
||||
placeholder="https://issuer.example.com"
|
||||
disabled={isSavingOidc}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="oidc-client-id">Client ID</Label>
|
||||
<Input
|
||||
id="oidc-client-id"
|
||||
value={oidcForm.clientId}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setOidcForm((previous) => ({ ...previous, clientId: event.target.value }));
|
||||
}}
|
||||
placeholder="mosaic-web"
|
||||
disabled={isSavingOidc}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="oidc-client-secret">Client Secret</Label>
|
||||
<Input
|
||||
id="oidc-client-secret"
|
||||
type="password"
|
||||
value={oidcForm.clientSecret}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setOidcForm((previous) => ({
|
||||
...previous,
|
||||
clientSecret: event.target.value,
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter new secret"
|
||||
autoComplete="new-password"
|
||||
disabled={isSavingOidc}
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
The secret is encrypted on save and never returned to the UI.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{oidcError ? (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{oidcError}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{oidcSuccessMessage ? (
|
||||
<p className="text-sm text-emerald-600">{oidcSuccessMessage}</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="submit" disabled={isSavingOidc}>
|
||||
{isSavingOidc ? "Saving..." : "Save OIDC"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
setShowRemoveOidcDialog(true);
|
||||
}}
|
||||
disabled={isDeletingOidc || !oidcConfig?.configured}
|
||||
>
|
||||
Remove OIDC
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Breakglass Admin</CardTitle>
|
||||
<CardDescription>
|
||||
Reset breakglass credentials for emergency local access.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">Status</p>
|
||||
<Badge variant={breakglassStatus === "active" ? "default" : "secondary"}>
|
||||
{breakglassStatus}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={(event) => void handleResetBreakglassPassword(event)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="breakglass-username">Username</Label>
|
||||
<Input
|
||||
id="breakglass-username"
|
||||
value={breakglassForm.username}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setBreakglassForm((previous) => ({
|
||||
...previous,
|
||||
username: event.target.value,
|
||||
}));
|
||||
}}
|
||||
placeholder="admin"
|
||||
disabled={isResettingPassword}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="breakglass-current-password">Current Password (optional)</Label>
|
||||
<Input
|
||||
id="breakglass-current-password"
|
||||
type="password"
|
||||
value={breakglassForm.currentPassword}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setBreakglassForm((previous) => ({
|
||||
...previous,
|
||||
currentPassword: event.target.value,
|
||||
}));
|
||||
}}
|
||||
placeholder="Optional operator confirmation"
|
||||
autoComplete="current-password"
|
||||
disabled={isResettingPassword}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="breakglass-new-password">New Password</Label>
|
||||
<Input
|
||||
id="breakglass-new-password"
|
||||
type="password"
|
||||
value={breakglassForm.newPassword}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setBreakglassForm((previous) => ({
|
||||
...previous,
|
||||
newPassword: event.target.value,
|
||||
}));
|
||||
}}
|
||||
placeholder="At least 8 characters"
|
||||
autoComplete="new-password"
|
||||
disabled={isResettingPassword}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="breakglass-confirm-password">Confirm Password</Label>
|
||||
<Input
|
||||
id="breakglass-confirm-password"
|
||||
type="password"
|
||||
value={breakglassForm.confirmPassword}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setBreakglassForm((previous) => ({
|
||||
...previous,
|
||||
confirmPassword: event.target.value,
|
||||
}));
|
||||
}}
|
||||
placeholder="Re-enter password"
|
||||
autoComplete="new-password"
|
||||
disabled={isResettingPassword}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{breakglassError ? (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{breakglassError}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{breakglassSuccessMessage ? (
|
||||
<p className="text-sm text-emerald-600">{breakglassSuccessMessage}</p>
|
||||
) : null}
|
||||
|
||||
<Button type="submit" disabled={isResettingPassword}>
|
||||
{isResettingPassword ? "Resetting..." : "Reset Password"}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<AlertDialog
|
||||
open={showRemoveOidcDialog}
|
||||
onOpenChange={(open) => {
|
||||
if (!open && !isDeletingOidc) {
|
||||
setShowRemoveOidcDialog(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Remove OIDC Configuration</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will remove issuer URL, client ID, and client secret from system configuration.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isDeletingOidc}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleRemoveOidc} disabled={isDeletingOidc}>
|
||||
{isDeletingOidc ? "Removing..." : "Remove OIDC"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -200,82 +200,6 @@ const categories: CategoryConfig[] = [
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "LLM Providers",
|
||||
description:
|
||||
"Add and manage LLM providers, encrypted API keys, base URLs, and model inventories.",
|
||||
href: "/settings/providers",
|
||||
accent: "var(--ms-blue-400)",
|
||||
iconBg: "rgba(47, 128, 255, 0.12)",
|
||||
icon: (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="2.5" y="4" width="15" height="12" rx="2" />
|
||||
<path d="M2.5 8h15" />
|
||||
<circle cx="6" cy="12" r="1" />
|
||||
<circle cx="10" cy="12" r="1" />
|
||||
<circle cx="14" cy="12" r="1" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Agent Config",
|
||||
description: "Choose primary and fallback models, plus optional personality/SOUL instructions.",
|
||||
href: "/settings/agent-config",
|
||||
accent: "var(--ms-teal-400)",
|
||||
iconBg: "rgba(20, 184, 166, 0.12)",
|
||||
icon: (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M4 5h12" />
|
||||
<path d="M4 10h12" />
|
||||
<path d="M4 15h7" />
|
||||
<circle cx="14.5" cy="15" r="1.5" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Authentication",
|
||||
description: "Manage OIDC provider settings and breakglass admin password recovery.",
|
||||
href: "/settings/auth",
|
||||
accent: "var(--ms-amber-400)",
|
||||
iconBg: "rgba(245, 158, 11, 0.12)",
|
||||
icon: (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="5" y="8" width="10" height="8" rx="1.5" />
|
||||
<path d="M7 8V6a3 3 0 0 1 6 0v2" />
|
||||
<circle cx="10" cy="12" r="1" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Users",
|
||||
description: "Invite, manage roles, and deactivate users across your workspaces.",
|
||||
|
||||
@@ -1,631 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
type ChangeEvent,
|
||||
type ReactElement,
|
||||
type SyntheticEvent,
|
||||
} from "react";
|
||||
import { Settings, Trash2 } from "lucide-react";
|
||||
import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
createFleetProvider,
|
||||
deleteFleetProvider,
|
||||
fetchFleetProviders,
|
||||
updateFleetProvider,
|
||||
type CreateFleetProviderRequest,
|
||||
type FleetProvider,
|
||||
type FleetProviderModel,
|
||||
type UpdateFleetProviderRequest,
|
||||
} from "@/lib/api/fleet-settings";
|
||||
|
||||
interface ProviderTypeOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface ProviderFormState {
|
||||
type: string;
|
||||
displayName: string;
|
||||
apiKey: string;
|
||||
baseUrl: string;
|
||||
modelsText: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
const PROVIDER_TYPE_OPTIONS: ProviderTypeOption[] = [
|
||||
{ value: "openai", label: "OpenAI Compatible" },
|
||||
{ value: "claude", label: "Claude / Anthropic" },
|
||||
{ value: "ollama", label: "Ollama" },
|
||||
{ value: "zai", label: "Z.ai" },
|
||||
{ value: "custom", label: "Custom" },
|
||||
];
|
||||
|
||||
const INITIAL_FORM: ProviderFormState = {
|
||||
type: "openai",
|
||||
displayName: "",
|
||||
apiKey: "",
|
||||
baseUrl: "",
|
||||
modelsText: "",
|
||||
isActive: true,
|
||||
};
|
||||
|
||||
function getErrorMessage(error: unknown, fallback: string): string {
|
||||
if (error instanceof Error && error.message.trim().length > 0) {
|
||||
return error.message;
|
||||
}
|
||||
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function buildProviderName(displayName: string, type: string): string {
|
||||
const slug = displayName
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-+/, "")
|
||||
.replace(/-+$/, "");
|
||||
|
||||
const candidate = `${type}-${slug.length > 0 ? slug : "provider"}`;
|
||||
return candidate.slice(0, 100);
|
||||
}
|
||||
|
||||
function normalizeProviderModels(models: unknown): FleetProviderModel[] {
|
||||
if (!Array.isArray(models)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const normalized: FleetProviderModel[] = [];
|
||||
|
||||
models.forEach((entry) => {
|
||||
if (typeof entry === "string" && entry.trim().length > 0) {
|
||||
normalized.push({ id: entry.trim(), name: entry.trim() });
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry && typeof entry === "object") {
|
||||
const record = entry as Record<string, unknown>;
|
||||
const id =
|
||||
typeof record.id === "string"
|
||||
? record.id.trim()
|
||||
: typeof record.name === "string"
|
||||
? record.name.trim()
|
||||
: "";
|
||||
|
||||
if (id.length > 0) {
|
||||
const name =
|
||||
typeof record.name === "string" && record.name.trim().length > 0
|
||||
? record.name.trim()
|
||||
: id;
|
||||
normalized.push({ id, name });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const seen = new Set<string>();
|
||||
return normalized.filter((model) => {
|
||||
if (seen.has(model.id)) {
|
||||
return false;
|
||||
}
|
||||
seen.add(model.id);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function modelsToEditorText(models: unknown): string {
|
||||
return normalizeProviderModels(models)
|
||||
.map((model) => model.id)
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
function parseModelsText(value: string): FleetProviderModel[] {
|
||||
const seen = new Set<string>();
|
||||
|
||||
return value
|
||||
.split(/\n|,/g)
|
||||
.map((segment) => segment.trim())
|
||||
.filter((segment) => segment.length > 0)
|
||||
.filter((segment) => {
|
||||
if (seen.has(segment)) {
|
||||
return false;
|
||||
}
|
||||
seen.add(segment);
|
||||
return true;
|
||||
})
|
||||
.map((id) => ({ id, name: id }));
|
||||
}
|
||||
|
||||
function maskApiKey(value: string): string {
|
||||
if (value.length === 0) {
|
||||
return "Not set";
|
||||
}
|
||||
|
||||
if (value.length <= 7) {
|
||||
return "*".repeat(Math.max(4, value.length));
|
||||
}
|
||||
|
||||
return `${value.slice(0, 3)}****...${value.slice(-4)}`;
|
||||
}
|
||||
|
||||
export default function ProvidersSettingsPage(): ReactElement {
|
||||
const [providers, setProviders] = useState<FleetProvider[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
|
||||
const [editingProvider, setEditingProvider] = useState<FleetProvider | null>(null);
|
||||
const [form, setForm] = useState<ProviderFormState>(INITIAL_FORM);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [isSaving, setIsSaving] = useState<boolean>(false);
|
||||
|
||||
const [deleteTarget, setDeleteTarget] = useState<FleetProvider | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState<boolean>(false);
|
||||
|
||||
const loadProviders = useCallback(async (showLoadingState: boolean): Promise<void> => {
|
||||
if (showLoadingState) {
|
||||
setIsLoading(true);
|
||||
} else {
|
||||
setIsRefreshing(true);
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await fetchFleetProviders();
|
||||
setProviders(data);
|
||||
setError(null);
|
||||
} catch (loadError: unknown) {
|
||||
setError(getErrorMessage(loadError, "Failed to load providers."));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadProviders(true);
|
||||
}, [loadProviders]);
|
||||
|
||||
const apiKeyHint = useMemo(() => {
|
||||
const enteredKey = form.apiKey.trim();
|
||||
|
||||
if (enteredKey.length > 0) {
|
||||
return `Masked preview: ${maskApiKey(enteredKey)}`;
|
||||
}
|
||||
|
||||
if (editingProvider) {
|
||||
return "Stored API key remains encrypted and hidden. Enter a new key only when rotating.";
|
||||
}
|
||||
|
||||
return "API keys are never shown decrypted. Only masked previews are displayed while typing.";
|
||||
}, [editingProvider, form.apiKey]);
|
||||
|
||||
function openCreateDialog(): void {
|
||||
setEditingProvider(null);
|
||||
setForm(INITIAL_FORM);
|
||||
setFormError(null);
|
||||
setIsDialogOpen(true);
|
||||
}
|
||||
|
||||
function openEditDialog(provider: FleetProvider): void {
|
||||
setEditingProvider(provider);
|
||||
setForm({
|
||||
type: provider.type,
|
||||
displayName: provider.displayName,
|
||||
apiKey: "",
|
||||
baseUrl: provider.baseUrl ?? "",
|
||||
modelsText: modelsToEditorText(provider.models),
|
||||
isActive: provider.isActive,
|
||||
});
|
||||
setFormError(null);
|
||||
setIsDialogOpen(true);
|
||||
}
|
||||
|
||||
function closeDialog(): void {
|
||||
if (isSaving) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDialogOpen(false);
|
||||
setEditingProvider(null);
|
||||
setForm(INITIAL_FORM);
|
||||
setFormError(null);
|
||||
}
|
||||
|
||||
async function handleSubmit(event: SyntheticEvent): Promise<void> {
|
||||
event.preventDefault();
|
||||
setFormError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
const displayName = form.displayName.trim();
|
||||
if (displayName.length === 0) {
|
||||
setFormError("Display name is required.");
|
||||
return;
|
||||
}
|
||||
|
||||
const models = parseModelsText(form.modelsText);
|
||||
const baseUrl = form.baseUrl.trim();
|
||||
const apiKey = form.apiKey.trim();
|
||||
|
||||
try {
|
||||
setIsSaving(true);
|
||||
|
||||
if (editingProvider) {
|
||||
const updatePayload: UpdateFleetProviderRequest = {
|
||||
displayName,
|
||||
isActive: form.isActive,
|
||||
models,
|
||||
};
|
||||
|
||||
if (baseUrl.length > 0) {
|
||||
updatePayload.baseUrl = baseUrl;
|
||||
}
|
||||
|
||||
if (apiKey.length > 0) {
|
||||
updatePayload.apiKey = apiKey;
|
||||
}
|
||||
|
||||
await updateFleetProvider(editingProvider.id, updatePayload);
|
||||
setSuccessMessage(`Updated provider "${displayName}".`);
|
||||
} else {
|
||||
const createPayload: CreateFleetProviderRequest = {
|
||||
name: buildProviderName(displayName, form.type),
|
||||
displayName,
|
||||
type: form.type,
|
||||
models,
|
||||
};
|
||||
|
||||
if (baseUrl.length > 0) {
|
||||
createPayload.baseUrl = baseUrl;
|
||||
}
|
||||
|
||||
if (apiKey.length > 0) {
|
||||
createPayload.apiKey = apiKey;
|
||||
}
|
||||
|
||||
await createFleetProvider(createPayload);
|
||||
setSuccessMessage(`Added provider "${displayName}".`);
|
||||
}
|
||||
|
||||
setIsDialogOpen(false);
|
||||
setEditingProvider(null);
|
||||
setForm(INITIAL_FORM);
|
||||
await loadProviders(false);
|
||||
} catch (saveError: unknown) {
|
||||
setFormError(getErrorMessage(saveError, "Unable to save provider."));
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteProvider(): Promise<void> {
|
||||
if (!deleteTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsDeleting(true);
|
||||
await deleteFleetProvider(deleteTarget.id);
|
||||
setSuccessMessage(`Deleted provider "${deleteTarget.displayName}".`);
|
||||
setDeleteTarget(null);
|
||||
await loadProviders(false);
|
||||
} catch (deleteError: unknown) {
|
||||
setError(getErrorMessage(deleteError, "Failed to delete provider."));
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6 space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">LLM Providers</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Manage provider endpoints, model inventories, and encrypted API credentials.
|
||||
</p>
|
||||
</div>
|
||||
<FleetSettingsNav />
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<CardTitle>Provider Directory</CardTitle>
|
||||
<CardDescription>
|
||||
API keys are always encrypted in storage and never displayed in plaintext.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
void loadProviders(false);
|
||||
}}
|
||||
disabled={isLoading || isRefreshing}
|
||||
>
|
||||
{isRefreshing ? "Refreshing..." : "Refresh"}
|
||||
</Button>
|
||||
<Button onClick={openCreateDialog}>Add Provider</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{error ? (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{successMessage ? <p className="text-sm text-emerald-600">{successMessage}</p> : null}
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading providers...</p>
|
||||
) : providers.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No providers configured yet. Add one to make models available for agent assignment.
|
||||
</p>
|
||||
) : (
|
||||
providers.map((provider) => {
|
||||
const providerModels = normalizeProviderModels(provider.models);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={provider.id}
|
||||
className="rounded-lg border p-4 flex flex-col gap-4 md:flex-row md:items-start md:justify-between"
|
||||
>
|
||||
<div className="space-y-2 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-semibold truncate">{provider.displayName}</p>
|
||||
<Badge variant={provider.isActive ? "default" : "secondary"}>
|
||||
{provider.isActive ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
<Badge variant="outline">{provider.type}</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Name: {provider.name}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Base URL: {provider.baseUrl ?? "Provider default"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
API Key: encrypted and hidden (never returned decrypted)
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{providerModels.length === 0 ? (
|
||||
<Badge variant="secondary">No models configured</Badge>
|
||||
) : (
|
||||
providerModels.map((model) => (
|
||||
<Badge key={`${provider.id}-${model.id}`} variant="outline">
|
||||
{model.id}
|
||||
</Badge>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
openEditDialog(provider);
|
||||
}}
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setDeleteTarget(provider);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog
|
||||
open={isDialogOpen}
|
||||
onOpenChange={(nextOpen) => {
|
||||
if (!nextOpen) {
|
||||
closeDialog();
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingProvider ? "Edit Provider" : "Add Provider"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Configure connection details and model IDs. API keys are masked in the UI.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={(event) => void handleSubmit(event)} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-type">Type</Label>
|
||||
<Select
|
||||
value={form.type}
|
||||
onValueChange={(value) => {
|
||||
setForm((previous) => ({ ...previous, type: value }));
|
||||
}}
|
||||
disabled={Boolean(editingProvider)}
|
||||
>
|
||||
<SelectTrigger id="provider-type">
|
||||
<SelectValue placeholder="Select provider type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PROVIDER_TYPE_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-display-name">Display Name</Label>
|
||||
<Input
|
||||
id="provider-display-name"
|
||||
value={form.displayName}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setForm((previous) => ({ ...previous, displayName: event.target.value }));
|
||||
}}
|
||||
placeholder="OpenAI Primary"
|
||||
maxLength={255}
|
||||
disabled={isSaving}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-api-key">API Key</Label>
|
||||
<Input
|
||||
id="provider-api-key"
|
||||
type="password"
|
||||
value={form.apiKey}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setForm((previous) => ({ ...previous, apiKey: event.target.value }));
|
||||
}}
|
||||
placeholder={editingProvider ? "Enter new key to rotate" : "sk-..."}
|
||||
autoComplete="new-password"
|
||||
disabled={isSaving}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{apiKeyHint}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-base-url">Base URL</Label>
|
||||
<Input
|
||||
id="provider-base-url"
|
||||
value={form.baseUrl}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
setForm((previous) => ({ ...previous, baseUrl: event.target.value }));
|
||||
}}
|
||||
placeholder="https://api.provider.com/v1"
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-models">Models</Label>
|
||||
<Textarea
|
||||
id="provider-models"
|
||||
value={form.modelsText}
|
||||
onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setForm((previous) => ({ ...previous, modelsText: event.target.value }));
|
||||
}}
|
||||
placeholder={"One model ID per line\nExample: gpt-4.1-mini"}
|
||||
rows={5}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{editingProvider ? (
|
||||
<div className="flex items-center justify-between rounded-md border px-3 py-2">
|
||||
<div>
|
||||
<Label htmlFor="provider-active">Provider Status</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Disable to keep configuration without using this provider.
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="provider-active"
|
||||
checked={form.isActive}
|
||||
onCheckedChange={(checked) => {
|
||||
setForm((previous) => ({ ...previous, isActive: checked }));
|
||||
}}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{formError ? (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{formError}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={closeDialog} disabled={isSaving}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSaving}>
|
||||
{isSaving ? "Saving..." : editingProvider ? "Save Changes" : "Create Provider"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog
|
||||
open={deleteTarget !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open && !isDeleting) {
|
||||
setDeleteTarget(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Provider</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Delete provider "{deleteTarget?.displayName}"? This removes its configuration and
|
||||
model mappings.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDeleteProvider} disabled={isDeleting}>
|
||||
{isDeleting ? "Deleting..." : "Delete Provider"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
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 />;
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
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("/");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,791 +0,0 @@
|
||||
"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;
|
||||
@@ -1,51 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
interface FleetSettingsLink {
|
||||
href: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const FLEET_SETTINGS_LINKS: FleetSettingsLink[] = [
|
||||
{ href: "/settings/providers", label: "Providers" },
|
||||
{ href: "/settings/agent-config", label: "Agent Config" },
|
||||
{ href: "/settings/auth", label: "Authentication" },
|
||||
];
|
||||
|
||||
export function FleetSettingsNav(): React.JSX.Element {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="px-4 py-3 flex flex-wrap items-center gap-2">
|
||||
<Link
|
||||
href="/settings"
|
||||
className="inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
>
|
||||
All Settings
|
||||
</Link>
|
||||
|
||||
{FLEET_SETTINGS_LINKS.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`inline-flex h-9 items-center rounded-md px-3 text-sm font-medium transition-colors ${
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import * as client from "./client";
|
||||
import {
|
||||
createFleetProvider,
|
||||
deleteFleetOidcConfig,
|
||||
deleteFleetProvider,
|
||||
fetchFleetAgentConfig,
|
||||
fetchFleetOidcConfig,
|
||||
fetchFleetProviders,
|
||||
resetBreakglassAdminPassword,
|
||||
updateFleetAgentConfig,
|
||||
updateFleetOidcConfig,
|
||||
updateFleetProvider,
|
||||
} from "./fleet-settings";
|
||||
|
||||
vi.mock("./client");
|
||||
|
||||
beforeEach((): void => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("fetchFleetProviders", (): void => {
|
||||
it("calls providers list endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
|
||||
|
||||
await fetchFleetProviders();
|
||||
|
||||
expect(client.apiGet).toHaveBeenCalledWith("/api/fleet-settings/providers");
|
||||
});
|
||||
});
|
||||
|
||||
describe("createFleetProvider", (): void => {
|
||||
it("posts provider payload", async (): Promise<void> => {
|
||||
vi.mocked(client.apiPost).mockResolvedValueOnce({ id: "provider-1" } as never);
|
||||
|
||||
await createFleetProvider({
|
||||
name: "openai-main",
|
||||
displayName: "OpenAI Main",
|
||||
type: "openai",
|
||||
apiKey: "sk-test",
|
||||
});
|
||||
|
||||
expect(client.apiPost).toHaveBeenCalledWith("/api/fleet-settings/providers", {
|
||||
name: "openai-main",
|
||||
displayName: "OpenAI Main",
|
||||
type: "openai",
|
||||
apiKey: "sk-test",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("updateFleetProvider", (): void => {
|
||||
it("patches provider endpoint with updates", async (): Promise<void> => {
|
||||
vi.mocked(client.apiPatch).mockResolvedValueOnce(undefined as never);
|
||||
|
||||
await updateFleetProvider("provider-1", { displayName: "OpenAI Updated", isActive: true });
|
||||
|
||||
expect(client.apiPatch).toHaveBeenCalledWith("/api/fleet-settings/providers/provider-1", {
|
||||
displayName: "OpenAI Updated",
|
||||
isActive: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("deleteFleetProvider", (): void => {
|
||||
it("deletes provider endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
|
||||
|
||||
await deleteFleetProvider("provider-1");
|
||||
|
||||
expect(client.apiDelete).toHaveBeenCalledWith("/api/fleet-settings/providers/provider-1");
|
||||
});
|
||||
});
|
||||
|
||||
describe("fetchFleetAgentConfig", (): void => {
|
||||
it("calls agent config endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockResolvedValueOnce({
|
||||
primaryModel: null,
|
||||
fallbackModels: [],
|
||||
personality: null,
|
||||
} as never);
|
||||
|
||||
await fetchFleetAgentConfig();
|
||||
|
||||
expect(client.apiGet).toHaveBeenCalledWith("/api/fleet-settings/agent-config");
|
||||
});
|
||||
});
|
||||
|
||||
describe("updateFleetAgentConfig", (): void => {
|
||||
it("patches agent config", async (): Promise<void> => {
|
||||
vi.mocked(client.apiPatch).mockResolvedValueOnce(undefined as never);
|
||||
|
||||
await updateFleetAgentConfig({
|
||||
primaryModel: "openai:gpt-4o-mini",
|
||||
fallbackModels: ["openai:gpt-4.1-mini"],
|
||||
personality: "System behavior",
|
||||
});
|
||||
|
||||
expect(client.apiPatch).toHaveBeenCalledWith("/api/fleet-settings/agent-config", {
|
||||
primaryModel: "openai:gpt-4o-mini",
|
||||
fallbackModels: ["openai:gpt-4.1-mini"],
|
||||
personality: "System behavior",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("fetchFleetOidcConfig", (): void => {
|
||||
it("calls oidc endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockResolvedValueOnce({ configured: false } as never);
|
||||
|
||||
await fetchFleetOidcConfig();
|
||||
|
||||
expect(client.apiGet).toHaveBeenCalledWith("/api/fleet-settings/oidc");
|
||||
});
|
||||
});
|
||||
|
||||
describe("updateFleetOidcConfig", (): void => {
|
||||
it("issues a PUT request with payload", async (): Promise<void> => {
|
||||
vi.mocked(client.apiRequest).mockResolvedValueOnce(undefined as never);
|
||||
|
||||
await updateFleetOidcConfig({
|
||||
issuerUrl: "https://issuer.example.com",
|
||||
clientId: "mosaic-client",
|
||||
clientSecret: "top-secret",
|
||||
});
|
||||
|
||||
expect(client.apiRequest).toHaveBeenCalledWith("/api/fleet-settings/oidc", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({
|
||||
issuerUrl: "https://issuer.example.com",
|
||||
clientId: "mosaic-client",
|
||||
clientSecret: "top-secret",
|
||||
}),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("deleteFleetOidcConfig", (): void => {
|
||||
it("deletes oidc endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
|
||||
|
||||
await deleteFleetOidcConfig();
|
||||
|
||||
expect(client.apiDelete).toHaveBeenCalledWith("/api/fleet-settings/oidc");
|
||||
});
|
||||
});
|
||||
|
||||
describe("resetBreakglassAdminPassword", (): void => {
|
||||
it("posts breakglass reset payload", async (): Promise<void> => {
|
||||
vi.mocked(client.apiPost).mockResolvedValueOnce(undefined as never);
|
||||
|
||||
await resetBreakglassAdminPassword({
|
||||
username: "admin",
|
||||
newPassword: "new-password-123",
|
||||
});
|
||||
|
||||
expect(client.apiPost).toHaveBeenCalledWith("/api/fleet-settings/breakglass/reset-password", {
|
||||
username: "admin",
|
||||
newPassword: "new-password-123",
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,129 +0,0 @@
|
||||
import { apiDelete, apiGet, apiPatch, apiPost, apiRequest } from "./client";
|
||||
|
||||
export interface FleetProviderModel {
|
||||
id: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export interface FleetProvider {
|
||||
id: string;
|
||||
name: string;
|
||||
displayName: string;
|
||||
type: string;
|
||||
baseUrl: string | null;
|
||||
isActive: boolean;
|
||||
models: unknown;
|
||||
}
|
||||
|
||||
export interface CreateFleetProviderRequest {
|
||||
name: string;
|
||||
displayName: string;
|
||||
type: string;
|
||||
baseUrl?: string;
|
||||
apiKey?: string;
|
||||
apiType?: string;
|
||||
models?: FleetProviderModel[];
|
||||
}
|
||||
|
||||
export interface UpdateFleetProviderRequest {
|
||||
displayName?: string;
|
||||
baseUrl?: string;
|
||||
apiKey?: string;
|
||||
isActive?: boolean;
|
||||
models?: FleetProviderModel[];
|
||||
}
|
||||
|
||||
export interface FleetAgentConfig {
|
||||
primaryModel: string | null;
|
||||
fallbackModels: string[];
|
||||
personality: string | null;
|
||||
}
|
||||
|
||||
interface FleetAgentConfigResponse {
|
||||
primaryModel: string | null;
|
||||
fallbackModels: unknown[];
|
||||
personality: string | null;
|
||||
}
|
||||
|
||||
export interface UpdateFleetAgentConfigRequest {
|
||||
primaryModel?: string;
|
||||
fallbackModels?: string[];
|
||||
personality?: string;
|
||||
}
|
||||
|
||||
export interface FleetOidcConfig {
|
||||
issuerUrl?: string;
|
||||
clientId?: string;
|
||||
configured: boolean;
|
||||
}
|
||||
|
||||
export interface UpdateFleetOidcConfigRequest {
|
||||
issuerUrl: string;
|
||||
clientId: string;
|
||||
clientSecret: string;
|
||||
}
|
||||
|
||||
export interface ResetBreakglassAdminPasswordRequest {
|
||||
username: string;
|
||||
newPassword: string;
|
||||
}
|
||||
|
||||
function normalizeStringArray(value: unknown[]): string[] {
|
||||
return value.filter((item): item is string => typeof item === "string");
|
||||
}
|
||||
|
||||
export async function fetchFleetProviders(): Promise<FleetProvider[]> {
|
||||
return apiGet<FleetProvider[]>("/api/fleet-settings/providers");
|
||||
}
|
||||
|
||||
export async function createFleetProvider(
|
||||
data: CreateFleetProviderRequest
|
||||
): Promise<{ id: string }> {
|
||||
return apiPost<{ id: string }>("/api/fleet-settings/providers", data);
|
||||
}
|
||||
|
||||
export async function updateFleetProvider(
|
||||
providerId: string,
|
||||
data: UpdateFleetProviderRequest
|
||||
): Promise<void> {
|
||||
await apiPatch<unknown>(`/api/fleet-settings/providers/${providerId}`, data);
|
||||
}
|
||||
|
||||
export async function deleteFleetProvider(providerId: string): Promise<void> {
|
||||
await apiDelete<unknown>(`/api/fleet-settings/providers/${providerId}`);
|
||||
}
|
||||
|
||||
export async function fetchFleetAgentConfig(): Promise<FleetAgentConfig> {
|
||||
const response = await apiGet<FleetAgentConfigResponse>("/api/fleet-settings/agent-config");
|
||||
|
||||
return {
|
||||
primaryModel: response.primaryModel,
|
||||
fallbackModels: normalizeStringArray(response.fallbackModels),
|
||||
personality: response.personality,
|
||||
};
|
||||
}
|
||||
|
||||
export async function updateFleetAgentConfig(data: UpdateFleetAgentConfigRequest): Promise<void> {
|
||||
await apiPatch<unknown>("/api/fleet-settings/agent-config", data);
|
||||
}
|
||||
|
||||
export async function fetchFleetOidcConfig(): Promise<FleetOidcConfig> {
|
||||
return apiGet<FleetOidcConfig>("/api/fleet-settings/oidc");
|
||||
}
|
||||
|
||||
export async function updateFleetOidcConfig(data: UpdateFleetOidcConfigRequest): Promise<void> {
|
||||
await apiRequest<unknown>("/api/fleet-settings/oidc", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteFleetOidcConfig(): Promise<void> {
|
||||
await apiDelete<unknown>("/api/fleet-settings/oidc");
|
||||
}
|
||||
|
||||
export async function resetBreakglassAdminPassword(
|
||||
data: ResetBreakglassAdminPasswordRequest
|
||||
): Promise<void> {
|
||||
await apiPost<unknown>("/api/fleet-settings/breakglass/reset-password", data);
|
||||
}
|
||||
@@ -17,4 +17,3 @@ export * from "./dashboard";
|
||||
export * from "./projects";
|
||||
export * from "./workspaces";
|
||||
export * from "./admin";
|
||||
export * from "./fleet-settings";
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
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");
|
||||
}
|
||||
@@ -121,10 +121,6 @@ services:
|
||||
OLLAMA_ENDPOINT: ${OLLAMA_ENDPOINT}
|
||||
OPENBAO_ADDR: ${OPENBAO_ADDR}
|
||||
ENCRYPTION_KEY: ${ENCRYPTION_KEY}
|
||||
# MS22: fleet encryption key (AES-256-GCM for provider API keys, agent tokens)
|
||||
MOSAIC_SECRET_KEY: ${MOSAIC_SECRET_KEY}
|
||||
# MS22: Docker socket for per-user container lifecycle (optional: set DOCKER_HOST for TCP)
|
||||
DOCKER_HOST: ${DOCKER_HOST:-}
|
||||
# Matrix bridge (optional — configure after Synapse is running)
|
||||
MATRIX_HOMESERVER_URL: ${MATRIX_HOMESERVER_URL:-http://synapse:8008}
|
||||
MATRIX_ACCESS_TOKEN: ${MATRIX_ACCESS_TOKEN:-}
|
||||
@@ -146,8 +142,6 @@ services:
|
||||
NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
|
||||
NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
|
||||
TRUSTED_ORIGINS: ${TRUSTED_ORIGINS:-}
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock:ro
|
||||
healthcheck:
|
||||
test:
|
||||
[
|
||||
|
||||
@@ -76,16 +76,16 @@ Remaining estimate: ~143K tokens (Codex budget).
|
||||
|
||||
Design doc: `docs/design/MS22-DB-CENTRIC-ARCHITECTURE.md`
|
||||
|
||||
| Task ID | Status | Phase | Description | Issue | Scope | Branch | Depends On | Blocks | Assigned Worker | Started | Completed | Est Tokens | Act Tokens | Notes |
|
||||
| -------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------- | ----- | ------- | ---------------------------- | ---------- | --------------- | --------------- | ------- | --------- | ---------- | ---------- | ----- |
|
||||
| MS22-P1a | done | phase-1a | Prisma schema: SystemConfig, BreakglassUser, LlmProvider, UserContainer, SystemContainer, UserAgentConfig + migration | — | api | feat/ms22-p1a-schema | — | P1b,P1c,P1d,P1e | — | — | — | 20K | — | |
|
||||
| MS22-P1b | done | phase-1b | Encryption service (AES-256-GCM) for API keys and tokens | — | api | feat/ms22-p1b-crypto | — | P1c,P1e,P1g | — | — | — | 15K | — | |
|
||||
| MS22-P1c | done | phase-1c | Internal config endpoint: assemble openclaw.json from DB | — | api | feat/ms22-p1c-config-api | P1a,P1b | P1i,P1j | — | — | — | 20K | — | |
|
||||
| MS22-P1d | done | phase-1d | ContainerLifecycleService: Docker API (dockerode) start/stop/health/reap | — | api | feat/ms22-p1d-container-mgr | P1a | P1i,P1k | — | — | — | 25K | — | |
|
||||
| MS22-P1e | done | phase-1e | Onboarding API: breakglass, OIDC, provider, agents, complete | — | api | feat/ms22-p1e-onboarding-api | P1a,P1b | P1f | — | — | — | 20K | — | |
|
||||
| MS22-P1f | done | phase-1f | Onboarding wizard WebUI (multi-step form) | — | web | feat/ms22-p1f-onboarding-ui | P1e | — | — | — | — | 25K | — | |
|
||||
| MS22-P1g | done | phase-1g | Settings API: CRUD providers, agent config, OIDC, breakglass | — | api | feat/ms22-p1g-settings-api | P1a,P1b | P1h | — | — | — | 20K | — | |
|
||||
| MS22-P1h | done | phase-1h | Settings UI: Providers, Agent Config, Auth pages | — | web | feat/ms22-p1h-settings-ui | P1g | — | — | — | — | 25K | — | |
|
||||
| MS22-P1i | done | phase-1i | Chat proxy: route WebUI chat to user's OpenClaw container (SSE) | — | api+web | feat/ms22-p1i-chat-proxy | P1c,P1d | — | — | — | — | 20K | — | |
|
||||
| MS22-P1j | done | phase-1j | Docker entrypoint + health checks + core compose | — | docker | feat/ms22-p1j-docker | P1c | — | — | — | — | 10K | — | |
|
||||
| MS22-P1k | done | phase-1k | Idle reaper cron: stop inactive user containers | — | api | feat/ms22-p1k-idle-reaper | P1d | — | — | — | — | 10K | — | |
|
||||
| Task ID | Status | Phase | Description | Issue | Scope | Branch | Depends On | Blocks | Assigned Worker | Started | Completed | Est Tokens | Act Tokens | Notes |
|
||||
| -------- | ----------- | -------- | --------------------------------------------------------------------------------------------------------------------- | ----- | ------- | ---------------------------- | ---------- | --------------- | --------------- | ------- | --------- | ---------- | ---------- | ----- |
|
||||
| MS22-P1a | done | phase-1a | Prisma schema: SystemConfig, BreakglassUser, LlmProvider, UserContainer, SystemContainer, UserAgentConfig + migration | — | api | feat/ms22-p1a-schema | — | P1b,P1c,P1d,P1e | — | — | — | 20K | — | |
|
||||
| MS22-P1b | done | phase-1b | Encryption service (AES-256-GCM) for API keys and tokens | — | api | feat/ms22-p1b-crypto | — | P1c,P1e,P1g | — | — | — | 15K | — | |
|
||||
| MS22-P1c | not-started | phase-1c | Internal config endpoint: assemble openclaw.json from DB | — | api | feat/ms22-p1c-config-api | P1a,P1b | P1i,P1j | — | — | — | 20K | — | |
|
||||
| MS22-P1d | not-started | phase-1d | ContainerLifecycleService: Docker API (dockerode) start/stop/health/reap | — | api | feat/ms22-p1d-container-mgr | P1a | P1i,P1k | — | — | — | 25K | — | |
|
||||
| MS22-P1e | not-started | phase-1e | Onboarding API: breakglass, OIDC, provider, agents, complete | — | api | feat/ms22-p1e-onboarding-api | P1a,P1b | P1f | — | — | — | 20K | — | |
|
||||
| MS22-P1f | not-started | phase-1f | Onboarding wizard WebUI (multi-step form) | — | web | feat/ms22-p1f-onboarding-ui | P1e | — | — | — | — | 25K | — | |
|
||||
| MS22-P1g | not-started | phase-1g | Settings API: CRUD providers, agent config, OIDC, breakglass | — | api | feat/ms22-p1g-settings-api | P1a,P1b | P1h | — | — | — | 20K | — | |
|
||||
| MS22-P1h | not-started | phase-1h | Settings UI: Providers, Agent Config, Auth pages | — | web | feat/ms22-p1h-settings-ui | P1g | — | — | — | — | 25K | — | |
|
||||
| MS22-P1i | not-started | phase-1i | Chat proxy: route WebUI chat to user's OpenClaw container (SSE) | — | api+web | feat/ms22-p1i-chat-proxy | P1c,P1d | — | — | — | — | 20K | — | |
|
||||
| MS22-P1j | not-started | phase-1j | Docker entrypoint + health checks + core compose | — | docker | feat/ms22-p1j-docker | P1c | — | — | — | — | 10K | — | |
|
||||
| MS22-P1k | not-started | phase-1k | Idle reaper cron: stop inactive user containers | — | api | feat/ms22-p1k-idle-reaper | P1d | — | — | — | — | 10K | — | |
|
||||
|
||||
Reference in New Issue
Block a user