@proofhound/web-ui 0.1.6

package/dist/screens/models/model-form-page.js

@@ -0,0 +1,876 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { MODEL_DEFAULT_CONCURRENCY_LIMIT, MODEL_MAX_CONCURRENCY_LIMIT, MODEL_UNLIMITED_RATE_LIMIT, } from '@proofhound/shared';
+import { AlertTriangle, Cable, Check, Copy, CopyPlus, DollarSign, Eye, EyeOff, Gauge, KeyRound, Link2, Loader2, Lock, Save, Trash2, X, } from 'lucide-react';
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, DetailPageSkeleton, Progress, formatProgressLabel, cn, } from '@proofhound/ui';
+import { JsonObjectTextarea, ModelContextWindowInput, ModelProbeStatus, ModelPresetQuickFill } from '../../components';
+import { Main } from '@proofhound/ui/layout';
+import { useI18n } from '../../i18n';
+import { getApiErrorMessage, toIntegerInputValue, buildProviderTypeOptions, isProjectNameTaken } from '../../lib';
+import { useCreateProjectModel, useDateTimeFormatter, useDelayedLoading, useProbeProjectModel, useProbeDraftProjectModel, useDeleteProjectModel, useProjectModels, useProjectModel, useProjectModelReferences, useRevealProjectModelApiKey, useUpdateProjectModel, } from '../../hooks';
+import { dtoToProjectModel } from './project-model-adapter';
+import { getProjectModelSource, isProjectModelEditable, } from './model-view-model';
+import { MODEL_SOURCE_LABEL_KEYS, MODEL_STATUS_CLASSES, MODEL_STATUS_LABEL_KEYS } from './model-view-model';
+const EMPTY_MODEL_REFERENCES = {
+    experiments: 0,
+    canaryReleases: 0,
+    optimizations: 0,
+    productionReleases: 0,
+    total: 0,
+};
+const MODEL_REFERENCE_LABEL_KEYS = {
+    experiments: 'models.activeUsage.experiments',
+    canaryReleases: 'models.activeUsage.canaryReleases',
+    optimizations: 'models.activeUsage.optimizations',
+    productionReleases: 'models.activeUsage.productionReleases',
+};
+const PROJECT_MODEL_FALLBACK = {
+    id: '',
+    name: '',
+    provider: '',
+    providerModelId: '',
+    endpoint: '',
+    source: 'local',
+    status: 'enabled',
+    apiKey: '',
+    credentialTail: '',
+    contextWindow: '',
+    contextWindowInput: '',
+    extraBodyInput: '',
+    rpm: { limit: '', limitInput: '', usage: 0, current: '' },
+    tpm: { limit: '', limitInput: '', usage: 0, current: '' },
+    concurrency: { limit: '', limitInput: '', usage: 0, current: '' },
+    autoConcurrency: true,
+    pricing: { inputPerMillion: '', outputPerMillion: '' },
+    imageCapability: 'none',
+    references: 0,
+    readonly: false,
+    lastUpdated: '',
+};
+function projectModelForCopy(source, nameSuffix) {
+    return {
+        ...PROJECT_MODEL_FALLBACK,
+        name: `${source.name}${nameSuffix}`,
+        provider: source.provider,
+        providerModelId: source.providerModelId,
+        endpoint: source.endpoint,
+        contextWindow: source.contextWindow,
+        contextWindowInput: source.contextWindowInput,
+        extraBodyInput: source.extraBodyInput,
+        rpm: { ...PROJECT_MODEL_FALLBACK.rpm, limit: source.rpm.limit, limitInput: source.rpm.limitInput },
+        tpm: { ...PROJECT_MODEL_FALLBACK.tpm, limit: source.tpm.limit, limitInput: source.tpm.limitInput },
+        concurrency: {
+            ...PROJECT_MODEL_FALLBACK.concurrency,
+            limit: source.concurrency.limit,
+            limitInput: source.concurrency.limitInput,
+        },
+        pricing: source.pricing,
+        imageCapability: source.imageCapability,
+    };
+}
+function projectModelFromQuickFillDraft(draft) {
+    return {
+        ...PROJECT_MODEL_FALLBACK,
+        name: draft.name,
+        provider: draft.providerType,
+        providerModelId: draft.providerModelId,
+        endpoint: draft.endpoint,
+        contextWindow: String(draft.contextWindowTokens),
+        contextWindowInput: String(draft.contextWindowTokens),
+        extraBodyInput: draft.extraBodyInput,
+        rpm: {
+            ...PROJECT_MODEL_FALLBACK.rpm,
+            limit: String(draft.rpmLimit),
+            limitInput: String(draft.rpmLimit),
+        },
+        tpm: {
+            ...PROJECT_MODEL_FALLBACK.tpm,
+            limit: String(draft.tpmLimit),
+            limitInput: String(draft.tpmLimit),
+        },
+        concurrency: {
+            ...PROJECT_MODEL_FALLBACK.concurrency,
+            limit: String(draft.concurrencyLimit),
+            limitInput: String(draft.concurrencyLimit),
+        },
+        pricing: {
+            inputPerMillion: String(draft.inputTokenPricePerMillion),
+            outputPerMillion: String(draft.outputTokenPricePerMillion),
+        },
+        imageCapability: draft.imageCapability,
+    };
+}
+const SOURCE_CLASS_NAMES = {
+    local: 'status-running',
+};
+function FieldInput({ name, defaultValue, suffix, placeholder, disabled = false, readOnly = false, type = 'text', onChange, testId, }) {
+    return (_jsxs("div", { className: "relative", children: [_jsx(Input, { name: name, type: type, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: onChange ? (event) => onChange(event.target.value) : undefined, "data-testid": testId, className: cn('h-9 text-sm', suffix && 'pr-20', readOnly && 'bg-muted/50 text-muted-foreground') }), suffix && (_jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-muted-foreground", children: suffix }))] }));
+}
+function Field({ label, required, help, error, children, }) {
+    return (_jsxs("div", { children: [_jsxs(Label, { className: "mb-1.5 block text-xs font-medium", children: [label, required && _jsx("span", { className: "text-destructive", children: "*" })] }), children, error ? (_jsx("div", { className: "mt-1.5 text-[11.5px] leading-relaxed text-destructive", children: error })) : (help && _jsx("div", { className: "mt-1.5 text-[11.5px] leading-relaxed text-muted-foreground", children: help }))] }));
+}
+function Section({ number, title, right, children, complete = false, }) {
+    return (_jsxs("section", { className: "rounded-lg border bg-card", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-3", children: [_jsx("span", { className: cn('inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-muted font-mono text-xs font-semibold text-muted-foreground', complete && 'bg-[var(--status-running-dot)] text-white'), children: number }), _jsx("h2", { className: "text-sm font-semibold", children: title }), right && _jsx("div", { className: "ml-auto", children: right })] }), _jsx("div", { className: "space-y-4 p-4", children: children })] }));
+}
+function SwitchLike({ on }) {
+    return (_jsx("span", { className: cn('relative inline-flex h-5 w-9 rounded-full border transition-colors', on ? 'border-primary bg-primary' : 'border-border bg-muted'), "aria-hidden": "true", children: _jsx("span", { className: cn('absolute top-0.5 size-4 rounded-full bg-card shadow transition-transform', on ? 'translate-x-[17px]' : 'translate-x-0.5') }) }));
+}
+function SourceAndStatus({ model }) {
+    const { t } = useI18n();
+    const status = MODEL_STATUS_CLASSES[model.status];
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium', SOURCE_CLASS_NAMES[getProjectModelSource(model)]), children: t(MODEL_SOURCE_LABEL_KEYS[getProjectModelSource(model)]) }), _jsxs("span", { className: cn('inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium', status.pill), children: [_jsx("span", { className: cn('size-1.5 rounded-full', status.dot) }), t(MODEL_STATUS_LABEL_KEYS[model.status])] })] }));
+}
+function BasicSection({ mode, useDefaults, model, readOnly, nameError, onNameChange, onDraftChange, }) {
+    const { t } = useI18n();
+    const isNew = mode === 'new';
+    return (_jsxs(Section, { number: "1", title: t('models.form.basicInfo'), complete: isNew, right: !isNew && (_jsx("span", { className: "rounded bg-muted px-2 py-0.5 font-mono text-[11px] text-muted-foreground", children: t('models.form.unchanged') })), children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Field, { label: t('models.form.name'), required: true, error: nameError, children: _jsx(FieldInput, { name: "name", defaultValue: useDefaults ? model.name : undefined, placeholder: "openai-prod", readOnly: readOnly, onChange: onNameChange, testId: isNew ? 'model-new-name' : undefined }) }), _jsx(Field, { label: t('models.form.provider'), required: true, help: !isNew ? t('models.form.providerLockedHelp') : undefined, children: _jsxs(Select, { name: "providerType", defaultValue: useDefaults ? model.provider || undefined : undefined, disabled: !isNew, onValueChange: onDraftChange, children: [_jsx(SelectTrigger, { className: "h-9", "aria-label": t('models.form.provider'), "data-testid": isNew ? 'model-new-provider-type' : undefined, children: _jsx(SelectValue, { placeholder: t('models.form.providerPlaceholder') }) }), _jsx(SelectContent, { children: buildProviderTypeOptions(useDefaults ? model.provider : undefined).map((option) => (_jsx(SelectItem, { value: option.value, "data-testid": isNew ? `model-new-provider-option-${option.value}` : undefined, children: option.label }, option.value))) })] }) })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Field, { label: t('models.form.modelId'), required: true, help: isNew ? t('models.form.modelIdHelp') : undefined, children: _jsx(FieldInput, { name: "providerModelId", defaultValue: useDefaults ? model.providerModelId : undefined, placeholder: "gpt-4o-2024-08-06", readOnly: readOnly, testId: isNew ? 'model-new-provider-model-id' : undefined }) }), _jsx(Field, { label: t('models.form.endpoint'), required: isNew, children: _jsx(FieldInput, { name: "endpoint", defaultValue: useDefaults ? model.endpoint : undefined, placeholder: "https://api.openai.com/v1", readOnly: readOnly, testId: isNew ? 'model-new-endpoint' : undefined }) })] }), _jsx("div", { className: "grid gap-4 md:grid-cols-2", children: _jsx(Field, { label: t('models.form.contextWindow'), required: true, children: _jsx(ModelContextWindowInput, { defaultValue: useDefaults ? (model.contextWindowInput ?? toIntegerInputValue(model.contextWindow)) : undefined, readOnly: readOnly, inputClassName: "h-9 text-sm", buttonClassName: "h-9", onValueChange: onDraftChange, testId: isNew ? 'model-new-context-window' : undefined }) }) })] }));
+}
+function CredentialSection({ mode, useDefaults, model, readOnly, projectId, initialApiKey, onApiKeyEdited, onDraftChange, }) {
+    const { t } = useI18n();
+    const isNew = mode === 'new';
+    const revealMutation = useRevealProjectModelApiKey(projectId);
+    const [apiKeyVisible, setApiKeyVisible] = useState(isNew);
+    const [apiKeyCopied, setApiKeyCopied] = useState(false);
+    const [apiKeyValue, setApiKeyValue] = useState(() => initialApiKey ?? (isNew ? '' : model.apiKey));
+    const copyApiKey = async () => {
+        if (!apiKeyVisible || !apiKeyValue)
+            return;
+        await navigator.clipboard?.writeText(apiKeyValue);
+        setApiKeyCopied(true);
+        window.setTimeout(() => setApiKeyCopied(false), 1800);
+    };
+    const toggleReveal = () => {
+        if (isNew) {
+            setApiKeyVisible((visible) => !visible);
+            return;
+        }
+        if (apiKeyVisible) {
+            setApiKeyVisible(false);
+            return;
+        }
+        if (apiKeyValue) {
+            setApiKeyVisible(true);
+            return;
+        }
+        if (!model.id)
+            return;
+        revealMutation.mutate(model.id, {
+            onSuccess: (result) => {
+                setApiKeyValue(result.apiKey);
+                setApiKeyVisible(true);
+            },
+        });
+    };
+    return (_jsxs(Section, { number: "2", title: t('models.form.credential'), complete: isNew, right: _jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-amber-200 bg-amber-50 px-2 py-0.5 font-mono text-[11px] text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-200", children: [_jsx(Lock, { className: "size-3" }), apiKeyVisible
+                    ? t('models.form.plaintextVisible')
+                    : isNew
+                        ? t('models.form.encryptedStorage')
+                        : t('models.form.masked')] }), children: [_jsx(Field, { label: "API Key", required: isNew, help: t('models.form.apiKeyHelp'), children: _jsxs("div", { className: "flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm", children: [_jsx("input", { name: "apiKey", type: apiKeyVisible ? 'text' : 'password', value: apiKeyValue, onChange: (event) => {
+                                setApiKeyValue(event.target.value);
+                                if (!isNew)
+                                    onApiKeyEdited?.();
+                            }, readOnly: readOnly, placeholder: "sk-...", "data-testid": isNew ? 'model-new-api-key' : undefined, className: cn('min-w-0 flex-1 bg-transparent font-mono outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed', readOnly && 'text-muted-foreground') }), apiKeyVisible && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "ml-auto h-7 px-2 text-xs", "aria-label": t('models.form.copyKey'), disabled: !apiKeyValue, onClick: () => {
+                                void copyApiKey();
+                            }, children: [_jsx(Copy, { className: "size-3.5" }), apiKeyCopied ? t('models.form.keyCopied') : t('models.form.copyKey')] })), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: cn('size-7', !apiKeyVisible && 'ml-auto'), "aria-label": t('models.form.revealKey'), onClick: toggleReveal, disabled: revealMutation.isPending, children: apiKeyVisible ? _jsx(EyeOff, { className: "size-3.5" }) : _jsx(Eye, { className: "size-3.5" }) })] }) }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Field, { label: t('models.form.extraHeaders'), help: t('models.form.extraHeadersHelp'), children: _jsx(FieldInput, { placeholder: '{ "X-Region": "cn-east" }', readOnly: readOnly }) }), _jsx(Field, { label: t('models.form.extraBody'), help: t('models.form.extraBodyHelp'), children: _jsx(JsonObjectTextarea, { name: "extraBody", defaultValue: useDefaults ? model.extraBodyInput : undefined, placeholder: '{ "top_k": 40, "repetition_penalty": 1.05 }', readOnly: readOnly, onAutoFormat: onDraftChange }) })] })] }));
+}
+function capabilityToDraft(model, useDefaults) {
+    if (!useDefaults) {
+        return { supportsImages: true, imageUrl: true, imageBase64: true };
+    }
+    return {
+        supportsImages: model.imageCapability !== 'none',
+        imageUrl: model.imageCapability === 'url' || model.imageCapability === 'both',
+        imageBase64: model.imageCapability === 'base64' || model.imageCapability === 'both',
+    };
+}
+function imageCapabilityFromDraft(supportsImages, imageUrl, imageBase64) {
+    if (!supportsImages)
+        return 'none';
+    if (imageUrl && imageBase64)
+        return 'both';
+    if (imageUrl)
+        return 'url';
+    if (imageBase64)
+        return 'base64';
+    return 'none';
+}
+function CapabilitiesSection({ mode, useDefaults, model, readOnly, onDraftChange, }) {
+    const { t } = useI18n();
+    const isNew = mode === 'new';
+    const initialDraft = useMemo(() => capabilityToDraft(model, useDefaults), [useDefaults, model]);
+    const [supportsImages, setSupportsImages] = useState(initialDraft.supportsImages);
+    const [imageUrl, setImageUrl] = useState(initialDraft.imageUrl);
+    const [imageBase64, setImageBase64] = useState(initialDraft.imageBase64);
+    const imageCapability = imageCapabilityFromDraft(supportsImages, imageUrl, imageBase64);
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- async model detail seeds the controlled capability draft
+        setSupportsImages(initialDraft.supportsImages);
+        setImageUrl(initialDraft.imageUrl);
+        setImageBase64(initialDraft.imageBase64);
+    }, [initialDraft]);
+    const scheduleDraftChange = () => {
+        window.requestAnimationFrame(() => onDraftChange?.());
+    };
+    const toggleSupportsImages = () => {
+        if (readOnly)
+            return;
+        setSupportsImages((current) => {
+            const next = !current;
+            if (next && !imageUrl && !imageBase64) {
+                setImageUrl(true);
+                setImageBase64(true);
+            }
+            return next;
+        });
+        scheduleDraftChange();
+    };
+    return (_jsxs(Section, { number: "3", title: t('models.form.capabilities'), right: !isNew && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded border px-2 py-0.5 text-[11px] font-medium status-pending", children: [_jsx(AlertTriangle, { className: "size-3" }), t('models.form.affectsPrompts')] })), children: [_jsx("input", { type: "hidden", name: "imageCapability", value: imageCapability }), _jsxs("div", { className: "flex items-start justify-between gap-4 py-1", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: t('models.form.supportsImages') }), !isNew && (_jsx("div", { className: "mt-0.5 text-[11.5px] text-muted-foreground", children: t('models.form.supportsImagesHelp') }))] }), _jsx("button", { type: "button", "aria-label": t('models.form.supportsImages'), disabled: readOnly, onClick: toggleSupportsImages, children: _jsx(SwitchLike, { on: supportsImages }) })] }), supportsImages && (_jsxs("div", { className: "grid gap-3 border-t pt-4 md:grid-cols-2", children: [_jsxs("label", { className: "flex cursor-pointer items-start gap-2.5 rounded-md border p-3 hover:bg-accent", children: [_jsx("input", { name: "imageUrl", type: "checkbox", checked: imageUrl, disabled: readOnly, onChange: (event) => {
+                                    setImageUrl(event.target.checked);
+                                    scheduleDraftChange();
+                                }, className: "mt-0.5 size-4 accent-primary" }), _jsxs("span", { children: [_jsx("span", { className: "block text-xs font-medium", children: t('models.form.imageUrl') }), _jsx("span", { className: "mt-0.5 block text-[11.5px] text-muted-foreground", children: t('models.form.imageUrlHelp') })] })] }), _jsxs("label", { className: "flex cursor-pointer items-start gap-2.5 rounded-md border p-3 hover:bg-accent", children: [_jsx("input", { name: "imageBase64", type: "checkbox", checked: imageBase64, disabled: readOnly, onChange: (event) => {
+                                    setImageBase64(event.target.checked);
+                                    scheduleDraftChange();
+                                }, className: "mt-0.5 size-4 accent-primary" }), _jsxs("span", { children: [_jsx("span", { className: "block text-xs font-medium", children: t('models.form.imageBase64') }), _jsx("span", { className: "mt-0.5 block text-[11.5px] text-muted-foreground", children: t('models.form.imageBase64Help') })] })] })] }))] }));
+}
+function QuotaSection({ mode, useDefaults, model, readOnly, }) {
+    const { t } = useI18n();
+    const isEdit = mode === 'edit';
+    const isNew = mode === 'new';
+    const [autoConcurrency, setAutoConcurrency] = useState(useDefaults ? model.autoConcurrency : true);
+    const usageSummary = `${t('models.form.realtimeUsage')}: ${model.rpm.usage}% / ${model.tpm.usage}% / ${model.concurrency.usage}%`;
+    return (_jsx(Section, { number: "4", title: t('models.form.quotas'), right: isEdit && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded border px-2 py-0.5 text-[11px] font-medium status-canary", children: [_jsx("span", { className: "size-1.5 rounded-full dot-canary" }), usageSummary] })), children: _jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [_jsxs(Field, { label: t('models.form.rpmLimit'), required: true, help: t('models.form.rpmTpmLimitHelp'), children: [_jsx(FieldInput, { name: "rpmLimit", defaultValue: useDefaults ? (model.rpm.limitInput ?? toIntegerInputValue(model.rpm.limit)) : undefined, placeholder: "2000", suffix: "req/min", readOnly: readOnly, testId: isNew ? 'model-new-rpm-limit' : undefined }), isEdit && _jsx(QuotaLine, { usage: model.rpm.usage, current: model.rpm.current, limit: model.rpm.limit })] }), _jsxs(Field, { label: t('models.form.tpmLimit'), required: true, help: t('models.form.rpmTpmLimitHelp'), children: [_jsx(FieldInput, { name: "tpmLimit", defaultValue: useDefaults ? (model.tpm.limitInput ?? toIntegerInputValue(model.tpm.limit)) : undefined, placeholder: "800000", suffix: "tok/min", readOnly: readOnly, testId: isNew ? 'model-new-tpm-limit' : undefined }), isEdit && _jsx(QuotaLine, { usage: model.tpm.usage, current: model.tpm.current, limit: model.tpm.limit })] }), _jsxs(Field, { label: autoConcurrency ? t('models.form.concurrencyCeiling') : t('models.form.concurrencyLimit'), help: autoConcurrency ? t('models.form.autoConcurrencyHelp') : t('models.form.concurrencyLimitHelp'), children: [_jsx(FieldInput, { name: "concurrencyLimit", defaultValue: useDefaults ? (model.concurrency.limitInput ?? toIntegerInputValue(model.concurrency.limit)) : undefined, placeholder: String(MODEL_DEFAULT_CONCURRENCY_LIMIT), suffix: "in-flight", readOnly: readOnly }), _jsxs("label", { className: "mt-2 flex cursor-pointer items-center gap-2 text-[11.5px] text-muted-foreground", children: [_jsx("input", { name: "autoConcurrency", type: "checkbox", checked: autoConcurrency, disabled: readOnly, onChange: (event) => setAutoConcurrency(event.target.checked), className: "size-3.5 accent-primary" }), _jsx("span", { children: t('models.form.autoConcurrency') })] }), isEdit && (_jsx(QuotaLine, { usage: model.concurrency.usage, current: model.concurrency.current, limit: autoConcurrency && model.concurrency.effective
+                                ? `${model.concurrency.effective} / ${model.concurrency.limit}`
+                                : model.concurrency.limit }))] })] }) }));
+}
+function QuotaLine({ usage, current, limit }) {
+    const meterLabel = formatProgressLabel({
+        value: usage,
+        max: 100,
+        percent: usage,
+        valueLabel: current,
+        maxLabel: limit,
+    });
+    return (_jsx(_Fragment, { children: _jsx(Progress, { value: usage, label: meterLabel, className: "mt-2" }) }));
+}
+function PricingSection({ useDefaults, model, readOnly, }) {
+    const { t } = useI18n();
+    return (_jsxs(Section, { number: "5", title: t('models.form.pricing'), right: _jsxs("span", { className: "inline-flex items-center gap-1.5 rounded border px-2 py-0.5 text-[11px] font-medium status-canary", children: [_jsx(DollarSign, { className: "size-3" }), t('models.form.costEstimateBasis')] }), children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Field, { label: t('models.form.inputTokenPrice'), required: true, help: t('models.form.inputTokenPriceHelp'), children: _jsx(FieldInput, { name: "inputPrice", type: "number", defaultValue: useDefaults ? model.pricing.inputPerMillion : undefined, placeholder: "2.50", suffix: "/ 1M tokens", readOnly: readOnly }) }), _jsx(Field, { label: t('models.form.outputTokenPrice'), required: true, help: t('models.form.outputTokenPriceHelp'), children: _jsx(FieldInput, { name: "outputPrice", type: "number", defaultValue: useDefaults ? model.pricing.outputPerMillion : undefined, placeholder: "10.00", suffix: "/ 1M tokens", readOnly: readOnly }) })] }), _jsx("div", { className: "rounded-md border bg-muted/45 px-3 py-2 font-mono text-[11px] text-muted-foreground", children: t('models.form.costFormula') })] }));
+}
+function draftImageCapability(form) {
+    const imageUrl = form.has('imageUrl');
+    const imageBase64 = form.has('imageBase64');
+    if (imageUrl && imageBase64)
+        return 'both';
+    if (imageUrl)
+        return 'url';
+    if (imageBase64)
+        return 'base64';
+    return 'none';
+}
+function positiveIntegerFromForm(form, key) {
+    const raw = String(form.get(key) ?? '').trim();
+    const value = Number(raw);
+    return Number.isInteger(value) && value > 0 ? value : null;
+}
+function rateLimitFromForm(form, key) {
+    const raw = String(form.get(key) ?? '').trim();
+    const value = Number(raw);
+    return Number.isInteger(value) && (value === MODEL_UNLIMITED_RATE_LIMIT || value > 0) ? value : null;
+}
+function concurrencyLimitFromForm(form, key) {
+    const raw = String(form.get(key) ?? '').trim();
+    const value = raw ? Number(raw) : MODEL_DEFAULT_CONCURRENCY_LIMIT;
+    return Number.isInteger(value) && value > 0 && value <= MODEL_MAX_CONCURRENCY_LIMIT ? value : null;
+}
+function nonnegativeNumberFromForm(form, key) {
+    const raw = String(form.get(key) ?? '').trim();
+    const value = Number(raw || '0');
+    return Number.isFinite(value) && value >= 0 ? value : null;
+}
+function textFromForm(form, key) {
+    return String(form.get(key) ?? '').trim();
+}
+function normalizedNumberSignature(raw) {
+    const trimmed = String(raw ?? '').trim();
+    if (!trimmed)
+        return '';
+    const value = Number(trimmed);
+    return Number.isFinite(value) ? value : trimmed;
+}
+function normalizedJsonSignature(raw) {
+    const trimmed = String(raw ?? '').trim();
+    if (!trimmed)
+        return {};
+    try {
+        const parsed = JSON.parse(trimmed);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : trimmed;
+    }
+    catch {
+        return trimmed;
+    }
+}
+function jsonObjectFromForm(form, key) {
+    const raw = String(form.get(key) ?? '').trim();
+    if (!raw)
+        return {};
+    try {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+            return parsed;
+        }
+    }
+    catch {
+        return null;
+    }
+    return null;
+}
+function projectEditSignatureFromModel(model) {
+    return JSON.stringify({
+        name: model.name.trim(),
+        providerModelId: model.providerModelId.trim(),
+        endpoint: model.endpoint.trim(),
+        apiKey: '',
+        contextWindowTokens: normalizedNumberSignature(model.contextWindowInput ?? toIntegerInputValue(model.contextWindow)),
+        rpmLimit: normalizedNumberSignature(model.rpm.limitInput ?? toIntegerInputValue(model.rpm.limit)),
+        tpmLimit: normalizedNumberSignature(model.tpm.limitInput ?? toIntegerInputValue(model.tpm.limit)),
+        concurrencyLimit: normalizedNumberSignature(model.concurrency.limitInput ?? toIntegerInputValue(model.concurrency.limit)),
+        autoConcurrency: model.autoConcurrency,
+        inputPrice: normalizedNumberSignature(model.pricing.inputPerMillion),
+        outputPrice: normalizedNumberSignature(model.pricing.outputPerMillion),
+        imageCapability: model.imageCapability,
+        extraBody: normalizedJsonSignature(model.extraBodyInput),
+    });
+}
+function projectEditSignatureFromForm(form, apiKeyEdited) {
+    const data = new FormData(form);
+    return JSON.stringify({
+        name: textFromForm(data, 'name'),
+        providerModelId: textFromForm(data, 'providerModelId'),
+        endpoint: textFromForm(data, 'endpoint'),
+        apiKey: apiKeyEdited ? textFromForm(data, 'apiKey') : '',
+        contextWindowTokens: normalizedNumberSignature(String(data.get('contextWindowTokens') ?? '')),
+        rpmLimit: normalizedNumberSignature(String(data.get('rpmLimit') ?? '')),
+        tpmLimit: normalizedNumberSignature(String(data.get('tpmLimit') ?? '')),
+        concurrencyLimit: normalizedNumberSignature(String(data.get('concurrencyLimit') ?? '')),
+        autoConcurrency: data.has('autoConcurrency'),
+        inputPrice: normalizedNumberSignature(String(data.get('inputPrice') ?? '')),
+        outputPrice: normalizedNumberSignature(String(data.get('outputPrice') ?? '')),
+        imageCapability: String(data.get('imageCapability') ?? 'none'),
+        extraBody: normalizedJsonSignature(String(data.get('extraBody') ?? '')),
+    });
+}
+function readProjectModelCreatePayload(form, intent) {
+    const data = new FormData(form);
+    const name = textFromForm(data, 'name');
+    const providerType = textFromForm(data, 'providerType');
+    const providerModelId = textFromForm(data, 'providerModelId');
+    const endpoint = textFromForm(data, 'endpoint');
+    const apiKey = textFromForm(data, 'apiKey');
+    const contextWindowTokens = positiveIntegerFromForm(data, 'contextWindowTokens');
+    const rpmLimit = rateLimitFromForm(data, 'rpmLimit');
+    const tpmLimit = rateLimitFromForm(data, 'tpmLimit');
+    const concurrencyLimit = concurrencyLimitFromForm(data, 'concurrencyLimit');
+    const inputPrice = nonnegativeNumberFromForm(data, 'inputPrice');
+    const outputPrice = nonnegativeNumberFromForm(data, 'outputPrice');
+    const extraBody = jsonObjectFromForm(data, 'extraBody');
+    const imageCapability = draftImageCapability(data);
+    if ([name, providerType, providerModelId, endpoint, apiKey].some((value) => !value.trim())) {
+        return { ok: false, error: 'required' };
+    }
+    if (extraBody === null) {
+        return { ok: false, error: 'json' };
+    }
+    if (contextWindowTokens === null ||
+        rpmLimit === null ||
+        tpmLimit === null ||
+        concurrencyLimit === null ||
+        inputPrice === null ||
+        outputPrice === null) {
+        return { ok: false, error: 'number' };
+    }
+    return {
+        ok: true,
+        body: {
+            name,
+            providerType,
+            providerModelId,
+            endpoint,
+            apiKey,
+            contextWindowTokens,
+            rpm: { limit: rpmLimit },
+            tpm: { limit: tpmLimit },
+            concurrency: { limit: concurrencyLimit },
+            autoConcurrency: data.has('autoConcurrency'),
+            pricing: { inputPerMillion: inputPrice, outputPerMillion: outputPrice },
+            capabilities: { image: imageCapability },
+            extraBody,
+            status: intent === 'draft' ? 'disabled' : 'enabled',
+        },
+    };
+}
+function projectModelCreateConnectivitySignature(body) {
+    return JSON.stringify({
+        name: body.name.trim(),
+        providerType: body.providerType.trim(),
+        providerModelId: body.providerModelId.trim(),
+        endpoint: body.endpoint.trim(),
+        apiKey: body.apiKey,
+        contextWindowTokens: body.contextWindowTokens ?? null,
+        rpmLimit: body.rpm.limit,
+        tpmLimit: body.tpm.limit,
+        concurrencyLimit: body.concurrency.limit,
+        inputPrice: body.pricing.inputPerMillion,
+        outputPrice: body.pricing.outputPerMillion,
+        imageCapability: body.capabilities.image,
+        extraBody: body.extraBody ?? {},
+    });
+}
+function readProjectModelUpdatePayload(form, includeApiKey) {
+    const data = new FormData(form);
+    const name = textFromForm(data, 'name');
+    const providerModelId = textFromForm(data, 'providerModelId');
+    const endpoint = textFromForm(data, 'endpoint');
+    const apiKey = textFromForm(data, 'apiKey');
+    const contextWindowTokens = positiveIntegerFromForm(data, 'contextWindowTokens');
+    const rpmLimit = rateLimitFromForm(data, 'rpmLimit');
+    const tpmLimit = rateLimitFromForm(data, 'tpmLimit');
+    const concurrencyLimit = concurrencyLimitFromForm(data, 'concurrencyLimit');
+    const inputPrice = nonnegativeNumberFromForm(data, 'inputPrice');
+    const outputPrice = nonnegativeNumberFromForm(data, 'outputPrice');
+    const extraBody = jsonObjectFromForm(data, 'extraBody');
+    const imageCapabilityValue = String(data.get('imageCapability') ?? 'none');
+    const imageCapability = imageCapabilityValue === 'url' ||
+        imageCapabilityValue === 'base64' ||
+        imageCapabilityValue === 'both' ||
+        imageCapabilityValue === 'none'
+        ? imageCapabilityValue
+        : 'none';
+    if ([name, providerModelId, endpoint].some((value) => !value.trim())) {
+        return { ok: false, error: 'required' };
+    }
+    if (extraBody === null) {
+        return { ok: false, error: 'json' };
+    }
+    if (contextWindowTokens === null ||
+        rpmLimit === null ||
+        tpmLimit === null ||
+        concurrencyLimit === null ||
+        inputPrice === null ||
+        outputPrice === null) {
+        return { ok: false, error: 'number' };
+    }
+    const body = {
+        name,
+        providerModelId,
+        endpoint,
+        contextWindowTokens,
+        rpm: { limit: rpmLimit },
+        tpm: { limit: tpmLimit },
+        concurrency: { limit: concurrencyLimit },
+        autoConcurrency: data.has('autoConcurrency'),
+        pricing: { inputPerMillion: inputPrice, outputPerMillion: outputPrice },
+        capabilities: { image: imageCapability },
+        extraBody,
+    };
+    if (includeApiKey && apiKey) {
+        body.apiKey = apiKey;
+    }
+    return { ok: true, body };
+}
+function TestConnectivitySection({ feedback, isTesting, onTest, }) {
+    const { t } = useI18n();
+    return (_jsxs("section", { className: "rounded-lg border bg-card", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-3", children: [_jsx("span", { className: "inline-flex size-6 items-center justify-center rounded-full border border-[var(--status-canary-bd)] bg-[var(--status-canary-bg)] text-[var(--status-canary-fg)]", children: _jsx(Cable, { className: "size-3" }) }), _jsx("h2", { className: "text-sm font-semibold", children: t('models.form.testConnectivity') })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8", onClick: onTest, disabled: isTesting, "aria-busy": isTesting, children: [isTesting ? _jsx(Loader2, { className: "size-3.5 animate-spin" }) : _jsx(Cable, { className: "size-3.5" }), isTesting ? t('models.probe.running') : t('models.form.testMinimalRequest')] }), _jsx(ModelProbeStatus, { feedback: feedback })] })] }));
+}
+function UsagePanel({ model }) {
+    const { t } = useI18n();
+    const meters = [
+        { key: 'rpm', label: 'RPM', current: model.rpm.current, limit: model.rpm.limit, usage: model.rpm.usage },
+        { key: 'tpm', label: 'TPM', current: model.tpm.current, limit: model.tpm.limit, usage: model.tpm.usage },
+        {
+            key: 'concurrency',
+            label: t('models.table.concurrency'),
+            current: model.concurrency.current,
+            limit: model.concurrency.limit,
+            usage: model.concurrency.usage,
+        },
+    ];
+    const maxUsage = meters.reduce((max, meter) => Math.max(max, isUnlimitedLimit(meter.limit) ? 0 : meter.usage), 0);
+    return (_jsxs("div", { className: "rounded-lg border bg-card", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-3", children: [_jsx(Gauge, { className: "size-4 text-[var(--status-canary-fg)]" }), _jsx("h3", { className: "text-sm font-semibold", children: t('models.form.usagePanel') }), _jsxs("span", { className: cn('ml-auto rounded border px-2 py-0.5 font-mono text-[11px]', usageBadgeClassName(maxUsage)), children: [t('models.form.usageMaxCapacity'), " ", maxUsage, "%"] })] }), _jsx("div", { className: "divide-y p-4", children: meters.map((meter) => (_jsx(UsageGauge, { label: meter.label, current: meter.current, limit: meter.limit, usage: meter.usage }, meter.key))) })] }));
+}
+function UsageGauge({ label, current, limit, usage, }) {
+    const { t } = useI18n();
+    const unlimited = isUnlimitedLimit(limit);
+    const boundedUsage = Math.max(0, Math.min(100, Math.round(usage)));
+    const tone = usageTone(boundedUsage, unlimited);
+    const capacityLabel = unlimited ? t('models.form.usageUnlimited') : `${boundedUsage}%`;
+    return (_jsxs("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] items-center gap-3 py-3 first:pt-0 last:pb-0", children: [_jsxs("div", { className: "relative h-[72px] w-24", "aria-label": `${label} ${t('models.form.usageCapacity')} ${capacityLabel}`, children: [_jsxs("svg", { viewBox: "0 0 120 78", className: "h-full w-full overflow-visible", role: "img", children: [_jsx("path", { d: "M 14 64 A 46 46 0 0 1 106 64", fill: "none", stroke: "var(--border)", strokeLinecap: "round", strokeWidth: "12" }), _jsx("path", { d: "M 14 64 A 46 46 0 0 1 106 64", fill: "none", pathLength: 100, stroke: tone.stroke, strokeDasharray: unlimited ? '4 8' : `${boundedUsage} 100`, strokeLinecap: "round", strokeWidth: "12" })] }), _jsxs("div", { className: "absolute inset-x-0 bottom-1 text-center", children: [_jsx("div", { className: "font-mono text-lg font-semibold leading-none", style: { color: tone.text }, children: capacityLabel }), _jsx("div", { className: "mt-1 font-mono text-[10px] uppercase text-muted-foreground", children: t('models.form.usageCapacity') })] })] }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "font-mono text-[11px] font-semibold uppercase text-foreground", children: label }), _jsx("span", { className: cn('rounded border px-1.5 py-0.5 font-mono text-[10.5px]', usageBadgeClassName(boundedUsage, unlimited)), children: capacityLabel })] }), _jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[10.5px] text-muted-foreground", children: t('models.form.usageCurrent') }), _jsx("div", { className: "truncate font-mono text-base font-semibold leading-tight", children: formatUsageNumber(current) })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[10.5px] text-muted-foreground", children: t('models.form.usageLimit') }), _jsx("div", { className: "truncate font-mono text-base font-semibold leading-tight", children: unlimited ? t('models.form.usageUnlimited') : formatUsageNumber(limit) })] })] })] })] }));
+}
+function isUnlimitedLimit(limit) {
+    const value = Number(limit);
+    return Number.isFinite(value) && value < 0;
+}
+function formatUsageNumber(value) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric))
+        return value || '0';
+    return new Intl.NumberFormat('en-US').format(numeric);
+}
+function usageBadgeClassName(usage, unlimited = false) {
+    if (unlimited)
+        return 'border-[var(--status-archived-bd)] bg-[var(--status-archived-bg)] text-[var(--status-archived-fg)]';
+    if (usage >= 90)
+        return 'border-destructive/30 bg-destructive/10 text-destructive';
+    if (usage >= 80)
+        return 'border-[var(--status-pending-bd)] bg-[var(--status-pending-bg)] text-[var(--status-pending-fg)]';
+    return 'border-[var(--status-canary-bd)] bg-[var(--status-canary-bg)] text-[var(--status-canary-fg)]';
+}
+function usageTone(usage, unlimited) {
+    if (unlimited) {
+        return { stroke: 'var(--status-archived-dot)', text: 'var(--status-archived-fg)' };
+    }
+    if (usage >= 90) {
+        return { stroke: 'var(--destructive)', text: 'var(--destructive)' };
+    }
+    if (usage >= 80) {
+        return { stroke: 'var(--status-pending-dot)', text: 'var(--status-pending-fg)' };
+    }
+    return { stroke: 'var(--status-canary-dot)', text: 'var(--status-canary-fg)' };
+}
+function ReferencePanel({ references, loading }) {
+    const { t } = useI18n();
+    const items = Object.keys(MODEL_REFERENCE_LABEL_KEYS).map((key) => ({
+        key,
+        label: t(MODEL_REFERENCE_LABEL_KEYS[key]),
+        count: references[key],
+    }));
+    return (_jsxs("div", { className: "rounded-lg border bg-card", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-3", children: [_jsx(Link2, { className: "size-4 text-muted-foreground" }), _jsx("h3", { className: "text-sm font-semibold", children: t('models.form.referencedBy') }), _jsx("span", { className: "ml-auto font-mono text-[11px] text-muted-foreground", children: loading ? t('common.loading') : `${t('models.form.activeReferences')} ${references.total}` })] }), _jsx("div", { className: "p-4", children: references.total === 0 && !loading ? (_jsx("div", { className: "rounded-md border bg-muted/35 px-3 py-2 text-sm text-muted-foreground", children: t('models.form.noActiveReferences') })) : (items.map((item) => (_jsxs("div", { className: "-mx-4 flex items-center justify-between gap-2 border-b px-4 py-2.5 last:border-b-0", children: [_jsx("div", { className: "min-w-0 text-xs font-medium", children: item.label }), _jsx("div", { className: "font-mono text-[11px] text-muted-foreground", children: item.count })] }, item.key)))) })] }));
+}
+function ReadonlyNotice() {
+    const { t } = useI18n();
+    return (_jsx("div", { className: "rounded-lg border border-[var(--status-canary-bd)] bg-[var(--status-canary-bg)] p-4 text-[var(--status-canary-fg)]", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Lock, { className: "mt-0.5 size-4 shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-sm font-semibold", children: t('models.form.readonlyTitle') }), _jsx("div", { className: "mt-1 text-[12.5px] leading-relaxed", children: t('models.form.readonlyDescription') })] })] }) }));
+}
+function DangerPanel({ model, references, pending, disabled, onToggleStatus, onDelete, }) {
+    const { t } = useI18n();
+    const statusLabel = model.status === 'disabled' ? t('models.action.enable') : t('models.action.disable');
+    return (_jsxs("div", { className: "rounded-lg border border-destructive/40 bg-card", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-destructive/30 px-4 py-3 text-destructive", children: [_jsx(AlertTriangle, { className: "size-4" }), _jsx("h3", { className: "text-sm font-semibold", children: t('models.form.dangerZone') })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-medium", children: t('models.form.disableTemporarily') }), _jsx("div", { className: "mt-0.5 text-[11.5px] text-muted-foreground", children: t('models.form.disableHelp') })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8", disabled: disabled || pending, onClick: onToggleStatus, children: [pending ? _jsx(Loader2, { className: "size-3.5 animate-spin" }) : null, statusLabel] })] }), _jsxs("div", { className: "flex items-center justify-between gap-3 border-t pt-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-medium", children: t('models.action.delete') }), _jsx("div", { className: "mt-0.5 text-[11.5px] text-destructive", children: references.total > 0 ? t('models.form.deleteBlockedHelp') : t('models.deleteDialogDescription') })] }), _jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "h-8", disabled: disabled || pending, onClick: onDelete, children: t('models.action.delete') })] })] })] }));
+}
+export function ModelFormPage({ mode, projectId, modelId, copyFromId, }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    const router = useRouter();
+    const isNew = mode === 'new';
+    const modelQuery = useProjectModel(projectId, isNew ? '' : (modelId ?? ''));
+    const copyQuery = useProjectModel(projectId, isNew ? (copyFromId ?? '') : '');
+    const projectModelsQuery = useProjectModels(projectId, { autoRefresh: false });
+    const referencesQuery = useProjectModelReferences(projectId, isNew ? '' : (modelId ?? ''), !isNew && Boolean(modelId));
+    const probeMutation = useProbeProjectModel(projectId);
+    const draftProbeMutation = useProbeDraftProjectModel(projectId);
+    const createMutation = useCreateProjectModel(projectId);
+    const updateMutation = useUpdateProjectModel(projectId);
+    const deleteMutation = useDeleteProjectModel(projectId);
+    const newModelFormRef = useRef(null);
+    const editModelFormRef = useRef(null);
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [editDirty, setEditDirty] = useState(false);
+    const [editDraftVersion, setEditDraftVersion] = useState(0);
+    const [apiKeyEdited, setApiKeyEdited] = useState(false);
+    const [newFormVersion, setNewFormVersion] = useState(0);
+    const [newApiKeySeed, setNewApiKeySeed] = useState('');
+    const [quickFillDraft, setQuickFillDraft] = useState(null);
+    const [newNameDraft, setNewNameDraft] = useState('');
+    const [editNameDraft, setEditNameDraft] = useState('');
+    const [pendingNewIntent, setPendingNewIntent] = useState(null);
+    const [submitError, setSubmitError] = useState(null);
+    const [probeFeedback, setProbeFeedback] = useState(null);
+    const [draftProbeFeedback, setDraftProbeFeedback] = useState(null);
+    const [draftProbeRecord, setDraftProbeRecord] = useState(null);
+    const copySuffix = t('models.copySuffix');
+    const copySource = useMemo(() => isNew && copyFromId && copyQuery.data ? projectModelForCopy(dtoToProjectModel(copyQuery.data), copySuffix) : null, [isNew, copyFromId, copyQuery.data, copySuffix]);
+    const waitingForCopy = isNew && !!copyFromId && !copySource;
+    // Gate the copy-source skeleton behind the 300ms threshold so a fast copy fetch doesn't flash the full-page skeleton.
+    const copyLoading = useDelayedLoading(waitingForCopy);
+    const fetchedModel = useMemo(() => (modelQuery.data ? dtoToProjectModel(modelQuery.data) : null), [modelQuery.data]);
+    const quickFillModel = useMemo(() => (isNew && quickFillDraft ? projectModelFromQuickFillDraft(quickFillDraft) : null), [isNew, quickFillDraft]);
+    const projectModels = useMemo(() => projectModelsQuery.data?.data ?? [], [projectModelsQuery.data]);
+    const model = quickFillModel ?? copySource ?? fetchedModel ?? PROJECT_MODEL_FALLBACK;
+    const useDefaults = !isNew || !!copySource || !!quickFillModel;
+    const liveModel = model;
+    const isEditable = isNew || isProjectModelEditable(model);
+    const readOnly = !isEditable;
+    const references = referencesQuery.data ?? EMPTY_MODEL_REFERENCES;
+    const deleteBlocked = references.total > 0;
+    const initialEditSignature = useMemo(() => (!isNew && model.id ? projectEditSignatureFromModel(model) : ''), [isNew, model]);
+    const nameTakenMessage = t('common.formError.nameTaken');
+    const newNameTaken = isNew && isProjectNameTaken(newNameDraft, projectModels);
+    const editNameTaken = !isNew && isProjectNameTaken(editNameDraft, projectModels, model.id);
+    const activeNameError = newNameTaken || editNameTaken ? nameTakenMessage : null;
+    const refreshEditDirty = useCallback(() => {
+        if (isNew || !editModelFormRef.current || !initialEditSignature)
+            return;
+        setEditDirty(projectEditSignatureFromForm(editModelFormRef.current, apiKeyEdited) !== initialEditSignature);
+    }, [apiKeyEdited, initialEditSignature, isNew]);
+    const scheduleEditDirtyRefresh = useCallback(() => {
+        if (typeof window === 'undefined')
+            return;
+        window.requestAnimationFrame(refreshEditDirty);
+    }, [refreshEditDirty]);
+    const applyQuickFillDraft = useCallback((draft) => {
+        const currentApiKey = newModelFormRef.current
+            ? String(new FormData(newModelFormRef.current).get('apiKey') ?? '')
+            : '';
+        setNewApiKeySeed(currentApiKey);
+        setQuickFillDraft(draft);
+        setSubmitError(null);
+        setDraftProbeFeedback(null);
+        setDraftProbeRecord(null);
+        setNewFormVersion((version) => version + 1);
+    }, []);
+    useEffect(() => {
+        if (!isNew)
+            return;
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- copied / quick-filled model name seeds an uncontrolled form field
+        setNewNameDraft(model.name);
+    }, [isNew, model.name, newFormVersion]);
+    useEffect(() => {
+        if (isNew)
+            return;
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- loaded model name seeds duplicate-name validation
+        setEditNameDraft(model.name);
+    }, [editDraftVersion, isNew, model.id, model.name]);
+    useEffect(() => {
+        if (isNew)
+            return;
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- async model detail establishes the clean edit baseline
+        setEditDirty(false);
+        setApiKeyEdited(false);
+    }, [initialEditSignature, isNew]);
+    useEffect(() => {
+        refreshEditDirty();
+    }, [refreshEditDirty]);
+    const handleEditSubmit = (event) => {
+        event.preventDefault();
+        if (readOnly || !model.id || !editDirty || updateMutation.isPending)
+            return;
+        const result = readProjectModelUpdatePayload(event.currentTarget, apiKeyEdited);
+        if (!result.ok) {
+            setSubmitError(result.error === 'required'
+                ? t('common.formError.requiredMissing')
+                : result.error === 'json'
+                    ? t('common.formError.invalidJson')
+                    : t('common.formError.invalidNumber'));
+            return;
+        }
+        if (isProjectNameTaken(result.body.name, projectModels, model.id)) {
+            setSubmitError(nameTakenMessage);
+            return;
+        }
+        setSubmitError(null);
+        updateMutation.mutate({ modelId: model.id, body: result.body }, {
+            onSuccess: () => {
+                setEditDirty(false);
+                setApiKeyEdited(false);
+            },
+            onError: (error) => {
+                const message = getApiErrorMessage(error);
+                setSubmitError(message === 'model_name_taken' ? nameTakenMessage : (message ?? t('common.loadFailedRefresh')));
+            },
+        });
+    };
+    const resetEditDraft = () => {
+        setSubmitError(null);
+        setApiKeyEdited(false);
+        setEditDirty(false);
+        setEditDraftVersion((version) => version + 1);
+    };
+    const toggleModelStatus = () => {
+        if (!model.id || editDirty || updateMutation.isPending)
+            return;
+        const status = model.status === 'disabled' ? 'enabled' : 'disabled';
+        updateMutation.mutate({ modelId: model.id, body: { status } }, {
+            onError: (error) => setSubmitError(error.message),
+        });
+    };
+    const confirmDeleteModel = () => {
+        if (!model.id || deleteBlocked || deleteMutation.isPending)
+            return;
+        deleteMutation.mutate({ modelId: model.id }, {
+            onSuccess: () => router.push(`/models`),
+            onError: (error) => setSubmitError(error.message),
+        });
+    };
+    const testConnectivity = () => {
+        if (!model.id)
+            return;
+        const startedAt = Date.now();
+        setProbeFeedback({ status: 'running', durationMs: null });
+        probeMutation.mutate(model.id, {
+            onSuccess: (result) => {
+                setProbeFeedback({
+                    status: result.status === 'success' ? 'success' : 'failed',
+                    durationMs: result.durationMs,
+                    errorMessage: result.error,
+                });
+            },
+            onError: (error) => {
+                setProbeFeedback({
+                    status: 'failed',
+                    durationMs: Date.now() - startedAt,
+                    errorMessage: getApiErrorMessage(error),
+                });
+            },
+        });
+    };
+    const refreshDraftProbeFreshness = useCallback(() => {
+        if (!isNew || !draftProbeRecord || !newModelFormRef.current)
+            return;
+        const result = readProjectModelCreatePayload(newModelFormRef.current, 'enable');
+        if (!result.ok || projectModelCreateConnectivitySignature(result.body) !== draftProbeRecord.signature) {
+            setDraftProbeFeedback(null);
+            setDraftProbeRecord(null);
+        }
+    }, [draftProbeRecord, isNew]);
+    const testDraftConnectivity = () => {
+        if (!newModelFormRef.current)
+            return;
+        const startedAt = Date.now();
+        const form = new FormData(newModelFormRef.current);
+        const name = textFromForm(form, 'name');
+        const providerType = textFromForm(form, 'providerType');
+        const providerModelId = textFromForm(form, 'providerModelId');
+        const endpoint = textFromForm(form, 'endpoint');
+        const apiKey = String(form.get('apiKey') ?? '');
+        const contextWindowTokens = positiveIntegerFromForm(form, 'contextWindowTokens');
+        const rpmLimit = rateLimitFromForm(form, 'rpmLimit');
+        const tpmLimit = rateLimitFromForm(form, 'tpmLimit');
+        const concurrencyLimit = concurrencyLimitFromForm(form, 'concurrencyLimit');
+        const inputPrice = nonnegativeNumberFromForm(form, 'inputPrice');
+        const outputPrice = nonnegativeNumberFromForm(form, 'outputPrice');
+        const extraBody = jsonObjectFromForm(form, 'extraBody');
+        const imageCapability = draftImageCapability(form);
+        setDraftProbeFeedback({ status: 'running', durationMs: null });
+        setDraftProbeRecord(null);
+        if ([name, providerType, providerModelId, endpoint, apiKey].some((value) => !value.trim()) ||
+            contextWindowTokens === null ||
+            rpmLimit === null ||
+            tpmLimit === null ||
+            concurrencyLimit === null ||
+            inputPrice === null ||
+            outputPrice === null) {
+            setDraftProbeFeedback({
+                status: 'failed',
+                durationMs: 0,
+                errorMessage: t('common.formError.requiredMissing'),
+            });
+            return;
+        }
+        if (extraBody === null) {
+            setDraftProbeFeedback({
+                status: 'failed',
+                durationMs: 0,
+                errorMessage: t('common.formError.invalidJson'),
+            });
+            return;
+        }
+        const draftBody = {
+            name,
+            providerType,
+            providerModelId,
+            endpoint,
+            apiKey,
+            contextWindowTokens,
+            rpm: { limit: rpmLimit },
+            tpm: { limit: tpmLimit },
+            concurrency: { limit: concurrencyLimit },
+            autoConcurrency: form.has('autoConcurrency'),
+            pricing: { inputPerMillion: inputPrice, outputPerMillion: outputPrice },
+            capabilities: { image: imageCapability },
+            extraBody,
+        };
+        const draftSignature = projectModelCreateConnectivitySignature(draftBody);
+        draftProbeMutation.mutate(draftBody, {
+            onSuccess: (result) => {
+                const currentResult = newModelFormRef.current
+                    ? readProjectModelCreatePayload(newModelFormRef.current, 'enable')
+                    : null;
+                if (!currentResult?.ok || projectModelCreateConnectivitySignature(currentResult.body) !== draftSignature) {
+                    return;
+                }
+                setDraftProbeFeedback({
+                    status: result.status === 'success' ? 'success' : 'failed',
+                    durationMs: result.durationMs,
+                    errorMessage: result.error,
+                });
+                setDraftProbeRecord({
+                    status: result.status,
+                    probedAt: result.probedAt,
+                    error: result.error,
+                    signature: draftSignature,
+                });
+            },
+            onError: (error) => {
+                setDraftProbeRecord(null);
+                setDraftProbeFeedback({
+                    status: 'failed',
+                    durationMs: Date.now() - startedAt,
+                    errorMessage: getApiErrorMessage(error),
+                });
+            },
+        });
+    };
+    const handleNewSubmit = (event) => {
+        event.preventDefault();
+        if (createMutation.isPending || draftProbeMutation.isPending)
+            return;
+        const submitter = event.nativeEvent.submitter;
+        const intent = submitter instanceof HTMLElement && submitter.dataset.modelSubmitIntent === 'draft' ? 'draft' : 'enable';
+        const result = readProjectModelCreatePayload(event.currentTarget, intent);
+        if (!result.ok) {
+            setSubmitError(result.error === 'required'
+                ? t('common.formError.requiredMissing')
+                : result.error === 'json'
+                    ? t('common.formError.invalidJson')
+                    : t('common.formError.invalidNumber'));
+            return;
+        }
+        if (isProjectNameTaken(result.body.name, projectModels)) {
+            setSubmitError(nameTakenMessage);
+            return;
+        }
+        setSubmitError(null);
+        setPendingNewIntent(intent);
+        const currentSignature = projectModelCreateConnectivitySignature(result.body);
+        const createBody = draftProbeRecord && draftProbeRecord.signature === currentSignature
+            ? {
+                ...result.body,
+                initialProbe: {
+                    status: draftProbeRecord.status,
+                    probedAt: draftProbeRecord.probedAt,
+                    error: draftProbeRecord.error,
+                },
+            }
+            : result.body;
+        createMutation.mutate(createBody, {
+            onSuccess: () => router.push(`/models`),
+            onError: (error) => {
+                const message = getApiErrorMessage(error);
+                setSubmitError(message === 'model_name_taken' ? nameTakenMessage : (message ?? t('common.loadFailedRefresh')));
+            },
+            onSettled: () => setPendingNewIntent(null),
+        });
+    };
+    const headerProbePending = isNew ? draftProbeMutation.isPending : probeMutation.isPending;
+    const headerProbeFeedback = isNew ? draftProbeFeedback : probeFeedback;
+    const headerProbeDisabled = isNew ? draftProbeMutation.isPending : !model.id || probeMutation.isPending;
+    const headerProbeAction = isNew ? testDraftConnectivity : testConnectivity;
+    if (waitingForCopy) {
+        return (_jsx(Main, { className: "gap-0 bg-muted/35 p-0", children: _jsx("div", { className: "mx-auto w-full max-w-[1440px] px-4 pb-24 pt-6 sm:px-6 lg:px-8", "data-testid": "model-new-page", children: copyLoading ? _jsx(DetailPageSkeleton, {}) : null }) }));
+    }
+    return (_jsxs(Main, { className: "gap-0 bg-muted/35 p-0", children: [_jsxs("div", { className: "mx-auto w-full max-w-[1440px] px-4 pb-24 pt-6 sm:px-6 lg:px-8", "data-testid": isNew ? 'model-new-page' : 'model-edit-page', children: [_jsxs("div", { className: "mb-6 flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "mb-1 font-mono text-[11.5px] text-muted-foreground", children: [_jsx(Link, { className: "hover:text-foreground", href: `/models`, children: t('models.title') }), _jsx("span", { className: "px-1.5", children: "/" }), _jsx("span", { className: "text-foreground", children: isNew ? t('models.create') : readOnly ? t('models.form.detail') : t('models.form.edit') })] }), _jsx("h1", { className: "text-[26px] font-semibold", children: isNew ? t('models.create') : model.name }), !isNew && (_jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [_jsx(SourceAndStatus, { model: model }), _jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: [model.provider, " \u00B7 ", model.providerModelId, " \u00B7 ", t('models.form.updated'), ' ', formatDateTime(model.lastUpdated)] })] }))] }), _jsxs("div", { className: "flex flex-col items-start gap-2 xl:items-end", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "h-9", children: _jsx(Link, { href: `/models`, children: isNew ? t('common.cancel') : t('common.back') }) }), !isNew && isEditable && model.id && (_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "h-9", title: t('models.action.copyHelp'), children: _jsxs(Link, { href: `/models/new?copyFrom=${model.id}`, "aria-label": t('models.action.copy'), children: [_jsx(CopyPlus, { className: "size-4" }), t('models.action.copy')] }) })), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-9", onClick: headerProbeAction, disabled: headerProbeDisabled, "aria-busy": headerProbePending, children: [headerProbePending ? _jsx(Loader2, { className: "size-4 animate-spin" }) : _jsx(Cable, { className: "size-4" }), headerProbePending ? t('models.probe.running') : t('models.action.test')] }), isNew ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "submit", form: "project-model-new-form", variant: "outline", size: "sm", className: "h-9", "data-model-submit-intent": "draft", disabled: createMutation.isPending || draftProbeMutation.isPending || newNameTaken, "aria-busy": pendingNewIntent === 'draft', children: [pendingNewIntent === 'draft' ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Save, { className: "size-4" })), t('models.form.saveDraft')] }), _jsxs(Button, { type: "submit", form: "project-model-new-form", size: "sm", className: "h-9", "data-model-submit-intent": "enable", "data-testid": "model-new-submit", disabled: createMutation.isPending || draftProbeMutation.isPending || newNameTaken, "aria-busy": pendingNewIntent === 'enable', children: [pendingNewIntent === 'enable' ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Check, { className: "size-4" })), t('models.form.saveAndEnable')] })] })) : isEditable ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-9", disabled: editDirty || updateMutation.isPending, onClick: toggleModelStatus, children: [_jsx(KeyRound, { className: "size-4" }), model.status === 'disabled' ? t('models.action.enable') : t('models.action.disable')] }), _jsxs(Button, { type: "button", variant: "destructive", size: "sm", className: "h-9", disabled: editDirty || referencesQuery.isLoading || updateMutation.isPending || deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: [_jsx(Trash2, { className: "size-4" }), t('models.action.delete')] })] })) : null] }), _jsx(ModelProbeStatus, { feedback: headerProbeFeedback, className: "w-full xl:w-[380px]" })] })] }), isNew ? (_jsxs("form", { id: "project-model-new-form", ref: newModelFormRef, onSubmit: handleNewSubmit, onInput: refreshDraftProbeFreshness, onChange: refreshDraftProbeFreshness, className: "space-y-4", children: [_jsx(ModelPresetQuickFill, { selectedKey: quickFillDraft?.key, disabled: createMutation.isPending, onApply: applyQuickFillDraft }), submitError && (_jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: submitError })), _jsx(BasicSection, { mode: mode, useDefaults: useDefaults, model: model, readOnly: readOnly, nameError: activeNameError, onNameChange: setNewNameDraft }), _jsx(CredentialSection, { mode: mode, useDefaults: useDefaults, model: model, readOnly: readOnly, projectId: projectId, initialApiKey: newApiKeySeed }), _jsx(CapabilitiesSection, { mode: mode, useDefaults: useDefaults, model: model, readOnly: readOnly }), _jsx(QuotaSection, { mode: mode, useDefaults: useDefaults, model: liveModel, readOnly: readOnly }), _jsx(PricingSection, { useDefaults: useDefaults, model: model, readOnly: readOnly }), _jsx(TestConnectivitySection, { feedback: draftProbeFeedback, isTesting: draftProbeMutation.isPending, onTest: testDraftConnectivity })] }, newFormVersion)) : (_jsxs("form", { id: "project-model-edit-form", ref: editModelFormRef, onSubmit: handleEditSubmit, onInput: scheduleEditDirtyRefresh, onChange: scheduleEditDirtyRefresh, className: "grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]", children: [_jsxs("div", { className: "space-y-4", children: [submitError && (_jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: submitError })), readOnly && _jsx(ReadonlyNotice, {}), _jsx(BasicSection, { mode: mode, useDefaults: useDefaults, model: model, readOnly: readOnly, nameError: activeNameError, onNameChange: setEditNameDraft, onDraftChange: scheduleEditDirtyRefresh }), _jsx(CredentialSection, { mode: mode, useDefaults: useDefaults, model: model, readOnly: readOnly, projectId: projectId, onDraftChange: scheduleEditDirtyRefresh, onApiKeyEdited: () => {
+                                            setApiKeyEdited(true);
+                                            scheduleEditDirtyRefresh();
+                                        } }), _jsx(CapabilitiesSection, { mode: mode, useDefaults: useDefaults, model: model, readOnly: readOnly, onDraftChange: scheduleEditDirtyRefresh }), _jsx(QuotaSection, { mode: mode, useDefaults: useDefaults, model: liveModel, readOnly: readOnly }), _jsx(PricingSection, { useDefaults: useDefaults, model: model, readOnly: readOnly })] }), _jsxs("aside", { className: "space-y-4", children: [_jsx(UsagePanel, { model: liveModel }), _jsx(ReferencePanel, { references: references, loading: referencesQuery.isLoading }), isEditable && (_jsx(DangerPanel, { model: model, references: references, pending: updateMutation.isPending || deleteMutation.isPending, disabled: editDirty || referencesQuery.isLoading, onToggleStatus: toggleModelStatus, onDelete: () => setDeleteOpen(true) }))] })] }, `${model.id}-${editDraftVersion}`))] }), isNew && (_jsx("div", { className: "fixed bottom-0 left-0 right-0 z-20 border-t bg-background/95 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/75 md:left-[var(--sidebar-width)]", children: _jsx("div", { className: "mx-auto flex max-w-[1440px] justify-end", children: _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsx(Link, { href: `/models`, children: t('common.cancel') }) }), _jsxs(Button, { type: "submit", form: "project-model-new-form", variant: "outline", size: "sm", "data-model-submit-intent": "draft", disabled: createMutation.isPending || draftProbeMutation.isPending || newNameTaken, "aria-busy": pendingNewIntent === 'draft', children: [pendingNewIntent === 'draft' ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Save, { className: "size-4" })), t('models.form.saveDraft')] }), _jsxs(Button, { type: "submit", form: "project-model-new-form", size: "sm", "data-model-submit-intent": "enable", disabled: createMutation.isPending || draftProbeMutation.isPending || newNameTaken, "aria-busy": pendingNewIntent === 'enable', children: [pendingNewIntent === 'enable' ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Check, { className: "size-4" })), t('models.form.saveAndEnable')] })] }) }) })), !isNew && isEditable && (_jsx("div", { className: "fixed bottom-0 left-0 right-0 z-20 border-t bg-background/95 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/75 md:left-[var(--sidebar-width)]", children: _jsx("div", { className: "mx-auto flex max-w-[1440px] justify-end", children: _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: !editDirty || updateMutation.isPending, onClick: resetEditDraft, children: t('models.form.cancelChanges') }), _jsxs(Button, { type: "submit", form: "project-model-edit-form", size: "sm", disabled: !editDirty || updateMutation.isPending || editNameTaken, "aria-busy": updateMutation.isPending, children: [updateMutation.isPending ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Save, { className: "size-4" })), t('models.form.saveChanges')] })] }) }) })), _jsx(Dialog, { open: deleteOpen, onOpenChange: setDeleteOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: deleteBlocked ? t('models.form.deleteBlockedTitle') : t('models.deleteDialogTitle') }), _jsx(DialogDescription, { children: deleteBlocked ? t('models.form.deleteBlockedDescription') : t('models.deleteDialogDescription') })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: cn('rounded-md border p-3 text-sm', deleteBlocked ? 'border-destructive/30 bg-destructive/5 text-destructive' : 'bg-muted/45'), children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: deleteBlocked ? t('models.form.activeReferences') : t('models.deleteDialogTarget') }), _jsx("div", { className: "mt-1 font-medium", children: model.name }), deleteBlocked && _jsx("div", { className: "mt-1 text-xs", children: t('models.form.deleteBlockedHelp') })] }), deleteBlocked && (_jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: Object.keys(MODEL_REFERENCE_LABEL_KEYS).map((key) => (_jsxs("div", { className: "flex items-center justify-between rounded-md border p-2 text-sm", children: [_jsx("span", { children: t(MODEL_REFERENCE_LABEL_KEYS[key]) }), _jsx("span", { className: "font-mono text-xs", children: references[key] })] }, key))) }))] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", onClick: () => setDeleteOpen(false), children: [_jsx(X, { className: "size-4" }), deleteBlocked ? t('common.close') : t('common.cancel')] }), !deleteBlocked && (_jsxs(Button, { type: "button", variant: "destructive", disabled: deleteMutation.isPending, onClick: confirmDeleteModel, children: [deleteMutation.isPending ? _jsx(Loader2, { className: "size-4 animate-spin" }) : null, t('models.deleteDialogConfirm')] }))] })] }) })] }));
+}
+//# sourceMappingURL=model-form-page.js.map