@marinoscar/platform-web 0.1.0-next.3 → 0.1.0-next.4

package/dist/ai/headless/use-user-ai-keys.js

@@ -0,0 +1,76 @@
+/**
+ * The caller's own AI provider keys (`/api/ai/keys`) — issue #430, epic #419.
+ *
+ * One `UserAiKey` view per ENABLED provider, configured or not. The API never
+ * returns a key (see `services/ai.ts`), so nothing this hook holds can leak
+ * one: `setKey` sends the typed key once and keeps only the masked view the
+ * server answers with.
+ *
+ * `error` is the LIST's error only. `setKey`, `deleteKey` and `testKey` throw
+ * to their caller instead of writing it, because each is triggered from one
+ * provider's card and its failure belongs inline on that card — a
+ * `400 AI_KEY_INVALID` for OpenAI must not become a page-level banner that
+ * reads as though every key were broken.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { isPlatformApiError } from '../../core/index.js';
+import { deleteUserAiKey, listUserAiKeys, setUserAiKey, testUserAiKey } from './client.js';
+import { useIsMounted } from '../internal/use-is-mounted.js';
+import { useAiApi } from './use-ai-api.js';
+/**
+ * Use user AI keys.
+ *
+ * @stability experimental
+ */
+export function useUserAiKeys(options = {}) {
+    const api = useAiApi(options.api);
+    const [keys, setKeys] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const isMounted = useIsMounted();
+    const refresh = useCallback(async () => {
+        try {
+            setError(null);
+            const data = await listUserAiKeys(api);
+            if (isMounted())
+                setKeys(data);
+        }
+        catch (err) {
+            if (isMounted()) {
+                setError(isPlatformApiError(err) ? err.message : 'Failed to load your AI keys');
+            }
+        }
+        finally {
+            if (isMounted())
+                setIsLoading(false);
+        }
+    }, [isMounted]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const upsert = useCallback((view) => {
+        if (!isMounted())
+            return;
+        setKeys((current) => current.some((entry) => entry.provider === view.provider)
+            ? current.map((entry) => (entry.provider === view.provider ? view : entry))
+            : [...current, view]);
+    }, [isMounted]);
+    const setKey = useCallback(async (provider, apiKey) => {
+        const view = await setUserAiKey(api, provider, apiKey);
+        upsert(view);
+        return view;
+    }, [upsert]);
+    const deleteKey = useCallback(async (provider) => {
+        await deleteUserAiKey(api, provider);
+        await refresh();
+    }, [refresh]);
+    const testKey = useCallback(async (provider, apiKey) => {
+        const result = await testUserAiKey(api, provider, apiKey);
+        // Only a stored-key probe changes anything the list shows.
+        if (result.usedStoredKey)
+            await refresh();
+        return result;
+    }, [refresh]);
+    return { keys, isLoading, error, setKey, deleteKey, testKey, refresh };
+}
+//# sourceMappingURL=use-user-ai-keys.js.map

package/dist/ai/headless/use-user-ai-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-user-ai-keys.js","sourceRoot":"","sources":["../../../src/ai/headless/use-user-ai-keys.ts"],"names":[],"mappings":"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"}

package/dist/ai/internal/use-is-mounted.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns a stable getter for "is this component still mounted?".
+ *
+ * Used to guard `setState` in the tail of an async operation. A ref rather
+ * than state, and a getter rather than the ref itself, so callers can hold it
+ * in a `useCallback` dependency list without invalidating on every render.
+ */
+export declare function useIsMounted(): () => boolean;
+//# sourceMappingURL=use-is-mounted.d.ts.map

package/dist/ai/internal/use-is-mounted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-mounted.d.ts","sourceRoot":"","sources":["../../../src/ai/internal/use-is-mounted.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,YAAY,IAAI,MAAM,OAAO,CAW5C"}

package/dist/ai/internal/use-is-mounted.js

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * Returns a stable getter for "is this component still mounted?".
+ *
+ * Used to guard `setState` in the tail of an async operation. A ref rather
+ * than state, and a getter rather than the ref itself, so callers can hold it
+ * in a `useCallback` dependency list without invalidating on every render.
+ */
+export function useIsMounted() {
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    return useCallback(() => mounted.current, []);
+}
+//# sourceMappingURL=use-is-mounted.js.map

package/dist/ai/internal/use-is-mounted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-mounted.js","sourceRoot":"","sources":["../../../src/ai/internal/use-is-mounted.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD;;;;;;GAMG;AACH,MAAM,UAAU,YAAY;IAC1B,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAChD,CAAC"}

package/dist/ai/ui/AiConfigPage.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Admin → Settings → AI (`/admin/settings/ai`) — issue #429, epic #419.
+ *
+ * A STANDALONE PAGE, exactly like `StorageConfigPage` and `PushConfigPage`
+ * and for the same reason: it hits its own controller (`/api/admin/ai/*`)
+ * with its own document and its own permission pair (`ai_config:read` /
+ * `ai_config:write`). One card in `ADMIN_SECTIONS`, one route in `App.tsx`,
+ * no tab — `CLAUDE.md`'s "MANDATORY: Settings UI Pattern" rules 1–3.
+ *
+ * =============================================================================
+ * ONE FORM FOR POLICY, IMMEDIATE BUTTONS FOR KEYS
+ * =============================================================================
+ *
+ * The master switch, the key policy, prompt logging, the defaults and each
+ * provider's enable switch / base URL are POLICY: they travel together in one
+ * `PUT /admin/ai/config` guarded by `If-Match: version`, so a colleague's
+ * concurrent edit is detected rather than silently overwritten.
+ *
+ * A provider's admin KEY is not policy and is not in that form: it is
+ * verified by the provider before it is stored, it can be tested on its own,
+ * and removing it is destructive. Each of those is an immediate action on the
+ * provider's card (`AiProviderCard`).
+ *
+ * The hosted-tool switches (#442) are policy too: five switches and the MCP
+ * host allowlist travel in the same PUT. Every tool is off by default — each
+ * reaches outside the deployment and bills per use.
+ *
+ * The Limits section (#450) is policy as well: the per-user and org-key rate
+ * limits travel in the same PUT as `limits`, blank meaning unlimited. Because
+ * the API replaces `limits` WHOLESALE, the per-model entries (edited from the
+ * AI Models page's dialog, not here) are re-sent unchanged from the loaded
+ * configuration — omitting them would lift every per-model limit.
+ *
+ * =============================================================================
+ * SNACKBAR vs. ALERT
+ * =============================================================================
+ *
+ * A save is the ordinary outcome — `Snackbar`. Anything the admin must READ
+ * (a failed check, the provider's verbatim error, a refused save) is a
+ * persistent, dismissible `Alert`, as on the storage page.
+ *
+ * =============================================================================
+ * READ-ONLY IS STATED, NOT MIMED
+ * =============================================================================
+ *
+ * Without `ai_config:write` every control stays visible and DISABLED, and an
+ * info alert says why — an admin diagnosing "why can nobody use AI" needs to
+ * see the switch that is off.
+ */
+import type { PageSlot, PageSlotsBase } from '../../core/index.js';
+import type { AiAdminProvider } from '../headless/types.js';
+/**
+ * What {@link AiConfigPageSlots}'s `ProviderCardExtra` receives for each provider
+ * the page lists: the provider as the API describes it (its id, display name,
+ * key status and capabilities) and the page's state it already holds. Data
+ * only: a slot that needs the API uses `usePlatformApi()`.
+ *
+ * @stability experimental
+ */
+export interface AiProviderCardExtraProps {
+    /** The provider, as `GET /api/admin/ai/config` describes it. */
+    provider: AiAdminProvider;
+    /** The viewer holds `ai_config:write`. */
+    canWrite: boolean;
+    /** AI is switched on in the loaded configuration. */
+    aiEnabled: boolean;
+}
+/**
+ * The slots of {@link AiConfigPage}: the page-slot contract, and
+ * `ProviderCardExtra`, drawn under each provider's card (a quota note, a link
+ * to the provider's console, an app-specific setting stored elsewhere).
+ *
+ * @example
+ * ```tsx
+ * <AiConfigPage slots={{ ProviderCardExtra: ({ provider }) => <ConsoleLink providerId={provider.id} /> }} />
+ * ```
+ *
+ * @extensionPoint slot
+ * @stability experimental
+ */
+export interface AiConfigPageSlots extends PageSlotsBase {
+    /** Extra content under a provider's card, called once per listed provider. */
+    ProviderCardExtra?: PageSlot<AiProviderCardExtraProps>;
+}
+/**
+ * The props of {@link AiConfigPage}.
+ *
+ * @stability experimental
+ */
+export interface AiConfigPageProps {
+    /** Optional extension slots; omitted, the page renders exactly as it always did. */
+    slots?: AiConfigPageSlots;
+}
+/**
+ * Admin → Settings → AI (`/admin/settings/ai`): switch AI on, the key policy,
+ * the providers and their organization keys, hosted tools and limits. Needs
+ * `ai_config:read` (controls enabled with `ai_config:write`).
+ *
+ * @stability experimental
+ */
+export default function AiConfigPage(props?: AiConfigPageProps): import("react").JSX.Element;
+//# sourceMappingURL=AiConfigPage.d.ts.map

package/dist/ai/ui/AiConfigPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiConfigPage.d.ts","sourceRoot":"","sources":["../../../src/ai/ui/AiConfigPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AA2BH,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAiBnE,OAAO,KAAK,EAGV,eAAe,EAIhB,MAAM,sBAAsB,CAAC;AAgD9B;;;;;;;GAOG;AACH,MAAM,WAAW,wBAAwB;IACvC,gEAAgE;IAChE,QAAQ,EAAE,eAAe,CAAC;IAC1B,0CAA0C;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,QAAQ,CAAC,wBAAwB,CAAC,CAAC;CACxD;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,oFAAoF;IACpF,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AA4ND;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,GAAE,iBAAsB,+BAwgBjE"}

package/dist/ai/ui/AiConfigPage.js

@@ -0,0 +1,379 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Admin → Settings → AI (`/admin/settings/ai`) — issue #429, epic #419.
+ *
+ * A STANDALONE PAGE, exactly like `StorageConfigPage` and `PushConfigPage`
+ * and for the same reason: it hits its own controller (`/api/admin/ai/*`)
+ * with its own document and its own permission pair (`ai_config:read` /
+ * `ai_config:write`). One card in `ADMIN_SECTIONS`, one route in `App.tsx`,
+ * no tab — `CLAUDE.md`'s "MANDATORY: Settings UI Pattern" rules 1–3.
+ *
+ * =============================================================================
+ * ONE FORM FOR POLICY, IMMEDIATE BUTTONS FOR KEYS
+ * =============================================================================
+ *
+ * The master switch, the key policy, prompt logging, the defaults and each
+ * provider's enable switch / base URL are POLICY: they travel together in one
+ * `PUT /admin/ai/config` guarded by `If-Match: version`, so a colleague's
+ * concurrent edit is detected rather than silently overwritten.
+ *
+ * A provider's admin KEY is not policy and is not in that form: it is
+ * verified by the provider before it is stored, it can be tested on its own,
+ * and removing it is destructive. Each of those is an immediate action on the
+ * provider's card (`AiProviderCard`).
+ *
+ * The hosted-tool switches (#442) are policy too: five switches and the MCP
+ * host allowlist travel in the same PUT. Every tool is off by default — each
+ * reaches outside the deployment and bills per use.
+ *
+ * The Limits section (#450) is policy as well: the per-user and org-key rate
+ * limits travel in the same PUT as `limits`, blank meaning unlimited. Because
+ * the API replaces `limits` WHOLESALE, the per-model entries (edited from the
+ * AI Models page's dialog, not here) are re-sent unchanged from the loaded
+ * configuration — omitting them would lift every per-model limit.
+ *
+ * =============================================================================
+ * SNACKBAR vs. ALERT
+ * =============================================================================
+ *
+ * A save is the ordinary outcome — `Snackbar`. Anything the admin must READ
+ * (a failed check, the provider's verbatim error, a refused save) is a
+ * persistent, dismissible `Alert`, as on the storage page.
+ *
+ * =============================================================================
+ * READ-ONLY IS STATED, NOT MIMED
+ * =============================================================================
+ *
+ * Without `ai_config:write` every control stays visible and DISABLED, and an
+ * info alert says why — an admin diagnosing "why can nobody use AI" needs to
+ * see the switch that is off.
+ */
+import { Fragment, useContext, useEffect, useState } from 'react';
+import { Alert, AlertTitle, Box, Button, Container, Divider, FormControl, FormControlLabel, FormHelperText, FormLabel, Grid, Paper, Radio, RadioGroup, Snackbar, Stack, Switch, TextField, Typography, } from '@mui/material';
+import { Navigate } from 'react-router-dom';
+import { PageSlotsFrame, usePlatformViewer } from '../../core/index.js';
+import { useAiAdminConfig } from '../headless/use-ai-admin-config.js';
+import { AiConfigContext } from '../headless/use-ai-config.js';
+import { AiSpinner } from './internal/AiSpinner.js';
+import { AiSlotlessProviderCard } from './admin/AiProviderCard.js';
+import { AiGenericProviderCard } from './admin/AiGenericProviderCard.js';
+import { getAiProviderCard } from './admin/aiProviderCardRegistry.js';
+import { registerBuiltinAiProviderCards } from './admin/builtinAiProviderCards.js';
+import { EMPTY_PROVIDER_FORM_VALUE, hasProviderFormErrors, toProviderFormValue, toProviderInput, validateProviderForm, } from './admin/aiProviderForm.js';
+import { AI_HOSTED_TOOL_TYPES, AI_LIMIT_MAX, aiProviderSettingsFields } from '../headless/types.js';
+// The five built-in providers draw their bespoke cards through the same
+// registry an app uses (`registerAiProviderCard`); any other provider is drawn
+// from its descriptor by `AiGenericProviderCard` (PP-14.6, #924).
+registerBuiltinAiProviderCards();
+/**
+ * The deployment-wide limit fields (#450; the per-organization pair #739);
+ * per-model limits live on the AI Models page.
+ */
+const LIMIT_FIELDS = [
+    'perUserRequestsPerMinute',
+    'perUserRequestsPerDay',
+    'orgKeyRequestsPerDayPerUser',
+    'orgKeyTokensPerDayPerUser',
+    'perOrgRequestsPerDay',
+    'perOrgOutputTokensPerDay',
+];
+const LIMIT_COPY = {
+    perUserRequestsPerMinute: {
+        label: 'Requests per minute, per user',
+        help: "Every AI call a user makes, whoever's key pays.",
+    },
+    perUserRequestsPerDay: {
+        label: 'Requests per day, per user',
+        help: "Counted per UTC day, whoever's key pays.",
+    },
+    orgKeyRequestsPerDayPerUser: {
+        label: 'Organization key: requests per day, per user',
+        help: 'Only calls the organization key pays for.',
+    },
+    orgKeyTokensPerDayPerUser: {
+        label: 'Organization key: tokens per day, per user',
+        help: 'Input plus output tokens the organization key pays for.',
+    },
+    perOrgRequestsPerDay: {
+        label: 'Requests per day, per organization',
+        help: "Every AI call made in one organization, whoever's key pays.",
+    },
+    perOrgOutputTokensPerDay: {
+        label: 'Output tokens per day, per organization',
+        help: "Output tokens of every call made in one organization, whoever's key pays.",
+    },
+};
+/** The page title (mirrors the `AI` card in `config/adminSections.tsx`). */
+const AI_CONFIG_TITLE = 'AI';
+/** The page subtitle (mirrors the same card). */
+const AI_CONFIG_DESCRIPTION = 'Switch AI on for this deployment, choose whose keys pay for calls, and configure each provider.';
+/** Label and helper per hosted tool type (#442), in the order the API lists them. */
+const HOSTED_TOOL_COPY = {
+    web_search: { label: 'Web search', help: 'Live web search, with the sources cited in the answer.' },
+    file_search: { label: 'File search', help: "Search documents in the provider's vector stores." },
+    code_interpreter: { label: 'Code interpreter', help: 'Run code in a sandbox the provider manages.' },
+    image_generation: { label: 'Image generation', help: 'Generate images as part of an answer.' },
+    mcp: { label: 'Remote MCP servers', help: 'Let the model call tools on MCP servers users name.' },
+};
+/** `mcp.example.com` or `*.example.com` — mirrors the API's own pattern. */
+const MCP_HOST_PATTERN = /^(\*\.)?[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?(\.[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)*$/i;
+/** The allowlist textarea as a list: trimmed, lower-cased, blank lines dropped. */
+function parseHosts(text) {
+    return text
+        .split(/[\n,]/)
+        .map((host) => host.trim().toLowerCase())
+        .filter(Boolean);
+}
+/** A stored limit as its field's text — blank when unset. */
+function limitText(value) {
+    return value === undefined ? '' : String(value);
+}
+/** A limit field's text as a number — `undefined` (omitted: unlimited) when blank. */
+function limitValue(text) {
+    const trimmed = text.trim();
+    return trimmed ? Number(trimmed) : undefined;
+}
+/** Drop the `undefined` members, and the whole object when nothing is left. */
+function compact(value) {
+    const entries = Object.entries(value).filter(([, v]) => v !== undefined);
+    return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+}
+function toFormState(config) {
+    const providers = {};
+    for (const provider of config.providers) {
+        providers[provider.id] = toProviderFormValue(provider);
+    }
+    return {
+        enabled: config.enabled,
+        keyPolicy: config.keyPolicy,
+        logPromptContent: config.logPromptContent,
+        // Absent from an API older than #739 — read as on (the behaviour before it).
+        deploymentKeyServesOrgs: config.deploymentKeyServesOrgs ?? true,
+        maxOutputTokensCap: config.defaults.maxOutputTokensCap === null ? '' : String(config.defaults.maxOutputTokensCap),
+        allowBackgroundRuns: config.defaults.allowBackgroundRuns,
+        // Absent from an API older than #449 — read as off.
+        allowRealtime: config.defaults.allowRealtime ?? false,
+        hostedTools: {
+            web_search: config.hostedTools?.web_search ?? false,
+            file_search: config.hostedTools?.file_search ?? false,
+            code_interpreter: config.hostedTools?.code_interpreter ?? false,
+            image_generation: config.hostedTools?.image_generation ?? false,
+            mcp: config.hostedTools?.mcp ?? false,
+        },
+        mcpAllowedHosts: (config.hostedTools?.mcpAllowedHosts ?? []).join('\n'),
+        limits: {
+            perUserRequestsPerMinute: limitText(config.limits?.perUser?.requestsPerMinute),
+            perUserRequestsPerDay: limitText(config.limits?.perUser?.requestsPerDay),
+            orgKeyRequestsPerDayPerUser: limitText(config.limits?.orgKey?.requestsPerDayPerUser),
+            orgKeyTokensPerDayPerUser: limitText(config.limits?.orgKey?.tokensPerDayPerUser),
+            perOrgRequestsPerDay: limitText(config.limits?.perOrg?.requestsPerDay),
+            perOrgOutputTokensPerDay: limitText(config.limits?.perOrg?.outputTokensPerDay),
+        },
+        providers,
+    };
+}
+/**
+ * `limits` for the PUT. Blank fields are omitted (unlimited). The per-model
+ * entries are not on this form: they are re-sent exactly as loaded, because
+ * the API replaces `limits` wholesale.
+ */
+function toLimits(form, config) {
+    const perUser = compact({
+        requestsPerMinute: limitValue(form.limits.perUserRequestsPerMinute),
+        requestsPerDay: limitValue(form.limits.perUserRequestsPerDay),
+    });
+    const orgKey = compact({
+        requestsPerDayPerUser: limitValue(form.limits.orgKeyRequestsPerDayPerUser),
+        tokensPerDayPerUser: limitValue(form.limits.orgKeyTokensPerDayPerUser),
+    });
+    const perOrg = compact({
+        requestsPerDay: limitValue(form.limits.perOrgRequestsPerDay),
+        outputTokensPerDay: limitValue(form.limits.perOrgOutputTokensPerDay),
+    });
+    const perModel = config.limits?.perModel;
+    return {
+        ...(perUser ? { perUser } : {}),
+        ...(orgKey ? { orgKey } : {}),
+        ...(perOrg ? { perOrg } : {}),
+        ...(perModel && Object.keys(perModel).length > 0 ? { perModel } : {}),
+    };
+}
+/**
+ * The `PUT` body.
+ *
+ * ⚠ THE PUT IS A FULL REPLACE. For every provider it names, an omitted
+ * `baseUrl` CLEARS the stored override, and an omitted cap clears the cap. So
+ * every value is sent EXPLICITLY, every time — the current override to keep
+ * it, `null` to clear it — and every provider on screen is included. Omitting
+ * "unchanged" fields, the instinct from a PATCH, would silently wipe them.
+ *
+ * Each provider entry carries only that provider's `settingsFields` (#448) —
+ * see `toProviderInput`.
+ */
+function toInput(form, config) {
+    const providers = {};
+    for (const provider of config.providers) {
+        // #921: a provider without a settings slot has nothing to save.
+        if (provider.configurable === false)
+            continue;
+        const value = form.providers[provider.id];
+        if (value)
+            providers[provider.id] = toProviderInput(provider, value);
+    }
+    const cap = form.maxOutputTokensCap.trim();
+    return {
+        enabled: form.enabled,
+        keyPolicy: form.keyPolicy,
+        logPromptContent: form.logPromptContent,
+        deploymentKeyServesOrgs: form.deploymentKeyServesOrgs,
+        defaults: {
+            maxOutputTokensCap: cap ? Number(cap) : null,
+            allowBackgroundRuns: form.allowBackgroundRuns,
+            allowRealtime: form.allowRealtime,
+        },
+        hostedTools: { ...form.hostedTools, mcpAllowedHosts: [...new Set(parseHosts(form.mcpAllowedHosts))] },
+        limits: toLimits(form, config),
+        providers,
+    };
+}
+/** Blank, or a whole number from 1 to {@link AI_LIMIT_MAX}; else the error to show. */
+function limitError(text) {
+    const value = text.trim();
+    if (!value)
+        return undefined;
+    if (!/^\d+$/.test(value) || Number(value) <= 0) {
+        return 'Must be a whole number greater than zero, or blank for no limit.';
+    }
+    if (Number(value) > AI_LIMIT_MAX) {
+        return `Must be at most ${AI_LIMIT_MAX.toLocaleString('en-US')}.`;
+    }
+    return undefined;
+}
+/** Thin client-side validation — the API validates for real; this stops the obvious typo. */
+function validate(form, config) {
+    const errors = { limits: {}, providers: {} };
+    const cap = form.maxOutputTokensCap.trim();
+    if (cap && (!/^\d+$/.test(cap) || Number(cap) <= 0)) {
+        errors.maxOutputTokensCap = 'Must be a whole number greater than zero, or blank for no cap.';
+    }
+    const badHost = parseHosts(form.mcpAllowedHosts).find((host) => host.length > 253 || !MCP_HOST_PATTERN.test(host));
+    if (badHost) {
+        errors.mcpAllowedHosts = `"${badHost}" is not a host name. Use mcp.example.com or *.example.com — no https:// or path.`;
+    }
+    for (const field of LIMIT_FIELDS) {
+        const error = limitError(form.limits[field]);
+        if (error)
+            errors.limits[field] = error;
+    }
+    for (const provider of config.providers) {
+        const value = form.providers[provider.id];
+        if (!value)
+            continue;
+        const providerErrors = validateProviderForm(provider, value);
+        if (hasProviderFormErrors(providerErrors))
+            errors.providers[provider.id] = providerErrors;
+    }
+    return errors;
+}
+function hasErrors(errors) {
+    return (!!errors.maxOutputTokensCap ||
+        !!errors.mcpAllowedHosts ||
+        Object.keys(errors.limits).length > 0 ||
+        Object.keys(errors.providers).length > 0);
+}
+/**
+ * Admin → Settings → AI (`/admin/settings/ai`): switch AI on, the key policy,
+ * the providers and their organization keys, hosted tools and limits. Needs
+ * `ai_config:read` (controls enabled with `ai_config:write`).
+ *
+ * @stability experimental
+ */
+export default function AiConfigPage(props = {}) {
+    const { slots } = props;
+    const ProviderCardExtra = slots?.ProviderCardExtra;
+    const { hasPermission } = usePlatformViewer();
+    const { config, isLoading, loadError, isSaving, saveError, clearSaveError, save, keyAction, keyError, clearKeyError, keyWarnings, clearKeyWarnings, setKey, removeKey, probingProvider, probeError, clearProbeError, testResults, clearTestResult, test, } = useAiAdminConfig();
+    // The shell's shared `GET /ai/config` answer. Refreshed after a save so the
+    // hub, the rail and the AI routes learn at once that AI was switched on or
+    // off. Read from context directly — with no shell above (a test), there is
+    // nothing to refresh and no request is made.
+    const sharedAiConfig = useContext(AiConfigContext);
+    const [form, setForm] = useState(null);
+    const [savedMessage, setSavedMessage] = useState(null);
+    // The server's answer is the new baseline after every load and every save.
+    useEffect(() => {
+        if (config)
+            setForm(toFormState(config));
+    }, [config]);
+    // Defence, not the gate — `App.tsx` wraps the route in `RequirePermission`
+    // with this same string. After every hook so the hook order never changes.
+    if (!hasPermission('ai_config:read')) {
+        return _jsx(Navigate, { to: "/", replace: true });
+    }
+    const canWrite = hasPermission('ai_config:write');
+    if (isLoading || (!form && !loadError)) {
+        return _jsx(AiSpinner, {});
+    }
+    const errors = form && config ? validate(form, config) : { limits: {}, providers: {} };
+    const invalid = hasErrors(errors);
+    const isDirty = !!form && !!config && JSON.stringify(form) !== JSON.stringify(toFormState(config));
+    const update = (key, value) => {
+        setForm((prev) => (prev ? { ...prev, [key]: value } : prev));
+    };
+    /** One write or probe at a time, page-wide — they all replace `config`. */
+    const busy = isSaving || keyAction !== null || probingProvider !== null;
+    const handleSaveKey = async (providerId, displayName, apiKey) => {
+        const ok = await setKey(providerId, apiKey);
+        if (ok)
+            setSavedMessage(`${displayName} key verified and saved`);
+        return ok;
+    };
+    const handleRemoveKey = async (providerId, displayName) => {
+        const ok = await removeKey(providerId);
+        if (ok)
+            setSavedMessage(`${displayName} key removed`);
+        return ok;
+    };
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        if (!form || !config || invalid || !canWrite)
+            return;
+        const ok = await save(toInput(form, config));
+        if (ok) {
+            setSavedMessage('AI configuration saved');
+            void sharedAiConfig?.refresh();
+        }
+    };
+    // Providers that would leave the org-fallback policy without a key to fall
+    // back to. The API refuses that save with `AI_KEY_REQUIRED`; saying so
+    // BEFORE the click is kinder than decoding the refusal after it.
+    const keylessEnabledProviders = form && config
+        ? config.providers.filter((provider) => form.providers[provider.id]?.enabled &&
+            !provider.keyStatus.configured &&
+            // A keyless server (#448) is served with no key: it needs no fallback.
+            !(aiProviderSettingsFields(provider).includes('requiresKey') &&
+                form.providers[provider.id]?.requiresKey === false))
+        : [];
+    return (_jsx(Container, { maxWidth: "lg", children: _jsxs(Box, { sx: { py: 4 }, children: [_jsxs(PageSlotsFrame, { slots: slots, headerProps: { title: AI_CONFIG_TITLE, description: AI_CONFIG_DESCRIPTION, readOnly: !canWrite, actions: null }, header: _jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h4", component: "h1", gutterBottom: true, children: AI_CONFIG_TITLE }), _jsxs(Typography, { color: "text.secondary", sx: { mb: 2 }, children: [AI_CONFIG_DESCRIPTION, !canWrite && ' (read-only)'] })] }), children: [config?.updatedBy && config.updatedAt && (_jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 3 }, children: ["Last updated by ", config.updatedBy.email, " on ", new Date(config.updatedAt).toLocaleString()] })), loadError && (_jsx(Alert, { severity: "error", sx: { mb: 3 }, children: loadError })), !canWrite && !loadError && (_jsxs(Alert, { severity: "info", sx: { mb: 3 }, "data-testid": "ai-read-only-notice", children: ["You can read this configuration but not change it. Saving, storing or testing a key and editing models all need ", _jsx("code", { children: "ai_config:write" }), "."] })), form && config && (_jsxs(Box, { component: "form", onSubmit: handleSubmit, noValidate: true, children: [_jsxs(Paper, { sx: { p: { xs: 2, sm: 3 } }, children: [_jsx(FormControlLabel, { control: _jsx(Switch, { checked: form.enabled, onChange: (e) => update('enabled', e.target.checked), disabled: !canWrite, slotProps: { input: { 'aria-label': 'Enable AI for this deployment' } } }), label: "Enable AI for this deployment" }), _jsx(FormHelperText, { sx: { mt: 0 }, children: "The kill switch. Turning it off stops every AI feature at once, without touching keys or models." }), !form.enabled && (_jsx(Alert, { severity: "info", sx: { mt: 2 }, "data-testid": "ai-disabled-notice", children: "AI is completely disabled: users see no AI features, and no AI requests are made." })), _jsx(Divider, { sx: { my: 3 } }), _jsxs(FormControl, { children: [_jsx(FormLabel, { id: "ai-key-policy-label", children: "Whose key pays for a call" }), _jsxs(RadioGroup, { "aria-labelledby": "ai-key-policy-label", value: form.keyPolicy, onChange: (e) => update('keyPolicy', e.target.value), children: [_jsx(FormControlLabel, { value: "byok", control: _jsx(Radio, {}), label: "Users bring their own key (recommended)", disabled: !canWrite }), _jsx(FormControlLabel, { value: "byok_with_org_fallback", control: _jsx(Radio, {}), label: "Users bring their own key; fall back to the organization key", disabled: !canWrite })] }), _jsx(FormHelperText, { children: "The organization key below is always used to discover models. This choice decides whether it also pays for users' calls." })] }), form.keyPolicy === 'byok_with_org_fallback' && (_jsxs(Alert, { severity: "warning", sx: { mt: 2 }, "data-testid": "ai-org-fallback-warning", children: [_jsx(AlertTitle, { children: "The organization pays for users without a key" }), "Every user who has not saved their own key will make calls on the organization key, and its provider bill.", keylessEnabledProviders.length > 0 && (_jsxs(Box, { sx: { mt: 1 }, children: ["No organization key is stored yet for", ' ', _jsx("strong", { children: keylessEnabledProviders.map((provider) => provider.displayName).join(', ') }), ". Save one below first \u2014 the configuration cannot be saved with this policy until then."] }))] })), _jsx(FormControlLabel, { sx: { mt: 2 }, control: _jsx(Switch, { checked: form.deploymentKeyServesOrgs, onChange: (e) => update('deploymentKeyServesOrgs', e.target.checked), disabled: !canWrite, slotProps: { input: { 'aria-label': "Deployment keys serve organizations" } } }), label: "Deployment keys serve organizations" }), _jsx(FormHelperText, { sx: { mt: 0 }, children: "On: an organization without its own key uses the keys stored below. Off: each organization must store its own key on its Organization AI keys page." }), _jsx(Divider, { sx: { my: 3 } }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: form.logPromptContent, onChange: (e) => update('logPromptContent', e.target.checked), disabled: !canWrite, slotProps: { input: { 'aria-label': 'Log prompt content' } } }), label: "Log prompt content" }), _jsx(FormHelperText, { sx: { mt: 0 }, children: "Off by default. Usage is always recorded; this adds what users actually typed." }), form.logPromptContent && (_jsx(Alert, { severity: "warning", sx: { mt: 2 }, "data-testid": "ai-log-prompts-warning", children: "Prompts and responses can contain personal or confidential data. With this on, they are stored in the application's logs where operators can read them." })), _jsx(Typography, { variant: "h6", component: "h2", sx: { mt: 3, mb: 1 }, children: "Defaults" }), _jsxs(Grid, { container: true, spacing: 2, sx: { alignItems: 'center' }, children: [_jsx(Grid, { size: { xs: 12, sm: 6 }, children: _jsx(TextField, { fullWidth: true, label: "Maximum output tokens per call", value: form.maxOutputTokensCap, onChange: (e) => update('maxOutputTokensCap', e.target.value), disabled: !canWrite, slotProps: { htmlInput: { inputMode: 'numeric' } }, error: !!errors.maxOutputTokensCap, helperText: errors.maxOutputTokensCap ??
+                                                            'A ceiling applied to every request. Leave blank for no cap.' }) }), _jsxs(Grid, { size: { xs: 12, sm: 6 }, children: [_jsx(FormControlLabel, { control: _jsx(Switch, { checked: form.allowBackgroundRuns, onChange: (e) => update('allowBackgroundRuns', e.target.checked), disabled: !canWrite, slotProps: { input: { 'aria-label': 'Allow background runs' } } }), label: "Allow background runs" }), _jsx(FormHelperText, { sx: { mt: 0 }, children: "Long requests run on the job queue instead of holding a connection open." })] }), _jsxs(Grid, { size: { xs: 12, sm: 6 }, children: [_jsx(FormControlLabel, { control: _jsx(Switch, { checked: form.allowRealtime, onChange: (e) => update('allowRealtime', e.target.checked), disabled: !canWrite, slotProps: { input: { 'aria-label': 'Allow realtime voice sessions' } } }), label: "Allow realtime voice sessions" }), _jsx(FormHelperText, { sx: { mt: 0 }, children: "Live voice conversations in the playground. The user's browser connects directly to the provider with a short-lived, single-session secret the server mints; the user's API key never leaves the server." })] })] }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", component: "h2", sx: { mb: 1 }, children: "Hosted tools" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Tools the AI provider runs on its side during an answer. Each one reaches outside this deployment and is billed per use by the provider, so every tool is off until you switch it on. The model must also support hosted tools." }), _jsx(Grid, { container: true, spacing: 1, "data-testid": "ai-hosted-tools", children: AI_HOSTED_TOOL_TYPES.map((tool) => (_jsxs(Grid, { size: { xs: 12, sm: 6 }, children: [_jsx(FormControlLabel, { control: _jsx(Switch, { checked: form.hostedTools[tool], onChange: (e) => update('hostedTools', { ...form.hostedTools, [tool]: e.target.checked }), disabled: !canWrite, slotProps: { input: { 'aria-label': HOSTED_TOOL_COPY[tool].label } } }), label: HOSTED_TOOL_COPY[tool].label }), _jsx(FormHelperText, { sx: { mt: 0 }, children: HOSTED_TOOL_COPY[tool].help })] }, tool))) }), _jsx(TextField, { fullWidth: true, multiline: true, minRows: 2, sx: { mt: 2 }, label: "Allowed MCP hosts", value: form.mcpAllowedHosts, onChange: (e) => update('mcpAllowedHosts', e.target.value), disabled: !canWrite, error: !!errors.mcpAllowedHosts, helperText: errors.mcpAllowedHosts ??
+                                                'One host per line, e.g. mcp.example.com, or *.example.com for its subdomains. ' +
+                                                    'Leave empty to allow any https:// server.' }), form.hostedTools.mcp && parseHosts(form.mcpAllowedHosts).length === 0 && (_jsx(Alert, { severity: "warning", sx: { mt: 2 }, "data-testid": "ai-mcp-any-host-warning", children: "Remote MCP is on with no host allowlist: users can point the model at any https:// server." })), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", component: "h2", sx: { mb: 1 }, children: "Limits" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Guardrails on how much each user can call AI. Leave a field blank for no limit. A user over a limit is refused until the window resets \u2014 a minute, or midnight UTC for daily limits. Per-model limits are set on each model on the AI Models page." }), _jsx(Grid, { container: true, spacing: 2, "data-testid": "ai-limits", children: LIMIT_FIELDS.map((field) => (_jsx(Grid, { size: { xs: 12, sm: 6 }, children: _jsx(TextField, { fullWidth: true, label: LIMIT_COPY[field].label, value: form.limits[field], onChange: (e) => update('limits', { ...form.limits, [field]: e.target.value }), disabled: !canWrite, slotProps: { htmlInput: { inputMode: 'numeric' } }, error: !!errors.limits[field], helperText: errors.limits[field] ?? LIMIT_COPY[field].help }) }, field))) })] }), _jsx(Typography, { variant: "h5", component: "h2", sx: { mt: 4, mb: 2 }, children: "Providers" }), config.providers.length === 0 ? (_jsx(Alert, { severity: "info", children: "No AI providers are registered in this build." })) : (_jsx(Stack, { spacing: 2, children: config.providers.map((provider) => {
+                                        if (provider.configurable === false) {
+                                            return _jsx(AiSlotlessProviderCard, { provider: provider }, provider.id);
+                                        }
+                                        const Card = getAiProviderCard(provider.id) ?? AiGenericProviderCard;
+                                        return (_jsxs(Fragment, { children: [_jsx(Card, { provider: provider, descriptor: config.descriptors?.find((descriptor) => descriptor.id === provider.id), value: form.providers[provider.id] ?? EMPTY_PROVIDER_FORM_VALUE, onChange: (next) => setForm((prev) => prev ? { ...prev, providers: { ...prev.providers, [provider.id]: next } } : prev), canWrite: canWrite, errors: errors.providers[provider.id], aiEnabled: config.enabled, keyAction: keyAction?.provider === provider.id ? keyAction.action : null, busy: busy, keyError: keyError?.provider === provider.id ? keyError.message : null, onClearKeyError: clearKeyError, onSaveKey: (apiKey) => handleSaveKey(provider.id, provider.displayName, apiKey), onRemoveKey: () => handleRemoveKey(provider.id, provider.displayName), isProbing: probingProvider === provider.id, probeError: probeError?.provider === provider.id ? probeError.message : null, onClearProbeError: clearProbeError, testResult: testResults[provider.id] ?? null, onClearTestResult: () => clearTestResult(provider.id), onTest: (apiKey) => void test(provider.id, {
+                                                        apiKey,
+                                                        // The base URL ON SCREEN, saved or not — so a gateway
+                                                        // can be proved before it is committed to.
+                                                        baseUrl: form.providers[provider.id]?.baseUrl.trim() || undefined,
+                                                    }) }), ProviderCardExtra && (_jsx(ProviderCardExtra, { provider: provider, canWrite: canWrite, aiEnabled: config.enabled }))] }, provider.id));
+                                    }) })), keyWarnings.includes('ORG_FALLBACK_WITHOUT_KEY') && (_jsxs(Alert, { severity: "warning", sx: { mt: 3 }, onClose: clearKeyWarnings, "data-testid": "ai-org-fallback-without-key", children: [_jsx(AlertTitle, { children: "Users can no longer fall back to the organization key" }), "The key policy still falls back to the organization key, but no key is stored for that provider any more. Users without their own key will be refused until a new organization key is saved or the policy is changed."] })), saveError && (_jsxs(Alert, { severity: "error", sx: { mt: 3 }, onClose: clearSaveError, children: [_jsx(AlertTitle, { children: "Could not save" }), saveError] })), _jsxs(Box, { sx: {
+                                        mt: 3,
+                                        display: 'flex',
+                                        flexDirection: { xs: 'column', sm: 'row' },
+                                        alignItems: { xs: 'stretch', sm: 'center' },
+                                        gap: 2,
+                                    }, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: !canWrite || !isDirty || invalid || busy, children: isSaving ? 'Saving…' : 'Save changes' }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: "Saves the switches, the policy, the defaults, the limits and each provider's settings. Keys are saved separately, on each provider." })] })] }))] }), _jsx(Snackbar, { open: !!savedMessage, autoHideDuration: 3000, onClose: () => setSavedMessage(null), message: savedMessage })] }) }));
+}
+//# sourceMappingURL=AiConfigPage.js.map