@data-club/ai-hub 0.0.1

package/src/components/DataClubAIHubAdmin/SettingsPage.tsx

@@ -0,0 +1,979 @@
+/**
+ * `<AdminSettingsPage />` — the super_admin-only Settings sub-page mounted
+ * inside `<DataClubAIHubAdmin />` ([08-admin-settings.md]).
+ *
+ * Five independent sections, each with its own Save button — per the spec,
+ * "Don't make the user save all five sections together":
+ *
+ * 1. **Letta connection** — base URL, ADE URL, API key (masked + replaceable).
+ * 2. **Theme** — default theme + switcher-enabled checkbox.
+ * 3. **UI feature toggles** — the §8.4 toggle blob.
+ * 4. **Signing key** — rotate with `ROTATE`-typing friction. Rotating
+ *    invalidates every JWT, including the calling super-admin's.
+ * 5. **Metrics scrape token** — rotate with the same friction. The new token
+ *    is shown ONCE via a reveal modal; subsequent settings reads no longer
+ *    expose it. Does NOT invalidate the calling JWT.
+ *
+ * Each section owns its own dirty-state and save handler; sibling sections
+ * never share state. This means a half-typed Letta URL won't be pushed when
+ * the admin clicks `Save toggles` in a different section.
+ *
+ * Visible to `super_admin` only — the parent shell hides the nav item for
+ * other roles and the server returns 403 for any other caller.
+ *
+ * @see SPECIFICATIONS.md §6.3.4 / §8.3 / §8.4 / §6.7 / §6.10
+ * @see ui-sketches/08-admin-settings.md
+ */
+import { useEffect, useState, type ReactNode } from "react";
+
+import type { AIHubAdminTexts } from "../../auth/texts.js";
+import type { AdminSettingsView } from "../../client/AIHubClient.js";
+import { useAIHub } from "../../context/useAIHub.js";
+import { useAIHubAuth } from "../../context/useAIHubAuth.js";
+import type { AIHubFeatureToggles } from "../../types.js";
+
+/** All feature-toggle keys per §8.4. */
+const ALL_TOGGLE_KEYS: ReadonlyArray<keyof AIHubFeatureToggles> = [
+  "sessions_panel_enabled",
+  "sessions_panel_resizable",
+  "sessions_panel_collapsible",
+  "create_session_button_enabled",
+  "user_input_enabled",
+  "stop_button_enabled",
+  "tool_calls_visible",
+  "reasoning_visible",
+  "system_messages_visible",
+  "tpm_notice_visible",
+  "effort_control_visible",
+  "scroll_to_present_visible",
+  "turn_status_visible",
+];
+
+/** Toggles grouped by the §8.4 visual grouping (purely organizational). */
+const TOGGLE_GROUPS: ReadonlyArray<{
+  groupLabelKey: keyof AIHubAdminTexts;
+  keys: ReadonlyArray<keyof AIHubFeatureToggles>;
+}> = [
+  {
+    groupLabelKey: "settingsTogglesGroupSessions",
+    keys: [
+      "sessions_panel_enabled",
+      "sessions_panel_resizable",
+      "sessions_panel_collapsible",
+      "create_session_button_enabled",
+    ],
+  },
+  {
+    groupLabelKey: "settingsTogglesGroupInput",
+    keys: ["user_input_enabled", "effort_control_visible"],
+  },
+  {
+    groupLabelKey: "settingsTogglesGroupAffordances",
+    keys: [
+      "stop_button_enabled",
+      "tool_calls_visible",
+      "reasoning_visible",
+      "system_messages_visible",
+      "tpm_notice_visible",
+      "scroll_to_present_visible",
+      "turn_status_visible",
+    ],
+  },
+];
+
+/** Toggle defaults — every toggle is on by default per §8.4. */
+function defaultToggleValue(): boolean {
+  return true;
+}
+
+/** Format ISO date as `YYYY-MM-DD (N days ago)`. */
+function formatRotationStamp(iso: string | null): string | null {
+  if (iso === null) return null;
+  const ts = Date.parse(iso);
+  if (Number.isNaN(ts)) return iso;
+  const dateOnly = new Date(ts).toISOString().slice(0, 10);
+  const diffDays = Math.floor((Date.now() - ts) / (24 * 60 * 60 * 1000));
+  if (diffDays <= 0) return `${dateOnly} (today)`;
+  if (diffDays === 1) return `${dateOnly} (1 day ago)`;
+  return `${dateOnly} (${diffDays} days ago)`;
+}
+
+/** Props for `<AdminSettingsPage />`. */
+export interface AdminSettingsPageProps {
+  /** Resolved admin texts. */
+  texts: AIHubAdminTexts;
+}
+
+/** Renders the Settings sub-page. */
+export function AdminSettingsPage(props: AdminSettingsPageProps): ReactNode {
+  const { client } = useAIHub();
+
+  const [settings, setSettings] = useState<AdminSettingsView | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const result = await client.getAdminSettings();
+        if (!cancelled) {
+          setSettings(result);
+          setLoadError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setLoadError(
+            err instanceof Error && err.message.length > 0
+              ? err.message
+              : props.texts.settingsGenericError,
+          );
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, props.texts.settingsGenericError]);
+
+  function handleSectionSaved(next: AdminSettingsView): void {
+    setSettings(next);
+  }
+
+  return (
+    <div
+      className="data-club-ai-hub-admin__settings-page"
+      data-testid="admin-settings-page"
+    >
+      <header className="data-club-ai-hub-admin__page-header">
+        <h1
+          className="data-club-ai-hub-admin__page-heading"
+          data-testid="admin-settings-heading"
+        >
+          {props.texts.settingsHeading}
+        </h1>
+      </header>
+      {loadError !== null ? (
+        <div
+          className="data-club-ai-hub-admin__error"
+          role="alert"
+          data-testid="admin-settings-error"
+        >
+          {loadError}
+        </div>
+      ) : null}
+      {settings === null && loadError === null ? (
+        <p
+          className="data-club-ai-hub-admin__loading"
+          data-testid="admin-settings-loading"
+        >
+          {props.texts.settingsLoading}
+        </p>
+      ) : null}
+      {settings !== null ? (
+        <>
+          <LettaConnectionSection
+            settings={settings}
+            texts={props.texts}
+            onSaved={handleSectionSaved}
+          />
+          <ThemeSection
+            settings={settings}
+            texts={props.texts}
+            onSaved={handleSectionSaved}
+          />
+          <FeatureTogglesSection
+            settings={settings}
+            texts={props.texts}
+            onSaved={(toggles) =>
+              handleSectionSaved({ ...settings, feature_toggles: toggles })
+            }
+          />
+          <SigningKeySection
+            settings={settings}
+            texts={props.texts}
+            onRotated={(rotatedAt) =>
+              handleSectionSaved({
+                ...settings,
+                signing_key_rotated_at: rotatedAt,
+              })
+            }
+          />
+          <MetricsTokenSection
+            settings={settings}
+            texts={props.texts}
+            onRotated={(rotatedAt) =>
+              handleSectionSaved({
+                ...settings,
+                metrics_scrape_token_rotated_at: rotatedAt,
+              })
+            }
+          />
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/*  Section: Letta connection                                                  */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+interface SectionProps {
+  settings: AdminSettingsView;
+  texts: AIHubAdminTexts;
+}
+
+interface LettaConnectionSectionProps extends SectionProps {
+  onSaved: (next: AdminSettingsView) => void;
+}
+
+function LettaConnectionSection(props: LettaConnectionSectionProps): ReactNode {
+  const { client } = useAIHub();
+  const [baseUrl, setBaseUrl] = useState(props.settings.letta_base_url ?? "");
+  const [adeUrl, setAdeUrl] = useState(props.settings.letta_ade_url ?? "");
+  // Empty string = leave-as-is; non-empty = replace.
+  const [apiKey, setApiKey] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [flash, setFlash] = useState<{ tone: "success" | "error"; text: string } | null>(
+    null,
+  );
+
+  async function handleSave(event: React.FormEvent): Promise<void> {
+    event.preventDefault();
+    setSaving(true);
+    setFlash(null);
+    try {
+      const body: Parameters<typeof client.patchAdminSettings>[0] = {};
+      // Compare against current to avoid stomping the existing value with the
+      // identical one. The server treats null + value identically, but the
+      // schema forbids `null + ""` so we coerce explicitly.
+      if (baseUrl !== (props.settings.letta_base_url ?? "")) {
+        body.lettaBaseUrl = baseUrl === "" ? null : baseUrl;
+      }
+      if (adeUrl !== (props.settings.letta_ade_url ?? "")) {
+        body.lettaAdeUrl = adeUrl === "" ? null : adeUrl;
+      }
+      if (apiKey !== "") body.lettaApiKey = apiKey;
+      const next = await client.patchAdminSettings(body);
+      props.onSaved(next);
+      setApiKey("");
+      setFlash({ tone: "success", text: props.texts.settingsSaveSuccessFlash });
+    } catch (err) {
+      setFlash({
+        tone: "error",
+        text:
+          err instanceof Error && err.message.length > 0
+            ? err.message
+            : props.texts.settingsSaveGenericError,
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // Clears the DB column (sends `letta_api_key: ""`), which makes the
+  // server fall back to env.LETTA_API_KEY at runtime per the
+  // resolveApiKey precedence in letta/client.ts. Same code path as the
+  // base/ADE URL nulling — only it targets the API-key column.
+  async function handleClearApiKeyOverride(): Promise<void> {
+    setSaving(true);
+    setFlash(null);
+    try {
+      const next = await client.patchAdminSettings({ lettaApiKey: "" });
+      props.onSaved(next);
+      setFlash({ tone: "success", text: props.texts.settingsSaveSuccessFlash });
+    } catch (err) {
+      setFlash({
+        tone: "error",
+        text:
+          err instanceof Error && err.message.length > 0
+            ? err.message
+            : props.texts.settingsSaveGenericError,
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <section
+      className="data-club-ai-hub-admin__settings-section"
+      data-testid="admin-settings-letta-section"
+    >
+      <h2 className="data-club-ai-hub-admin__settings-section-heading">
+        {props.texts.settingsLettaSectionHeading}
+      </h2>
+      <form onSubmit={(event) => void handleSave(event)} noValidate>
+        <label className="data-club-ai-hub-admin__form-field">
+          <span className="data-club-ai-hub-admin__form-label">
+            {props.texts.settingsLettaBaseUrlLabel}
+          </span>
+          <input
+            type="url"
+            className="data-club-ai-hub-admin__form-input"
+            data-testid="admin-settings-letta-base-url"
+            value={baseUrl}
+            onChange={(event) => setBaseUrl(event.target.value)}
+            disabled={saving}
+          />
+        </label>
+        <label className="data-club-ai-hub-admin__form-field">
+          <span className="data-club-ai-hub-admin__form-label">
+            {props.texts.settingsLettaAdeUrlLabel}
+          </span>
+          <input
+            type="url"
+            className="data-club-ai-hub-admin__form-input"
+            data-testid="admin-settings-letta-ade-url"
+            value={adeUrl}
+            onChange={(event) => setAdeUrl(event.target.value)}
+            disabled={saving}
+          />
+          <span className="data-club-ai-hub-admin__form-helper">
+            {props.texts.settingsLettaAdeUrlHelper}
+          </span>
+        </label>
+        <label className="data-club-ai-hub-admin__form-field">
+          <span className="data-club-ai-hub-admin__form-label">
+            {props.texts.settingsLettaApiKeyLabel}
+          </span>
+          <input
+            type="password"
+            className="data-club-ai-hub-admin__form-input"
+            data-testid="admin-settings-letta-api-key"
+            value={apiKey}
+            placeholder={
+              props.settings.letta_api_key_source === "db"
+                ? props.texts.settingsLettaApiKeyPlaceholder
+                : ""
+            }
+            onChange={(event) => setApiKey(event.target.value)}
+            disabled={saving}
+            autoComplete="new-password"
+          />
+          <span
+            className="data-club-ai-hub-admin__form-helper"
+            data-testid="admin-settings-letta-api-key-helper"
+            data-source={props.settings.letta_api_key_source}
+          >
+            {props.settings.letta_api_key_source === "db"
+              ? props.texts.settingsLettaApiKeyDbHelper
+              : props.settings.letta_api_key_source === "env"
+                ? props.texts.settingsLettaApiKeyEnvHelper
+                : props.texts.settingsLettaApiKeyNoneHelper}
+          </span>
+          {props.settings.letta_api_key_source === "db" ? (
+            <button
+              type="button"
+              className="data-club-ai-hub-admin__button"
+              data-testid="admin-settings-letta-api-key-clear"
+              onClick={() => void handleClearApiKeyOverride()}
+              disabled={saving}
+            >
+              {props.texts.settingsLettaApiKeyClearOverrideButton}
+            </button>
+          ) : null}
+        </label>
+        {flash !== null ? (
+          <div
+            className={
+              flash.tone === "success"
+                ? "data-club-ai-hub-admin__flash data-club-ai-hub-admin__flash--success"
+                : "data-club-ai-hub-admin__flash data-club-ai-hub-admin__flash--error"
+            }
+            data-testid="admin-settings-letta-flash"
+            role={flash.tone === "error" ? "alert" : "status"}
+          >
+            {flash.text}
+          </div>
+        ) : null}
+        <button
+          type="submit"
+          className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+          data-testid="admin-settings-letta-save"
+          disabled={saving}
+        >
+          {saving
+            ? props.texts.settingsSaveSavingButton
+            : props.texts.settingsSaveLettaButton}
+        </button>
+      </form>
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/*  Section: Theme                                                             */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+interface ThemeSectionProps extends SectionProps {
+  onSaved: (next: AdminSettingsView) => void;
+}
+
+function ThemeSection(props: ThemeSectionProps): ReactNode {
+  const { client } = useAIHub();
+  const [themeDefault, setThemeDefault] = useState<"light" | "dark">(
+    props.settings.theme.default,
+  );
+  const [switcherEnabled, setSwitcherEnabled] = useState(
+    props.settings.theme.switcher_enabled,
+  );
+  const [saving, setSaving] = useState(false);
+  const [flash, setFlash] = useState<{ tone: "success" | "error"; text: string } | null>(
+    null,
+  );
+
+  async function handleSave(event: React.FormEvent): Promise<void> {
+    event.preventDefault();
+    setSaving(true);
+    setFlash(null);
+    try {
+      const next = await client.patchAdminSettings({
+        theme: { default: themeDefault, switcherEnabled },
+      });
+      props.onSaved(next);
+      setFlash({ tone: "success", text: props.texts.settingsSaveSuccessFlash });
+    } catch (err) {
+      setFlash({
+        tone: "error",
+        text:
+          err instanceof Error && err.message.length > 0
+            ? err.message
+            : props.texts.settingsSaveGenericError,
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <section
+      className="data-club-ai-hub-admin__settings-section"
+      data-testid="admin-settings-theme-section"
+    >
+      <h2 className="data-club-ai-hub-admin__settings-section-heading">
+        {props.texts.settingsThemeSectionHeading}
+      </h2>
+      <form onSubmit={(event) => void handleSave(event)} noValidate>
+        <fieldset className="data-club-ai-hub-admin__radio-group">
+          <legend className="data-club-ai-hub-admin__form-label">
+            {props.texts.settingsThemeDefaultLabel}
+          </legend>
+          <label className="data-club-ai-hub-admin__radio">
+            <input
+              type="radio"
+              name="theme-default"
+              value="light"
+              data-testid="admin-settings-theme-default-light"
+              checked={themeDefault === "light"}
+              onChange={() => setThemeDefault("light")}
+              disabled={saving}
+            />
+            <span>{props.texts.settingsThemeDefaultLight}</span>
+          </label>
+          <label className="data-club-ai-hub-admin__radio">
+            <input
+              type="radio"
+              name="theme-default"
+              value="dark"
+              data-testid="admin-settings-theme-default-dark"
+              checked={themeDefault === "dark"}
+              onChange={() => setThemeDefault("dark")}
+              disabled={saving}
+            />
+            <span>{props.texts.settingsThemeDefaultDark}</span>
+          </label>
+        </fieldset>
+        <label className="data-club-ai-hub-admin__checkbox">
+          <input
+            type="checkbox"
+            data-testid="admin-settings-theme-switcher-enabled"
+            checked={switcherEnabled}
+            onChange={(event) => setSwitcherEnabled(event.target.checked)}
+            disabled={saving}
+          />
+          <span>{props.texts.settingsThemeSwitcherEnabledLabel}</span>
+        </label>
+        <p className="data-club-ai-hub-admin__form-helper">
+          {props.texts.settingsThemeSwitcherEnabledHelper}
+        </p>
+        {flash !== null ? (
+          <div
+            className={
+              flash.tone === "success"
+                ? "data-club-ai-hub-admin__flash data-club-ai-hub-admin__flash--success"
+                : "data-club-ai-hub-admin__flash data-club-ai-hub-admin__flash--error"
+            }
+            data-testid="admin-settings-theme-flash"
+            role={flash.tone === "error" ? "alert" : "status"}
+          >
+            {flash.text}
+          </div>
+        ) : null}
+        <button
+          type="submit"
+          className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+          data-testid="admin-settings-theme-save"
+          disabled={saving}
+        >
+          {saving
+            ? props.texts.settingsSaveSavingButton
+            : props.texts.settingsSaveThemeButton}
+        </button>
+      </form>
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/*  Section: Feature toggles                                                   */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+interface FeatureTogglesSectionProps extends SectionProps {
+  onSaved: (next: AIHubFeatureToggles) => void;
+}
+
+function FeatureTogglesSection(props: FeatureTogglesSectionProps): ReactNode {
+  const { client } = useAIHub();
+  // The server's blob may omit keys (meaning "fall through to defaults"). The
+  // UI shows the effective value for the user — fill in defaults for any
+  // missing key. Save only sends the keys the user actually has toggled (in
+  // our case all of them, since the blob always carries all 13 once saved).
+  const [values, setValues] = useState<Record<string, boolean>>(() => {
+    const initial: Record<string, boolean> = {};
+    for (const key of ALL_TOGGLE_KEYS) {
+      const fromServer = props.settings.feature_toggles[key];
+      initial[key] = typeof fromServer === "boolean" ? fromServer : defaultToggleValue();
+    }
+    return initial;
+  });
+  const [saving, setSaving] = useState(false);
+  const [flash, setFlash] = useState<{ tone: "success" | "error"; text: string } | null>(
+    null,
+  );
+
+  function toggle(key: string, value: boolean): void {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }
+
+  async function handleSave(event: React.FormEvent): Promise<void> {
+    event.preventDefault();
+    setSaving(true);
+    setFlash(null);
+    try {
+      const body: AIHubFeatureToggles = {};
+      for (const key of ALL_TOGGLE_KEYS) {
+        (body as Record<string, boolean>)[key] = values[key]!;
+      }
+      const next = await client.patchAdminFeatureToggles(body);
+      props.onSaved(next);
+      setFlash({ tone: "success", text: props.texts.settingsSaveSuccessFlash });
+    } catch (err) {
+      setFlash({
+        tone: "error",
+        text:
+          err instanceof Error && err.message.length > 0
+            ? err.message
+            : props.texts.settingsSaveGenericError,
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <section
+      className="data-club-ai-hub-admin__settings-section"
+      data-testid="admin-settings-toggles-section"
+    >
+      <h2 className="data-club-ai-hub-admin__settings-section-heading">
+        {props.texts.settingsTogglesSectionHeading}
+      </h2>
+      <form onSubmit={(event) => void handleSave(event)} noValidate>
+        {TOGGLE_GROUPS.map((group) => (
+          <fieldset
+            key={String(group.groupLabelKey)}
+            className="data-club-ai-hub-admin__toggle-group"
+          >
+            <legend className="data-club-ai-hub-admin__form-label">
+              {props.texts[group.groupLabelKey] as string}
+            </legend>
+            {group.keys.map((key) => (
+              <label key={key} className="data-club-ai-hub-admin__checkbox">
+                <input
+                  type="checkbox"
+                  data-testid={`admin-settings-toggle-${key}`}
+                  checked={Boolean(values[key])}
+                  onChange={(event) => toggle(key, event.target.checked)}
+                  disabled={saving}
+                />
+                <code className="data-club-ai-hub-admin__mono">{key}</code>
+              </label>
+            ))}
+          </fieldset>
+        ))}
+        {flash !== null ? (
+          <div
+            className={
+              flash.tone === "success"
+                ? "data-club-ai-hub-admin__flash data-club-ai-hub-admin__flash--success"
+                : "data-club-ai-hub-admin__flash data-club-ai-hub-admin__flash--error"
+            }
+            data-testid="admin-settings-toggles-flash"
+            role={flash.tone === "error" ? "alert" : "status"}
+          >
+            {flash.text}
+          </div>
+        ) : null}
+        <button
+          type="submit"
+          className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+          data-testid="admin-settings-toggles-save"
+          disabled={saving}
+        >
+          {saving
+            ? props.texts.settingsSaveSavingButton
+            : props.texts.settingsTogglesSaveButton}
+        </button>
+      </form>
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/*  Section: Signing key                                                       */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+interface SigningKeySectionProps extends SectionProps {
+  onRotated: (rotatedAt: string) => void;
+}
+
+function SigningKeySection(props: SigningKeySectionProps): ReactNode {
+  const { client } = useAIHub();
+  const auth = useAIHubAuth();
+  const [showModal, setShowModal] = useState(false);
+  const lastRotated = formatRotationStamp(props.settings.signing_key_rotated_at);
+
+  async function handleRotateConfirmed(): Promise<void> {
+    await client.rotateAdminSigningKey();
+    // Rotating invalidates every JWT, including this caller's. The provider
+    // will see the 401 on the next request and route back to login; we
+    // accelerate that by calling logout right here so the UI doesn't sit on
+    // a stale token. Update the local card first for the milliseconds the
+    // modal is still on screen.
+    props.onRotated(new Date().toISOString());
+    setShowModal(false);
+    auth.logout();
+  }
+
+  return (
+    <section
+      className="data-club-ai-hub-admin__settings-section"
+      data-testid="admin-settings-signing-key-section"
+    >
+      <h2 className="data-club-ai-hub-admin__settings-section-heading">
+        {props.texts.settingsSigningKeySectionHeading}
+      </h2>
+      <p className="data-club-ai-hub-admin__form-helper">
+        {lastRotated === null
+          ? props.texts.settingsSigningKeyNeverRotated
+          : props.texts.settingsSigningKeyLastRotated.replace("{date}", lastRotated)}
+      </p>
+      <p
+        className="data-club-ai-hub-admin__warning"
+        data-testid="admin-settings-signing-key-warning"
+      >
+        {props.texts.settingsSigningKeyWarning}
+      </p>
+      <button
+        type="button"
+        className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--danger"
+        data-testid="admin-settings-rotate-signing-key"
+        onClick={() => setShowModal(true)}
+      >
+        {props.texts.settingsRotateSigningKeyButton}
+      </button>
+      {showModal ? (
+        <RotateConfirmModal
+          title={props.texts.settingsRotateSigningKeyModalTitle}
+          body={props.texts.settingsRotateSigningKeyModalBody}
+          texts={props.texts}
+          testIdPrefix="admin-settings-signing-key-modal"
+          onConfirm={handleRotateConfirmed}
+          onCancel={() => setShowModal(false)}
+        />
+      ) : null}
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/*  Section: Metrics scrape token                                              */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+interface MetricsTokenSectionProps extends SectionProps {
+  onRotated: (rotatedAt: string) => void;
+}
+
+function MetricsTokenSection(props: MetricsTokenSectionProps): ReactNode {
+  const { client } = useAIHub();
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [revealedToken, setRevealedToken] = useState<string | null>(null);
+  const lastRotated = formatRotationStamp(
+    props.settings.metrics_scrape_token_rotated_at,
+  );
+
+  async function handleRotateConfirmed(): Promise<void> {
+    const { token } = await client.rotateAdminMetricsToken();
+    props.onRotated(new Date().toISOString());
+    setShowConfirm(false);
+    setRevealedToken(token);
+  }
+
+  return (
+    <section
+      className="data-club-ai-hub-admin__settings-section"
+      data-testid="admin-settings-metrics-token-section"
+    >
+      <h2 className="data-club-ai-hub-admin__settings-section-heading">
+        {props.texts.settingsMetricsSectionHeading}
+      </h2>
+      <p className="data-club-ai-hub-admin__form-helper">
+        {lastRotated === null
+          ? props.texts.settingsMetricsNeverRotated
+          : props.texts.settingsMetricsLastRotated.replace("{date}", lastRotated)}
+      </p>
+      <p
+        className="data-club-ai-hub-admin__warning"
+        data-testid="admin-settings-metrics-warning"
+      >
+        {props.texts.settingsMetricsWarning}
+      </p>
+      <button
+        type="button"
+        className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--danger"
+        data-testid="admin-settings-rotate-metrics-token"
+        onClick={() => setShowConfirm(true)}
+      >
+        {props.texts.settingsRotateMetricsButton}
+      </button>
+      {showConfirm ? (
+        <RotateConfirmModal
+          title={props.texts.settingsRotateMetricsModalTitle}
+          body={props.texts.settingsRotateMetricsModalBody}
+          texts={props.texts}
+          testIdPrefix="admin-settings-metrics-token-modal"
+          onConfirm={handleRotateConfirmed}
+          onCancel={() => setShowConfirm(false)}
+        />
+      ) : null}
+      {revealedToken !== null ? (
+        <MetricsTokenRevealModal
+          token={revealedToken}
+          texts={props.texts}
+          onClose={() => setRevealedToken(null)}
+        />
+      ) : null}
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/*  Modal: rotate-confirm with ROTATE-typing friction                          */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+interface RotateConfirmModalProps {
+  title: string;
+  body: string;
+  texts: AIHubAdminTexts;
+  testIdPrefix: string;
+  onConfirm: () => Promise<void>;
+  onCancel: () => void;
+}
+
+function RotateConfirmModal(props: RotateConfirmModalProps): ReactNode {
+  const [typed, setTyped] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const canConfirm = typed === props.texts.settingsRotateConfirmKeyword;
+
+  async function handleConfirm(): Promise<void> {
+    if (!canConfirm) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await props.onConfirm();
+    } catch (err) {
+      setError(
+        err instanceof Error && err.message.length > 0
+          ? err.message
+          : props.texts.settingsRotateGenericError,
+      );
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div
+      className="data-club-ai-hub-admin__modal-backdrop"
+      role="presentation"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget && !submitting) props.onCancel();
+      }}
+    >
+      <div
+        className="data-club-ai-hub-admin__modal"
+        role="dialog"
+        aria-modal="true"
+        data-testid={props.testIdPrefix}
+      >
+        <h2 className="data-club-ai-hub-admin__modal-title">{props.title}</h2>
+        <p
+          className="data-club-ai-hub-admin__modal-body"
+          data-testid={`${props.testIdPrefix}-body`}
+        >
+          {props.body}
+        </p>
+        <label className="data-club-ai-hub-admin__form-field">
+          <span className="data-club-ai-hub-admin__form-label">
+            {props.texts.settingsRotateConfirmInputLabel}
+          </span>
+          <input
+            type="text"
+            className="data-club-ai-hub-admin__form-input"
+            data-testid={`${props.testIdPrefix}-input`}
+            value={typed}
+            placeholder={props.texts.settingsRotateConfirmPlaceholder}
+            onChange={(event) => setTyped(event.target.value)}
+            disabled={submitting}
+            autoFocus
+          />
+        </label>
+        {error !== null ? (
+          <div
+            className="data-club-ai-hub-admin__error"
+            role="alert"
+            data-testid={`${props.testIdPrefix}-error`}
+          >
+            {error}
+          </div>
+        ) : null}
+        <div className="data-club-ai-hub-admin__modal-actions">
+          <button
+            type="button"
+            className="data-club-ai-hub-admin__button"
+            data-testid={`${props.testIdPrefix}-cancel`}
+            onClick={props.onCancel}
+            disabled={submitting}
+          >
+            {props.texts.agentModalCancelButton}
+          </button>
+          <button
+            type="button"
+            className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--danger"
+            data-testid={`${props.testIdPrefix}-confirm`}
+            onClick={() => void handleConfirm()}
+            disabled={!canConfirm || submitting}
+          >
+            {submitting
+              ? props.texts.settingsRotateConfirmingButton
+              : props.texts.settingsRotateConfirmButton}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/*  Modal: metrics-token reveal (one-time)                                     */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+interface MetricsTokenRevealModalProps {
+  token: string;
+  texts: AIHubAdminTexts;
+  onClose: () => void;
+}
+
+function MetricsTokenRevealModal(props: MetricsTokenRevealModalProps): ReactNode {
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy(): Promise<void> {
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(props.token);
+      }
+    } catch {
+      /* fall through — flash still fires to signal the click */
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  }
+
+  return (
+    <div
+      className="data-club-ai-hub-admin__modal-backdrop"
+      role="presentation"
+    >
+      <div
+        className="data-club-ai-hub-admin__modal"
+        role="dialog"
+        aria-modal="true"
+        data-testid="admin-settings-metrics-reveal-modal"
+      >
+        <h2 className="data-club-ai-hub-admin__modal-title">
+          {props.texts.settingsMetricsRevealTitle}
+        </h2>
+        <p
+          className="data-club-ai-hub-admin__warning"
+          data-testid="admin-settings-metrics-reveal-warning"
+        >
+          {props.texts.settingsMetricsRevealWarning}
+        </p>
+        <label className="data-club-ai-hub-admin__form-field">
+          <span className="data-club-ai-hub-admin__form-label">
+            {props.texts.settingsMetricsRevealTokenLabel}
+          </span>
+          <div className="data-club-ai-hub-admin__reveal-row">
+            <input
+              type="text"
+              className="data-club-ai-hub-admin__form-input data-club-ai-hub-admin__mono"
+              data-testid="admin-settings-metrics-reveal-token"
+              readOnly
+              value={props.token}
+            />
+            <button
+              type="button"
+              className="data-club-ai-hub-admin__button"
+              data-testid="admin-settings-metrics-reveal-copy"
+              aria-label={props.texts.passwordRevealCopyAriaLabel}
+              onClick={() => void handleCopy()}
+            >
+              📋
+            </button>
+          </div>
+          {copied ? (
+            <span
+              className="data-club-ai-hub-admin__copied-flash"
+              data-testid="admin-settings-metrics-reveal-copied"
+              role="status"
+            >
+              {props.texts.passwordRevealCopiedFlash}
+            </span>
+          ) : null}
+        </label>
+        <div className="data-club-ai-hub-admin__modal-actions">
+          <button
+            type="button"
+            className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+            data-testid="admin-settings-metrics-reveal-done"
+            onClick={props.onClose}
+          >
+            {props.texts.passwordRevealDoneButton}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+