@proofhound/web-ui 0.1.6

package/dist/screens/releases/release-new-page.js

@@ -0,0 +1,816 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useMemo, useState } from 'react';
+import { CANARY_RELEASE_FILTER_MAX_DEPTH, CANARY_RELEASE_FILTER_OPS, DEFAULT_PROMPT_LANGUAGE, canaryReleaseFilterRulesSchema, } from '@proofhound/shared';
+import { AlertCircle, Check, Filter, ImageIcon, Loader2, Plus, Search, X } from 'lucide-react';
+import { Main } from '@proofhound/ui/layout';
+import { ModalityIconGroup, Button, Input, Label, cn, } from '@proofhound/ui';
+import { PromptVersionPickerRow, PromptVersionPickerTag } from '../../components';
+import { useConnector, useConnectors } from '../../hooks';
+import { useCreateCanaryRelease, useStartCanaryRelease } from '../../hooks';
+import { useDateTimeFormatter } from '../../hooks';
+import { useProjectModels } from '../../hooks';
+import { useCreateProductionRelease } from '../../hooks';
+import { usePrompt, usePrompts } from '../../hooks';
+import { useDelayedLoading } from '../../hooks';
+import { useReleaseLineList } from '../../hooks';
+import { useI18n } from '../../i18n';
+import { getApiErrorMessage, getReleaseLineId } from '../../lib';
+import { composePromptPreview } from '../prompts/prompt-preview';
+import { renderPromptPreviewParts } from '../prompts/prompt-preview-parts';
+import { VARIABLE_TONE_CLASSES } from '../prompts/prompt-ui';
+import { deriveRecordCategoryOptions, releaseRecordModeFromCategories } from './release-new-model';
+const IMAGE_PROMPT_VARIABLE_TYPES = new Set(['image', 'image_url', 'image_base64']);
+const DEFAULT_RPM = 60;
+const DEFAULT_TPM = 120_000;
+const DEFAULT_CONCURRENCY = 4;
+const DEFAULT_QUEUE_TRAFFIC_PERCENT = 10;
+const TRAFFIC_PERCENT_PRESETS = [1, 5, 20, 50, 100];
+function buildDefaultReleaseName() {
+    const now = new Date();
+    const yyyy = now.getFullYear();
+    const mm = String(now.getMonth() + 1).padStart(2, '0');
+    const dd = String(now.getDate()).padStart(2, '0');
+    return `release-${yyyy}${mm}${dd}-`;
+}
+function formatTemplate(template, values) {
+    return template.replace(/\{(\w+)\}/g, (_, key) => {
+        const value = values[key];
+        return value === undefined ? `{${key}}` : String(value);
+    });
+}
+function formatThousand(value) {
+    return value.toLocaleString('en-US').replace(/,/g, ' ');
+}
+function formatPrice(value) {
+    if (!Number.isFinite(value))
+        return '0';
+    if (value === 0)
+        return '0';
+    if (value >= 1)
+        return value
+            .toFixed(2)
+            .replace(/\.00$/, '')
+            .replace(/(\.\d)0$/, '$1');
+    return value.toFixed(3).replace(/0+$/, '').replace(/\.$/, '');
+}
+function formatModelLimit(limit) {
+    return limit < 0 ? '∞' : formatThousand(limit);
+}
+function modelLimitDefaultValue(limit, fallback) {
+    return String(limit > 0 ? limit : fallback);
+}
+function formatContextWindow(tokens) {
+    if (!tokens || tokens <= 0)
+        return '—';
+    if (tokens >= 1_000_000) {
+        const value = tokens / 1_000_000;
+        return Number.isInteger(value) ? `${value}M` : `${value.toFixed(1)}M`;
+    }
+    if (tokens >= 1000)
+        return `${Math.round(tokens / 1000)}K`;
+    return String(tokens);
+}
+function positiveIntegerFromText(value) {
+    const parsed = Number(value.trim());
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}
+function numberTextWithinLimit(value, limit) {
+    const parsed = positiveIntegerFromText(value);
+    return parsed !== null && (!limit || limit < 0 || parsed <= limit);
+}
+function temperatureFromText(value) {
+    const parsed = Number(value.trim());
+    return Number.isFinite(parsed) && parsed >= 0 && parsed <= 2 ? parsed : null;
+}
+function trafficPercentFromText(value) {
+    const parsed = Number(value.trim());
+    return Number.isInteger(parsed) && parsed > 0 && parsed <= 100 ? parsed : null;
+}
+function initialTrafficPercentFromParams(params) {
+    const percent = params.get('trafficPercent');
+    if (percent && trafficPercentFromText(percent) !== null)
+        return percent;
+    const ratio = Number(params.get('trafficRatio'));
+    if (Number.isFinite(ratio) && ratio > 0 && ratio <= 1)
+        return String(Math.round(ratio * 100));
+    return String(DEFAULT_QUEUE_TRAFFIC_PERCENT);
+}
+function initialTrafficModeFromParams(params) {
+    return params.get('trafficMode') === 'dual_run' ? 'dual_run' : 'split';
+}
+function normalizeLineId(value) {
+    if (!value)
+        return '';
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+}
+function isRecord(value) {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+function normalizeFieldKey(value) {
+    return value
+        .trim()
+        .replace(/^\.+|\.+$/g, '')
+        .replace(/\.+/g, '.');
+}
+function fieldOptionFromUnknown(value) {
+    if (typeof value === 'string') {
+        const key = normalizeFieldKey(value);
+        return key ? { key, type: 'unknown', description: '' } : null;
+    }
+    if (!isRecord(value))
+        return null;
+    const rawKey = value.key ?? value.name ?? value.field;
+    const key = typeof rawKey === 'string' ? normalizeFieldKey(rawKey) : '';
+    if (!key)
+        return null;
+    return {
+        key,
+        type: typeof value.type === 'string' ? value.type : 'unknown',
+        description: typeof value.description === 'string' ? value.description : '',
+    };
+}
+function flattenSchemaProperties(properties, prefix = '') {
+    const skipKeys = new Set([
+        'type',
+        'properties',
+        'required',
+        'additionalProperties',
+        '$schema',
+        'title',
+        'description',
+    ]);
+    return Object.entries(properties).flatMap(([key, fieldValue]) => {
+        if (skipKeys.has(key))
+            return [];
+        const record = isRecord(fieldValue) ? fieldValue : {};
+        const rawType = typeof record.type === 'string' ? record.type : typeof fieldValue;
+        const fullKey = normalizeFieldKey(prefix ? `${prefix}.${key}` : key);
+        const current = {
+            key: fullKey,
+            type: rawType,
+            description: typeof record.description === 'string' ? record.description : '',
+        };
+        if (rawType === 'object' && isRecord(record.properties)) {
+            const children = flattenSchemaProperties(record.properties, fullKey);
+            return children.length > 0 ? [current, ...children] : [current];
+        }
+        return [current];
+    });
+}
+function schemaToFieldOptions(value) {
+    if (!isRecord(value))
+        return [];
+    const properties = isRecord(value.properties) ? value.properties : value;
+    return flattenSchemaProperties(properties);
+}
+function dedupeFieldOptions(fields) {
+    const seen = new Set();
+    const result = [];
+    for (const field of fields) {
+        const key = normalizeFieldKey(field.key);
+        if (!key || seen.has(key))
+            continue;
+        seen.add(key);
+        result.push({ ...field, key });
+    }
+    return result;
+}
+function extractFieldOptionsFromConnector(connector) {
+    if (!connector)
+        return [];
+    const config = isRecord(connector.config) ? connector.config : {};
+    const candidates = [
+        config.expectedPayloadSchema,
+        config.confirmedPayloadSchema,
+        config.lastPeekPayloadSchema,
+        config.peekPayloadSchema,
+        config.fieldSchema,
+        config.fields,
+        config.payloadFields,
+    ];
+    const options = [];
+    for (const candidate of candidates) {
+        if (!candidate)
+            continue;
+        if (Array.isArray(candidate)) {
+            options.push(...candidate.map(fieldOptionFromUnknown).filter((field) => Boolean(field)));
+        }
+        else {
+            options.push(...schemaToFieldOptions(candidate));
+        }
+    }
+    return dedupeFieldOptions(options);
+}
+function inferSourceForVariable(variable, fields) {
+    const fieldNames = new Set(fields.map((field) => field.key));
+    const candidates = [
+        variable.datasetField,
+        variable.name,
+        `payload.${variable.name}`,
+        `data.${variable.name}`,
+        `body.${variable.name}`,
+    ].filter((value) => Boolean(value));
+    for (const candidate of candidates) {
+        if (fieldNames.has(candidate))
+            return candidate;
+    }
+    const suffix = fields.find((field) => field.key.endsWith(`.${variable.name}`));
+    return suffix?.key ?? '';
+}
+function inferExternalIdField(fields) {
+    const candidates = ['id', 'external_id', 'externalId', 'payload.id', 'data.id', 'body.id'];
+    const fieldNames = new Set(fields.map((field) => field.key));
+    for (const candidate of candidates) {
+        if (fieldNames.has(candidate))
+            return candidate;
+    }
+    return fields.find((field) => /(^|\.)id$/iu.test(field.key))?.key ?? '';
+}
+function productionMappingToRecord(value) {
+    const mapping = {};
+    if (!isRecord(value))
+        return mapping;
+    for (const [target, source] of Object.entries(value)) {
+        if (typeof source === 'string')
+            mapping[target] = source;
+    }
+    return mapping;
+}
+function mergeIds(first, second) {
+    return Array.from(new Set([...first, ...second].filter(Boolean)));
+}
+function normalizeInheritedFilterRules(value) {
+    const parsed = canaryReleaseFilterRulesSchema.safeParse(value ?? null);
+    return parsed.success ? parsed.data : null;
+}
+function mapPromptVersionToOption(prompt, version, formatDateTime) {
+    const promptLanguage = version.promptLanguage ?? DEFAULT_PROMPT_LANGUAGE;
+    return {
+        id: version.id,
+        name: prompt.name,
+        version: `v${version.versionNumber}`,
+        isLatest: version.versionNumber === prompt.latestVersionNumber,
+        isOnline: version.versionNumber === prompt.currentOnlineVersionNumber,
+        status: version.status,
+        updatedAt: formatDateTime(version.createdAt),
+        variables: version.variables,
+        outputSchema: version.outputSchema,
+        promptPreview: composePromptPreview({
+            body: version.body,
+            outputSchema: version.outputSchema,
+            promptLanguage,
+        }),
+    };
+}
+function Radio({ checked }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cn('mt-0.5 inline-flex size-4 flex-none items-center justify-center rounded-full border', checked ? 'border-primary bg-primary/10' : 'border-border bg-background'), children: checked ? _jsx("span", { className: "size-2 rounded-full bg-primary" }) : null }));
+}
+function CheckBox({ checked }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cn('mt-0.5 inline-flex size-4 flex-none items-center justify-center rounded-[3px] border', checked ? 'border-primary bg-primary text-primary-foreground' : 'border-border bg-background'), children: checked ? _jsx(Check, { className: "size-2.5", strokeWidth: 3 }) : null }));
+}
+function Tag({ children, tone = 'neutral', }) {
+    return (_jsx("span", { className: cn('inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 font-mono text-[10.5px]', tone === 'info' &&
+            'border-[var(--status-canary-bd)] bg-[var(--status-canary-bg)] text-[var(--status-canary-fg)]', tone === 'positive' &&
+            'border-[var(--status-success-bd)] bg-[var(--status-success-bg)] text-[var(--status-success-fg)]', tone === 'warning' &&
+            'border-[var(--status-pending-bd)] bg-[var(--status-pending-bg)] text-[var(--status-pending-fg)]', tone === 'neutral' && 'border-border bg-muted text-muted-foreground'), children: children }));
+}
+function MiniSearch({ value, onChange, placeholder, }) {
+    return (_jsxs("div", { className: "flex items-center gap-2 border-b bg-background px-2.5 py-2", children: [_jsx(Search, { className: "size-3.5 flex-none text-muted-foreground", "aria-hidden": "true" }), _jsx("input", { value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, className: "h-5 w-full min-w-0 bg-transparent text-[12.5px] outline-none placeholder:text-muted-foreground" })] }));
+}
+function PickerEmpty({ children }) {
+    return _jsx("div", { className: "px-3 py-6 text-center text-[12px] text-muted-foreground", children: children });
+}
+function StepNumber({ index, done }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cn('inline-flex size-5 items-center justify-center rounded-full border font-mono text-[11px] font-semibold', done
+            ? 'border-[var(--status-running-bd)] bg-[var(--status-running-bg)] text-[var(--status-running-fg)]'
+            : 'border-border bg-muted text-muted-foreground'), children: index }));
+}
+function StepCard({ index, done, title, detail, testId, children, }) {
+    return (_jsxs("section", { className: "rounded-lg border bg-card", "data-testid": testId, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-5 py-3", children: [_jsx(StepNumber, { index: index, done: done }), _jsx("h2", { className: "text-[14px] font-semibold", children: title }), _jsx("span", { className: "text-[12px] text-muted-foreground", children: detail })] }), _jsx("div", { className: "space-y-5 p-5", children: children })] }));
+}
+function SubSectionHead({ label }) {
+    return (_jsxs("div", { className: "mb-3 flex items-center gap-2 text-[9.5px] font-bold uppercase tracking-[0.08em] text-muted-foreground", children: [_jsx("span", { "aria-hidden": "true", className: "inline-block h-2.5 w-[3px] rounded-[1.5px] bg-primary" }), label] }));
+}
+function RuntimeLimitField({ label, value, modelLimit, onChange, }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "text-[12.5px]", children: [label, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs("div", { className: "flex h-9 items-center rounded-md border bg-background pr-2", children: [_jsx("input", { value: value, onChange: (event) => onChange(event.target.value), inputMode: "numeric", "aria-label": label, className: "h-full min-w-0 flex-1 bg-transparent px-3 font-mono text-[13px] outline-none" }), _jsx("span", { className: "shrink-0 whitespace-nowrap font-mono text-[11px] text-muted-foreground", children: formatTemplate(t('canaryReleases.new.field.runConfig.limitSuffix'), { limit: modelLimit }) })] })] }));
+}
+function PromptRow({ prompt, selected, onSelect, }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    return (_jsxs("button", { type: "button", onClick: onSelect, "aria-pressed": selected, className: cn('flex w-full items-start gap-2.5 border-b px-3 py-2.5 text-left transition-colors last:border-b-0 hover:bg-muted/40', selected && 'bg-[color-mix(in_oklab,var(--status-canary-bg)_55%,var(--background))]'), children: [_jsx(Radio, { checked: selected }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "font-mono text-[13px] font-semibold", children: prompt.name }), _jsx(Tag, { children: formatTemplate(t('canaryReleases.new.promptVersionCount'), { count: prompt.latestVersionNumber }) })] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5", children: [prompt.currentOnlineVersionNumber ? (_jsx(Tag, { tone: "positive", children: formatTemplate(t('optimizations.new.origin.promptOnlineVersion'), {
+                                    version: `v${prompt.currentOnlineVersionNumber}`,
+                                }) })) : (_jsx(Tag, { children: t('optimizations.new.origin.promptNoOnlineVersion') })), _jsx(Tag, { children: prompt.latestVersionStatus })] }), _jsxs("div", { className: "mt-1 text-[11.5px] text-muted-foreground", children: [prompt.createdByDisplayName ? `@${prompt.createdByDisplayName}` : '@unknown', " \u00B7", ' ', formatDateTime(prompt.updatedAt)] })] })] }));
+}
+function PromptVersionRow({ option, selected, onSelect, }) {
+    const { t } = useI18n();
+    return (_jsx(PromptVersionPickerRow, { version: option.version, status: option.status, variables: option.variables, selected: selected, onSelect: onSelect, badges: option.isOnline ? (_jsx(PromptVersionPickerTag, { tone: "positive", children: t('canaryReleases.new.promptVersionOnline') })) : option.isLatest ? (_jsx(PromptVersionPickerTag, { tone: "info", children: t('canaryReleases.new.promptVersionLatest') })) : null, createdAt: option.updatedAt }));
+}
+function PromptVersionPreview({ option }) {
+    const { t } = useI18n();
+    const previewParts = useMemo(() => renderPromptPreviewParts(option?.promptPreview ?? '', option?.variables ?? []), [option]);
+    const imageVariables = useMemo(() => option?.variables.filter((variable) => IMAGE_PROMPT_VARIABLE_TYPES.has(variable.type)) ?? [], [option]);
+    if (!option)
+        return _jsx(PickerEmpty, { children: t('canaryReleases.new.promptPreviewEmpty') });
+    return (_jsxs("div", { className: "border-t px-4 py-3", "data-testid": "release-new-prompt-preview", children: [_jsxs("div", { className: "mb-2 flex flex-wrap items-center justify-between gap-2", children: [_jsx("span", { className: "font-mono text-[10.5px] uppercase tracking-wide text-muted-foreground", children: t('canaryReleases.new.promptPreviewTitle') }), _jsxs("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: [option.name, " \u00B7 ", option.version] })] }), _jsx("pre", { className: "max-h-[300px] overflow-auto whitespace-pre-wrap break-words rounded-md border bg-muted px-3 py-2 font-mono text-[11.5px] leading-relaxed text-foreground", children: previewParts.map((part, index) => {
+                    if (part.kind === 'text' || !part.varType || IMAGE_PROMPT_VARIABLE_TYPES.has(part.varType)) {
+                        return _jsx("span", { children: part.value }, index);
+                    }
+                    return (_jsx("span", { className: cn('inline rounded border px-1 font-mono text-[11px]', VARIABLE_TONE_CLASSES[part.varType]), "data-variable-name": part.name, children: part.value }, index));
+                }) }), imageVariables.length > 0 ? (_jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2 text-[11.5px] text-muted-foreground", children: [_jsxs("span", { className: "inline-flex items-center gap-1 font-medium", children: [_jsx(ImageIcon, { className: "size-3.5", "aria-hidden": "true" }), t('canaryReleases.new.promptImageVariables')] }), imageVariables.map((variable) => (_jsx("span", { className: cn('inline-flex items-center rounded border px-1.5 py-0.5 font-mono text-[11px]', VARIABLE_TONE_CLASSES[variable.type]), children: `{{${variable.name}}}` }, variable.name)))] })) : null] }));
+}
+function ModelOptionRow({ model, selected, onSelect, }) {
+    const { t } = useI18n();
+    const imageCapability = model.capabilities.image;
+    const supportsImage = imageCapability !== 'none';
+    const modalityKinds = supportsImage ? ['text', 'image'] : ['text'];
+    const textCapabilityLabel = t('models.capability.text');
+    const imageCapabilityLabel = imageCapability === 'both'
+        ? t('models.capability.imageBoth')
+        : imageCapability === 'url'
+            ? t('models.capability.imageUrl')
+            : t('models.capability.imageBase64');
+    const modalityLabels = supportsImage
+        ? { text: textCapabilityLabel, image: imageCapabilityLabel }
+        : { text: textCapabilityLabel };
+    const ctx = model.contextWindowTokens
+        ? formatTemplate(t('canaryReleases.new.modelCap.ctx'), { value: formatContextWindow(model.contextWindowTokens) })
+        : null;
+    return (_jsxs("button", { type: "button", onClick: onSelect, "aria-pressed": selected, className: cn('flex w-full items-start gap-2.5 border-b px-3 py-2.5 text-left transition-colors last:border-b-0 hover:bg-muted/40', selected && 'bg-[color-mix(in_oklab,var(--status-canary-bg)_55%,var(--background))]'), children: [_jsx(Radio, { checked: selected }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "font-mono text-[13px] font-semibold", children: model.name }), model.status === 'testing' ? _jsx(Tag, { tone: "warning", children: t('canaryReleases.new.modelTesting') }) : null] }), _jsx("div", { className: "mt-0.5 text-[12px] text-muted-foreground", children: model.providerType }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5", children: [ctx ? _jsx(Tag, { children: ctx }) : null, _jsx(ModalityIconGroup, { kinds: modalityKinds, size: "sm", tooltips: modalityLabels, ariaLabels: modalityLabels }), _jsx(Tag, { children: formatTemplate(t('canaryReleases.new.modelRpmTpm'), {
+                                    rpm: formatModelLimit(model.rpm.limit),
+                                    tpm: formatModelLimit(model.tpm.limit),
+                                }) })] })] }), _jsxs("div", { className: "flex-none text-right font-mono text-[11.5px] text-muted-foreground", children: [_jsx("div", { className: "font-semibold text-foreground", children: formatTemplate(t('canaryReleases.new.modelPriceLabel'), {
+                            input: formatPrice(model.pricing.inputPerMillion),
+                            output: formatPrice(model.pricing.outputPerMillion),
+                        }) }), _jsx("div", { className: "text-[10.5px] text-muted-foreground", children: t('canaryReleases.new.modelPriceUnit') })] })] }));
+}
+function ConnectorOptionRow({ connector, selected, multiple = false, onSelect, }) {
+    return (_jsxs("button", { type: "button", onClick: onSelect, "aria-pressed": selected, className: cn('grid w-full grid-cols-[minmax(140px,0.85fr)_minmax(0,1.15fr)] gap-3 border-b px-3 py-2.5 text-left transition-colors last:border-b-0 hover:bg-muted/40', selected && 'bg-[color-mix(in_oklab,var(--status-canary-bg)_55%,var(--background))]'), children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2.5", children: [multiple ? _jsx(CheckBox, { checked: selected }) : _jsx(Radio, { checked: selected }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-mono text-[13px] font-semibold", children: connector.name }), connector.description ? (_jsx("div", { className: "mt-0.5 truncate text-[11.5px] text-muted-foreground", children: connector.description })) : null] })] }), _jsxs("div", { className: "min-w-0 text-[11.5px] text-muted-foreground", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Tag, { children: connector.type }), _jsx(Tag, { children: connector.healthStatus })] }), _jsx("div", { className: "mt-1 truncate font-mono", children: connector.configSummary })] })] }));
+}
+function ReadOnlyConnectorRow({ connector, name, type, emptyLabel, }) {
+    return (_jsxs("div", { className: "grid w-full grid-cols-[minmax(140px,0.85fr)_minmax(0,1.15fr)] gap-3 rounded-md border bg-muted/35 px-3 py-2.5 text-left", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2.5", children: [_jsx(CheckBox, { checked: true }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-mono text-[13px] font-semibold", children: connector?.name ?? name ?? emptyLabel }), connector?.description ? (_jsx("div", { className: "mt-0.5 truncate text-[11.5px] text-muted-foreground", children: connector.description })) : null] })] }), _jsxs("div", { className: "min-w-0 text-[11.5px] text-muted-foreground", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Tag, { children: connector?.type ?? type ?? 'connector' }), connector ? _jsx(Tag, { children: connector.healthStatus }) : null] }), _jsx("div", { className: "mt-1 truncate font-mono", children: connector?.configSummary ?? '—' })] })] }));
+}
+function FieldMappingTable({ fields, promptVariables, externalIdField, mapping, readOnly = false, onExternalIdFieldChange, onMappingChange, }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "rounded-md border bg-background p-3", children: _jsxs("label", { className: "grid grid-cols-1 items-center gap-2 md:grid-cols-[minmax(180px,0.8fr)_minmax(0,1.2fr)]", children: [_jsxs("span", { className: "text-xs font-medium", children: [t('canaryReleases.new.field.externalIdField'), " ", _jsx("span", { className: "text-destructive", children: "*" })] }), readOnly ? (_jsx("div", { className: "min-h-9 rounded-md border bg-muted/40 px-3 py-2 font-mono text-xs", children: externalIdField || '—' })) : (_jsxs("select", { value: externalIdField, onChange: (event) => onExternalIdFieldChange(event.target.value), className: "h-9 rounded-md border border-input bg-background px-3 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring", "data-testid": "release-new-mapping-external-id", children: [_jsx("option", { value: "", children: t('canaryReleases.new.fieldSelectPlaceholder') }), fields.map((field) => (_jsx("option", { value: field.key, children: field.key }, field.key)))] }))] }) }), _jsxs("div", { className: "overflow-hidden rounded-md border bg-background", children: [_jsxs("div", { className: "grid grid-cols-[minmax(180px,0.9fr)_minmax(0,1.1fr)_96px] gap-2 border-b bg-muted/40 px-3 py-2 text-xs font-medium text-muted-foreground", children: [_jsx("span", { children: t('canaryReleases.new.mapping.variable') }), _jsx("span", { children: t('canaryReleases.new.mapping.source') }), _jsx("span", { children: t('canaryReleases.new.mapping.type') })] }), promptVariables.length === 0 ? (_jsx("div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: t('canaryReleases.new.promptVariablesEmpty') })) : (promptVariables.map((variable) => (_jsxs("div", { className: "grid grid-cols-[minmax(180px,0.9fr)_minmax(0,1.1fr)_96px] items-center gap-2 border-t px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-mono text-xs font-semibold", children: variable.name }), _jsx("div", { className: "text-[11px] text-muted-foreground", children: variable.required
+                                            ? t('canaryReleases.new.mapping.required')
+                                            : t('canaryReleases.new.mapping.optional') })] }), readOnly ? (_jsx("div", { className: "min-h-8 rounded-md border bg-muted/40 px-2 py-1.5 font-mono text-xs", children: mapping[variable.name] || t('canaryReleases.new.mapping.unmapped') })) : (_jsxs("select", { value: mapping[variable.name] ?? '', onChange: (event) => onMappingChange(variable.name, event.target.value), className: "h-8 rounded-md border border-input bg-background px-2 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring", "data-testid": `release-new-mapping-source-${variable.name}`, children: [_jsx("option", { value: "", children: t('canaryReleases.new.mapping.unmapped') }), fields.map((field) => (_jsx("option", { value: field.key, children: field.key }, field.key)))] })), _jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: variable.type })] }, variable.name))))] })] }));
+}
+function ReadOnlyFilterRules({ value }) {
+    const { t } = useI18n();
+    if (!value) {
+        return (_jsx("div", { className: "rounded-md border bg-muted/35 px-3 py-2 text-[12px] text-muted-foreground", children: t('canaryReleases.new.filter.empty') }));
+    }
+    return (_jsx("pre", { className: "max-h-[220px] overflow-auto whitespace-pre-wrap break-words rounded-md border bg-muted px-3 py-2 font-mono text-[11.5px] leading-relaxed text-foreground", children: JSON.stringify(value, null, 2) }));
+}
+function FilterRulesBuilder({ value, fields, onChange, }) {
+    const { t } = useI18n();
+    const createAtom = () => ({
+        type: 'atom',
+        field: fields[0]?.key ?? '',
+        op: 'eq',
+        value: '',
+    });
+    if (!value) {
+        return (_jsx("div", { className: "rounded-md border border-dashed bg-background px-3 py-4", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: t('canaryReleases.new.filter.empty') }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onChange({ type: 'and', children: [createAtom()] }), children: [_jsx(Filter, { className: "size-3.5" }), t('canaryReleases.new.filter.enable')] })] }) }));
+    }
+    return (_jsx("div", { className: "space-y-2 rounded-md border bg-background p-3", children: _jsx(FilterNodeEditor, { node: value, depth: 1, fields: fields, onChange: onChange, onRemove: () => onChange(null) }) }));
+}
+function FilterNodeEditor({ node, depth, fields, onChange, onRemove, }) {
+    const { t } = useI18n();
+    const canNest = depth < CANARY_RELEASE_FILTER_MAX_DEPTH;
+    const createAtom = () => ({
+        type: 'atom',
+        field: fields[0]?.key ?? '',
+        op: 'eq',
+        value: '',
+    });
+    const createGroup = (type) => ({ type, children: [createAtom()] });
+    if (node.type === 'atom') {
+        const needsValue = node.op !== 'exists';
+        return (_jsxs("div", { className: "grid grid-cols-1 items-center gap-2 rounded-md border bg-card p-2 md:grid-cols-[minmax(0,1fr)_132px_minmax(0,1fr)_32px]", children: [_jsxs("select", { value: node.field, onChange: (event) => onChange({ ...node, field: event.target.value }), className: "h-8 rounded-md border border-input bg-background px-2 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("option", { value: "", children: t('canaryReleases.new.fieldSelectPlaceholder') }), fields.map((field) => (_jsx("option", { value: field.key, children: field.key }, field.key)))] }), _jsx("select", { value: node.op, onChange: (event) => {
+                        const op = event.target.value;
+                        onChange(op === 'exists' ? { type: 'atom', field: node.field, op } : { ...node, op, value: node.value ?? '' });
+                    }, className: "h-8 rounded-md border border-input bg-background px-2 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring", children: CANARY_RELEASE_FILTER_OPS.map((op) => (_jsx("option", { value: op, children: t(`canaryReleases.new.filter.op.${op}`) }, op))) }), _jsx(Input, { value: needsValue ? String(node.value ?? '') : '', disabled: !needsValue, onChange: (event) => onChange({ ...node, value: event.target.value }), placeholder: needsValue ? t('canaryReleases.new.filter.valuePlaceholder') : t('canaryReleases.new.filter.valueDisabled'), className: "h-8 font-mono text-xs" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8", onClick: onRemove, "aria-label": t('canaryReleases.new.filter.remove'), children: _jsx(X, { className: "size-3.5" }) })] }));
+    }
+    if (node.type === 'not') {
+        return (_jsxs("div", { className: "space-y-2 rounded-md border bg-muted/25 p-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Tag, { tone: "warning", children: "NOT" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8", onClick: onRemove, "aria-label": t('canaryReleases.new.filter.remove'), children: _jsx(X, { className: "size-3.5" }) })] }), _jsx(FilterNodeEditor, { node: node.child, depth: depth + 1, fields: fields, onChange: (child) => onChange({ type: 'not', child }), onRemove: () => onChange({ type: 'not', child: createAtom() }) })] }));
+    }
+    return (_jsxs("div", { className: "space-y-2 rounded-md border bg-muted/25 p-2", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("select", { value: node.type, onChange: (event) => onChange({ type: event.target.value, children: node.children }), className: "h-8 rounded-md border border-input bg-background px-2 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("option", { value: "and", children: "AND" }), _jsx("option", { value: "or", children: "OR" })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: formatTemplate(t('canaryReleases.new.filter.depth'), { depth }) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8", onClick: () => onChange({ ...node, children: [...node.children, createAtom()] }), children: [_jsx(Plus, { className: "size-3.5" }), t('canaryReleases.new.filter.addCondition')] }), canNest ? (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8", onClick: () => onChange({ ...node, children: [...node.children, createGroup('and')] }), children: t('canaryReleases.new.filter.addGroup') }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8", onClick: () => onChange({ ...node, children: [...node.children, { type: 'not', child: createAtom() }] }), children: "NOT" })] })) : null, _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8", onClick: onRemove, "aria-label": t('canaryReleases.new.filter.remove'), children: _jsx(X, { className: "size-3.5" }) })] })] }), _jsx("div", { className: "space-y-2 border-l pl-3", children: node.children.map((child, index) => (_jsx(FilterNodeEditor, { node: child, depth: depth + 1, fields: fields, onChange: (nextChild) => onChange({
+                        ...node,
+                        children: node.children.map((item, itemIndex) => (itemIndex === index ? nextChild : item)),
+                    }), onRemove: () => {
+                        const nextChildren = node.children.filter((_, itemIndex) => itemIndex !== index);
+                        onChange({ ...node, children: nextChildren.length > 0 ? nextChildren : [createAtom()] });
+                    } }, index))) })] }));
+}
+function RecordCategoriesField({ value, options, onChange, }) {
+    const { t } = useI18n();
+    const allSelected = options.length > 0 && options.every((option) => value.includes(option));
+    if (options.length === 0) {
+        return (_jsx("div", { className: "rounded-md border border-dashed bg-background px-3 py-4 text-center text-xs text-muted-foreground", children: t('canaryReleases.new.field.recordCategoriesEmpty') }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: t('canaryReleases.new.field.recordCategoriesSelected').replace('{count}', String(value.length)) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8", onClick: () => onChange(allSelected ? [] : options), children: allSelected
+                            ? t('canaryReleases.new.field.recordCategoriesClear')
+                            : t('canaryReleases.new.field.recordCategoriesSelectAll') })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2 rounded-md border bg-background p-3", children: options.map((option) => {
+                    const checked = value.includes(option);
+                    return (_jsxs("button", { type: "button", onClick: () => onChange(checked ? value.filter((item) => item !== option) : [...value, option]), "aria-pressed": checked, className: cn('inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors', checked
+                            ? 'border-primary bg-primary text-primary-foreground'
+                            : 'border-border bg-muted text-muted-foreground hover:bg-muted/70'), children: [checked ? _jsx(Check, { className: "size-3", strokeWidth: 3 }) : null, _jsx("span", { className: "font-mono", children: option })] }, option));
+                }) })] }));
+}
+function TrafficSelectionField({ isQueueInput, value, trafficMode, showTrafficMode = false, onChange, onTrafficModeChange, }) {
+    const { t } = useI18n();
+    const parsed = trafficPercentFromText(value);
+    const sliderValue = parsed ?? DEFAULT_QUEUE_TRAFFIC_PERCENT;
+    if (!isQueueInput) {
+        return (_jsx("div", { className: "rounded-md border bg-background p-3", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[13px] font-semibold", children: t('releases.new.traffic.production100') }), _jsx("div", { className: "mt-1 text-[12px] text-muted-foreground", children: t('canaryReleases.new.field.trafficRatioWebhookHelp') })] }), _jsx(Tag, { tone: "positive", children: "100%" })] }) }));
+    }
+    return (_jsxs("div", { className: "space-y-3 rounded-md border bg-background p-3", children: [showTrafficMode ? (_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsx("button", { type: "button", onClick: () => onTrafficModeChange('split'), "aria-pressed": trafficMode === 'split', className: cn('rounded-md border px-3 py-2 text-left transition-colors', trafficMode === 'split' ? 'border-primary bg-primary/10' : 'border-border bg-muted/30 hover:bg-muted/50'), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Radio, { checked: trafficMode === 'split' }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[13px] font-semibold", children: t('releases.new.trafficMode.split') }), _jsx("div", { className: "mt-1 text-[12px] text-muted-foreground", children: t('releases.new.trafficMode.splitHelp') })] })] }) }), _jsx("button", { type: "button", onClick: () => onTrafficModeChange('dual_run'), "aria-pressed": trafficMode === 'dual_run', className: cn('rounded-md border px-3 py-2 text-left transition-colors', trafficMode === 'dual_run'
+                            ? 'border-primary bg-primary/10'
+                            : 'border-border bg-muted/30 hover:bg-muted/50'), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Radio, { checked: trafficMode === 'dual_run' }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[13px] font-semibold", children: t('releases.new.trafficMode.dualRun') }), _jsx("div", { className: "mt-1 text-[12px] text-muted-foreground", children: t('releases.new.trafficMode.dualRunHelp') })] })] }) })] })) : null, _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[13px] font-semibold", children: t('releases.new.traffic.queueTitle') }), _jsx("div", { className: "mt-1 max-w-2xl text-[12px] text-muted-foreground", children: t('releases.new.traffic.queueHint') })] }), _jsxs(Tag, { tone: sliderValue === 100 ? 'positive' : 'info', children: [sliderValue, "%"] })] }), _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center", children: [_jsx("input", { type: "range", min: 1, max: 100, step: 1, value: sliderValue, "aria-label": t('releases.new.traffic.percentAriaLabel'), onChange: (event) => onChange(event.target.value), className: "min-w-0 flex-1 accent-primary" }), _jsxs("label", { className: "flex w-full items-center gap-2 sm:w-32", children: [_jsx(Input, { type: "number", min: 1, max: 100, value: value, onChange: (event) => onChange(event.target.value), "aria-label": t('releases.new.traffic.percentInput'), className: "h-8 font-mono text-xs", "data-testid": "release-new-traffic" }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: "%" })] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: TRAFFIC_PERCENT_PRESETS.map((preset) => {
+                    const selected = parsed === preset;
+                    return (_jsxs("button", { type: "button", onClick: () => onChange(String(preset)), "aria-pressed": selected, className: cn('rounded-md border px-2.5 py-1 font-mono text-[11.5px] transition-colors', selected
+                            ? 'border-primary bg-primary text-primary-foreground'
+                            : 'border-border bg-muted text-muted-foreground hover:bg-muted/70'), children: [preset, "%"] }, preset));
+                }) })] }));
+}
+function SummaryRow({ label, value }) {
+    return (_jsxs("div", { children: [_jsx("div", { className: "text-[11.5px] text-muted-foreground", children: label }), _jsx("div", { className: "mt-0.5 min-h-5 break-words text-[12.5px] font-medium", children: value })] }));
+}
+function DeployButton({ canSubmit, isPending, label, pendingLabel, className, testId, }) {
+    return (_jsx(Button, { type: "submit", className: className, disabled: !canSubmit, "data-testid": testId, children: isPending ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), pendingLabel] })) : (label) }));
+}
+export function ReleaseNewPage({ projectId }) {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    const initialPromptId = searchParams.get('promptId') ?? '';
+    const initialPromptVersionId = searchParams.get('promptVersionId') ?? '';
+    const initialModelId = searchParams.get('modelId') ?? '';
+    const initialSourceExperimentId = searchParams.get('eventType') === 'from_experiment' ? (searchParams.get('sourceExperimentId') ?? '') : '';
+    const requestedMode = searchParams.get('mode');
+    const requestedLineId = normalizeLineId(searchParams.get('line'));
+    const isCanaryLineMode = requestedMode === 'canary' && requestedLineId.length > 0;
+    const promptsQuery = usePrompts(projectId);
+    const modelsQuery = useProjectModels(projectId, { autoRefresh: false });
+    const inputConnectorsQuery = useConnectors(projectId, { direction: 'input' });
+    const outputConnectorsQuery = useConnectors(projectId, { direction: 'output' });
+    const releaseLinesQuery = useReleaseLineList(projectId);
+    const createRelease = useCreateProductionRelease(projectId);
+    const createCanaryRelease = useCreateCanaryRelease(projectId);
+    const startCanaryRelease = useStartCanaryRelease(projectId);
+    const prompts = useMemo(() => promptsQuery.data?.data ?? [], [promptsQuery.data]);
+    const models = useMemo(() => (modelsQuery.data?.data ?? []).filter((model) => model.status !== 'disabled'), [modelsQuery.data]);
+    const inputConnectors = useMemo(() => inputConnectorsQuery.data?.data ?? [], [inputConnectorsQuery.data]);
+    const outputConnectors = useMemo(() => outputConnectorsQuery.data?.data ?? [], [outputConnectorsQuery.data]);
+    const outputConnectorById = useMemo(() => new Map(outputConnectors.map((connector) => [connector.id, connector])), [outputConnectors]);
+    const selectedReleaseLine = useMemo(() => releaseLinesQuery.data.find((line) => line.id === requestedLineId) ?? null, [releaseLinesQuery.data, requestedLineId]);
+    const parentProductionEvent = selectedReleaseLine?.production?.currentEvent ?? null;
+    const isAddCanaryToProduction = isCanaryLineMode && Boolean(parentProductionEvent);
+    const inheritedVariableMapping = useMemo(() => productionMappingToRecord(parentProductionEvent?.variableMapping), [parentProductionEvent?.variableMapping]);
+    const inheritedFilterRules = useMemo(() => normalizeInheritedFilterRules(parentProductionEvent?.filterRules), [parentProductionEvent?.filterRules]);
+    const inheritedOutputConnectorIds = useMemo(() => parentProductionEvent?.outputConnectorIds ?? [], [parentProductionEvent?.outputConnectorIds]);
+    const inheritedOutputConnectorIdSet = useMemo(() => new Set(inheritedOutputConnectorIds), [inheritedOutputConnectorIds]);
+    const [releaseName, setReleaseName] = useState(buildDefaultReleaseName);
+    const [description, setDescription] = useState('');
+    const [promptSearch, setPromptSearch] = useState('');
+    const [modelSearch, setModelSearch] = useState('');
+    const [selectedPromptId, setSelectedPromptId] = useState(initialPromptId);
+    const [selectedVersionId, setSelectedVersionId] = useState(initialPromptVersionId);
+    const [selectedModelId, setSelectedModelId] = useState(initialModelId);
+    const [selectedInputConnectorId, setSelectedInputConnectorId] = useState('');
+    const [selectedOutputConnectorIds, setSelectedOutputConnectorIds] = useState([]);
+    const [mappingOverrides, setMappingOverrides] = useState({});
+    const [externalIdFieldOverride, setExternalIdFieldOverride] = useState('');
+    const [filterRules, setFilterRules] = useState(null);
+    const [trafficPercent, setTrafficPercent] = useState(() => initialTrafficPercentFromParams(searchParams));
+    const [trafficMode, setTrafficMode] = useState(() => initialTrafficModeFromParams(searchParams));
+    const [recordCategorySelection, setRecordCategorySelection] = useState(null);
+    const [rpm, setRpm] = useState(searchParams.get('rpmLimit') ?? '');
+    const [tpm, setTpm] = useState(searchParams.get('tpmLimit') ?? '');
+    const [concurrency, setConcurrency] = useState(searchParams.get('concurrency') ?? '');
+    const [temperature, setTemperature] = useState(searchParams.get('temperature') ?? '0.3');
+    const [runtimeDefaultsModelId, setRuntimeDefaultsModelId] = useState(null);
+    const [submitError, setSubmitError] = useState(null);
+    const lockedPromptId = isAddCanaryToProduction ? (selectedReleaseLine?.promptId ?? '') : '';
+    const effectivePromptId = lockedPromptId || selectedPromptId || prompts[0]?.id || '';
+    const selectedPrompt = useMemo(() => prompts.find((prompt) => prompt.id === effectivePromptId) ?? null, [effectivePromptId, prompts]);
+    const selectedPromptQuery = usePrompt(projectId, selectedPrompt?.id ?? '');
+    const selectedPromptLoading = useDelayedLoading(selectedPromptQuery.isLoading);
+    const promptVersions = useMemo(() => selectedPrompt && selectedPromptQuery.data
+        ? selectedPromptQuery.data.versions
+            .map((version) => mapPromptVersionToOption(selectedPrompt, version, formatDateTime))
+            .sort((left, right) => Number(right.version.slice(1)) - Number(left.version.slice(1)))
+        : [], [formatDateTime, selectedPrompt, selectedPromptQuery.data]);
+    const availablePromptVersions = useMemo(() => isAddCanaryToProduction && parentProductionEvent
+        ? promptVersions.filter((option) => option.id !== parentProductionEvent.promptVersionId)
+        : promptVersions, [isAddCanaryToProduction, parentProductionEvent, promptVersions]);
+    const preferredVersion = useMemo(() => {
+        const latest = availablePromptVersions.find((option) => option.isLatest);
+        const online = availablePromptVersions.find((option) => option.isOnline);
+        return latest ?? online ?? availablePromptVersions[0] ?? null;
+    }, [availablePromptVersions]);
+    const effectiveVersionId = selectedVersionId && availablePromptVersions.some((option) => option.id === selectedVersionId)
+        ? selectedVersionId
+        : (preferredVersion?.id ?? '');
+    const selectedVersion = useMemo(() => availablePromptVersions.find((option) => option.id === effectiveVersionId) ?? null, [availablePromptVersions, effectiveVersionId]);
+    const effectiveModelId = selectedModelId || models[0]?.id || '';
+    const selectedModel = useMemo(() => models.find((model) => model.id === effectiveModelId) ?? null, [effectiveModelId, models]);
+    if (selectedModel && runtimeDefaultsModelId !== selectedModel.id) {
+        setRuntimeDefaultsModelId(selectedModel.id);
+        setRpm((current) => current.trim().length > 0 ? current : modelLimitDefaultValue(selectedModel.rpm.limit, DEFAULT_RPM));
+        setTpm((current) => current.trim().length > 0 ? current : modelLimitDefaultValue(selectedModel.tpm.limit, DEFAULT_TPM));
+        setConcurrency((current) => current.trim().length > 0
+            ? current
+            : modelLimitDefaultValue(selectedModel.concurrency.limit, DEFAULT_CONCURRENCY));
+    }
+    const lockedInputConnectorId = isAddCanaryToProduction ? (parentProductionEvent?.inputConnectorId ?? '') : '';
+    const effectiveInputConnectorId = lockedInputConnectorId || selectedInputConnectorId || inputConnectors[0]?.id || '';
+    const selectedInputConnector = useMemo(() => inputConnectors.find((connector) => connector.id === effectiveInputConnectorId) ?? null, [effectiveInputConnectorId, inputConnectors]);
+    const inputConnectorDetailQuery = useConnector(projectId, effectiveInputConnectorId);
+    const inputFieldOptions = useMemo(() => extractFieldOptionsFromConnector(inputConnectorDetailQuery.data ?? null), [inputConnectorDetailQuery.data]);
+    const inputFieldKeySet = useMemo(() => new Set(inputFieldOptions.map((field) => field.key)), [inputFieldOptions]);
+    const effectiveExternalIdField = isAddCanaryToProduction
+        ? (parentProductionEvent?.externalIdField ?? '')
+        : externalIdFieldOverride && inputFieldKeySet.has(externalIdFieldOverride)
+            ? externalIdFieldOverride
+            : inferExternalIdField(inputFieldOptions);
+    const isQueueInput = selectedInputConnector?.type === 'redis' || selectedInputConnector?.type === 'kafka';
+    const trafficPercentValue = isQueueInput ? trafficPercentFromText(trafficPercent) : 100;
+    const trafficRatioValue = trafficPercentValue === null ? null : trafficPercentValue / 100;
+    const shouldCreateCanaryRelease = isAddCanaryToProduction || (isQueueInput && trafficRatioValue !== null && trafficRatioValue < 1);
+    const isSubmitting = createRelease.isPending || createCanaryRelease.isPending || startCanaryRelease.isPending;
+    const filteredPrompts = useMemo(() => {
+        const query = promptSearch.trim().toLowerCase();
+        if (!query)
+            return prompts;
+        return prompts.filter((prompt) => [prompt.name, prompt.createdByDisplayName ?? '', `v${prompt.latestVersionNumber}`]
+            .join(' ')
+            .toLowerCase()
+            .includes(query));
+    }, [promptSearch, prompts]);
+    const filteredModels = useMemo(() => {
+        const query = modelSearch.trim().toLowerCase();
+        if (!query)
+            return models;
+        return models.filter((model) => `${model.name} ${model.providerType} ${model.providerModelId}`.toLowerCase().includes(query));
+    }, [modelSearch, models]);
+    const validSelectedOutputConnectorIds = useMemo(() => selectedOutputConnectorIds.filter((id) => outputConnectors.some((connector) => connector.id === id)), [outputConnectors, selectedOutputConnectorIds]);
+    const extraOutputConnectorIds = useMemo(() => validSelectedOutputConnectorIds.filter((id) => !inheritedOutputConnectorIdSet.has(id)), [inheritedOutputConnectorIdSet, validSelectedOutputConnectorIds]);
+    const validOutputConnectorIds = useMemo(() => {
+        if (!isAddCanaryToProduction)
+            return validSelectedOutputConnectorIds;
+        return trafficMode === 'dual_run'
+            ? mergeIds(inheritedOutputConnectorIds, extraOutputConnectorIds)
+            : inheritedOutputConnectorIds;
+    }, [
+        extraOutputConnectorIds,
+        inheritedOutputConnectorIds,
+        isAddCanaryToProduction,
+        trafficMode,
+        validSelectedOutputConnectorIds,
+    ]);
+    const recordCategoryOptions = useMemo(() => deriveRecordCategoryOptions(selectedVersion?.outputSchema ?? null), [selectedVersion]);
+    const effectiveRecordCategories = useMemo(() => recordCategorySelection === null
+        ? recordCategoryOptions
+        : recordCategorySelection.filter((category) => recordCategoryOptions.includes(category)), [recordCategoryOptions, recordCategorySelection]);
+    const rpmValue = positiveIntegerFromText(rpm);
+    const tpmValue = positiveIntegerFromText(tpm);
+    const concurrencyValue = positiveIntegerFromText(concurrency);
+    const temperatureValue = temperatureFromText(temperature);
+    const sourceForVariable = (variable) => {
+        if (isAddCanaryToProduction)
+            return inheritedVariableMapping[variable.name] ?? '';
+        const override = mappingOverrides[variable.name];
+        if (override && inputFieldKeySet.has(override))
+            return override;
+        return inferSourceForVariable(variable, inputFieldOptions);
+    };
+    const requiredVariableMappingComplete = !selectedVersion ||
+        selectedVersion.variables.every((variable) => !variable.required || sourceForVariable(variable).trim().length > 0);
+    const effectiveFilterRules = isAddCanaryToProduction ? inheritedFilterRules : filterRules;
+    const filterRulesValid = canaryReleaseFilterRulesSchema.safeParse(effectiveFilterRules).success;
+    const runConfigValid = numberTextWithinLimit(rpm, selectedModel?.rpm.limit) &&
+        numberTextWithinLimit(tpm, selectedModel?.tpm.limit) &&
+        numberTextWithinLimit(concurrency, selectedModel?.concurrency.limit) &&
+        temperatureValue !== null;
+    const effectiveReleaseName = isAddCanaryToProduction ? '' : releaseName.trim();
+    const effectiveDescription = isAddCanaryToProduction ? '' : description.trim();
+    const basicComplete = Boolean((isAddCanaryToProduction || effectiveReleaseName) && selectedVersion && selectedModel);
+    const connectorComplete = (!isCanaryLineMode || isAddCanaryToProduction) &&
+        Boolean(selectedInputConnector) &&
+        (!isQueueInput || effectiveExternalIdField.trim().length > 0) &&
+        requiredVariableMappingComplete &&
+        filterRulesValid &&
+        trafficRatioValue !== null;
+    const runtimeComplete = runConfigValid && (recordCategoryOptions.length === 0 || effectiveRecordCategories.length > 0);
+    const canSubmit = basicComplete && connectorComplete && runtimeComplete && !isSubmitting;
+    const handlePromptSelect = (promptId) => {
+        if (isAddCanaryToProduction)
+            return;
+        setSelectedPromptId(promptId);
+        setSelectedVersionId('');
+        setMappingOverrides({});
+        setExternalIdFieldOverride('');
+        setRecordCategorySelection(null);
+    };
+    const handleVersionSelect = (versionId) => {
+        setSelectedVersionId(versionId);
+        setMappingOverrides({});
+        setRecordCategorySelection(null);
+    };
+    const handleModelSelect = (model) => {
+        setSelectedModelId(model.id);
+        setRuntimeDefaultsModelId(model.id);
+        setRpm(modelLimitDefaultValue(model.rpm.limit, DEFAULT_RPM));
+        setTpm(modelLimitDefaultValue(model.tpm.limit, DEFAULT_TPM));
+        setConcurrency(modelLimitDefaultValue(model.concurrency.limit, DEFAULT_CONCURRENCY));
+    };
+    const handleInputConnectorSelect = (connectorId) => {
+        if (isAddCanaryToProduction)
+            return;
+        setSelectedInputConnectorId(connectorId);
+        setMappingOverrides({});
+        setExternalIdFieldOverride('');
+        setFilterRules(null);
+    };
+    const handleOutputConnectorToggle = (connectorId, selected) => {
+        if (isAddCanaryToProduction) {
+            if (trafficMode !== 'dual_run' || inheritedOutputConnectorIdSet.has(connectorId))
+                return;
+        }
+        setSelectedOutputConnectorIds((current) => selected ? current.filter((id) => id !== connectorId) : [...current, connectorId]);
+    };
+    const formatCreateError = (error) => {
+        const message = getApiErrorMessage(error);
+        if (message === 'release_name_taken')
+            return t('common.formError.nameTaken');
+        return message ?? t('releases.new.error.createFailed');
+    };
+    const buildVariableMapping = () => {
+        const mapping = {};
+        for (const variable of selectedVersion?.variables ?? []) {
+            const source = sourceForVariable(variable).trim();
+            if (source)
+                mapping[variable.name] = source;
+        }
+        if (effectiveExternalIdField && !mapping.id)
+            mapping.id = effectiveExternalIdField;
+        return mapping;
+    };
+    const buildCanaryVariableMapping = (mapping) => {
+        const requiredByTarget = new Map((selectedVersion?.variables ?? []).map((variable) => [variable.name, variable.required]));
+        return Object.entries(mapping).map(([target, source]) => ({
+            source,
+            target,
+            required: target === 'id' || Boolean(requiredByTarget.get(target)),
+        }));
+    };
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        setSubmitError(null);
+        if (!canSubmit ||
+            !rpmValue ||
+            !tpmValue ||
+            !concurrencyValue ||
+            trafficRatioValue === null ||
+            temperatureValue === null ||
+            !selectedVersion ||
+            !selectedModel ||
+            !selectedInputConnector) {
+            setSubmitError(t('common.formError.requiredMissing'));
+            return;
+        }
+        const submitReason = effectiveDescription
+            ? `${effectiveReleaseName}\n${effectiveDescription}`
+            : effectiveReleaseName;
+        const variableMapping = buildVariableMapping();
+        const recordMode = releaseRecordModeFromCategories(effectiveRecordCategories, recordCategoryOptions);
+        const productionRunConfig = {
+            rpmLimit: rpmValue,
+            tpmLimit: tpmValue,
+            concurrency: concurrencyValue,
+            temperature: temperatureValue,
+        };
+        const canaryRunConfig = {
+            rpmLimit: rpmValue,
+            tpmLimit: tpmValue,
+            concurrency: concurrencyValue,
+            temperature: temperatureValue,
+        };
+        if (shouldCreateCanaryRelease) {
+            const payload = {
+                ...(isAddCanaryToProduction
+                    ? {}
+                    : {
+                        name: effectiveReleaseName,
+                        description: effectiveDescription,
+                    }),
+                promptVersionId: selectedVersion.id,
+                modelId: selectedModel.id,
+                inputConnectorId: selectedInputConnector.id,
+                outputConnectorIds: validOutputConnectorIds,
+                trafficRatio: trafficRatioValue,
+                trafficMode,
+                runMode: 'manual',
+                recordMode,
+                variableMapping: buildCanaryVariableMapping(variableMapping),
+                outputMapping: [],
+                filterRules: effectiveFilterRules,
+                stopConditions: null,
+                externalIdField: effectiveExternalIdField,
+                annotationSchema: [],
+                storageCategories: effectiveRecordCategories.length === recordCategoryOptions.length ? [] : effectiveRecordCategories,
+                targetDatasetId: null,
+                runConfig: canaryRunConfig,
+            };
+            try {
+                const canary = await createCanaryRelease.mutateAsync(payload);
+                await startCanaryRelease.mutateAsync(canary.id);
+                router.push(`/releases/${getReleaseLineId(effectivePromptId, canary.inputConnectorId)}`);
+            }
+            catch (error) {
+                setSubmitError(formatCreateError(error));
+            }
+            return;
+        }
+        const payload = {
+            promptId: effectivePromptId,
+            promptVersionId: selectedVersion.id,
+            modelId: selectedModel.id,
+            inputConnectorId: selectedInputConnector.id,
+            outputConnectorIds: validOutputConnectorIds,
+            eventType: initialSourceExperimentId ? 'from_experiment' : 'from_prompt',
+            runConfig: productionRunConfig,
+            variableMapping,
+            filterRules: effectiveFilterRules,
+            recordMode,
+            externalIdField: effectiveExternalIdField || null,
+            retentionDays: null,
+            submitReason,
+            sourceExperimentId: initialSourceExperimentId || null,
+            sourceCanaryId: null,
+            sourceMetricsSnapshot: null,
+            rollbackTargetEventId: null,
+        };
+        createRelease.mutate(payload, {
+            onSuccess: (event) => {
+                router.push(`/releases/${getReleaseLineId(event.promptId, event.inputConnectorId)}`);
+            },
+            onError: (error) => {
+                setSubmitError(formatCreateError(error));
+            },
+        });
+    };
+    return (_jsx(Main, { fixed: true, className: "gap-5 overflow-auto bg-muted/35 pb-24", children: _jsxs("form", { onSubmit: handleSubmit, className: "mx-auto flex w-full max-w-[1280px] flex-col gap-5", "data-testid": "release-new-page", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-[22px] font-semibold leading-tight", children: isAddCanaryToProduction ? t('releases.new.canary.title') : t('releases.new.title') }), _jsx("p", { className: "mt-1 max-w-3xl text-[12.5px] text-muted-foreground", children: isAddCanaryToProduction ? t('releases.new.canary.subtitle') : t('releases.new.subtitle') })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { variant: "outline", asChild: true, children: _jsx(Link, { href: "/releases", children: t('common.cancel') }) }), _jsx(DeployButton, { canSubmit: canSubmit, isPending: isSubmitting, label: shouldCreateCanaryRelease
+                                        ? t('canaryReleases.new.action.submit')
+                                        : t('productionReleases.new.action.submit'), pendingLabel: shouldCreateCanaryRelease
+                                        ? t('canaryReleases.new.action.submitting')
+                                        : t('productionReleases.new.action.submitting') })] })] }), _jsxs("div", { className: "grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [_jsxs(StepCard, { index: 1, done: basicComplete, title: t('releases.new.steps.basic'), detail: isAddCanaryToProduction
+                                        ? t('releases.new.steps.basicCanaryDetail')
+                                        : t('releases.new.steps.basicDetail'), testId: "release-new-step-basic", children: [!isAddCanaryToProduction ? (_jsxs("div", { children: [_jsx(SubSectionHead, { label: t('releases.new.basic.section') }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "text-[12.5px]", children: [t('releases.new.field.name'), " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { value: releaseName, onChange: (event) => setReleaseName(event.target.value), placeholder: t('releases.new.field.namePlaceholder'), className: "font-mono text-[13px]", "data-testid": "release-new-name" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-[12.5px]", children: t('releases.new.field.description') }), _jsx(Input, { value: description, onChange: (event) => setDescription(event.target.value), placeholder: t('releases.new.field.descriptionPlaceholder') })] })] })] })) : null, _jsxs("div", { className: cn(!isAddCanaryToProduction && 'border-t border-dashed pt-5'), children: [_jsx(SubSectionHead, { label: t('canaryReleases.new.field.prompt') }), _jsxs("div", { className: "rounded-md border bg-background", children: [isAddCanaryToProduction ? (_jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1fr)]", children: [_jsxs("div", { className: "border-b lg:border-b-0 lg:border-r", children: [_jsx("div", { className: "border-b px-3 py-2 font-mono text-[10.5px] uppercase tracking-wide text-muted-foreground", children: t('canaryReleases.new.promptColumn') }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsxs("div", { className: "rounded-md border bg-muted/35 p-3", children: [_jsx(SummaryRow, { label: t('releases.new.canary.lockedPrompt'), value: selectedPrompt?.name ?? selectedReleaseLine?.label ?? '—' }), _jsx("div", { className: "mt-3", children: _jsx(SummaryRow, { label: t('releases.new.summary.prompt'), value: selectedReleaseLine?.productionVersionLabel ?? '—' }) })] }), _jsx("p", { className: "text-[12px] text-muted-foreground", children: t('releases.new.canary.lockedPromptHelp') })] })] }), _jsxs("div", { children: [_jsx("div", { className: "border-b px-3 py-2 font-mono text-[10.5px] uppercase tracking-wide text-muted-foreground", children: t('canaryReleases.new.versionColumn') }), _jsx("div", { className: "max-h-[340px] overflow-y-auto overflow-x-hidden", children: selectedPromptLoading ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.versionLoading') })) : selectedPromptQuery.isError ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.versionEmpty') })) : availablePromptVersions.length === 0 ? (_jsx(PickerEmpty, { children: t('releases.new.canary.versionEmpty') })) : (availablePromptVersions.map((version) => (_jsx("div", { "data-testid": `release-new-version-row-${version.id}`, children: _jsx(PromptVersionRow, { option: version, selected: version.id === effectiveVersionId, onSelect: () => handleVersionSelect(version.id) }) }, version.id)))) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(MiniSearch, { value: promptSearch, onChange: setPromptSearch, placeholder: t('canaryReleases.new.promptSearch') }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1fr)]", children: [_jsxs("div", { className: "border-b lg:border-b-0 lg:border-r", children: [_jsx("div", { className: "border-b px-3 py-2 font-mono text-[10.5px] uppercase tracking-wide text-muted-foreground", children: t('canaryReleases.new.promptColumn') }), _jsx("div", { className: "max-h-[340px] overflow-y-auto overflow-x-hidden", children: promptsQuery.isError ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.promptEmpty') })) : filteredPrompts.length === 0 ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.promptEmpty') })) : (filteredPrompts.map((prompt) => (_jsx("div", { "data-testid": `release-new-prompt-row-${prompt.id}`, children: _jsx(PromptRow, { prompt: prompt, selected: prompt.id === effectivePromptId, onSelect: () => handlePromptSelect(prompt.id) }) }, prompt.id)))) })] }), _jsxs("div", { children: [_jsx("div", { className: "border-b px-3 py-2 font-mono text-[10.5px] uppercase tracking-wide text-muted-foreground", children: t('canaryReleases.new.versionColumn') }), _jsx("div", { className: "max-h-[340px] overflow-y-auto overflow-x-hidden", children: selectedPromptLoading ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.versionLoading') })) : selectedPromptQuery.isError ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.versionEmpty') })) : availablePromptVersions.length === 0 ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.versionEmpty') })) : (availablePromptVersions.map((version) => (_jsx("div", { "data-testid": `release-new-version-row-${version.id}`, children: _jsx(PromptVersionRow, { option: version, selected: version.id === effectiveVersionId, onSelect: () => handleVersionSelect(version.id) }) }, version.id)))) })] })] })] })), _jsx(PromptVersionPreview, { option: selectedVersion })] })] }), _jsxs("div", { className: "border-t border-dashed pt-5", children: [_jsx(SubSectionHead, { label: t('canaryReleases.new.field.model') }), _jsxs("div", { className: "max-h-[360px] overflow-y-auto overflow-x-hidden rounded-md border bg-background", children: [_jsx(MiniSearch, { value: modelSearch, onChange: setModelSearch, placeholder: t('canaryReleases.new.modelSearch') }), modelsQuery.isError ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.modelEmpty') })) : filteredModels.length === 0 ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.modelEmpty') })) : (filteredModels.map((model) => (_jsx("div", { "data-testid": `release-new-model-row-${model.id}`, children: _jsx(ModelOptionRow, { model: model, selected: model.id === effectiveModelId, onSelect: () => handleModelSelect(model) }) }, model.id))))] })] })] }), _jsxs(StepCard, { index: 2, done: connectorComplete, title: t('releases.new.steps.connectors'), detail: t('releases.new.steps.connectorsDetail'), testId: "release-new-step-connectors", children: [_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx(Label, { children: t('canaryReleases.new.field.inputConnector') }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: isAddCanaryToProduction
+                                                                        ? t('releases.new.canary.lockedInputConnectorHelp')
+                                                                        : t('canaryReleases.new.field.inputConnectorHelp') })] }), isAddCanaryToProduction ? null : (_jsx(Button, { variant: "outline", size: "sm", asChild: true, children: _jsxs(Link, { href: "/connectors/new?direction=input", children: [_jsx(Plus, { className: "size-3.5" }), t('releases.new.action.newInputConnector')] }) }))] }), isAddCanaryToProduction ? (_jsx(ReadOnlyConnectorRow, { connector: selectedInputConnector, name: parentProductionEvent?.inputConnectorId ?? null, emptyLabel: t('releases.new.placeholder.inputConnector') })) : (_jsx("div", { className: "max-h-[260px] overflow-y-auto overflow-x-hidden rounded-md border bg-background", children: inputConnectors.length === 0 ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.inputConnectorEmpty') })) : (inputConnectors.map((connector) => (_jsx("div", { "data-testid": `release-new-input-connector-${connector.id}`, children: _jsx(ConnectorOptionRow, { connector: connector, selected: connector.id === effectiveInputConnectorId, onSelect: () => handleInputConnectorSelect(connector.id) }) }, connector.id)))) }))] }), _jsxs("div", { className: "border-t border-dashed pt-5", children: [_jsx(Label, { children: t('canaryReleases.new.field.variableMapping') }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: isAddCanaryToProduction
+                                                        ? t('releases.new.canary.lockedMappingHelp')
+                                                        : t('canaryReleases.new.field.variableMappingHelp') }), _jsx("div", { className: "mt-3", children: _jsx(FieldMappingTable, { fields: inputFieldOptions, promptVariables: selectedVersion?.variables ?? [], externalIdField: effectiveExternalIdField, mapping: Object.fromEntries((selectedVersion?.variables ?? []).map((variable) => [
+                                                            variable.name,
+                                                            sourceForVariable(variable),
+                                                        ])), readOnly: isAddCanaryToProduction, onExternalIdFieldChange: setExternalIdFieldOverride, onMappingChange: (target, source) => setMappingOverrides((current) => ({ ...current, [target]: source })) }) }), effectiveInputConnectorId && inputFieldOptions.length === 0 ? (_jsx("div", { className: "mt-2 text-[11.5px] text-muted-foreground", children: selectedInputConnector?.type === 'webhook'
+                                                        ? t('canaryReleases.new.fieldMappingEmptyWebhook')
+                                                        : t('canaryReleases.new.fieldMappingEmptyQueue') })) : null] }), _jsxs("div", { className: "border-t border-dashed pt-5", children: [_jsx(Label, { children: t('canaryReleases.new.field.filterRules') }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: isAddCanaryToProduction
+                                                        ? t('releases.new.canary.lockedFilterHelp')
+                                                        : t('canaryReleases.new.field.filterRulesHelp') }), _jsx("div", { className: "mt-3", children: isAddCanaryToProduction ? (_jsx(ReadOnlyFilterRules, { value: effectiveFilterRules })) : (_jsx(FilterRulesBuilder, { value: filterRules, fields: inputFieldOptions, onChange: setFilterRules })) })] }), _jsxs("div", { className: "border-t border-dashed pt-5", children: [_jsx(Label, { children: t('releases.new.field.traffic') }), _jsx("div", { className: "mt-2", children: _jsx(TrafficSelectionField, { isQueueInput: isQueueInput, value: isQueueInput ? trafficPercent : '100', trafficMode: trafficMode, showTrafficMode: isAddCanaryToProduction, onChange: setTrafficPercent, onTrafficModeChange: setTrafficMode }) })] }), _jsxs("div", { className: "border-t border-dashed pt-5", children: [_jsxs("div", { className: "mb-2 flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx(Label, { children: t('canaryReleases.new.field.outputConnector') }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: isAddCanaryToProduction
+                                                                        ? trafficMode === 'dual_run'
+                                                                            ? t('releases.new.canary.outputDualRunHelp')
+                                                                            : t('releases.new.canary.outputSplitLocked')
+                                                                        : t('canaryReleases.new.field.outputConnectorHelp') })] }), isAddCanaryToProduction && trafficMode === 'split' ? null : (_jsx(Button, { variant: "outline", size: "sm", asChild: true, children: _jsxs(Link, { href: "/connectors/new?direction=output", children: [_jsx(Plus, { className: "size-3.5" }), t('releases.new.action.newOutputConnector')] }) }))] }), isAddCanaryToProduction && trafficMode === 'split' ? (_jsx("div", { className: "space-y-2", children: inheritedOutputConnectorIds.length === 0 ? (_jsx(PickerEmpty, { children: t('releases.new.canary.noInheritedOutput') })) : (inheritedOutputConnectorIds.map((connectorId) => (_jsx(ReadOnlyConnectorRow, { connector: outputConnectorById.get(connectorId), name: connectorId, emptyLabel: connectorId }, connectorId)))) })) : (_jsx("div", { className: "max-h-[260px] overflow-y-auto overflow-x-hidden rounded-md border bg-background", children: outputConnectors.length === 0 ? (_jsx(PickerEmpty, { children: t('canaryReleases.new.outputConnectorEmpty') })) : (outputConnectors.map((connector) => {
+                                                        const selected = validOutputConnectorIds.includes(connector.id);
+                                                        const locked = isAddCanaryToProduction && inheritedOutputConnectorIdSet.has(connector.id);
+                                                        return (_jsx(ConnectorOptionRow, { connector: connector, multiple: true, selected: selected || locked, onSelect: () => handleOutputConnectorToggle(connector.id, selected) }, connector.id));
+                                                    })) }))] })] }), _jsxs(StepCard, { index: 3, done: runtimeComplete, title: t('releases.new.steps.runtime'), detail: t('releases.new.steps.runtimeDetail'), testId: "release-new-step-runtime", children: [_jsxs("div", { children: [_jsx(SubSectionHead, { label: t('productionReleases.new.section.runtime') }), _jsxs("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: [_jsx(RuntimeLimitField, { label: t('productionReleases.new.field.rpm'), value: rpm, modelLimit: selectedModel ? formatModelLimit(selectedModel.rpm.limit) : '—', onChange: setRpm }), _jsx(RuntimeLimitField, { label: t('productionReleases.new.field.tpm'), value: tpm, modelLimit: selectedModel ? formatModelLimit(selectedModel.tpm.limit) : '—', onChange: setTpm }), _jsx(RuntimeLimitField, { label: t('productionReleases.new.field.concurrency'), value: concurrency, modelLimit: selectedModel ? formatModelLimit(selectedModel.concurrency.limit) : '—', onChange: setConcurrency }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "text-[12.5px]", children: [t('productionReleases.new.field.temperature'), " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { type: "number", min: 0, max: 2, step: 0.1, value: temperature, onChange: (event) => setTemperature(event.target.value), className: "h-9" })] })] })] }), _jsxs("div", { className: "border-t border-dashed pt-5", children: [_jsx(Label, { children: t('canaryReleases.new.field.recordCategories') }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t('canaryReleases.new.field.recordCategoriesHelp') }), _jsx("div", { className: "mt-3", children: _jsx(RecordCategoriesField, { value: effectiveRecordCategories, options: recordCategoryOptions, onChange: setRecordCategorySelection }) })] })] })] }), _jsx("aside", { className: "flex flex-col gap-3 xl:sticky xl:top-20 xl:self-start", children: _jsxs("div", { className: "rounded-lg border bg-card p-4", children: [_jsx("h2", { className: "text-[14px] font-semibold", children: t('releases.new.section.summary') }), _jsxs("div", { className: "mt-4 space-y-3", children: [!isAddCanaryToProduction ? (_jsx(SummaryRow, { label: t('releases.new.field.name'), value: effectiveReleaseName || '—' })) : null, _jsx(SummaryRow, { label: t('releases.new.summary.prompt'), value: selectedPrompt && selectedVersion ? `${selectedPrompt.name} · ${selectedVersion.version}` : '—' }), _jsx(SummaryRow, { label: t('productionReleases.new.field.model'), value: selectedModel ? `${selectedModel.name} · ${selectedModel.providerModelId}` : '—' }), _jsx(SummaryRow, { label: t('releases.new.summary.connector'), value: selectedInputConnector?.name ?? '—' }), _jsx(SummaryRow, { label: t('releases.new.field.traffic'), value: trafficRatioValue === null
+                                                    ? '—'
+                                                    : isQueueInput
+                                                        ? `${Math.round(trafficRatioValue * 100)}%`
+                                                        : t('releases.new.traffic.production100') }), shouldCreateCanaryRelease ? (_jsx(SummaryRow, { label: t('releases.new.summary.trafficMode'), value: trafficMode === 'dual_run'
+                                                    ? t('releases.new.trafficMode.dualRun')
+                                                    : t('releases.new.trafficMode.split') })) : null, _jsx(SummaryRow, { label: t('releases.new.summary.outputs'), value: validOutputConnectorIds.length > 0
+                                                    ? String(validOutputConnectorIds.length)
+                                                    : t('productionReleases.new.noOutputConnector') }), _jsx(SummaryRow, { label: t('releases.new.summary.runtime'), value: rpmValue && tpmValue && concurrencyValue
+                                                    ? `${rpmValue} RPM / ${tpmValue} TPM / C${concurrencyValue}`
+                                                    : '—' })] }), _jsx("div", { className: "mt-4 rounded-md border bg-muted/35 px-3 py-2 text-[12px] text-muted-foreground", children: canSubmit ? t('releases.new.submitReady') : t('releases.new.submitDisabled') }), submitError ? (_jsxs("div", { className: "mt-3 flex gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-[12px] text-destructive", children: [_jsx(AlertCircle, { className: "mt-0.5 size-3.5 shrink-0" }), _jsx("span", { children: submitError })] })) : null, _jsx("p", { className: "mt-2 text-[11.5px] leading-5 text-muted-foreground", children: t('productionReleases.new.confirmIrreversible') })] }) })] }), _jsx("div", { className: "fixed bottom-0 left-0 right-0 z-30 border-t bg-background/95 px-4 py-3 shadow-[0_-8px_24px_rgb(15_23_42/0.08)] backdrop-blur supports-[backdrop-filter]:bg-background/80 md:left-[var(--sidebar-width)]", children: _jsxs("div", { className: "mx-auto flex w-full max-w-[1280px] flex-wrap items-center justify-between gap-3", children: [_jsx("p", { className: "text-[12px] text-muted-foreground", children: t('productionReleases.new.confirmIrreversible') }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", asChild: true, children: _jsx(Link, { href: "/releases", children: t('common.cancel') }) }), _jsx(DeployButton, { canSubmit: canSubmit, isPending: isSubmitting, label: shouldCreateCanaryRelease
+                                            ? t('canaryReleases.new.action.submit')
+                                            : t('productionReleases.new.action.submit'), pendingLabel: shouldCreateCanaryRelease
+                                            ? t('canaryReleases.new.action.submitting')
+                                            : t('productionReleases.new.action.submitting'), className: "min-w-28", testId: "release-new-submit" })] })] }) })] }) }));
+}
+//# sourceMappingURL=release-new-page.js.map