From 66d401461c6f56b7c12ecd52ac69648e212a96a2 Mon Sep 17 00:00:00 2001
From: Jason Woltje <jason@diversecanvas.com>
Date: Sun, 1 Mar 2026 16:22:22 +0000
Subject: [PATCH] feat(web): fleet settings UI (MS22-P1h) (#617)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>
---
 .../settings/agent-config/page.tsx            | 356 ++++++++++
 .../(authenticated)/settings/auth/page.tsx    | 492 ++++++++++++++
 .../src/app/(authenticated)/settings/page.tsx |  76 +++
 .../settings/providers/page.tsx               | 631 ++++++++++++++++++
 .../components/settings/FleetSettingsNav.tsx  |  51 ++
 apps/web/src/lib/api/fleet-settings.test.ts   | 162 +++++
 apps/web/src/lib/api/fleet-settings.ts        | 129 ++++
 apps/web/src/lib/api/index.ts                 |   1 +
 8 files changed, 1898 insertions(+)
 create mode 100644 apps/web/src/app/(authenticated)/settings/agent-config/page.tsx
 create mode 100644 apps/web/src/app/(authenticated)/settings/auth/page.tsx
 create mode 100644 apps/web/src/app/(authenticated)/settings/providers/page.tsx
 create mode 100644 apps/web/src/components/settings/FleetSettingsNav.tsx
 create mode 100644 apps/web/src/lib/api/fleet-settings.test.ts
 create mode 100644 apps/web/src/lib/api/fleet-settings.ts

diff --git a/apps/web/src/app/(authenticated)/settings/agent-config/page.tsx b/apps/web/src/app/(authenticated)/settings/agent-config/page.tsx
new file mode 100644
index 0000000..b19d2f1
--- /dev/null
+++ b/apps/web/src/app/(authenticated)/settings/agent-config/page.tsx
@@ -0,0 +1,356 @@
+"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>
+  );
+}
diff --git a/apps/web/src/app/(authenticated)/settings/auth/page.tsx b/apps/web/src/app/(authenticated)/settings/auth/page.tsx
new file mode 100644
index 0000000..86ff794
--- /dev/null
+++ b/apps/web/src/app/(authenticated)/settings/auth/page.tsx
@@ -0,0 +1,492 @@
+"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>
+  );
+}
diff --git a/apps/web/src/app/(authenticated)/settings/page.tsx b/apps/web/src/app/(authenticated)/settings/page.tsx
index a2a0fec..17ab263 100644
--- a/apps/web/src/app/(authenticated)/settings/page.tsx
+++ b/apps/web/src/app/(authenticated)/settings/page.tsx
@@ -200,6 +200,82 @@ 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.",
diff --git a/apps/web/src/app/(authenticated)/settings/providers/page.tsx b/apps/web/src/app/(authenticated)/settings/providers/page.tsx
new file mode 100644
index 0000000..982a9b9
--- /dev/null
+++ b/apps/web/src/app/(authenticated)/settings/providers/page.tsx
@@ -0,0 +1,631 @@
+"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>
+  );
+}
diff --git a/apps/web/src/components/settings/FleetSettingsNav.tsx b/apps/web/src/components/settings/FleetSettingsNav.tsx
new file mode 100644
index 0000000..55994e1
--- /dev/null
+++ b/apps/web/src/components/settings/FleetSettingsNav.tsx
@@ -0,0 +1,51 @@
+"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>
+  );
+}
diff --git a/apps/web/src/lib/api/fleet-settings.test.ts b/apps/web/src/lib/api/fleet-settings.test.ts
new file mode 100644
index 0000000..395d423
--- /dev/null
+++ b/apps/web/src/lib/api/fleet-settings.test.ts
@@ -0,0 +1,162 @@
+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",
+    });
+  });
+});
diff --git a/apps/web/src/lib/api/fleet-settings.ts b/apps/web/src/lib/api/fleet-settings.ts
new file mode 100644
index 0000000..82184c8
--- /dev/null
+++ b/apps/web/src/lib/api/fleet-settings.ts
@@ -0,0 +1,129 @@
+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);
+}
diff --git a/apps/web/src/lib/api/index.ts b/apps/web/src/lib/api/index.ts
index e9c3640..f7b0ec6 100644
--- a/apps/web/src/lib/api/index.ts
+++ b/apps/web/src/lib/api/index.ts
@@ -17,3 +17,4 @@ export * from "./dashboard";
 export * from "./projects";
 export * from "./workspaces";
 export * from "./admin";
+export * from "./fleet-settings";