From a36bca7ca79319f331258ddece9d9675cac66f88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Mon, 30 Mar 2026 20:04:06 +0200
Subject: [PATCH] refactor(admin): split system settings into section modules

---
 .../components/admin/SystemSettingsClient.tsx | 1616 +++--------------
 .../system-settings/AiSettingsPanels.tsx      |  405 +++++
 .../AnonymizationSettingsPanel.tsx            |  110 ++
 .../system-settings/ImageGenerationPanel.tsx  |  216 +++
 .../LegacyRuntimeSecretsNotice.tsx            |   55 +
 .../system-settings/SmtpSettingsPanel.tsx     |  186 ++
 .../system-settings/TimelineSettingsPanel.tsx |   61 +
 .../system-settings/VacationSettingsPanel.tsx |   66 +
 .../admin/system-settings/ValueScorePanel.tsx |  254 +++
 .../admin/system-settings/shared.tsx          |  163 ++
 docs/architecture-hardening-backlog.md        |    7 +-
 11 files changed, 1753 insertions(+), 1386 deletions(-)
 create mode 100644 apps/web/src/components/admin/system-settings/AiSettingsPanels.tsx
 create mode 100644 apps/web/src/components/admin/system-settings/AnonymizationSettingsPanel.tsx
 create mode 100644 apps/web/src/components/admin/system-settings/ImageGenerationPanel.tsx
 create mode 100644 apps/web/src/components/admin/system-settings/LegacyRuntimeSecretsNotice.tsx
 create mode 100644 apps/web/src/components/admin/system-settings/SmtpSettingsPanel.tsx
 create mode 100644 apps/web/src/components/admin/system-settings/TimelineSettingsPanel.tsx
 create mode 100644 apps/web/src/components/admin/system-settings/VacationSettingsPanel.tsx
 create mode 100644 apps/web/src/components/admin/system-settings/ValueScorePanel.tsx
 create mode 100644 apps/web/src/components/admin/system-settings/shared.tsx

diff --git a/apps/web/src/components/admin/SystemSettingsClient.tsx b/apps/web/src/components/admin/SystemSettingsClient.tsx
index 7114494..1558043 100644
--- a/apps/web/src/components/admin/SystemSettingsClient.tsx
+++ b/apps/web/src/components/admin/SystemSettingsClient.tsx
@@ -1,152 +1,27 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { useEffect, useState } from "react";
 import { trpc } from "~/lib/trpc/client.js";
-
-const INPUT_CLASS = "app-input";
-const LABEL_CLASS = "app-label";
-const PANEL_CLASS = "app-surface p-6 space-y-5";
-const PANEL_STRONG_CLASS = "app-surface-strong p-6 space-y-6";
-const PRIMARY_BUTTON_CLASS =
-  "rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700 disabled:opacity-50";
-const SECONDARY_BUTTON_CLASS =
-  "rounded-xl border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800";
-const CHECKBOX_ROW_CLASS =
-  "flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900/70 dark:text-gray-300";
-
-type Provider = "openai" | "azure";
-type RuntimeSecretSource = "environment" | "database" | "none";
-type RuntimeSecretStatus = {
-  configured: boolean;
-  activeSource: RuntimeSecretSource;
-  hasStoredValue: boolean;
-  envVarNames: string[];
-};
-
-const ALL_ROLES = ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] as const;
-type SystemRole = (typeof ALL_ROLES)[number];
-
-interface ScoreWeights {
-  skillDepth: number;
-  skillBreadth: number;
-  costEfficiency: number;
-  chargeability: number;
-  experience: number;
-}
-
-type ParsedAzureUrl = {
-  endpoint: string;
-  apiVersion: string;
-  deployment: string | null; // null for Responses API URLs (deployment not in path)
-  urlType: "completions" | "responses";
-};
-
-/** Parse endpoint, deployment, and api-version out of an Azure URL.
- *  Supports both Chat Completions and Responses API formats. */
-function parseAzureUrl(raw: string): ParsedAzureUrl | null {
-  try {
-    const url = new URL(raw);
-    const endpoint = `${url.protocol}//${url.host}`;
-    const apiVersion = url.searchParams.get("api-version") ?? "2025-01-01-preview";
-
-    // Chat Completions: /openai/deployments/{name}/chat/completions
-    const completionsMatch = url.pathname.match(/\/openai\/deployments\/([^/]+)\//);
-    if (completionsMatch) {
-      return { endpoint, apiVersion, deployment: completionsMatch[1]!, urlType: "completions" };
-    }
-
-    // Responses API: /openai/responses
-    if (url.pathname.includes("/openai/responses")) {
-      return { endpoint, apiVersion, deployment: null, urlType: "responses" };
-    }
-
-    return null;
-  } catch {
-    return null;
-  }
-}
-
-function getSecretStatusTone(source: RuntimeSecretSource): string {
-  if (source === "environment") {
-    return "border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300";
-  }
-  if (source === "database") {
-    return "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-300";
-  }
-  return "border-gray-200 bg-gray-50 text-gray-700 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-300";
-}
-
-function getSecretStatusLabel(source: RuntimeSecretSource): string {
-  if (source === "environment") return "Environment";
-  if (source === "database") return "Legacy DB";
-  return "Missing";
-}
-
-function RuntimeSecretCard({
-  title,
-  description,
-  secret,
-  optionalNote,
-}: {
-  title: string;
-  description: string;
-  secret: RuntimeSecretStatus;
-  optionalNote?: string;
-}) {
-  return (
-    <div className="rounded-2xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-700 dark:bg-gray-900/50">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div className="min-w-0 flex-1">
-          <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{title}</h3>
-          <p className="mt-1 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
-            {description}
-          </p>
-        </div>
-        <span
-          className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] ${getSecretStatusTone(secret.activeSource)}`}
-        >
-          {getSecretStatusLabel(secret.activeSource)}
-        </span>
-      </div>
-
-      <div className="mt-3 space-y-2 text-xs text-gray-600 dark:text-gray-300">
-        <p>
-          Runtime status:{" "}
-          <span className="font-medium">
-            {secret.configured ? "configured" : "not configured"}
-          </span>
-        </p>
-        <p>
-          Provision via{" "}
-          {secret.envVarNames.map((name) => (
-            <code key={name} className="mr-1 font-mono">
-              {name}
-            </code>
-          ))}
-        </p>
-        {optionalNote ? <p>{optionalNote}</p> : null}
-        {secret.activeSource === "environment" && secret.hasStoredValue ? (
-          <p className="text-amber-700 dark:text-amber-400">
-            An older database value still exists, but the environment value currently overrides it.
-          </p>
-        ) : null}
-        {secret.activeSource === "database" ? (
-          <p className="text-amber-700 dark:text-amber-400">
-            Runtime currently still depends on a legacy database secret. Migrate it to deployment
-            secrets and clear the stored value afterwards.
-          </p>
-        ) : null}
-        {secret.activeSource === "none" ? (
-          <p className="text-gray-500 dark:text-gray-400">
-            No runtime secret is available yet. The related integration will stay disabled or fail
-            connectivity checks until the deployment secret is set.
-          </p>
-        ) : null}
-      </div>
-    </div>
-  );
-}
+import {
+  AiProviderPanel,
+  GenerationSettingsPanel,
+} from "./system-settings/AiSettingsPanels.js";
+import { LegacyRuntimeSecretsNotice } from "./system-settings/LegacyRuntimeSecretsNotice.js";
+import {
+  type ImageProvider,
+  type Provider,
+  type ScoreWeights,
+  type SaveResult,
+  type SystemRole,
+  type UrlParsedType,
+} from "./system-settings/shared.js";
+import { AnonymizationSettingsPanel } from "./system-settings/AnonymizationSettingsPanel.js";
+import { ImageGenerationPanel } from "./system-settings/ImageGenerationPanel.js";
+import { SmtpSettingsPanel } from "./system-settings/SmtpSettingsPanel.js";
+import { TimelineSettingsPanel } from "./system-settings/TimelineSettingsPanel.js";
+import { VacationSettingsPanel } from "./system-settings/VacationSettingsPanel.js";
+import { ValueScorePanel } from "./system-settings/ValueScorePanel.js";
+import { parseAzureUrl, type GeminiTestResult } from "./system-settings/shared.js";
 
 export function SystemSettingsClient() {
   const [provider, setProvider] = useState<Provider>("openai");
@@ -157,15 +32,10 @@ export function SystemSettingsClient() {
   const [temperature, setTemperature] = useState(1);
   const [summaryPrompt, setSummaryPrompt] = useState("");
   const [saved, setSaved] = useState(false);
-  const [testResult, setTestResult] = useState<{
-    ok: boolean;
-    error?: string;
-  } | null>(null);
+  const [testResult, setTestResult] = useState<SaveResult | null>(null);
   const [urlPasteValue, setUrlPasteValue] = useState("");
   const [urlParseError, setUrlParseError] = useState(false);
-  const [urlParsedType, setUrlParsedType] = useState<"completions" | "responses" | null>(null);
-
-  // Value Score settings
+  const [urlParsedType, setUrlParsedType] = useState<UrlParsedType>(null);
   const [scoreWeights, setScoreWeights] = useState<ScoreWeights>({
     skillDepth: 0.3,
     skillBreadth: 0.15,
@@ -176,41 +46,27 @@ export function SystemSettingsClient() {
   const [scoreVisibleRoles, setScoreVisibleRoles] = useState<SystemRole[]>(["ADMIN", "MANAGER"]);
   const [scoreSaved, setScoreSaved] = useState(false);
   const [recomputeResult, setRecomputeResult] = useState<{ updated: number } | null>(null);
-
-  // DALL-E settings
   const [dalleDeployment, setDalleDeployment] = useState("");
   const [dalleEndpoint, setDalleEndpoint] = useState("");
-
-  // Gemini / Image generation settings
-  type ImageProvider = "dalle" | "gemini";
   const [imageProvider, setImageProvider] = useState<ImageProvider>("dalle");
   const [geminiModel, setGeminiModel] = useState("");
   const [imageSaved, setImageSaved] = useState(false);
-
-  // SMTP settings
   const [smtpHost, setSmtpHost] = useState("");
   const [smtpPort, setSmtpPort] = useState(587);
   const [smtpUser, setSmtpUser] = useState("");
   const [smtpFrom, setSmtpFrom] = useState("");
   const [smtpTls, setSmtpTls] = useState(true);
   const [smtpSaved, setSmtpSaved] = useState(false);
-  const [smtpTestResult, setSmtpTestResult] = useState<{ ok: boolean; error?: string } | null>(
-    null,
-  );
-
-  // Global anonymization
+  const [smtpTestResult, setSmtpTestResult] = useState<SaveResult | null>(null);
   const [anonymizationEnabled, setAnonymizationEnabled] = useState(false);
   const [anonymizationDomain, setAnonymizationDomain] = useState("superhartmut.de");
   const [anonymizationSaved, setAnonymizationSaved] = useState(false);
-
-  // Vacation defaults
   const [vacationDefaultDays, setVacationDefaultDays] = useState(28);
   const [vacationSaved, setVacationSaved] = useState(false);
-
-  // Timeline
   const [undoMaxSteps, setUndoMaxSteps] = useState(50);
   const [timelineSaved, setTimelineSaved] = useState(false);
   const [legacyCleanupResult, setLegacyCleanupResult] = useState<string | null>(null);
+  const [geminiTestResult, setGeminiTestResult] = useState<GeminiTestResult | null>(null);
 
   const utils = trpc.useUtils();
   const { data: settings, isLoading } = trpc.settings.getSystemSettings.useQuery(undefined, {
@@ -218,40 +74,36 @@ export function SystemSettingsClient() {
   });
 
   useEffect(() => {
-    if (settings) {
-      setProvider((settings.aiProvider ?? "openai") as Provider);
-      setEndpoint(settings.azureOpenAiEndpoint ?? "");
-      setModel(settings.azureOpenAiDeployment ?? "");
-      setApiVersion(settings.azureApiVersion ?? "2025-01-01-preview");
-      setMaxTokens(settings.aiMaxCompletionTokens ?? 2000);
-      setTemperature(settings.aiTemperature ?? 1);
-      setSummaryPrompt(settings.aiSummaryPrompt ?? "");
-      if (settings.scoreWeights) {
-        setScoreWeights(settings.scoreWeights as ScoreWeights);
-      }
-      if (settings.scoreVisibleRoles) {
-        setScoreVisibleRoles(settings.scoreVisibleRoles as SystemRole[]);
-      }
-      // DALL-E
-      setDalleDeployment(settings.azureDalleDeployment ?? "");
-      setDalleEndpoint(settings.azureDalleEndpoint ?? "");
-      // Image provider / Gemini
-      setImageProvider((settings.imageProvider ?? "dalle") as ImageProvider);
-      setGeminiModel(settings.geminiModel ?? "");
-      // SMTP
-      setSmtpHost(settings.smtpHost ?? "");
-      setSmtpPort(settings.smtpPort ?? 587);
-      setSmtpUser(settings.smtpUser ?? "");
-      setSmtpFrom(settings.smtpFrom ?? "");
-      setSmtpTls(settings.smtpTls ?? true);
-      // Global anonymization
-      setAnonymizationEnabled(settings.anonymizationEnabled ?? false);
-      setAnonymizationDomain(settings.anonymizationDomain ?? "superhartmut.de");
-      // Vacation
-      setVacationDefaultDays(settings.vacationDefaultDays ?? 28);
-      // Timeline
-      setUndoMaxSteps(settings.timelineUndoMaxSteps ?? 50);
+    if (!settings) {
+      return;
     }
+
+    setProvider((settings.aiProvider ?? "openai") as Provider);
+    setEndpoint(settings.azureOpenAiEndpoint ?? "");
+    setModel(settings.azureOpenAiDeployment ?? "");
+    setApiVersion(settings.azureApiVersion ?? "2025-01-01-preview");
+    setMaxTokens(settings.aiMaxCompletionTokens ?? 2000);
+    setTemperature(settings.aiTemperature ?? 1);
+    setSummaryPrompt(settings.aiSummaryPrompt ?? "");
+    if (settings.scoreWeights) {
+      setScoreWeights(settings.scoreWeights as ScoreWeights);
+    }
+    if (settings.scoreVisibleRoles) {
+      setScoreVisibleRoles(settings.scoreVisibleRoles as SystemRole[]);
+    }
+    setDalleDeployment(settings.azureDalleDeployment ?? "");
+    setDalleEndpoint(settings.azureDalleEndpoint ?? "");
+    setImageProvider((settings.imageProvider ?? "dalle") as ImageProvider);
+    setGeminiModel(settings.geminiModel ?? "");
+    setSmtpHost(settings.smtpHost ?? "");
+    setSmtpPort(settings.smtpPort ?? 587);
+    setSmtpUser(settings.smtpUser ?? "");
+    setSmtpFrom(settings.smtpFrom ?? "");
+    setSmtpTls(settings.smtpTls ?? true);
+    setAnonymizationEnabled(settings.anonymizationEnabled ?? false);
+    setAnonymizationDomain(settings.anonymizationDomain ?? "superhartmut.de");
+    setVacationDefaultDays(settings.vacationDefaultDays ?? 28);
+    setUndoMaxSteps(settings.timelineUndoMaxSteps ?? 50);
   }, [settings]);
 
   function invalidateSystemSettings() {
@@ -265,18 +117,22 @@ export function SystemSettingsClient() {
       setUrlParsedType(null);
       return;
     }
+
     const parsed = parseAzureUrl(raw);
-    if (parsed) {
-      setEndpoint(parsed.endpoint);
-      setApiVersion(parsed.apiVersion);
-      if (parsed.deployment) setModel(parsed.deployment);
-      setUrlParseError(false);
-      setUrlParsedType(parsed.urlType);
-      setUrlPasteValue("");
-    } else {
+    if (!parsed) {
       setUrlParseError(true);
       setUrlParsedType(null);
+      return;
     }
+
+    setEndpoint(parsed.endpoint);
+    setApiVersion(parsed.apiVersion);
+    if (parsed.deployment) {
+      setModel(parsed.deployment);
+    }
+    setUrlParseError(false);
+    setUrlParsedType(parsed.urlType);
+    setUrlPasteValue("");
   }
 
   const updateMutation = trpc.settings.updateSystemSettings.useMutation({
@@ -291,7 +147,7 @@ export function SystemSettingsClient() {
 
   const testMutation = trpc.settings.testAiConnection.useMutation({
     onSuccess: (data) => setTestResult(data),
-    onError: (err) => setTestResult({ ok: false, error: err.message }),
+    onError: (error) => setTestResult({ ok: false, error: error.message }),
   });
 
   const saveScoreMutation = trpc.settings.updateSystemSettings.useMutation({
@@ -318,7 +174,7 @@ export function SystemSettingsClient() {
 
   const testSmtpMutation = trpc.settings.testSmtpConnection.useMutation({
     onSuccess: (data) => setSmtpTestResult(data),
-    onError: (err) => setSmtpTestResult({ ok: false, error: err.message }),
+    onError: (error) => setSmtpTestResult({ ok: false, error: error.message }),
   });
 
   const saveAnonymizationMutation = trpc.settings.updateSystemSettings.useMutation({
@@ -364,17 +220,39 @@ export function SystemSettingsClient() {
       );
       invalidateSystemSettings();
     },
-    onError: (error) => {
-      setLegacyCleanupResult(error.message);
-    },
+    onError: (error) => setLegacyCleanupResult(error.message),
   });
 
-  const [geminiTestResult, setGeminiTestResult] = useState<{ ok: boolean; model?: string; error?: string } | null>(null);
-  const testGeminiMut = trpc.settings.testGeminiConnection.useMutation({
-    onSuccess: (data) => setGeminiTestResult(data as any),
-    onError: (err) => setGeminiTestResult({ ok: false, error: err.message }),
+  const testGeminiMutation = trpc.settings.testGeminiConnection.useMutation({
+    onSuccess: (data) => setGeminiTestResult(data as GeminiTestResult),
+    onError: (error) => setGeminiTestResult({ ok: false, error: error.message }),
   });
 
+  function handleSave() {
+    updateMutation.mutate({
+      aiProvider: provider,
+      azureOpenAiEndpoint: provider === "azure" ? endpoint : "",
+      azureOpenAiDeployment: model,
+      azureApiVersion: provider === "azure" ? apiVersion : undefined,
+      aiMaxCompletionTokens: maxTokens,
+      aiTemperature: temperature,
+      aiSummaryPrompt: summaryPrompt || undefined,
+    });
+  }
+
+  function handleSaveScoreSettings() {
+    saveScoreMutation.mutate({ scoreWeights, scoreVisibleRoles });
+  }
+
+  function handleSaveImage() {
+    saveImageMutation.mutate({
+      imageProvider,
+      azureDalleDeployment: dalleDeployment || undefined,
+      azureDalleEndpoint: provider === "azure" && dalleEndpoint ? dalleEndpoint : undefined,
+      geminiModel: geminiModel || undefined,
+    });
+  }
+
   function handleSaveSmtp() {
     saveSmtpMutation.mutate({
       smtpHost: smtpHost || undefined,
@@ -393,17 +271,6 @@ export function SystemSettingsClient() {
     saveTimelineMutation.mutate({ timelineUndoMaxSteps: undoMaxSteps });
   }
 
-  function handleSaveImage() {
-    saveImageMutation.mutate({
-      imageProvider,
-      // DALL-E fields
-      azureDalleDeployment: dalleDeployment || undefined,
-      azureDalleEndpoint: provider === "azure" && dalleEndpoint ? dalleEndpoint : undefined,
-      // Gemini fields
-      geminiModel: geminiModel || undefined,
-    });
-  }
-
   function handleSaveAnonymization() {
     saveAnonymizationMutation.mutate({
       anonymizationEnabled,
@@ -412,35 +279,16 @@ export function SystemSettingsClient() {
     });
   }
 
-  function handleSaveScoreSettings() {
-    saveScoreMutation.mutate({ scoreWeights, scoreVisibleRoles });
-  }
-
   function updateWeight(key: keyof ScoreWeights, value: number) {
-    setScoreWeights((prev) => ({ ...prev, [key]: value }));
+    setScoreWeights((previous) => ({ ...previous, [key]: value }));
   }
 
   function toggleRole(role: SystemRole) {
-    setScoreVisibleRoles((prev) =>
-      prev.includes(role) ? prev.filter((r) => r !== role) : [...prev, role],
+    setScoreVisibleRoles((previous) =>
+      previous.includes(role) ? previous.filter((entry) => entry !== role) : [...previous, role],
     );
   }
 
-  const weightSum = Object.values(scoreWeights).reduce((s, v) => s + v, 0);
-  const weightSumOk = Math.abs(weightSum - 1.0) < 0.01;
-
-  function handleSave() {
-    updateMutation.mutate({
-      aiProvider: provider,
-      azureOpenAiEndpoint: provider === "azure" ? endpoint : "",
-      azureOpenAiDeployment: model,
-      azureApiVersion: provider === "azure" ? apiVersion : undefined,
-      aiMaxCompletionTokens: maxTokens,
-      aiTemperature: temperature,
-      aiSummaryPrompt: summaryPrompt || undefined,
-    });
-  }
-
   function handleClearLegacyRuntimeSecrets() {
     if (
       typeof window !== "undefined"
@@ -454,10 +302,13 @@ export function SystemSettingsClient() {
     clearRuntimeSecretsMutation.mutate();
   }
 
+  const weightSum = Object.values(scoreWeights).reduce((sum, value) => sum + value, 0);
+  const weightSumOk = Math.abs(weightSum - 1.0) < 0.01;
+
   if (isLoading) {
     return (
       <div className="app-page">
-        <div className="h-8 w-48 shimmer-skeleton rounded" />
+        <div className="h-8 w-48 rounded shimmer-skeleton" />
       </div>
     );
   }
@@ -483,1141 +334,140 @@ export function SystemSettingsClient() {
         </div>
       </div>
 
-      {settings.legacyStoredSecretFields.length ? (
-        <div className="rounded-2xl border border-amber-200 bg-amber-50 px-5 py-4 dark:border-amber-800 dark:bg-amber-950/30">
-          <div className="flex flex-wrap items-start justify-between gap-4">
-            <div className="min-w-0 flex-1">
-              <h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-amber-900 dark:text-amber-200">
-                Legacy Runtime Secrets Detected
-              </h2>
-              <p className="mt-2 text-sm text-amber-900/90 dark:text-amber-100/90">
-                This installation still has database-stored runtime secrets. New secrets are no
-                longer persisted in the application. Move them to deployment-level secret
-                management first, then clear the legacy residue here.
-              </p>
-              <p className="mt-2 text-xs text-amber-800 dark:text-amber-300">
-                Affected fields:{" "}
-                {settings.legacyStoredSecretFields.map((field) => (
-                  <code key={field} className="mr-1 font-mono">
-                    {field}
-                  </code>
-                ))}
-              </p>
-              {legacyCleanupResult ? (
-                <p className="mt-2 text-xs text-amber-900 dark:text-amber-200">
-                  {legacyCleanupResult}
-                </p>
-              ) : null}
-            </div>
-            <button
-              type="button"
-              onClick={handleClearLegacyRuntimeSecrets}
-              disabled={clearRuntimeSecretsMutation.isPending}
-              className={SECONDARY_BUTTON_CLASS}
-            >
-              {clearRuntimeSecretsMutation.isPending
-                ? "Clearing…"
-                : "Clear Legacy DB Secrets"}
-            </button>
-          </div>
-        </div>
-      ) : null}
+      <LegacyRuntimeSecretsNotice
+        fields={settings.legacyStoredSecretFields}
+        result={legacyCleanupResult}
+        isPending={clearRuntimeSecretsMutation.isPending}
+        onClear={handleClearLegacyRuntimeSecrets}
+      />
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
-        <div className={PANEL_CLASS}>
-          <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200 flex items-center">
-            AI Provider <InfoTooltip content="Configure the AI service used for generating resource skill profile summaries. Either OpenAI directly or Azure OpenAI Service." />
-          </h2>
-
-          {/* Provider toggle */}
-          <div>
-            <label className={LABEL_CLASS}>Provider</label>
-            <div className="flex w-fit overflow-hidden rounded-xl border border-gray-200 dark:border-gray-600">
-              <button
-                type="button"
-                onClick={() => {
-                  setProvider("openai");
-                  setTestResult(null);
-                }}
-                className={`px-4 py-2 text-sm font-semibold transition-colors ${
-                  provider === "openai"
-                    ? "bg-brand-600 text-white"
-                    : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
-                }`}
-              >
-                OpenAI
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  setProvider("azure");
-                  setTestResult(null);
-                }}
-                className={`border-l border-gray-200 px-4 py-2 text-sm font-semibold transition-colors dark:border-gray-600 ${
-                  provider === "azure"
-                    ? "bg-brand-600 text-white"
-                    : "bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
-                }`}
-              >
-                Azure OpenAI
-              </button>
-            </div>
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1.5">
-              {provider === "openai"
-                ? "Use a standard OpenAI API key from platform.openai.com."
-                : "Use a deployment on your own Azure OpenAI resource."}
-            </p>
-          </div>
-
-          {/* Azure-only fields */}
-          {provider === "azure" && (
-            <>
-              {/* Paste full URL shortcut */}
-              <div className="rounded-2xl border border-blue-200 bg-blue-50 px-4 py-3 space-y-2 dark:border-blue-700 dark:bg-blue-900/20">
-                <p className="text-xs font-medium text-blue-800 dark:text-blue-300">
-                  Paste a full completion URL to auto-fill all fields below:
-                </p>
-                <input
-                  type="url"
-                  className={`${INPUT_CLASS} border-blue-300 dark:border-blue-600`}
-                  placeholder="https://…cognitiveservices.azure.com/openai/deployments/gpt-5/chat/completions?api-version=2025-01-01-preview"
-                  value={urlPasteValue}
-                  onChange={(e) => handleUrlPaste(e.target.value)}
-                />
-                {urlParseError && (
-                  <p className="text-xs text-red-600 dark:text-red-400">
-                    Could not parse URL — expected either a Chat Completions URL (
-                    <code className="font-mono">/openai/deployments/…/chat/completions</code>) or a
-                    Responses API URL (<code className="font-mono">/openai/responses</code>).
-                  </p>
-                )}
-                {urlParsedType === "responses" && (
-                  <p className="text-xs text-amber-700 dark:text-amber-400">
-                    Responses API URL detected — endpoint and api-version filled in. Enter the{" "}
-                    <strong>deployment/model name</strong> manually below (it is not part of this
-                    URL).
-                  </p>
-                )}
-                {urlParsedType === "completions" && (
-                  <p className="text-xs text-green-700 dark:text-green-400">
-                    All fields filled from URL.
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <label className={LABEL_CLASS} htmlFor="ai-endpoint">
-                  Endpoint (base URL)
-                </label>
-                <input
-                  id="ai-endpoint"
-                  type="url"
-                  className={INPUT_CLASS}
-                  placeholder="https://myinstance.cognitiveservices.azure.com"
-                  value={endpoint}
-                  onChange={(e) => setEndpoint(e.target.value)}
-                />
-                <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-                  Everything up to (not including) <code className="font-mono">/openai/…</code>
-                </p>
-              </div>
-            </>
-          )}
-
-          {/* Model / deployment name */}
-          <div>
-            <label className={LABEL_CLASS} htmlFor="ai-model">
-              {provider === "azure" ? "Deployment Name" : "Model Name"}
-            </label>
-            <input
-              id="ai-model"
-              type="text"
-              className={INPUT_CLASS}
-              placeholder={provider === "azure" ? "my-gpt4o-deployment" : "gpt-4o-mini"}
-              value={model}
-              onChange={(e) => setModel(e.target.value)}
-            />
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-              {provider === "azure"
-                ? "The deployment name you chose when deploying the model in Azure."
-                : "The model identifier, e.g. gpt-4o-mini, gpt-4o, gpt-3.5-turbo."}
-            </p>
-          </div>
-
-          {/* Azure-only: api version */}
-          {provider === "azure" && (
-            <div>
-              <label className={LABEL_CLASS} htmlFor="ai-api-version">
-                API Version
-              </label>
-              <input
-                id="ai-api-version"
-                type="text"
-                className={INPUT_CLASS}
-                placeholder="2025-01-01-preview"
-                value={apiVersion}
-                onChange={(e) => setApiVersion(e.target.value)}
-              />
-              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-                The <code className="font-mono">api-version</code> query parameter from your
-                endpoint URL. Default: <code className="font-mono">2025-01-01-preview</code>
-              </p>
-            </div>
-          )}
-
-          <RuntimeSecretCard
-            title="Primary AI API Key"
-            description={
-              provider === "openai"
-                ? "The runtime reads the OpenAI key directly from deployment secrets. Saving this form does not store or rotate secrets."
-                : "The runtime reads the Azure OpenAI key directly from deployment secrets. Saving this form only updates non-secret metadata."
-            }
-            secret={settings.runtimeSecrets.azureOpenAiApiKey}
-            optionalNote={
-              provider === "openai"
-                ? "Expected source: OPENAI_API_KEY. AZURE_OPENAI_API_KEY is also accepted as a fallback."
-                : "Expected source: AZURE_OPENAI_API_KEY. OPENAI_API_KEY is also accepted as a fallback."
-            }
-          />
-
-          {/* Test result */}
-          {testResult && (
-            <div
-              className={`rounded-2xl px-4 py-3 text-sm ${
-                testResult.ok
-                  ? "bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 text-green-700 dark:text-green-300"
-                  : "bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-300"
-              }`}
-            >
-              {testResult.ok ? (
-                <span className="font-medium">
-                  Connection successful — AI summaries are ready to use.
-                </span>
-              ) : (
-                <div className="space-y-2">
-                  <p>
-                    <span className="font-medium">Connection failed:</span> {testResult.error}
-                  </p>
-                </div>
-              )}
-            </div>
-          )}
-
-          <div className="flex items-center gap-3 pt-2">
-            <button
-              type="button"
-              onClick={handleSave}
-              disabled={updateMutation.isPending}
-              className={PRIMARY_BUTTON_CLASS}
-            >
-              {updateMutation.isPending ? "Saving…" : "Save Settings"}
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setTestResult(null);
-                testMutation.mutate();
-              }}
-              disabled={testMutation.isPending}
-              className={SECONDARY_BUTTON_CLASS}
-            >
-              {testMutation.isPending ? "Testing…" : "Test Connection"}
-            </button>
-            {saved && (
-              <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
-            )}
-          </div>
-        </div>
-
-        {/* Generation settings */}
-        <div className={PANEL_CLASS}>
-          <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200 flex items-center">
-            Generation Settings <InfoTooltip content="Fine-tune how the AI generates skill profile summaries. These settings affect output length, creativity, and the prompt template." />
-          </h2>
-
-          {/* Max completion tokens */}
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label className={LABEL_CLASS} htmlFor="ai-max-tokens">
-                Max Completion Tokens
-              </label>
-              <span className="text-sm font-mono text-brand-600 dark:text-brand-400">
-                {maxTokens}
-              </span>
-            </div>
-            <input
-              id="ai-max-tokens"
-              type="range"
-              min={50}
-              max={2000}
-              step={50}
-              value={maxTokens}
-              onChange={(e) => setMaxTokens(Number(e.target.value))}
-              className="w-full accent-brand-600"
-            />
-            <div className="flex justify-between text-xs text-gray-400 mt-1">
-              <span>500</span>
-              <span className="text-gray-500 dark:text-gray-400">
-                {maxTokens < 1000
-                  ? "⚠ May be empty for reasoning models (GPT-5, o1, o3)"
-                  : maxTokens <= 2000
-                    ? "Recommended for reasoning models ✓"
-                    : maxTokens <= 4000
-                      ? "High — allows longer bios"
-                      : "Very high"}
-              </span>
-              <span>16000</span>
-            </div>
-            <p className="text-xs text-amber-600 dark:text-amber-400 mt-1">
-              Reasoning models (GPT-5, o1, o3) consume tokens internally before writing output. Set
-              to at least 2000 to avoid empty responses.
-            </p>
-          </div>
-
-          {/* Temperature */}
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label className={LABEL_CLASS} htmlFor="ai-temperature">
-                Temperature
-              </label>
-              <span className="text-sm font-mono text-brand-600 dark:text-brand-400">
-                {temperature.toFixed(1)}
-              </span>
-            </div>
-            <input
-              id="ai-temperature"
-              type="range"
-              min={0}
-              max={2}
-              step={0.1}
-              value={temperature}
-              onChange={(e) => setTemperature(Number(e.target.value))}
-              className="w-full accent-brand-600"
-            />
-            <div className="flex justify-between text-xs text-gray-400 mt-1">
-              <span>0 — deterministic</span>
-              <span className="text-gray-500 dark:text-gray-400">
-                {temperature <= 0.3
-                  ? "Factual & consistent"
-                  : temperature <= 0.9
-                    ? "Balanced"
-                    : temperature <= 1.0
-                      ? "Default (1) — recommended ✓"
-                      : temperature <= 1.2
-                        ? "Creative"
-                        : "Very creative / unpredictable"}
-              </span>
-              <span>2 — creative</span>
-            </div>
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-              Some models (e.g. GPT-5) only accept the default value of 1. If generation fails with
-              a temperature error, the system retries automatically without it.
-            </p>
-          </div>
-
-          {/* Summary prompt */}
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label className={LABEL_CLASS} htmlFor="ai-prompt">
-                Profile Summary Prompt
-              </label>
-              {summaryPrompt && (
-                <button
-                  type="button"
-                  onClick={() => setSummaryPrompt("")}
-                  className="text-xs text-brand-600 hover:underline"
-                >
-                  Reset to default
-                </button>
-              )}
-            </div>
-            <textarea
-              id="ai-prompt"
-              rows={10}
-              value={summaryPrompt || (settings?.defaultSummaryPrompt ?? "")}
-              onChange={(e) => setSummaryPrompt(e.target.value)}
-              className={`${INPUT_CLASS} font-mono text-xs leading-relaxed resize-y`}
-              spellCheck={false}
-            />
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-              Available placeholders: <code className="font-mono">{"{role}"}</code>{" "}
-              <code className="font-mono">{"{chapter}"}</code>{" "}
-              <code className="font-mono">{"{mainSkills}"}</code>{" "}
-              <code className="font-mono">{"{topSkills}"}</code>
-            </p>
-          </div>
-
-          <div className="flex items-center gap-3 pt-1">
-            <button
-              type="button"
-              onClick={handleSave}
-              disabled={updateMutation.isPending}
-              className={PRIMARY_BUTTON_CLASS}
-            >
-              {updateMutation.isPending ? "Saving…" : "Save Settings"}
-            </button>
-            {saved && (
-              <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
-            )}
-          </div>
-        </div>
-      </div>
-      {/* end 2-col grid */}
-
-      {/* Value Score Settings */}
-      <div className={PANEL_STRONG_CLASS}>
-        <div className="flex flex-wrap items-start justify-between gap-3">
-          <div className="flex-1 min-w-0">
-            <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wider mb-1">
-              Value Score
-            </h2>
-            <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
-              A persistent 0–100 <em>price/quality</em> metric per resource — five weighted
-              dimensions combined. Recompute on demand after changing weights or importing new skill
-              matrices.
-            </p>
-          </div>
-          <div className="flex-shrink-0 whitespace-nowrap rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 font-mono text-[11px] text-gray-700 dark:border-gray-600 dark:bg-gray-700/50 dark:text-gray-300">
-            round(<span className="text-brand-600 dark:text-brand-400">D</span>·w₁ +{" "}
-            <span className="text-brand-600 dark:text-brand-400">B</span>·w₂ +{" "}
-            <span className="text-brand-600 dark:text-brand-400">C</span>·w₃ +{" "}
-            <span className="text-brand-600 dark:text-brand-400">A</span>·w₄ +{" "}
-            <span className="text-brand-600 dark:text-brand-400">E</span>·w₅)
-          </div>
-        </div>
-
-        {/* Weight sliders — compact grid */}
-        <div>
-          <p className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
-            Dimension Weights — must sum to 100%
-          </p>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-3">
-            {/* Skill Depth */}
-            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
-              <div className="flex items-center gap-2 mb-2">
-                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
-                  D
-                </span>
-                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
-                  Skill Depth
-                </span>
-                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
-                  {Math.round(scoreWeights.skillDepth * 100)}%
-                </span>
-              </div>
-              <input
-                type="range"
-                min={0}
-                max={100}
-                step={5}
-                value={Math.round(scoreWeights.skillDepth * 100)}
-                onChange={(e) => updateWeight("skillDepth", Number(e.target.value) / 100)}
-                className="w-full accent-brand-600"
-              />
-              <details className="mt-1.5">
-                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
-                  Show details
-                </summary>
-                <div className="mt-2 space-y-1.5">
-                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
-                    Average proficiency (1–5) across all skills, scaled to 0–100. Expert-heavy
-                    profiles score near 100.
-                  </p>
-                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
-                    D = round((avg_proficiency / 5) × 100)
-                    <span className="ml-2 text-gray-400">avg 4.0/5 → 80</span>
-                  </div>
-                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
-                    0 = all Beginner · 100 = all Expert
-                  </div>
-                </div>
-              </details>
-            </div>
-
-            {/* Skill Breadth */}
-            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
-              <div className="flex items-center gap-2 mb-2">
-                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
-                  B
-                </span>
-                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
-                  Skill Breadth
-                </span>
-                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
-                  {Math.round(scoreWeights.skillBreadth * 100)}%
-                </span>
-              </div>
-              <input
-                type="range"
-                min={0}
-                max={100}
-                step={5}
-                value={Math.round(scoreWeights.skillBreadth * 100)}
-                onChange={(e) => updateWeight("skillBreadth", Number(e.target.value) / 100)}
-                className="w-full accent-brand-600"
-              />
-              <details className="mt-1.5">
-                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
-                  Show details
-                </summary>
-                <div className="mt-2 space-y-1.5">
-                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
-                    Number of distinct skills listed. 10 pts per skill, caps at 100 (10+ skills).
-                    Rewards versatile generalists.
-                  </p>
-                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
-                    B = min(100, skill_count × 10)
-                    <span className="ml-2 text-gray-400">7 skills → 70</span>
-                  </div>
-                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
-                    0 = no skills · 100 = 10+ skills
-                  </div>
-                </div>
-              </details>
-            </div>
-
-            {/* Cost Efficiency */}
-            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
-              <div className="flex items-center gap-2 mb-2">
-                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
-                  C
-                </span>
-                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
-                  Cost Efficiency
-                </span>
-                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
-                  {Math.round(scoreWeights.costEfficiency * 100)}%
-                </span>
-              </div>
-              <input
-                type="range"
-                min={0}
-                max={100}
-                step={5}
-                value={Math.round(scoreWeights.costEfficiency * 100)}
-                onChange={(e) => updateWeight("costEfficiency", Number(e.target.value) / 100)}
-                className="w-full accent-brand-600"
-              />
-              <details className="mt-1.5">
-                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
-                  Show details
-                </summary>
-                <div className="mt-2 space-y-1.5">
-                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
-                    Inverse LCR vs org-wide max. Cheapest resource = 100, most expensive = 0. Core
-                    "price" component.
-                  </p>
-                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
-                    C = round((1 − LCR / max_LCR) × 100)
-                    <span className="ml-2 text-gray-400">60€ vs 120€ → 50</span>
-                  </div>
-                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
-                    0 = highest LCR · 100 = lowest LCR
-                  </div>
-                  <p className="text-[11px] text-amber-600 dark:text-amber-500">
-                    If all resources share the same LCR, everyone scores 0 on this dimension.
-                  </p>
-                </div>
-              </details>
-            </div>
-
-            {/* Chargeability */}
-            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
-              <div className="flex items-center gap-2 mb-2">
-                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
-                  A
-                </span>
-                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
-                  Chargeability
-                </span>
-                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
-                  {Math.round(scoreWeights.chargeability * 100)}%
-                </span>
-              </div>
-              <input
-                type="range"
-                min={0}
-                max={100}
-                step={5}
-                value={Math.round(scoreWeights.chargeability * 100)}
-                onChange={(e) => updateWeight("chargeability", Number(e.target.value) / 100)}
-                className="w-full accent-brand-600"
-              />
-              <details className="mt-1.5">
-                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
-                  Show details
-                </summary>
-                <div className="mt-2 space-y-1.5">
-                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
-                    Distance from personal chargeability target (90-day window). On target = 100; −2
-                    pts per pp off.
-                  </p>
-                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
-                    A = max(0, 100 − |target% − actual%| × 2)
-                    <span className="ml-2 text-gray-400">10 pp off → 80</span>
-                  </div>
-                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
-                    0 = 50+ pp off target · 100 = exactly on target
-                  </div>
-                  <p className="text-[11px] text-gray-400 dark:text-gray-500">
-                    New resources with no allocations: actual = 0%, score reflects gap from target.
-                  </p>
-                </div>
-              </details>
-            </div>
-
-            {/* Experience */}
-            <div className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600">
-              <div className="flex items-center gap-2 mb-2">
-                <span className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-[10px] font-mono rounded font-bold">
-                  E
-                </span>
-                <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 flex-1">
-                  Experience
-                </span>
-                <span className="text-sm font-bold font-mono text-brand-600 dark:text-brand-400 tabular-nums w-10 text-right">
-                  {Math.round(scoreWeights.experience * 100)}%
-                </span>
-              </div>
-              <input
-                type="range"
-                min={0}
-                max={100}
-                step={5}
-                value={Math.round(scoreWeights.experience * 100)}
-                onChange={(e) => updateWeight("experience", Number(e.target.value) / 100)}
-                className="w-full accent-brand-600"
-              />
-              <details className="mt-1.5">
-                <summary className="cursor-pointer text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 select-none">
-                  Show details
-                </summary>
-                <div className="mt-2 space-y-1.5">
-                  <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
-                    Average years of experience across skills with explicit years data from
-                    skill-matrix imports. Capped at 10 years.
-                  </p>
-                  <div className="rounded bg-gray-50 dark:bg-gray-700 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:text-gray-300">
-                    E = min(100, avg_years × 10)
-                    <span className="ml-2 text-gray-400">6.5 yrs → 65 · 10+ yrs → 100</span>
-                  </div>
-                  <div className="text-[11px] text-gray-400 dark:text-gray-500">
-                    0 = no years data · 100 = 10+ years average
-                  </div>
-                </div>
-              </details>
-            </div>
-          </div>
-        </div>
-
-        {/* Weight sum indicator */}
-        <div
-          className={`flex items-center gap-2 rounded-2xl border px-4 py-2.5 text-sm font-medium ${
-            weightSumOk
-              ? "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-700 text-green-700 dark:text-green-300"
-              : "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700 text-red-700 dark:text-red-300"
-          }`}
-        >
-          <span>{weightSumOk ? "✓" : "✗"}</span>
-          <span>
-            Total weight: <span className="font-mono">{Math.round(weightSum * 100)}%</span>
-            {weightSumOk ? " — valid" : " — must be exactly 100% to save"}
-          </span>
-        </div>
-
-        {/* Visibility roles */}
-        <div className="space-y-2">
-          <label className={LABEL_CLASS}>
-            Score visibility — which roles can see the Value Score
-          </label>
-          <p className="text-xs text-gray-500 dark:text-gray-400">
-            Controls who sees the Score column on the Resources list, the breakdown on the Resource
-            Detail page, and the Top Value Resources dashboard widget.
-          </p>
-          <div className="flex flex-wrap gap-3 mt-2">
-            {ALL_ROLES.map((role) => (
-              <label key={role} className={`${CHECKBOX_ROW_CLASS} cursor-pointer select-none`}>
-                <input
-                  type="checkbox"
-                  checked={scoreVisibleRoles.includes(role)}
-                  onChange={() => toggleRole(role)}
-                  className="rounded border-gray-300"
-                />
-                {role}
-              </label>
-            ))}
-          </div>
-        </div>
-
-        {/* Recompute */}
-        <div className="border-t border-gray-100 dark:border-gray-700 pt-5 space-y-3">
-          <div>
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-2">
-              Recompute Scores
-            </p>
-            <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
-              Scores are <strong>not updated automatically</strong> — run this after changing
-              weights or after importing new skill matrices. The computation fetches all active
-              resources and their last 90 days of allocations, then writes the result back to each
-              resource record.
-            </p>
-            <div className="flex items-center gap-3">
-              <button
-                type="button"
-                onClick={() => {
-                  setRecomputeResult(null);
-                  recomputeMutation.mutate();
-                }}
-                disabled={recomputeMutation.isPending}
-                className={SECONDARY_BUTTON_CLASS}
-              >
-                {recomputeMutation.isPending ? "Recomputing…" : "Recompute All Scores"}
-              </button>
-              {recomputeResult && (
-                <span className="text-sm text-green-600 dark:text-green-400 font-medium">
-                  Updated {recomputeResult.updated} resource
-                  {recomputeResult.updated !== 1 ? "s" : ""}
-                </span>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3 pt-1">
-          <button
-            type="button"
-            onClick={handleSaveScoreSettings}
-            disabled={saveScoreMutation.isPending || !weightSumOk}
-            className={PRIMARY_BUTTON_CLASS}
-          >
-            {saveScoreMutation.isPending ? "Saving…" : "Save Score Settings"}
-          </button>
-          {scoreSaved && (
-            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
-          )}
-        </div>
-      </div>
-
-      {/* ── Image Generation ────────────────────────────────── */}
-        <div className={PANEL_CLASS}>
-          <div>
-            <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
-            Image Generation <InfoTooltip content="Configure the image generation provider used for AI-generated project cover art." />
-          </h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-            Used to generate AI cover art for projects. Configure at least one provider below.
-          </p>
-        </div>
-
-        {/* Provider selector */}
-        <div>
-          <label className={LABEL_CLASS}>Provider</label>
-          <div className="flex gap-4">
-            <label className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="radio"
-                name="imageProvider"
-                value="dalle"
-                checked={imageProvider === "dalle"}
-                onChange={() => setImageProvider("dalle")}
-                className="accent-brand-600"
-              />
-              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">DALL-E (Azure OpenAI / OpenAI)</span>
-            </label>
-            <label className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="radio"
-                name="imageProvider"
-                value="gemini"
-                checked={imageProvider === "gemini"}
-                onChange={() => setImageProvider("gemini")}
-                className="accent-brand-600"
-              />
-              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Google Gemini</span>
-            </label>
-          </div>
-        </div>
-
-        {/* DALL-E settings (shown when DALL-E selected) */}
-        {imageProvider === "dalle" && (
-          <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
-            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">DALL-E Configuration</h3>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-              <div>
-                <label className={LABEL_CLASS}>
-                  <span className="flex items-center">
-                    Deployment Name <InfoTooltip content="The DALL-E model deployment name (e.g. dall-e-3). For OpenAI this is the model name, for Azure it is the deployment name." />
-                  </span>
-                </label>
-                <input
-                  type="text"
-                  className={INPUT_CLASS}
-                  value={dalleDeployment}
-                  onChange={(e) => setDalleDeployment(e.target.value)}
-                  placeholder="dall-e-3"
-                />
-              </div>
-
-              {provider === "azure" && (
-                <>
-                  <div>
-                    <label className={LABEL_CLASS}>
-                      <span className="flex items-center">
-                        Endpoint <InfoTooltip content="Azure endpoint for the DALL-E deployment. Leave empty to use the same endpoint as the chat model." />
-                      </span>
-                    </label>
-                    <input
-                      type="text"
-                      className={INPUT_CLASS}
-                      value={dalleEndpoint}
-                      onChange={(e) => setDalleEndpoint(e.target.value)}
-                      placeholder="Leave empty to use same endpoint as chat"
-                    />
-                  </div>
-                </>
-              )}
-            </div>
-            <RuntimeSecretCard
-              title="Dedicated DALL-E Key"
-              description="Optional override for image generation. If unset, runtime falls back to the primary AI key when possible."
-              secret={settings.runtimeSecrets.azureDalleApiKey}
-              optionalNote="Use AZURE_DALLE_API_KEY only when image generation should be isolated from the primary AI credential."
-            />
-          </div>
-        )}
-
-        {/* Gemini settings (shown when Gemini selected) */}
-        {imageProvider === "gemini" && (
-          <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
-            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Google Gemini Configuration</h3>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-              <div>
-                <label className={LABEL_CLASS}>
-                  <span className="flex items-center">
-                    Model <InfoTooltip content="Gemini model for image generation. The default model supports image output." />
-                  </span>
-                </label>
-                <select
-                  className={INPUT_CLASS}
-                  value={geminiModel || "gemini-2.5-flash-image"}
-                  onChange={(e) => setGeminiModel(e.target.value)}
-                >
-                  <option value="gemini-2.5-flash-image">Gemini 2.5 Flash Image — fast, high-volume</option>
-                  <option value="gemini-3-pro-image-preview">Gemini 3 Pro Image Preview — high-fidelity</option>
-                  <option value="gemini-3.1-flash-image-preview">Gemini 3.1 Flash Image Preview — latest</option>
-                </select>
-              </div>
-            </div>
-            <RuntimeSecretCard
-              title="Gemini API Key"
-              description="Gemini credentials are resolved from deployment secrets only."
-              secret={settings.runtimeSecrets.geminiApiKey}
-              optionalNote="Provision GEMINI_API_KEY in the target environment before using Gemini image generation."
-            />
-          </div>
-        )}
-
-        <div className="flex flex-wrap items-center gap-3 pt-1">
-          <button
-            type="button"
-            className={PRIMARY_BUTTON_CLASS}
-            disabled={saveImageMutation.isPending}
-            onClick={handleSaveImage}
-          >
-            {saveImageMutation.isPending ? "Saving..." : "Save Image Settings"}
-          </button>
-          {imageProvider === "gemini" && (
-            <button
-              type="button"
-              className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium disabled:opacity-50"
-              disabled={testGeminiMut.isPending}
-              onClick={() => testGeminiMut.mutate()}
-            >
-              {testGeminiMut.isPending ? "Testing..." : "Test Gemini"}
-            </button>
-          )}
-          {imageSaved && (
-            <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved</span>
-          )}
-        </div>
-        {geminiTestResult && (
-          <div className={`mt-3 rounded-lg px-3 py-2 text-sm ${
-            geminiTestResult.ok
-              ? "bg-green-50 text-green-700 border border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800"
-              : "bg-red-50 text-red-700 border border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800"
-          }`}>
-            {geminiTestResult.ok
-              ? `Gemini image generation works! Model: ${(geminiTestResult as any).model}`
-              : `Test failed: ${(geminiTestResult as any).error}`}
-          </div>
-        )}
-      </div>
-
-      {/* ── SMTP / Email ──────────────────────────────────────────── */}
-      <div className={PANEL_CLASS}>
-        <div>
-          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
-            Email Notifications (SMTP) <InfoTooltip content="Configure SMTP to send email notifications for vacation approvals/rejections. Without SMTP, only in-app notifications are sent." />
-          </h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-            Used to send email notifications when vacation requests are approved or rejected.
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-          <div>
-            <label className={LABEL_CLASS}><span className="flex items-center">SMTP Host <InfoTooltip content="The SMTP server hostname (e.g. smtp.gmail.com, smtp.office365.com)." /></span></label>
-            <input
-              type="text"
-              className={INPUT_CLASS}
-              value={smtpHost}
-              onChange={(e) => setSmtpHost(e.target.value)}
-              placeholder="smtp.example.com"
-            />
-          </div>
-          <div>
-            <label className={LABEL_CLASS}><span className="flex items-center">SMTP Port <InfoTooltip content="Common ports: 587 (STARTTLS), 465 (SSL/TLS), 25 (unencrypted). Use 587 for most providers." /></span></label>
-            <input
-              type="number"
-              className={INPUT_CLASS}
-              value={smtpPort}
-              onChange={(e) => setSmtpPort(parseInt(e.target.value, 10))}
-              min={1}
-              max={65535}
-            />
-          </div>
-          <div>
-            <label className={LABEL_CLASS}><span className="flex items-center">SMTP Username <InfoTooltip content="Authentication username for the SMTP server. Often the same as the email address." /></span></label>
-            <input
-              type="text"
-              className={INPUT_CLASS}
-              value={smtpUser}
-              onChange={(e) => setSmtpUser(e.target.value)}
-              placeholder="user@example.com"
-              autoComplete="off"
-            />
-          </div>
-          <div>
-            <label className={LABEL_CLASS}><span className="flex items-center">From Address <InfoTooltip content="The sender email address shown in notification emails (e.g. noreply@capakraken.app)." /></span></label>
-            <input
-              type="email"
-              className={INPUT_CLASS}
-              value={smtpFrom}
-              onChange={(e) => setSmtpFrom(e.target.value)}
-              placeholder="noreply@capakraken.app"
-            />
-          </div>
-          <div className={`${CHECKBOX_ROW_CLASS} pt-0 md:mt-[1.65rem]`}>
-            <input
-              type="checkbox"
-              id="smtpTls"
-              checked={smtpTls}
-              onChange={(e) => setSmtpTls(e.target.checked)}
-              className="rounded border-gray-300 text-brand-600"
-            />
-            <label
-              htmlFor="smtpTls"
-              className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
-            >
-              Use TLS
-            </label>
-          </div>
-        </div>
-
-        <RuntimeSecretCard
-          title="SMTP Password"
-          description="SMTP credentials are provisioned outside the application and injected at runtime."
-          secret={settings.runtimeSecrets.smtpPassword}
-          optionalNote="Provision SMTP_PASSWORD in the deployment target used by the API service."
+      <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-2">
+        <AiProviderPanel
+          provider={provider}
+          endpoint={endpoint}
+          model={model}
+          apiVersion={apiVersion}
+          urlPasteValue={urlPasteValue}
+          urlParseError={urlParseError}
+          urlParsedType={urlParsedType}
+          runtimeSecret={settings.runtimeSecrets.azureOpenAiApiKey}
+          testResult={testResult}
+          isSaving={updateMutation.isPending}
+          isTesting={testMutation.isPending}
+          saved={saved}
+          onProviderChange={(nextProvider) => {
+            setProvider(nextProvider);
+            setTestResult(null);
+          }}
+          onEndpointChange={setEndpoint}
+          onModelChange={setModel}
+          onApiVersionChange={setApiVersion}
+          onUrlPaste={handleUrlPaste}
+          onSave={handleSave}
+          onTest={() => {
+            setTestResult(null);
+            testMutation.mutate();
+          }}
         />
 
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={handleSaveSmtp}
-            disabled={saveSmtpMutation.isPending}
-            className={PRIMARY_BUTTON_CLASS}
-          >
-            {saveSmtpMutation.isPending ? "Saving…" : "Save SMTP Settings"}
-          </button>
-          <button
-            type="button"
-            onClick={() => testSmtpMutation.mutate()}
-            disabled={testSmtpMutation.isPending}
-            className={SECONDARY_BUTTON_CLASS}
-          >
-            {testSmtpMutation.isPending ? "Testing…" : "Test Connection"}
-          </button>
-          {smtpSaved && (
-            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
-          )}
-          {smtpTestResult && (
-            <span
-              className={`text-sm font-medium ${smtpTestResult.ok ? "text-green-600 dark:text-green-400" : "text-red-500 dark:text-red-400"}`}
-            >
-              {smtpTestResult.ok ? "✓ Connection successful" : `✗ ${smtpTestResult.error}`}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* ── Vacation Defaults ─────────────────────────────────────── */}
-      <div className={PANEL_CLASS}>
-        <div>
-          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
-            Vacation Defaults <InfoTooltip content="Sets the default vacation entitlement applied when creating new resources or using the bulk-set tool in Vacation Management." />
-          </h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-            Default annual leave entitlement for new resources and the entitlement bulk-set tool.
-          </p>
-        </div>
-
-        <div className="max-w-xs">
-          <label className={LABEL_CLASS}><span className="flex items-center">Default Annual Leave Days <InfoTooltip content="The number of vacation days granted per year. In Germany, the legal minimum is 20 days; 28-30 is common. This value is used when creating new entitlement records." /></span></label>
-          <input
-            type="number"
-            className={INPUT_CLASS}
-            value={vacationDefaultDays}
-            onChange={(e) => setVacationDefaultDays(parseInt(e.target.value, 10))}
-            min={0}
-            max={365}
-          />
-          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-            Applied when creating new entitlement records for resources.
-          </p>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={handleSaveVacation}
-            disabled={saveVacationMutation.isPending}
-            className={PRIMARY_BUTTON_CLASS}
-          >
-            {saveVacationMutation.isPending ? "Saving…" : "Save Vacation Settings"}
-          </button>
-          {vacationSaved && (
-            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
-          )}
-        </div>
-      </div>
-
-      <div className={PANEL_CLASS}>
-        <div>
-          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
-            Timeline <InfoTooltip content="Settings for the timeline view, including undo history depth." />
-          </h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-            Configure timeline behavior and undo/redo history.
-          </p>
-        </div>
-
-        <div className="max-w-xs">
-          <label className={LABEL_CLASS}>Undo History Depth</label>
-          <input
-            type="number"
-            className={INPUT_CLASS}
-            value={undoMaxSteps}
-            onChange={(e) => setUndoMaxSteps(parseInt(e.target.value, 10) || 50)}
-            min={1}
-            max={200}
-          />
-          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-            Maximum number of undo steps for timeline operations (single moves and batch shifts). Default: 50.
-          </p>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={handleSaveTimeline}
-            disabled={saveTimelineMutation.isPending}
-            className={PRIMARY_BUTTON_CLASS}
-          >
-            {saveTimelineMutation.isPending ? "Saving…" : "Save Timeline Settings"}
-          </button>
-          {timelineSaved && (
-            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
-          )}
-        </div>
-      </div>
-
-      <div className={PANEL_CLASS}>
-        <div>
-          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
-            Viewer Anonymization <InfoTooltip content="When enabled, all resource names, EIDs, and emails are replaced with stable fictional aliases (e.g. superhero names) in the UI. Real data stays in the database. Useful for demos and screenshots." />
-          </h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-            Global debug mode that keeps real identities in the database but replaces displayed
-            resource names, EIDs, and emails with stable character aliases across sessions.
-          </p>
-        </div>
-
-        <label className="flex items-start gap-3 rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900/70 dark:text-gray-300">
-          <input
-            type="checkbox"
-            checked={anonymizationEnabled}
-            onChange={(e) => setAnonymizationEnabled(e.target.checked)}
-            className="mt-0.5 rounded border-gray-300 text-brand-600"
-          />
-          <span>
-            Enable global stable anonymization
-            <span className="block text-xs text-gray-500 dark:text-gray-400 mt-1">
-              API responses switch to deterministic aliases like <code>Iron Man</code>,{" "}
-              <code>iron.man</code>, and <code>iron.man@superhartmut.de</code>.
-            </span>
-          </span>
-        </label>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label className={LABEL_CLASS}>Alias Email Domain</label>
-            <input
-              type="text"
-              className={INPUT_CLASS}
-              value={anonymizationDomain}
-              onChange={(e) => setAnonymizationDomain(e.target.value)}
-              placeholder="superhartmut.de"
-            />
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-              Used for generated alias emails only. Stored resource emails stay unchanged.
-            </p>
-          </div>
-          <div>
-            <label className={LABEL_CLASS}>Optional Seed Override</label>
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-              The optional seed is now managed as a deployment secret instead of an in-app value.
-              Changing it intentionally reshuffles aliases.
-            </p>
-          </div>
-        </div>
-
-        <RuntimeSecretCard
-          title="Anonymization Seed"
-          description="The stable anonymization seed is resolved from runtime secret management."
-          secret={settings.runtimeSecrets.anonymizationSeed}
-          optionalNote="Provision ANONYMIZATION_SEED only when you need a non-default, deployment-specific alias mapping."
+        <GenerationSettingsPanel
+          maxTokens={maxTokens}
+          temperature={temperature}
+          summaryPrompt={summaryPrompt}
+          defaultSummaryPrompt={settings.defaultSummaryPrompt ?? ""}
+          isSaving={updateMutation.isPending}
+          saved={saved}
+          onMaxTokensChange={setMaxTokens}
+          onTemperatureChange={setTemperature}
+          onSummaryPromptChange={setSummaryPrompt}
+          onSave={handleSave}
+          onResetSummaryPrompt={() => setSummaryPrompt("")}
         />
-
-        <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-800 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
-          High-LCR resources receive more iconic characters first. Real EIDs and emails are never
-          rewritten in Prisma.
-        </div>
-
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={handleSaveAnonymization}
-            disabled={saveAnonymizationMutation.isPending}
-            className={PRIMARY_BUTTON_CLASS}
-          >
-            {saveAnonymizationMutation.isPending ? "Saving…" : "Save Anonymization Settings"}
-          </button>
-          {anonymizationSaved && (
-            <span className="text-sm text-green-600 dark:text-green-400 font-medium">Saved!</span>
-          )}
-        </div>
       </div>
+
+      <ValueScorePanel
+        scoreWeights={scoreWeights}
+        scoreVisibleRoles={scoreVisibleRoles}
+        weightSum={weightSum}
+        weightSumOk={weightSumOk}
+        scoreSaved={scoreSaved}
+        recomputeResult={recomputeResult}
+        isSaving={saveScoreMutation.isPending}
+        isRecomputing={recomputeMutation.isPending}
+        onUpdateWeight={updateWeight}
+        onToggleRole={toggleRole}
+        onRecompute={() => {
+          setRecomputeResult(null);
+          recomputeMutation.mutate();
+        }}
+        onSave={handleSaveScoreSettings}
+      />
+
+      <ImageGenerationPanel
+        provider={provider}
+        imageProvider={imageProvider}
+        dalleDeployment={dalleDeployment}
+        dalleEndpoint={dalleEndpoint}
+        geminiModel={geminiModel}
+        imageSaved={imageSaved}
+        geminiTestResult={geminiTestResult}
+        runtimeSecrets={settings.runtimeSecrets}
+        isSaving={saveImageMutation.isPending}
+        isTestingGemini={testGeminiMutation.isPending}
+        onImageProviderChange={setImageProvider}
+        onDalleDeploymentChange={setDalleDeployment}
+        onDalleEndpointChange={setDalleEndpoint}
+        onGeminiModelChange={setGeminiModel}
+        onSave={handleSaveImage}
+        onTestGemini={() => testGeminiMutation.mutate()}
+      />
+
+      <SmtpSettingsPanel
+        smtpHost={smtpHost}
+        smtpPort={smtpPort}
+        smtpUser={smtpUser}
+        smtpFrom={smtpFrom}
+        smtpTls={smtpTls}
+        smtpSaved={smtpSaved}
+        smtpTestResult={smtpTestResult}
+        smtpSecret={settings.runtimeSecrets.smtpPassword}
+        isSaving={saveSmtpMutation.isPending}
+        isTesting={testSmtpMutation.isPending}
+        onSmtpHostChange={setSmtpHost}
+        onSmtpPortChange={setSmtpPort}
+        onSmtpUserChange={setSmtpUser}
+        onSmtpFromChange={setSmtpFrom}
+        onSmtpTlsChange={setSmtpTls}
+        onSave={handleSaveSmtp}
+        onTest={() => testSmtpMutation.mutate()}
+      />
+
+      <VacationSettingsPanel
+        vacationDefaultDays={vacationDefaultDays}
+        vacationSaved={vacationSaved}
+        isSaving={saveVacationMutation.isPending}
+        onVacationDefaultDaysChange={setVacationDefaultDays}
+        onSave={handleSaveVacation}
+      />
+
+      <TimelineSettingsPanel
+        undoMaxSteps={undoMaxSteps}
+        timelineSaved={timelineSaved}
+        isSaving={saveTimelineMutation.isPending}
+        onUndoMaxStepsChange={setUndoMaxSteps}
+        onSave={handleSaveTimeline}
+      />
+
+      <AnonymizationSettingsPanel
+        anonymizationEnabled={anonymizationEnabled}
+        anonymizationDomain={anonymizationDomain}
+        anonymizationSaved={anonymizationSaved}
+        anonymizationSecret={settings.runtimeSecrets.anonymizationSeed}
+        isSaving={saveAnonymizationMutation.isPending}
+        onAnonymizationEnabledChange={setAnonymizationEnabled}
+        onAnonymizationDomainChange={setAnonymizationDomain}
+        onSave={handleSaveAnonymization}
+      />
     </div>
   );
 }
diff --git a/apps/web/src/components/admin/system-settings/AiSettingsPanels.tsx b/apps/web/src/components/admin/system-settings/AiSettingsPanels.tsx
new file mode 100644
index 0000000..7aa0b45
--- /dev/null
+++ b/apps/web/src/components/admin/system-settings/AiSettingsPanels.tsx
@@ -0,0 +1,405 @@
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import {
+  INPUT_CLASS,
+  LABEL_CLASS,
+  PANEL_CLASS,
+  PRIMARY_BUTTON_CLASS,
+  SECONDARY_BUTTON_CLASS,
+  RuntimeSecretCard,
+  type Provider,
+  type RuntimeSecretStatus,
+  type SaveResult,
+  type UrlParsedType,
+} from "./shared.js";
+
+type AiProviderPanelProps = {
+  provider: Provider;
+  endpoint: string;
+  model: string;
+  apiVersion: string;
+  urlPasteValue: string;
+  urlParseError: boolean;
+  urlParsedType: UrlParsedType;
+  runtimeSecret: RuntimeSecretStatus;
+  testResult: SaveResult | null;
+  isSaving: boolean;
+  isTesting: boolean;
+  saved: boolean;
+  onProviderChange: (provider: Provider) => void;
+  onEndpointChange: (value: string) => void;
+  onModelChange: (value: string) => void;
+  onApiVersionChange: (value: string) => void;
+  onUrlPaste: (value: string) => void;
+  onSave: () => void;
+  onTest: () => void;
+};
+
+export function AiProviderPanel({
+  provider,
+  endpoint,
+  model,
+  apiVersion,
+  urlPasteValue,
+  urlParseError,
+  urlParsedType,
+  runtimeSecret,
+  testResult,
+  isSaving,
+  isTesting,
+  saved,
+  onProviderChange,
+  onEndpointChange,
+  onModelChange,
+  onApiVersionChange,
+  onUrlPaste,
+  onSave,
+  onTest,
+}: AiProviderPanelProps) {
+  return (
+    <div className={PANEL_CLASS}>
+      <h2 className="flex items-center text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200">
+        AI Provider{" "}
+        <InfoTooltip content="Configure the AI service used for generating resource skill profile summaries. Either OpenAI directly or Azure OpenAI Service." />
+      </h2>
+
+      <div>
+        <label className={LABEL_CLASS}>Provider</label>
+        <div className="flex w-fit overflow-hidden rounded-xl border border-gray-200 dark:border-gray-600">
+          <button
+            type="button"
+            onClick={() => onProviderChange("openai")}
+            className={`px-4 py-2 text-sm font-semibold transition-colors ${
+              provider === "openai"
+                ? "bg-brand-600 text-white"
+                : "bg-white text-gray-600 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+            }`}
+          >
+            OpenAI
+          </button>
+          <button
+            type="button"
+            onClick={() => onProviderChange("azure")}
+            className={`border-l border-gray-200 px-4 py-2 text-sm font-semibold transition-colors dark:border-gray-600 ${
+              provider === "azure"
+                ? "bg-brand-600 text-white"
+                : "bg-white text-gray-600 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+            }`}
+          >
+            Azure OpenAI
+          </button>
+        </div>
+        <p className="mt-1.5 text-xs text-gray-400 dark:text-gray-500">
+          {provider === "openai"
+            ? "Use a standard OpenAI API key from platform.openai.com."
+            : "Use a deployment on your own Azure OpenAI resource."}
+        </p>
+      </div>
+
+      {provider === "azure" ? (
+        <>
+          <div className="space-y-2 rounded-2xl border border-blue-200 bg-blue-50 px-4 py-3 dark:border-blue-700 dark:bg-blue-900/20">
+            <p className="text-xs font-medium text-blue-800 dark:text-blue-300">
+              Paste a full completion URL to auto-fill all fields below:
+            </p>
+            <input
+              type="url"
+              className={`${INPUT_CLASS} border-blue-300 dark:border-blue-600`}
+              placeholder="https://…cognitiveservices.azure.com/openai/deployments/gpt-5/chat/completions?api-version=2025-01-01-preview"
+              value={urlPasteValue}
+              onChange={(event) => onUrlPaste(event.target.value)}
+            />
+            {urlParseError ? (
+              <p className="text-xs text-red-600 dark:text-red-400">
+                Could not parse URL; expected either a Chat Completions URL (
+                <code className="font-mono">/openai/deployments/…/chat/completions</code>) or a
+                Responses API URL (<code className="font-mono">/openai/responses</code>).
+              </p>
+            ) : null}
+            {urlParsedType === "responses" ? (
+              <p className="text-xs text-amber-700 dark:text-amber-400">
+                Responses API URL detected. Endpoint and api-version were filled in, but the
+                deployment or model name still has to be entered manually below.
+              </p>
+            ) : null}
+            {urlParsedType === "completions" ? (
+              <p className="text-xs text-green-700 dark:text-green-400">All fields filled from URL.</p>
+            ) : null}
+          </div>
+
+          <div>
+            <label className={LABEL_CLASS} htmlFor="ai-endpoint">
+              Endpoint (base URL)
+            </label>
+            <input
+              id="ai-endpoint"
+              type="url"
+              className={INPUT_CLASS}
+              placeholder="https://myinstance.cognitiveservices.azure.com"
+              value={endpoint}
+              onChange={(event) => onEndpointChange(event.target.value)}
+            />
+            <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+              Everything up to (not including) <code className="font-mono">/openai/…</code>
+            </p>
+          </div>
+        </>
+      ) : null}
+
+      <div>
+        <label className={LABEL_CLASS} htmlFor="ai-model">
+          {provider === "azure" ? "Deployment Name" : "Model Name"}
+        </label>
+        <input
+          id="ai-model"
+          type="text"
+          className={INPUT_CLASS}
+          placeholder={provider === "azure" ? "my-gpt4o-deployment" : "gpt-4o-mini"}
+          value={model}
+          onChange={(event) => onModelChange(event.target.value)}
+        />
+        <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+          {provider === "azure"
+            ? "The deployment name chosen when deploying the model in Azure."
+            : "The model identifier, for example gpt-4o-mini or gpt-4o."}
+        </p>
+      </div>
+
+      {provider === "azure" ? (
+        <div>
+          <label className={LABEL_CLASS} htmlFor="ai-api-version">
+            API Version
+          </label>
+          <input
+            id="ai-api-version"
+            type="text"
+            className={INPUT_CLASS}
+            placeholder="2025-01-01-preview"
+            value={apiVersion}
+            onChange={(event) => onApiVersionChange(event.target.value)}
+          />
+          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+            The <code className="font-mono">api-version</code> query parameter from the endpoint
+            URL. Default: <code className="font-mono">2025-01-01-preview</code>
+          </p>
+        </div>
+      ) : null}
+
+      <RuntimeSecretCard
+        title="Primary AI API Key"
+        description={
+          provider === "openai"
+            ? "The runtime reads the OpenAI key directly from deployment secrets. Saving this form does not store or rotate secrets."
+            : "The runtime reads the Azure OpenAI key directly from deployment secrets. Saving this form only updates non-secret metadata."
+        }
+        secret={runtimeSecret}
+        optionalNote={
+          provider === "openai"
+            ? "Expected source: OPENAI_API_KEY. AZURE_OPENAI_API_KEY is also accepted as a fallback."
+            : "Expected source: AZURE_OPENAI_API_KEY. OPENAI_API_KEY is also accepted as a fallback."
+        }
+      />
+
+      {testResult ? (
+        <div
+          className={`rounded-2xl border px-4 py-3 text-sm ${
+            testResult.ok
+              ? "border-green-200 bg-green-50 text-green-700 dark:border-green-700 dark:bg-green-900/30 dark:text-green-300"
+              : "border-red-200 bg-red-50 text-red-700 dark:border-red-700 dark:bg-red-900/30 dark:text-red-300"
+          }`}
+        >
+          {testResult.ok ? (
+            <span className="font-medium">
+              Connection successful. AI summaries are ready to use.
+            </span>
+          ) : (
+            <div className="space-y-2">
+              <p>
+                <span className="font-medium">Connection failed:</span> {testResult.error}
+              </p>
+            </div>
+          )}
+        </div>
+      ) : null}
+
+      <div className="flex items-center gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={isSaving}
+          className={PRIMARY_BUTTON_CLASS}
+        >
+          {isSaving ? "Saving…" : "Save Settings"}
+        </button>
+        <button
+          type="button"
+          onClick={onTest}
+          disabled={isTesting}
+          className={SECONDARY_BUTTON_CLASS}
+        >
+          {isTesting ? "Testing…" : "Test Connection"}
+        </button>
+        {saved ? (
+          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+type GenerationSettingsPanelProps = {
+  maxTokens: number;
+  temperature: number;
+  summaryPrompt: string;
+  defaultSummaryPrompt: string;
+  isSaving: boolean;
+  saved: boolean;
+  onMaxTokensChange: (value: number) => void;
+  onTemperatureChange: (value: number) => void;
+  onSummaryPromptChange: (value: string) => void;
+  onSave: () => void;
+  onResetSummaryPrompt: () => void;
+};
+
+export function GenerationSettingsPanel({
+  maxTokens,
+  temperature,
+  summaryPrompt,
+  defaultSummaryPrompt,
+  isSaving,
+  saved,
+  onMaxTokensChange,
+  onTemperatureChange,
+  onSummaryPromptChange,
+  onSave,
+  onResetSummaryPrompt,
+}: GenerationSettingsPanelProps) {
+  return (
+    <div className={PANEL_CLASS}>
+      <h2 className="flex items-center text-sm font-semibold uppercase tracking-[0.18em] text-gray-700 dark:text-gray-200">
+        Generation Settings{" "}
+        <InfoTooltip content="Fine-tune how the AI generates skill profile summaries. These settings affect output length, creativity, and the prompt template." />
+      </h2>
+
+      <div>
+        <div className="mb-1 flex items-center justify-between">
+          <label className={LABEL_CLASS} htmlFor="ai-max-tokens">
+            Max Completion Tokens
+          </label>
+          <span className="text-sm font-mono text-brand-600 dark:text-brand-400">{maxTokens}</span>
+        </div>
+        <input
+          id="ai-max-tokens"
+          type="range"
+          min={50}
+          max={2000}
+          step={50}
+          value={maxTokens}
+          onChange={(event) => onMaxTokensChange(Number(event.target.value))}
+          className="w-full accent-brand-600"
+        />
+        <div className="mt-1 flex justify-between text-xs text-gray-400">
+          <span>500</span>
+          <span className="text-gray-500 dark:text-gray-400">
+            {maxTokens < 1000
+              ? "⚠ May be empty for reasoning models (GPT-5, o1, o3)"
+              : maxTokens <= 2000
+                ? "Recommended for reasoning models ✓"
+                : maxTokens <= 4000
+                  ? "High; allows longer bios"
+                  : "Very high"}
+          </span>
+          <span>16000</span>
+        </div>
+        <p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
+          Reasoning models consume tokens internally before writing output. Keep this at 2000 or
+          above to avoid empty responses.
+        </p>
+      </div>
+
+      <div>
+        <div className="mb-1 flex items-center justify-between">
+          <label className={LABEL_CLASS} htmlFor="ai-temperature">
+            Temperature
+          </label>
+          <span className="text-sm font-mono text-brand-600 dark:text-brand-400">
+            {temperature.toFixed(1)}
+          </span>
+        </div>
+        <input
+          id="ai-temperature"
+          type="range"
+          min={0}
+          max={2}
+          step={0.1}
+          value={temperature}
+          onChange={(event) => onTemperatureChange(Number(event.target.value))}
+          className="w-full accent-brand-600"
+        />
+        <div className="mt-1 flex justify-between text-xs text-gray-400">
+          <span>0 — deterministic</span>
+          <span className="text-gray-500 dark:text-gray-400">
+            {temperature <= 0.3
+              ? "Factual & consistent"
+              : temperature <= 0.9
+                ? "Balanced"
+                : temperature <= 1.0
+                  ? "Default (1) — recommended ✓"
+                  : temperature <= 1.2
+                    ? "Creative"
+                    : "Very creative / unpredictable"}
+          </span>
+          <span>2 — creative</span>
+        </div>
+        <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+          Some models only accept the default value of 1. If generation fails with a temperature
+          error, the system retries automatically without it.
+        </p>
+      </div>
+
+      <div>
+        <div className="mb-1 flex items-center justify-between">
+          <label className={LABEL_CLASS} htmlFor="ai-prompt">
+            Profile Summary Prompt
+          </label>
+          {summaryPrompt ? (
+            <button
+              type="button"
+              onClick={onResetSummaryPrompt}
+              className="text-xs text-brand-600 hover:underline"
+            >
+              Reset to default
+            </button>
+          ) : null}
+        </div>
+        <textarea
+          id="ai-prompt"
+          rows={10}
+          value={summaryPrompt || defaultSummaryPrompt}
+          onChange={(event) => onSummaryPromptChange(event.target.value)}
+          className={`${INPUT_CLASS} resize-y font-mono text-xs leading-relaxed`}
+          spellCheck={false}
+        />
+        <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+          Available placeholders: <code className="font-mono">{"{role}"}</code>{" "}
+          <code className="font-mono">{"{chapter}"}</code>{" "}
+          <code className="font-mono">{"{mainSkills}"}</code>{" "}
+          <code className="font-mono">{"{topSkills}"}</code>
+        </p>
+      </div>
+
+      <div className="flex items-center gap-3 pt-1">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={isSaving}
+          className={PRIMARY_BUTTON_CLASS}
+        >
+          {isSaving ? "Saving…" : "Save Settings"}
+        </button>
+        {saved ? (
+          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/system-settings/AnonymizationSettingsPanel.tsx b/apps/web/src/components/admin/system-settings/AnonymizationSettingsPanel.tsx
new file mode 100644
index 0000000..78815c1
--- /dev/null
+++ b/apps/web/src/components/admin/system-settings/AnonymizationSettingsPanel.tsx
@@ -0,0 +1,110 @@
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import {
+  INPUT_CLASS,
+  LABEL_CLASS,
+  PANEL_CLASS,
+  PRIMARY_BUTTON_CLASS,
+  RuntimeSecretCard,
+  type RuntimeSecrets,
+} from "./shared.js";
+
+type AnonymizationSettingsPanelProps = {
+  anonymizationEnabled: boolean;
+  anonymizationDomain: string;
+  anonymizationSaved: boolean;
+  anonymizationSecret: RuntimeSecrets["anonymizationSeed"];
+  isSaving: boolean;
+  onAnonymizationEnabledChange: (value: boolean) => void;
+  onAnonymizationDomainChange: (value: string) => void;
+  onSave: () => void;
+};
+
+export function AnonymizationSettingsPanel({
+  anonymizationEnabled,
+  anonymizationDomain,
+  anonymizationSaved,
+  anonymizationSecret,
+  isSaving,
+  onAnonymizationEnabledChange,
+  onAnonymizationDomainChange,
+  onSave,
+}: AnonymizationSettingsPanelProps) {
+  return (
+    <div className={PANEL_CLASS}>
+      <div>
+        <h2 className="flex items-center text-base font-semibold text-gray-900 dark:text-gray-100">
+          Viewer Anonymization{" "}
+          <InfoTooltip content="Replace displayed identities with deterministic aliases for demos and screenshots." />
+        </h2>
+        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          Global debug mode that keeps real identities in the database but replaces displayed
+          resource names, EIDs, and emails with stable aliases across sessions.
+        </p>
+      </div>
+
+      <label className="flex items-start gap-3 rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900/70 dark:text-gray-300">
+        <input
+          type="checkbox"
+          checked={anonymizationEnabled}
+          onChange={(event) => onAnonymizationEnabledChange(event.target.checked)}
+          className="mt-0.5 rounded border-gray-300 text-brand-600"
+        />
+        <span>
+          Enable global stable anonymization
+          <span className="mt-1 block text-xs text-gray-500 dark:text-gray-400">
+            API responses switch to deterministic aliases like <code>Iron Man</code>,{" "}
+            <code>iron.man</code>, and <code>iron.man@superhartmut.de</code>.
+          </span>
+        </span>
+      </label>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div>
+          <label className={LABEL_CLASS}>Alias Email Domain</label>
+          <input
+            type="text"
+            className={INPUT_CLASS}
+            value={anonymizationDomain}
+            onChange={(event) => onAnonymizationDomainChange(event.target.value)}
+            placeholder="superhartmut.de"
+          />
+          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+            Used for generated alias emails only. Stored resource emails stay unchanged.
+          </p>
+        </div>
+        <div>
+          <label className={LABEL_CLASS}>Optional Seed Override</label>
+          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+            The optional seed is managed as a deployment secret instead of an in-app value.
+          </p>
+        </div>
+      </div>
+
+      <RuntimeSecretCard
+        title="Anonymization Seed"
+        description="The stable anonymization seed is resolved from runtime secret management."
+        secret={anonymizationSecret}
+        optionalNote="Provision ANONYMIZATION_SEED only when you need a non-default, deployment-specific alias mapping."
+      />
+
+      <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-800 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
+        High-LCR resources receive more iconic characters first. Real EIDs and emails are never
+        rewritten in Prisma.
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={isSaving}
+          className={PRIMARY_BUTTON_CLASS}
+        >
+          {isSaving ? "Saving…" : "Save Anonymization Settings"}
+        </button>
+        {anonymizationSaved ? (
+          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/system-settings/ImageGenerationPanel.tsx b/apps/web/src/components/admin/system-settings/ImageGenerationPanel.tsx
new file mode 100644
index 0000000..7646808
--- /dev/null
+++ b/apps/web/src/components/admin/system-settings/ImageGenerationPanel.tsx
@@ -0,0 +1,216 @@
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import {
+  INPUT_CLASS,
+  LABEL_CLASS,
+  PANEL_CLASS,
+  PRIMARY_BUTTON_CLASS,
+  RuntimeSecretCard,
+  type GeminiTestResult,
+  type ImageProvider,
+  type Provider,
+  type RuntimeSecrets,
+} from "./shared.js";
+
+type ImageGenerationPanelProps = {
+  provider: Provider;
+  imageProvider: ImageProvider;
+  dalleDeployment: string;
+  dalleEndpoint: string;
+  geminiModel: string;
+  imageSaved: boolean;
+  geminiTestResult: GeminiTestResult | null;
+  runtimeSecrets: RuntimeSecrets;
+  isSaving: boolean;
+  isTestingGemini: boolean;
+  onImageProviderChange: (provider: ImageProvider) => void;
+  onDalleDeploymentChange: (value: string) => void;
+  onDalleEndpointChange: (value: string) => void;
+  onGeminiModelChange: (value: string) => void;
+  onSave: () => void;
+  onTestGemini: () => void;
+};
+
+export function ImageGenerationPanel({
+  provider,
+  imageProvider,
+  dalleDeployment,
+  dalleEndpoint,
+  geminiModel,
+  imageSaved,
+  geminiTestResult,
+  runtimeSecrets,
+  isSaving,
+  isTestingGemini,
+  onImageProviderChange,
+  onDalleDeploymentChange,
+  onDalleEndpointChange,
+  onGeminiModelChange,
+  onSave,
+  onTestGemini,
+}: ImageGenerationPanelProps) {
+  return (
+    <div className={PANEL_CLASS}>
+      <div>
+        <h2 className="flex items-center text-base font-semibold text-gray-900 dark:text-gray-100">
+          Image Generation{" "}
+          <InfoTooltip content="Configure the image generation provider used for AI-generated project cover art." />
+        </h2>
+        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          Used to generate AI cover art for projects. Configure at least one provider below.
+        </p>
+      </div>
+
+      <div>
+        <label className={LABEL_CLASS}>Provider</label>
+        <div className="flex gap-4">
+          <label className="flex cursor-pointer items-center gap-2">
+            <input
+              type="radio"
+              name="imageProvider"
+              value="dalle"
+              checked={imageProvider === "dalle"}
+              onChange={() => onImageProviderChange("dalle")}
+              className="accent-brand-600"
+            />
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              DALL-E (Azure OpenAI / OpenAI)
+            </span>
+          </label>
+          <label className="flex cursor-pointer items-center gap-2">
+            <input
+              type="radio"
+              name="imageProvider"
+              value="gemini"
+              checked={imageProvider === "gemini"}
+              onChange={() => onImageProviderChange("gemini")}
+              className="accent-brand-600"
+            />
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Google Gemini
+            </span>
+          </label>
+        </div>
+      </div>
+
+      {imageProvider === "dalle" ? (
+        <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+            DALL-E Configuration
+          </h3>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div>
+              <label className={LABEL_CLASS}>
+                <span className="flex items-center">
+                  Deployment Name{" "}
+                  <InfoTooltip content="For OpenAI this is the model name, for Azure it is the deployment name." />
+                </span>
+              </label>
+              <input
+                type="text"
+                className={INPUT_CLASS}
+                value={dalleDeployment}
+                onChange={(event) => onDalleDeploymentChange(event.target.value)}
+                placeholder="dall-e-3"
+              />
+            </div>
+
+            {provider === "azure" ? (
+              <div>
+                <label className={LABEL_CLASS}>
+                  <span className="flex items-center">
+                    Endpoint{" "}
+                    <InfoTooltip content="Leave empty to use the same endpoint as the chat model." />
+                  </span>
+                </label>
+                <input
+                  type="text"
+                  className={INPUT_CLASS}
+                  value={dalleEndpoint}
+                  onChange={(event) => onDalleEndpointChange(event.target.value)}
+                  placeholder="Leave empty to use same endpoint as chat"
+                />
+              </div>
+            ) : null}
+          </div>
+          <RuntimeSecretCard
+            title="Dedicated DALL-E Key"
+            description="Optional override for image generation. If unset, runtime falls back to the primary AI key when possible."
+            secret={runtimeSecrets.azureDalleApiKey}
+            optionalNote="Use AZURE_DALLE_API_KEY only when image generation should be isolated from the primary AI credential."
+          />
+        </div>
+      ) : null}
+
+      {imageProvider === "gemini" ? (
+        <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+            Google Gemini Configuration
+          </h3>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div>
+              <label className={LABEL_CLASS}>
+                <span className="flex items-center">
+                  Model{" "}
+                  <InfoTooltip content="Gemini model for image generation. The default model supports image output." />
+                </span>
+              </label>
+              <select
+                className={INPUT_CLASS}
+                value={geminiModel || "gemini-2.5-flash-image"}
+                onChange={(event) => onGeminiModelChange(event.target.value)}
+              >
+                <option value="gemini-2.5-flash-image">Gemini 2.5 Flash Image — fast, high-volume</option>
+                <option value="gemini-3-pro-image-preview">Gemini 3 Pro Image Preview — high-fidelity</option>
+                <option value="gemini-3.1-flash-image-preview">Gemini 3.1 Flash Image Preview — latest</option>
+              </select>
+            </div>
+          </div>
+          <RuntimeSecretCard
+            title="Gemini API Key"
+            description="Gemini credentials are resolved from deployment secrets only."
+            secret={runtimeSecrets.geminiApiKey}
+            optionalNote="Provision GEMINI_API_KEY in the target environment before using Gemini image generation."
+          />
+        </div>
+      ) : null}
+
+      <div className="flex flex-wrap items-center gap-3 pt-1">
+        <button
+          type="button"
+          className={PRIMARY_BUTTON_CLASS}
+          disabled={isSaving}
+          onClick={onSave}
+        >
+          {isSaving ? "Saving..." : "Save Image Settings"}
+        </button>
+        {imageProvider === "gemini" ? (
+          <button
+            type="button"
+            className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
+            disabled={isTestingGemini}
+            onClick={onTestGemini}
+          >
+            {isTestingGemini ? "Testing..." : "Test Gemini"}
+          </button>
+        ) : null}
+        {imageSaved ? (
+          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved</span>
+        ) : null}
+      </div>
+
+      {geminiTestResult ? (
+        <div
+          className={`mt-3 rounded-lg border px-3 py-2 text-sm ${
+            geminiTestResult.ok
+              ? "border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/20 dark:text-green-300"
+              : "border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300"
+          }`}
+        >
+          {geminiTestResult.ok
+            ? `Gemini image generation works. Model: ${geminiTestResult.model}`
+            : `Test failed: ${geminiTestResult.error}`}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/system-settings/LegacyRuntimeSecretsNotice.tsx b/apps/web/src/components/admin/system-settings/LegacyRuntimeSecretsNotice.tsx
new file mode 100644
index 0000000..74a7dd9
--- /dev/null
+++ b/apps/web/src/components/admin/system-settings/LegacyRuntimeSecretsNotice.tsx
@@ -0,0 +1,55 @@
+import { SECONDARY_BUTTON_CLASS } from "./shared.js";
+
+type LegacyRuntimeSecretsNoticeProps = {
+  fields: string[];
+  result: string | null;
+  isPending: boolean;
+  onClear: () => void;
+};
+
+export function LegacyRuntimeSecretsNotice({
+  fields,
+  result,
+  isPending,
+  onClear,
+}: LegacyRuntimeSecretsNoticeProps) {
+  if (fields.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-2xl border border-amber-200 bg-amber-50 px-5 py-4 dark:border-amber-800 dark:bg-amber-950/30">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-amber-900 dark:text-amber-200">
+            Legacy Runtime Secrets Detected
+          </h2>
+          <p className="mt-2 text-sm text-amber-900/90 dark:text-amber-100/90">
+            This installation still has database-stored runtime secrets. New secrets are no longer
+            persisted in the application. Move them to deployment-level secret management first,
+            then clear the legacy residue here.
+          </p>
+          <p className="mt-2 text-xs text-amber-800 dark:text-amber-300">
+            Affected fields:{" "}
+            {fields.map((field) => (
+              <code key={field} className="mr-1 font-mono">
+                {field}
+              </code>
+            ))}
+          </p>
+          {result ? (
+            <p className="mt-2 text-xs text-amber-900 dark:text-amber-200">{result}</p>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          onClick={onClear}
+          disabled={isPending}
+          className={SECONDARY_BUTTON_CLASS}
+        >
+          {isPending ? "Clearing…" : "Clear Legacy DB Secrets"}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/system-settings/SmtpSettingsPanel.tsx b/apps/web/src/components/admin/system-settings/SmtpSettingsPanel.tsx
new file mode 100644
index 0000000..8c12e03
--- /dev/null
+++ b/apps/web/src/components/admin/system-settings/SmtpSettingsPanel.tsx
@@ -0,0 +1,186 @@
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import {
+  CHECKBOX_ROW_CLASS,
+  INPUT_CLASS,
+  LABEL_CLASS,
+  PANEL_CLASS,
+  PRIMARY_BUTTON_CLASS,
+  SECONDARY_BUTTON_CLASS,
+  RuntimeSecretCard,
+  type RuntimeSecrets,
+  type SaveResult,
+} from "./shared.js";
+
+type SmtpSettingsPanelProps = {
+  smtpHost: string;
+  smtpPort: number;
+  smtpUser: string;
+  smtpFrom: string;
+  smtpTls: boolean;
+  smtpSaved: boolean;
+  smtpTestResult: SaveResult | null;
+  smtpSecret: RuntimeSecrets["smtpPassword"];
+  isSaving: boolean;
+  isTesting: boolean;
+  onSmtpHostChange: (value: string) => void;
+  onSmtpPortChange: (value: number) => void;
+  onSmtpUserChange: (value: string) => void;
+  onSmtpFromChange: (value: string) => void;
+  onSmtpTlsChange: (value: boolean) => void;
+  onSave: () => void;
+  onTest: () => void;
+};
+
+export function SmtpSettingsPanel({
+  smtpHost,
+  smtpPort,
+  smtpUser,
+  smtpFrom,
+  smtpTls,
+  smtpSaved,
+  smtpTestResult,
+  smtpSecret,
+  isSaving,
+  isTesting,
+  onSmtpHostChange,
+  onSmtpPortChange,
+  onSmtpUserChange,
+  onSmtpFromChange,
+  onSmtpTlsChange,
+  onSave,
+  onTest,
+}: SmtpSettingsPanelProps) {
+  return (
+    <div className={PANEL_CLASS}>
+      <div>
+        <h2 className="flex items-center text-base font-semibold text-gray-900 dark:text-gray-100">
+          Email Notifications (SMTP){" "}
+          <InfoTooltip content="Configure SMTP to send email notifications for vacation approvals and rejections." />
+        </h2>
+        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          Used to send email notifications when vacation requests are approved or rejected.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div>
+          <label className={LABEL_CLASS}>
+            <span className="flex items-center">
+              SMTP Host{" "}
+              <InfoTooltip content="The SMTP server hostname, for example smtp.gmail.com or smtp.office365.com." />
+            </span>
+          </label>
+          <input
+            type="text"
+            className={INPUT_CLASS}
+            value={smtpHost}
+            onChange={(event) => onSmtpHostChange(event.target.value)}
+            placeholder="smtp.example.com"
+          />
+        </div>
+        <div>
+          <label className={LABEL_CLASS}>
+            <span className="flex items-center">
+              SMTP Port{" "}
+              <InfoTooltip content="Common ports: 587 for STARTTLS, 465 for SSL/TLS, 25 for unencrypted." />
+            </span>
+          </label>
+          <input
+            type="number"
+            className={INPUT_CLASS}
+            value={smtpPort}
+            onChange={(event) => onSmtpPortChange(parseInt(event.target.value, 10))}
+            min={1}
+            max={65535}
+          />
+        </div>
+        <div>
+          <label className={LABEL_CLASS}>
+            <span className="flex items-center">
+              SMTP Username{" "}
+              <InfoTooltip content="Authentication username for the SMTP server." />
+            </span>
+          </label>
+          <input
+            type="text"
+            className={INPUT_CLASS}
+            value={smtpUser}
+            onChange={(event) => onSmtpUserChange(event.target.value)}
+            placeholder="user@example.com"
+            autoComplete="off"
+          />
+        </div>
+        <div>
+          <label className={LABEL_CLASS}>
+            <span className="flex items-center">
+              From Address{" "}
+              <InfoTooltip content="The sender email address shown in notification emails." />
+            </span>
+          </label>
+          <input
+            type="email"
+            className={INPUT_CLASS}
+            value={smtpFrom}
+            onChange={(event) => onSmtpFromChange(event.target.value)}
+            placeholder="noreply@capakraken.app"
+          />
+        </div>
+        <div className={`${CHECKBOX_ROW_CLASS} pt-0 md:mt-[1.65rem]`}>
+          <input
+            type="checkbox"
+            id="smtpTls"
+            checked={smtpTls}
+            onChange={(event) => onSmtpTlsChange(event.target.checked)}
+            className="rounded border-gray-300 text-brand-600"
+          />
+          <label
+            htmlFor="smtpTls"
+            className="cursor-pointer text-sm text-gray-700 dark:text-gray-300"
+          >
+            Use TLS
+          </label>
+        </div>
+      </div>
+
+      <RuntimeSecretCard
+        title="SMTP Password"
+        description="SMTP credentials are provisioned outside the application and injected at runtime."
+        secret={smtpSecret}
+        optionalNote="Provision SMTP_PASSWORD in the deployment target used by the API service."
+      />
+
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={isSaving}
+          className={PRIMARY_BUTTON_CLASS}
+        >
+          {isSaving ? "Saving…" : "Save SMTP Settings"}
+        </button>
+        <button
+          type="button"
+          onClick={onTest}
+          disabled={isTesting}
+          className={SECONDARY_BUTTON_CLASS}
+        >
+          {isTesting ? "Testing…" : "Test Connection"}
+        </button>
+        {smtpSaved ? (
+          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
+        ) : null}
+        {smtpTestResult ? (
+          <span
+            className={`text-sm font-medium ${
+              smtpTestResult.ok
+                ? "text-green-600 dark:text-green-400"
+                : "text-red-500 dark:text-red-400"
+            }`}
+          >
+            {smtpTestResult.ok ? "✓ Connection successful" : `✗ ${smtpTestResult.error}`}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/system-settings/TimelineSettingsPanel.tsx b/apps/web/src/components/admin/system-settings/TimelineSettingsPanel.tsx
new file mode 100644
index 0000000..7f36da3
--- /dev/null
+++ b/apps/web/src/components/admin/system-settings/TimelineSettingsPanel.tsx
@@ -0,0 +1,61 @@
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { INPUT_CLASS, LABEL_CLASS, PANEL_CLASS, PRIMARY_BUTTON_CLASS } from "./shared.js";
+
+type TimelineSettingsPanelProps = {
+  undoMaxSteps: number;
+  timelineSaved: boolean;
+  isSaving: boolean;
+  onUndoMaxStepsChange: (value: number) => void;
+  onSave: () => void;
+};
+
+export function TimelineSettingsPanel({
+  undoMaxSteps,
+  timelineSaved,
+  isSaving,
+  onUndoMaxStepsChange,
+  onSave,
+}: TimelineSettingsPanelProps) {
+  return (
+    <div className={PANEL_CLASS}>
+      <div>
+        <h2 className="flex items-center text-base font-semibold text-gray-900 dark:text-gray-100">
+          Timeline{" "}
+          <InfoTooltip content="Settings for the timeline view, including undo history depth." />
+        </h2>
+        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          Configure timeline behavior and undo or redo history.
+        </p>
+      </div>
+
+      <div className="max-w-xs">
+        <label className={LABEL_CLASS}>Undo History Depth</label>
+        <input
+          type="number"
+          className={INPUT_CLASS}
+          value={undoMaxSteps}
+          onChange={(event) => onUndoMaxStepsChange(parseInt(event.target.value, 10) || 50)}
+          min={1}
+          max={200}
+        />
+        <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+          Maximum number of undo steps for timeline operations. Default: 50.
+        </p>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={isSaving}
+          className={PRIMARY_BUTTON_CLASS}
+        >
+          {isSaving ? "Saving…" : "Save Timeline Settings"}
+        </button>
+        {timelineSaved ? (
+          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/system-settings/VacationSettingsPanel.tsx b/apps/web/src/components/admin/system-settings/VacationSettingsPanel.tsx
new file mode 100644
index 0000000..8348628
--- /dev/null
+++ b/apps/web/src/components/admin/system-settings/VacationSettingsPanel.tsx
@@ -0,0 +1,66 @@
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { INPUT_CLASS, LABEL_CLASS, PANEL_CLASS, PRIMARY_BUTTON_CLASS } from "./shared.js";
+
+type VacationSettingsPanelProps = {
+  vacationDefaultDays: number;
+  vacationSaved: boolean;
+  isSaving: boolean;
+  onVacationDefaultDaysChange: (value: number) => void;
+  onSave: () => void;
+};
+
+export function VacationSettingsPanel({
+  vacationDefaultDays,
+  vacationSaved,
+  isSaving,
+  onVacationDefaultDaysChange,
+  onSave,
+}: VacationSettingsPanelProps) {
+  return (
+    <div className={PANEL_CLASS}>
+      <div>
+        <h2 className="flex items-center text-base font-semibold text-gray-900 dark:text-gray-100">
+          Vacation Defaults{" "}
+          <InfoTooltip content="Sets the default vacation entitlement applied when creating new resources." />
+        </h2>
+        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          Default annual leave entitlement for new resources and the entitlement bulk-set tool.
+        </p>
+      </div>
+
+      <div className="max-w-xs">
+        <label className={LABEL_CLASS}>
+          <span className="flex items-center">
+            Default Annual Leave Days{" "}
+            <InfoTooltip content="The number of vacation days granted per year." />
+          </span>
+        </label>
+        <input
+          type="number"
+          className={INPUT_CLASS}
+          value={vacationDefaultDays}
+          onChange={(event) => onVacationDefaultDaysChange(parseInt(event.target.value, 10))}
+          min={0}
+          max={365}
+        />
+        <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+          Applied when creating new entitlement records for resources.
+        </p>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={isSaving}
+          className={PRIMARY_BUTTON_CLASS}
+        >
+          {isSaving ? "Saving…" : "Save Vacation Settings"}
+        </button>
+        {vacationSaved ? (
+          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/system-settings/ValueScorePanel.tsx b/apps/web/src/components/admin/system-settings/ValueScorePanel.tsx
new file mode 100644
index 0000000..06ad630
--- /dev/null
+++ b/apps/web/src/components/admin/system-settings/ValueScorePanel.tsx
@@ -0,0 +1,254 @@
+import { CHECKBOX_ROW_CLASS, LABEL_CLASS, PANEL_STRONG_CLASS, PRIMARY_BUTTON_CLASS, SECONDARY_BUTTON_CLASS, ALL_ROLES, type ScoreWeights, type SystemRole } from "./shared.js";
+
+type WeightKey = keyof ScoreWeights;
+
+type WeightDefinition = {
+  key: WeightKey;
+  code: string;
+  title: string;
+  details: string;
+  formula: string;
+  example: string;
+  range: string;
+  warning?: string;
+};
+
+const WEIGHT_DEFINITIONS: WeightDefinition[] = [
+  {
+    key: "skillDepth",
+    code: "D",
+    title: "Skill Depth",
+    details: "Average proficiency across all skills, scaled to 0–100. Expert-heavy profiles score near 100.",
+    formula: "D = round((avg_proficiency / 5) × 100)",
+    example: "avg 4.0/5 → 80",
+    range: "0 = all Beginner · 100 = all Expert",
+  },
+  {
+    key: "skillBreadth",
+    code: "B",
+    title: "Skill Breadth",
+    details: "Number of distinct skills listed. Ten points per skill, capped at 100 for ten or more skills.",
+    formula: "B = min(100, skill_count × 10)",
+    example: "7 skills → 70",
+    range: "0 = no skills · 100 = 10+ skills",
+  },
+  {
+    key: "costEfficiency",
+    code: "C",
+    title: "Cost Efficiency",
+    details: "Inverse LCR versus the organizational maximum. Cheapest resource scores 100, most expensive scores 0.",
+    formula: "C = round((1 − LCR / max_LCR) × 100)",
+    example: "60€ vs 120€ → 50",
+    range: "0 = highest LCR · 100 = lowest LCR",
+    warning: "If all resources share the same LCR, everyone scores 0 on this dimension.",
+  },
+  {
+    key: "chargeability",
+    code: "A",
+    title: "Chargeability",
+    details: "Distance from the personal chargeability target over the last 90 days. On target scores 100.",
+    formula: "A = max(0, 100 − |target% − actual%| × 2)",
+    example: "10 pp off → 80",
+    range: "0 = 50+ pp off target · 100 = exactly on target",
+  },
+  {
+    key: "experience",
+    code: "E",
+    title: "Experience",
+    details: "Average years of experience across skills with explicit years data, capped at 10 years.",
+    formula: "E = min(100, avg_years × 10)",
+    example: "6.5 yrs → 65 · 10+ yrs → 100",
+    range: "0 = no years data · 100 = 10+ years average",
+  },
+];
+
+type ValueScorePanelProps = {
+  scoreWeights: ScoreWeights;
+  scoreVisibleRoles: SystemRole[];
+  weightSum: number;
+  weightSumOk: boolean;
+  scoreSaved: boolean;
+  recomputeResult: { updated: number } | null;
+  isSaving: boolean;
+  isRecomputing: boolean;
+  onUpdateWeight: (key: keyof ScoreWeights, value: number) => void;
+  onToggleRole: (role: SystemRole) => void;
+  onRecompute: () => void;
+  onSave: () => void;
+};
+
+export function ValueScorePanel({
+  scoreWeights,
+  scoreVisibleRoles,
+  weightSum,
+  weightSumOk,
+  scoreSaved,
+  recomputeResult,
+  isSaving,
+  isRecomputing,
+  onUpdateWeight,
+  onToggleRole,
+  onRecompute,
+  onSave,
+}: ValueScorePanelProps) {
+  return (
+    <div className={PANEL_STRONG_CLASS}>
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <h2 className="mb-1 text-sm font-semibold uppercase tracking-wider text-gray-800 dark:text-gray-200">
+            Value Score
+          </h2>
+          <p className="text-xs leading-relaxed text-gray-500 dark:text-gray-400">
+            A persistent 0–100 price/quality metric per resource across five weighted dimensions.
+            Recompute on demand after changing weights or importing new skill matrices.
+          </p>
+        </div>
+        <div className="whitespace-nowrap rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 font-mono text-[11px] text-gray-700 dark:border-gray-600 dark:bg-gray-700/50 dark:text-gray-300">
+          round(<span className="text-brand-600 dark:text-brand-400">D</span>·w₁ +{" "}
+          <span className="text-brand-600 dark:text-brand-400">B</span>·w₂ +{" "}
+          <span className="text-brand-600 dark:text-brand-400">C</span>·w₃ +{" "}
+          <span className="text-brand-600 dark:text-brand-400">A</span>·w₄ +{" "}
+          <span className="text-brand-600 dark:text-brand-400">E</span>·w₅)
+        </div>
+      </div>
+
+      <div>
+        <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          Dimension Weights — must sum to 100%
+        </p>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+          {WEIGHT_DEFINITIONS.map((definition) => {
+            const value = Math.round(scoreWeights[definition.key] * 100);
+
+            return (
+              <div
+                key={definition.key}
+                className="rounded-2xl border border-gray-200 px-4 py-3 dark:border-gray-600"
+              >
+                <div className="mb-2 flex items-center gap-2">
+                  <span className="rounded bg-brand-50 px-1.5 py-0.5 font-mono text-[10px] font-bold text-brand-700 dark:bg-brand-900/30 dark:text-brand-300">
+                    {definition.code}
+                  </span>
+                  <span className="flex-1 text-sm font-semibold text-gray-800 dark:text-gray-100">
+                    {definition.title}
+                  </span>
+                  <span className="w-10 text-right font-mono text-sm font-bold tabular-nums text-brand-600 dark:text-brand-400">
+                    {value}%
+                  </span>
+                </div>
+                <input
+                  type="range"
+                  min={0}
+                  max={100}
+                  step={5}
+                  value={value}
+                  onChange={(event) => onUpdateWeight(definition.key, Number(event.target.value) / 100)}
+                  className="w-full accent-brand-600"
+                />
+                <details className="mt-1.5">
+                  <summary className="cursor-pointer select-none text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                    Show details
+                  </summary>
+                  <div className="mt-2 space-y-1.5">
+                    <p className="text-xs leading-relaxed text-gray-600 dark:text-gray-400">
+                      {definition.details}
+                    </p>
+                    <div className="rounded bg-gray-50 px-2 py-1.5 font-mono text-[11px] text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                      {definition.formula}
+                      <span className="ml-2 text-gray-400">{definition.example}</span>
+                    </div>
+                    <div className="text-[11px] text-gray-400 dark:text-gray-500">
+                      {definition.range}
+                    </div>
+                    {definition.warning ? (
+                      <p className="text-[11px] text-amber-600 dark:text-amber-500">
+                        {definition.warning}
+                      </p>
+                    ) : null}
+                  </div>
+                </details>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div
+        className={`flex items-center gap-2 rounded-2xl border px-4 py-2.5 text-sm font-medium ${
+          weightSumOk
+            ? "border-green-200 bg-green-50 text-green-700 dark:border-green-700 dark:bg-green-900/20 dark:text-green-300"
+            : "border-red-200 bg-red-50 text-red-700 dark:border-red-700 dark:bg-red-900/20 dark:text-red-300"
+        }`}
+      >
+        <span>{weightSumOk ? "✓" : "✗"}</span>
+        <span>
+          Total weight: <span className="font-mono">{Math.round(weightSum * 100)}%</span>
+          {weightSumOk ? " — valid" : " — must be exactly 100% to save"}
+        </span>
+      </div>
+
+      <div className="space-y-2">
+        <label className={LABEL_CLASS}>Score visibility — which roles can see the Value Score</label>
+        <p className="text-xs text-gray-500 dark:text-gray-400">
+          Controls who sees the score column on the Resources list, the breakdown on the Resource
+          Detail page, and the Top Value Resources dashboard widget.
+        </p>
+        <div className="mt-2 flex flex-wrap gap-3">
+          {ALL_ROLES.map((role) => (
+            <label key={role} className={`${CHECKBOX_ROW_CLASS} cursor-pointer select-none`}>
+              <input
+                type="checkbox"
+                checked={scoreVisibleRoles.includes(role)}
+                onChange={() => onToggleRole(role)}
+                className="rounded border-gray-300"
+              />
+              {role}
+            </label>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-3 border-t border-gray-100 pt-5 dark:border-gray-700">
+        <div>
+          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-400">
+            Recompute Scores
+          </p>
+          <p className="mb-3 text-xs text-gray-500 dark:text-gray-400">
+            Scores are not updated automatically. Run this after changing weights or after importing
+            new skill matrices.
+          </p>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={onRecompute}
+              disabled={isRecomputing}
+              className={SECONDARY_BUTTON_CLASS}
+            >
+              {isRecomputing ? "Recomputing…" : "Recompute All Scores"}
+            </button>
+            {recomputeResult ? (
+              <span className="text-sm font-medium text-green-600 dark:text-green-400">
+                Updated {recomputeResult.updated} resource
+                {recomputeResult.updated !== 1 ? "s" : ""}
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3 pt-1">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={isSaving || !weightSumOk}
+          className={PRIMARY_BUTTON_CLASS}
+        >
+          {isSaving ? "Saving…" : "Save Score Settings"}
+        </button>
+        {scoreSaved ? (
+          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/system-settings/shared.tsx b/apps/web/src/components/admin/system-settings/shared.tsx
new file mode 100644
index 0000000..41ef2ef
--- /dev/null
+++ b/apps/web/src/components/admin/system-settings/shared.tsx
@@ -0,0 +1,163 @@
+import type { ReactNode } from "react";
+
+export const INPUT_CLASS = "app-input";
+export const LABEL_CLASS = "app-label";
+export const PANEL_CLASS = "app-surface p-6 space-y-5";
+export const PANEL_STRONG_CLASS = "app-surface-strong p-6 space-y-6";
+export const PRIMARY_BUTTON_CLASS =
+  "rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700 disabled:opacity-50";
+export const SECONDARY_BUTTON_CLASS =
+  "rounded-xl border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800";
+export const CHECKBOX_ROW_CLASS =
+  "flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900/70 dark:text-gray-300";
+
+export type Provider = "openai" | "azure";
+export type ImageProvider = "dalle" | "gemini";
+export type RuntimeSecretSource = "environment" | "database" | "none";
+export type UrlParsedType = "completions" | "responses" | null;
+
+export type RuntimeSecretStatus = {
+  configured: boolean;
+  activeSource: RuntimeSecretSource;
+  hasStoredValue: boolean;
+  envVarNames: string[];
+};
+
+export type RuntimeSecrets = {
+  azureOpenAiApiKey: RuntimeSecretStatus;
+  azureDalleApiKey: RuntimeSecretStatus;
+  geminiApiKey: RuntimeSecretStatus;
+  smtpPassword: RuntimeSecretStatus;
+  anonymizationSeed: RuntimeSecretStatus;
+};
+
+export type ParsedAzureUrl = {
+  endpoint: string;
+  apiVersion: string;
+  deployment: string | null;
+  urlType: "completions" | "responses";
+};
+
+export type SaveResult = {
+  ok: boolean;
+  error?: string;
+};
+
+export type GeminiTestResult = {
+  ok: boolean;
+  model?: string;
+  error?: string;
+};
+
+export const ALL_ROLES = ["ADMIN", "MANAGER", "CONTROLLER", "USER", "VIEWER"] as const;
+export type SystemRole = (typeof ALL_ROLES)[number];
+
+export interface ScoreWeights {
+  skillDepth: number;
+  skillBreadth: number;
+  costEfficiency: number;
+  chargeability: number;
+  experience: number;
+}
+
+export function parseAzureUrl(raw: string): ParsedAzureUrl | null {
+  try {
+    const url = new URL(raw);
+    const endpoint = `${url.protocol}//${url.host}`;
+    const apiVersion = url.searchParams.get("api-version") ?? "2025-01-01-preview";
+    const completionsMatch = url.pathname.match(/\/openai\/deployments\/([^/]+)\//);
+
+    if (completionsMatch) {
+      return { endpoint, apiVersion, deployment: completionsMatch[1]!, urlType: "completions" };
+    }
+
+    if (url.pathname.includes("/openai/responses")) {
+      return { endpoint, apiVersion, deployment: null, urlType: "responses" };
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function getSecretStatusTone(source: RuntimeSecretSource): string {
+  if (source === "environment") {
+    return "border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300";
+  }
+  if (source === "database") {
+    return "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-300";
+  }
+  return "border-gray-200 bg-gray-50 text-gray-700 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-300";
+}
+
+function getSecretStatusLabel(source: RuntimeSecretSource): string {
+  if (source === "environment") return "Environment";
+  if (source === "database") return "Legacy DB";
+  return "Missing";
+}
+
+export function RuntimeSecretCard({
+  title,
+  description,
+  secret,
+  optionalNote,
+}: {
+  title: string;
+  description: ReactNode;
+  secret: RuntimeSecretStatus;
+  optionalNote?: ReactNode;
+}) {
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-700 dark:bg-gray-900/50">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{title}</h3>
+          <p className="mt-1 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
+            {description}
+          </p>
+        </div>
+        <span
+          className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] ${getSecretStatusTone(secret.activeSource)}`}
+        >
+          {getSecretStatusLabel(secret.activeSource)}
+        </span>
+      </div>
+
+      <div className="mt-3 space-y-2 text-xs text-gray-600 dark:text-gray-300">
+        <p>
+          Runtime status:{" "}
+          <span className="font-medium">
+            {secret.configured ? "configured" : "not configured"}
+          </span>
+        </p>
+        <p>
+          Provision via{" "}
+          {secret.envVarNames.map((name) => (
+            <code key={name} className="mr-1 font-mono">
+              {name}
+            </code>
+          ))}
+        </p>
+        {optionalNote ? <p>{optionalNote}</p> : null}
+        {secret.activeSource === "environment" && secret.hasStoredValue ? (
+          <p className="text-amber-700 dark:text-amber-400">
+            An older database value still exists, but the environment value currently overrides it.
+          </p>
+        ) : null}
+        {secret.activeSource === "database" ? (
+          <p className="text-amber-700 dark:text-amber-400">
+            Runtime currently still depends on a legacy database secret. Migrate it to deployment
+            secrets and clear the stored value afterwards.
+          </p>
+        ) : null}
+        {secret.activeSource === "none" ? (
+          <p className="text-gray-500 dark:text-gray-400">
+            No runtime secret is available yet. The related integration will stay disabled or fail
+            connectivity checks until the deployment secret is set.
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/docs/architecture-hardening-backlog.md b/docs/architecture-hardening-backlog.md
index cf55fc5..059d5a8 100644
--- a/docs/architecture-hardening-backlog.md
+++ b/docs/architecture-hardening-backlog.md
@@ -21,11 +21,12 @@
 - `resource` is now onboarded as the second real comment entity, reusing the same ownership and staff-visibility rules as the resource detail route
 - comment mention autocomplete now uses a dedicated entity-scoped API route instead of inheriting the narrower `user.listAssignable` audience
 - runtime secret handling is now environment-first end to end: admin updates no longer persist new operational secrets, runtime status is surfaced explicitly, and legacy database secret copies can be cleared through a dedicated cleanup path
+- `apps/web` system settings UI is now decomposed into section components with shared secret/runtime helpers, bringing all files in that slice back under the file-size guardrail
 
 ## Next Up
 
-No queued hardening slice is currently pinned in this document.
-Reassess after the current batch so the next item reflects the then-real highest-risk gap instead of stale cleanup residue.
+Pin the next structural cleanup on the API side:
+split `packages/api/src/router/assistant-tools.ts` into domain-oriented tool modules without changing the public tool contract.
 
 ## Remaining Major Themes
 
@@ -33,7 +34,7 @@ The small hardening slices are effectively exhausted.
 The remaining work is now structural rather than another quick batch:
 
 1. secrets and runtime configuration policy
-2. oversized router and UI decomposition
+2. oversized router decomposition
 3. production-grade rate limiting
 4. canonical image-based production delivery
 5. performance hotspot reduction