@proofhound/web-ui 0.1.6

package/dist/screens/optimizations/optimization-new-page.js

@@ -0,0 +1,732 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AlertTriangle, Calculator, Check, ChevronRight, Database, FileText, FlaskConical, Image as ImageIcon, Loader2, Play, Plus, Search, Sparkles, X, } from 'lucide-react';
+import { Button, Input, cn } from '@proofhound/ui';
+import { Main } from '@proofhound/ui/layout';
+import { PromptVersionPickerRow, PromptVersionPickerTag, PromptLanguageSelect } from '../../components';
+import { useI18n } from '../../i18n';
+import { formatLatencySeconds, getApiErrorMessage, isProjectNameTaken } from '../../lib';
+import { useOptimizations, useCreateOptimization } from '../../hooks';
+import { useDatasets } from '../../hooks';
+import { useExperiments } from '../../hooks';
+import { useProjectModels } from '../../hooks';
+import { usePrompt, usePrompts } from '../../hooks';
+import { useDateTimeFormatter, useDelayedLoading } from '../../hooks';
+import { composePromptPreview } from '../prompts/prompt-preview';
+import { renderPromptPreviewParts } from '../prompts/prompt-preview-parts';
+import { VARIABLE_TONE_CLASSES } from '../prompts/prompt-ui';
+import { DEFAULT_PROMPT_LANGUAGE, } from '@proofhound/shared';
+import { optimizationTone } from './optimization-theme';
+const METRIC_LABEL_KEY = {
+    accuracy: 'optimizations.new.optimization.metric.accuracy',
+    precision: 'optimizations.new.optimization.metric.precision',
+    recall: 'optimizations.new.optimization.metric.recall',
+};
+const COMPARATOR_LABEL_KEY = {
+    gte: 'optimizations.new.optimization.comparator.gte',
+    gt: 'optimizations.new.optimization.comparator.gt',
+    lte: 'optimizations.new.optimization.comparator.lte',
+};
+const PROMPT_LANGUAGE_LABEL_KEY = {
+    'zh-CN': 'promptLanguage.zhCN',
+    'en-US': 'promptLanguage.enUS',
+};
+const PROMPT_STATUS_LABEL_KEY = {
+    editable: 'optimizations.new.origin.promptStatus.editable',
+    frozen: 'optimizations.new.origin.promptStatus.frozen',
+};
+// ---------------------------------------------------------------------------
+// helpers
+// ---------------------------------------------------------------------------
+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 defaultName() {
+    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 `optm-${yyyy}-${mm}${dd}-`;
+}
+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 mapPromptVersionToOption(prompt, version, formatDateTime) {
+    const promptLanguage = version.promptLanguage ?? DEFAULT_PROMPT_LANGUAGE;
+    return {
+        id: version.id,
+        name: prompt.name,
+        version: `v${version.versionNumber}`,
+        promptLanguage,
+        isLatest: version.versionNumber === prompt.latestVersionNumber,
+        isOnline: version.versionNumber === prompt.currentOnlineVersionNumber,
+        status: version.status,
+        updatedAt: formatDateTime(version.createdAt),
+        variables: version.variables.map((variable) => ({
+            name: variable.name,
+            type: variable.type,
+            required: variable.required,
+        })),
+        promptPreview: composePromptPreview({
+            body: version.body,
+            outputSchema: version.outputSchema,
+            promptLanguage,
+        }),
+        template: version.body,
+    };
+}
+// model.{rpm|tpm|concurrency}.limit = -1 means unlimited
+function formatModelLimit(limit) {
+    return limit < 0 ? '∞' : formatThousand(limit);
+}
+// expected_output is the ground truth (used for judgment); it is neither a prompt input field nor
+// metadata — injecting it into the prompt would leak the answer; backend toLoopFieldWhitelist also strips it as a backstop.
+function deriveDatasetFields(dataset) {
+    if (!dataset)
+        return { inputs: [], metas: [] };
+    const inputs = [];
+    const metas = [];
+    for (const field of dataset.fieldSchema) {
+        if (field.role === 'expected_output')
+            continue;
+        if (field.role === 'metadata')
+            metas.push(field);
+        else
+            inputs.push(field);
+    }
+    return { inputs, metas };
+}
+function classScopes(dataset) {
+    if (!dataset)
+        return [];
+    return dataset.categoryDistribution.categories.map((category) => category.label);
+}
+// ---- Lightweight metric formatters used inside the detail panel (not extracted; the experiment detail page has a similar one with a different signature) ----
+function formatMetricFraction(value, digits = 3) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return '—';
+    return value.toFixed(digits);
+}
+function formatMetricInteger(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return '—';
+    return value.toLocaleString('en-US');
+}
+function formatMetricCost(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return '—';
+    if (value === 0)
+        return '$0';
+    if (value < 0.01)
+        return `$${value.toFixed(4)}`;
+    return `$${value.toFixed(2)}`;
+}
+function formatMetricLatencyMs(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return '—';
+    return `${formatLatencySeconds(value, 2)}s`;
+}
+// ---------------------------------------------------------------------------
+// shared primitives
+// ---------------------------------------------------------------------------
+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" }) }));
+}
+function FieldCheckbox({ checked, locked, ariaLabel, onClick, }) {
+    return (_jsx("button", { type: "button", role: "checkbox", "aria-checked": checked, "aria-disabled": locked || undefined, "aria-label": ariaLabel, disabled: locked, onClick: onClick, className: cn('inline-flex size-3.5 flex-none items-center justify-center rounded-[3px] border transition-colors', locked
+            ? cn(optimizationTone.positive.border, optimizationTone.positive.bg, optimizationTone.positive.text)
+            : checked
+                ? 'border-primary bg-primary text-primary-foreground'
+                : 'border-foreground/50 bg-background'), children: (checked || locked) && _jsx(Check, { className: "size-2.5", strokeWidth: 3 }) }));
+}
+function StepIndicator({ step, state, title, detail, }) {
+    return (_jsxs("div", { className: cn('flex min-w-0 items-center gap-2.5 rounded-md border bg-card px-3 py-2', state === 'current' && cn('border-primary/40 bg-primary/5'), state === 'done' && cn(optimizationTone.positive.border, optimizationTone.positive.bg)), children: [_jsx("span", { className: cn('inline-flex size-5 flex-none items-center justify-center rounded-full border font-mono text-[11px] font-semibold', state === 'current'
+                    ? 'border-primary bg-primary text-primary-foreground'
+                    : state === 'done'
+                        ? cn(optimizationTone.positive.pill, 'border-transparent')
+                        : 'border-border bg-muted text-muted-foreground'), children: state === 'done' ? _jsx(Check, { className: "size-3" }) : step }), _jsxs("div", { className: "min-w-0 leading-tight", children: [_jsx("div", { className: "text-[12.5px] font-semibold", children: title }), _jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: detail })] })] }));
+}
+function StepAnchor({ index }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cn('inline-flex size-5 items-center justify-center rounded-full border font-mono text-[11px]', optimizationTone.info.pill), children: index }));
+}
+function SubSectionHead({ tone, 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: cn('inline-block h-2.5 w-[3px] rounded-[1.5px]', tone === 'info' ? optimizationTone.info.fill : optimizationTone.positive.fill) }), label] }));
+}
+function MiniSearch({ value, onChange, placeholder, }) {
+    return (_jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-2 border-b bg-muted/60 px-3 py-2 backdrop-blur", 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-6 w-full min-w-0 bg-transparent text-[12.5px] outline-none placeholder:text-muted-foreground" })] }));
+}
+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' && optimizationTone.info.pill, tone === 'positive' && optimizationTone.positive.pill, tone === 'warning' && optimizationTone.warning.pill, tone === 'neutral' && 'border-border bg-muted text-muted-foreground'), children: children }));
+}
+function PickerEmpty({ children }) {
+    return _jsx("div", { className: "px-3 py-6 text-center text-[12px] text-muted-foreground", children: children });
+}
+function Slider({ value, min, max, step = 1, formatValue, onChange, }) {
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (event) => onChange(Number(event.target.value)), className: "flex-1 accent-primary" }), _jsx("span", { className: "w-16 text-right font-mono text-[13.5px] font-semibold tabular-nums", children: formatValue(value) })] }));
+}
+// ---------------------------------------------------------------------------
+// origin tile
+// ---------------------------------------------------------------------------
+function ModeTile({ active, icon: Icon, title, description, onClick, testId, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, "aria-pressed": active, "data-testid": testId, className: cn('flex w-full flex-col gap-1.5 rounded-md border px-3.5 py-3 text-left transition-colors', active
+            ? cn(optimizationTone.info.border, 'bg-[color-mix(in_oklab,var(--status-canary-bg)_55%,var(--background))]', 'shadow-[0_0_0_1px_var(--status-canary-bd)]')
+            : 'border-border bg-background hover:bg-muted/40'), children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cn('inline-flex size-6 items-center justify-center rounded-[7px] border', active
+                            ? cn(optimizationTone.info.pill, 'border-transparent')
+                            : 'border-border bg-secondary text-muted-foreground'), children: _jsx(Icon, { className: "size-3.5" }) }), _jsx("span", { className: "text-[13.5px] font-semibold", children: title })] }), _jsx("span", { className: "text-[12px] leading-snug text-muted-foreground", children: description })] }));
+}
+// ---------------------------------------------------------------------------
+// option rows (per-resource)
+// ---------------------------------------------------------------------------
+// ---- Experiment info panel: right column full profile (basic / quality / run params / engineering metrics / per-class) ----
+function MetricCard({ label, value, highlight }) {
+    return (_jsxs("div", { className: cn('flex flex-col gap-0.5 rounded-md border bg-card px-3 py-2', highlight && 'border-primary/40 bg-primary/5'), children: [_jsx("span", { className: "font-mono text-[10px] uppercase tracking-wide text-muted-foreground", children: label }), _jsx("span", { className: "font-mono text-[15px] font-semibold tabular-nums text-foreground", children: value })] }));
+}
+function SpecLine({ label, value }) {
+    return (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "min-w-[64px] flex-none text-[11px] text-muted-foreground", children: label }), _jsx("span", { className: "min-w-0 break-all font-mono text-[12px] text-foreground", children: value })] }));
+}
+function SectionDetails({ title, defaultOpen = false, children, testid, }) {
+    return (_jsxs("details", { className: "group rounded-md border bg-card", open: defaultOpen, "data-testid": testid, children: [_jsxs("summary", { className: "flex cursor-pointer select-none items-center gap-2 px-3 py-2 text-[10.5px] font-bold uppercase tracking-wide text-muted-foreground", children: [_jsx(ChevronRight, { className: "size-3.5 transition-transform group-open:rotate-90", "aria-hidden": "true" }), title] }), _jsx("div", { className: "border-t bg-background px-3 py-3", children: children })] }));
+}
+function ExperimentDetailPanel({ experiment, modelMissing, }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    if (!experiment) {
+        return (_jsx("div", { className: "flex min-h-[180px] items-center justify-center rounded-md border bg-card px-4 py-8 text-center text-[12px] text-muted-foreground", "data-testid": "optimization-new-experiment-detail-panel", children: t('optimizations.new.origin.experimentDetail.placeholder') }));
+    }
+    const metrics = experiment.metrics ?? null;
+    const runConfig = experiment.runConfig ?? null;
+    const perClass = metrics?.perClass ?? null;
+    return (_jsxs("div", { className: "space-y-2.5", "data-testid": "optimization-new-experiment-detail-panel", children: [modelMissing && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-[11.5px] text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3.5 flex-none", "aria-hidden": "true" }), _jsx("span", { children: t('optimizations.new.origin.experimentDetail.modelMissing') })] })), _jsxs("div", { className: "rounded-md border bg-card px-3 py-3", children: [_jsx("div", { className: "mb-2 text-[10.5px] font-bold uppercase tracking-wide text-muted-foreground", children: t('optimizations.new.origin.experimentDetail.basicSection') }), _jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-2", children: [_jsx(SpecLine, { label: t('optimizations.new.origin.experimentDetail.prompt'), value: `${experiment.promptName} ${experiment.promptVersionLabel}` }), _jsx(SpecLine, { label: t('optimizations.new.origin.experimentDetail.dataset'), value: `${experiment.datasetName} · ${formatThousand(experiment.datasetSamples)}` }), _jsx(SpecLine, { label: t('optimizations.new.origin.experimentDetail.model'), value: experiment.modelName }), _jsx(SpecLine, { label: t('optimizations.new.origin.experimentDetail.finishedAt'), value: formatDateTime(experiment.finishedAt) })] })] }), _jsxs("div", { className: "rounded-md border bg-card px-3 py-3", children: [_jsx("div", { className: "mb-2 text-[10.5px] font-bold uppercase tracking-wide text-muted-foreground", children: t('optimizations.new.origin.experimentDetail.qualitySection') }), _jsxs("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: [_jsx(MetricCard, { label: t('optimizations.new.optimization.metric.accuracy'), value: formatMetricFraction(metrics?.accuracy), highlight: true }), _jsx(MetricCard, { label: t('optimizations.new.optimization.metric.precision'), value: formatMetricFraction(metrics?.precision) }), _jsx(MetricCard, { label: t('optimizations.new.optimization.metric.recall'), value: formatMetricFraction(metrics?.recall) }), _jsx(MetricCard, { label: t('optimizations.new.optimization.metric.f1'), value: formatMetricFraction(metrics?.f1) })] })] }), _jsx(SectionDetails, { title: t('optimizations.new.origin.experimentDetail.runConfigSection'), testid: "optimization-new-experiment-detail-runconfig", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: [_jsx(SpecLine, { label: t('optimizations.new.origin.experimentDetail.temperature'), value: runConfig?.temperature ?? '—' }), _jsx(SpecLine, { label: t('optimizations.new.origin.experimentDetail.concurrency'), value: runConfig?.concurrency ?? '—' }), _jsx(SpecLine, { label: t('optimizations.new.origin.experimentDetail.rpm'), value: runConfig?.rpmLimit ?? '—' }), _jsx(SpecLine, { label: t('optimizations.new.origin.experimentDetail.tpm'), value: runConfig?.tpmLimit !== undefined && runConfig?.tpmLimit !== null
+                                ? formatThousand(runConfig.tpmLimit)
+                                : '—' })] }) }), _jsx(SectionDetails, { title: t('optimizations.new.origin.experimentDetail.engineeringSection'), testid: "optimization-new-experiment-detail-engineering", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3", children: [_jsx(MetricCard, { label: t('optimizations.new.origin.experimentDetail.inputTokens'), value: formatMetricInteger(metrics?.inputTokens) }), _jsx(MetricCard, { label: t('optimizations.new.origin.experimentDetail.outputTokens'), value: formatMetricInteger(metrics?.outputTokens) }), _jsx(MetricCard, { label: t('optimizations.new.origin.experimentDetail.cost'), value: formatMetricCost(metrics?.costEstimate) }), _jsx(MetricCard, { label: t('optimizations.new.origin.experimentDetail.latencyAvg'), value: formatMetricLatencyMs(metrics?.averageLatencyMs) }), _jsx(MetricCard, { label: t('optimizations.new.origin.experimentDetail.latencyP50'), value: formatMetricLatencyMs(metrics?.p50LatencyMs) }), _jsx(MetricCard, { label: t('optimizations.new.origin.experimentDetail.latencyP95'), value: formatMetricLatencyMs(metrics?.p95LatencyMs) })] }) }), _jsx(SectionDetails, { title: t('optimizations.new.origin.experimentDetail.perClassSection'), testid: "optimization-new-experiment-detail-per-class", children: perClass && perClass.length > 0 ? (_jsxs("table", { className: "w-full text-[12px]", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-[10.5px] uppercase tracking-wide text-muted-foreground", children: [_jsx("th", { className: "py-1 text-left font-medium", children: t('optimizations.new.origin.experimentDetail.perClassLabel') }), _jsx("th", { className: "py-1 text-right font-medium", children: "P" }), _jsx("th", { className: "py-1 text-right font-medium", children: "R" }), _jsx("th", { className: "py-1 text-right font-medium", children: "F1" }), _jsx("th", { className: "py-1 text-right font-medium", children: t('optimizations.new.origin.experimentDetail.perClassSupport') })] }) }), _jsx("tbody", { children: perClass.map((entry) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "py-1.5 font-mono", children: entry.label }), _jsx("td", { className: "py-1.5 text-right font-mono tabular-nums", children: formatMetricFraction(entry.precision) }), _jsx("td", { className: "py-1.5 text-right font-mono tabular-nums", children: formatMetricFraction(entry.recall) }), _jsx("td", { className: "py-1.5 text-right font-mono tabular-nums", children: formatMetricFraction(entry.f1) }), _jsx("td", { className: "py-1.5 text-right font-mono tabular-nums", children: formatMetricInteger(entry.support) })] }, entry.label))) })] })) : (_jsx("div", { className: "text-[11.5px] text-muted-foreground", children: t('optimizations.new.origin.experimentDetail.perClassEmpty') })) })] }));
+}
+function ExperimentRow({ experiment, 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: [_jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: _jsx("span", { className: "font-mono text-[13px] font-semibold", children: experiment.name }) }), experiment.description && (_jsx("div", { className: "mt-0.5 truncate text-[12.5px] text-muted-foreground", children: experiment.description })), _jsx("div", { className: "mt-1 text-[11.5px] text-muted-foreground", children: formatTemplate(t('optimizations.new.origin.experimentCreatedAt'), {
+                            date: formatDateTime(experiment.createdAt),
+                        }) })] })] }));
+}
+function PromptRow({ prompt, selected, onSelect, }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    const statusKey = PROMPT_STATUS_LABEL_KEY[prompt.latestVersionStatus];
+    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 }), statusKey && (_jsx(Tag, { tone: prompt.latestVersionStatus === 'frozen' ? 'positive' : 'neutral', children: t(statusKey) }))] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5", children: [_jsx(Tag, { children: formatTemplate(t('optimizations.new.origin.promptVersionCount'), {
+                                    count: prompt.latestVersionNumber,
+                                }) }), 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') }))] }), _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('optimizations.new.origin.promptVersionOnline') })) : option.isLatest ? (_jsx(PromptVersionPickerTag, { tone: "info", children: t('optimizations.new.origin.promptVersionLatest') })) : null, createdAt: option.updatedAt, trailing: _jsx(PromptVersionPickerTag, { children: t(PROMPT_LANGUAGE_LABEL_KEY[option.promptLanguage]) }) }));
+}
+function PromptVersionPreview({ option }) {
+    const { t } = useI18n();
+    const previewParts = useMemo(() => renderPromptPreviewParts(option?.promptPreview ?? '', option?.variables ?? []), [option]);
+    if (!option) {
+        return (_jsx("div", { className: "border-t px-3 py-6 text-center text-[12px] text-muted-foreground", "data-testid": "optimization-new-prompt-preview", children: t('optimizations.new.origin.promptPreviewEmpty') }));
+    }
+    return (_jsx("div", { className: "border-t px-3 py-3", "data-testid": "optimization-new-prompt-preview", children: _jsxs("div", { 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('optimizations.new.origin.promptPreview') }), _jsxs("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: [option.name, " \u00B7 ", option.version] })] }), _jsx("pre", { className: "max-h-[360px] 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')
+                            return _jsx("span", { children: part.value }, index);
+                        const tone = part.varType
+                            ? VARIABLE_TONE_CLASSES[part.varType]
+                            : 'border-muted-foreground/30 bg-muted/40 text-muted-foreground';
+                        return (_jsx("span", { className: cn('inline rounded border px-1 font-mono text-[11px]', tone), "data-variable-name": part.name, children: part.value }, index));
+                    }) })] }) }));
+}
+function DatasetRow({ dataset, selected, onSelect, }) {
+    const { t } = useI18n();
+    const meta = formatTemplate(t('optimizations.new.origin.datasetMeta'), {
+        samples: formatThousand(dataset.sampleCount),
+        fields: dataset.fieldSchema.length,
+    });
+    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: dataset.name }), dataset.hasImages && (_jsxs(Tag, { tone: "info", children: [_jsx(ImageIcon, { className: "size-2.5", "aria-hidden": "true" }), t('optimizations.new.origin.datasetHasImages')] }))] }), dataset.description && (_jsx("div", { className: "mt-0.5 truncate text-[12.5px] text-muted-foreground", children: dataset.description })), _jsx("div", { className: "mt-1 text-[11.5px] text-muted-foreground", children: meta })] })] }));
+}
+function ModelOptionRow({ model, selected, onSelect, }) {
+    const { t } = useI18n();
+    const ctx = model.contextWindowTokens
+        ? formatTemplate(t('optimizations.new.experiment.modelCap.ctx'), {
+            value: model.contextWindowTokens >= 1000
+                ? `${Math.round(model.contextWindowTokens / 1000)}K`
+                : String(model.contextWindowTokens),
+        })
+        : null;
+    const unlimited = t('optimizations.new.experiment.modelUnlimited');
+    const rpmText = model.rpm.limit < 0 ? unlimited : formatThousand(model.rpm.limit);
+    const tpmText = model.tpm.limit < 0 ? unlimited : formatThousand(model.tpm.limit);
+    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 === 'disabled' && _jsx(Tag, { tone: "neutral", children: t('optimizations.new.experiment.modelDisabled') }), model.status === 'testing' && _jsx(Tag, { tone: "warning", children: t('optimizations.new.experiment.modelTesting') })] }), _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 }), model.capabilities.image !== 'none' && (_jsx(Tag, { tone: "info", children: t('optimizations.new.experiment.modelCap.vision') })), _jsx(Tag, { children: formatTemplate(t('optimizations.new.experiment.modelRpmTpm'), { rpm: rpmText, tpm: tpmText }) })] })] }), _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('optimizations.new.experiment.modelPriceLabel'), {
+                            input: formatPrice(model.pricing.inputPerMillion),
+                            output: formatPrice(model.pricing.outputPerMillion),
+                        }) }), _jsx("div", { className: "text-[10.5px] text-muted-foreground", children: t('optimizations.new.experiment.modelPriceUnit') })] })] }));
+}
+// ---------------------------------------------------------------------------
+// main page
+// ---------------------------------------------------------------------------
+export function OptimizationNewPage({ projectId, initialDatasetId, initialPromptId, initialPromptVersionId, initialSourceExperimentId, }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    // basic
+    const [name, setName] = useState(defaultName);
+    const [description, setDescription] = useState('');
+    const [optimizationHint, setOptimizationHint] = useState('');
+    // origin
+    const [originMode, setOriginMode] = useState(initialSourceExperimentId ? 'experiment' : initialDatasetId ? 'dataset' : initialPromptId ? 'prompt' : 'experiment');
+    const [selectedExperimentId, setSelectedExperimentId] = useState(initialSourceExperimentId ?? '');
+    const [selectedPromptId, setSelectedPromptId] = useState(initialPromptId ?? '');
+    const [selectedPromptVersionId, setSelectedPromptVersionId] = useState(initialPromptVersionId ?? '');
+    const [selectedDatasetId, setSelectedDatasetId] = useState(initialDatasetId ?? '');
+    const [experimentSearch, setExperimentSearch] = useState('');
+    const [promptSearch, setPromptSearch] = useState('');
+    const [datasetSearch, setDatasetSearch] = useState('');
+    // experiment config
+    const [selectedModelId, setSelectedModelId] = useState('');
+    const [modelSearch, setModelSearch] = useState('');
+    const [temperature, setTemperature] = useState(0);
+    const [concurrency, setConcurrency] = useState(8);
+    const [rpm, setRpm] = useState(60);
+    const [tpm, setTpm] = useState(120_000);
+    const [sampleTimeoutSeconds, setSampleTimeoutSeconds] = useState(20);
+    const [retries, setRetries] = useState(0);
+    const [imageEncoding, setImageEncoding] = useState('url');
+    // optimization
+    const [goals, setGoals] = useState([
+        { id: 'g1', metric: 'accuracy', comparator: 'gte', target: '0.90', scope: 'overall' },
+    ]);
+    const [analysisModelId, setAnalysisModelId] = useState('');
+    const [analysisModelSearch, setAnalysisModelSearch] = useState('');
+    const [maxRounds, setMaxRounds] = useState(5);
+    const [noImprovementRounds, setNoImprovementRounds] = useState(0);
+    const [initialSamplingRounds, setInitialSamplingRounds] = useState(1);
+    const [initialSamplesPerRound, setInitialSamplesPerRound] = useState(20);
+    const [datasetPromptLanguage, setDatasetPromptLanguage] = useState(DEFAULT_PROMPT_LANGUAGE);
+    // meta-field user overrides keyed by `${datasetId}:${fieldName}` so changing
+    // datasets resets the field state cleanly without an effect
+    const [metaOverrides, setMetaOverrides] = useState({});
+    // data hooks
+    const experimentsQuery = useExperiments(projectId);
+    const optimizationsQuery = useOptimizations(projectId);
+    const promptsQuery = usePrompts(projectId);
+    const datasetsQuery = useDatasets(projectId);
+    const modelsQuery = useProjectModels(projectId, { autoRefresh: false });
+    const experiments = useMemo(() => experimentsQuery.data?.data ?? [], [experimentsQuery.data]);
+    const optimizations = useMemo(() => optimizationsQuery.data?.data ?? [], [optimizationsQuery.data]);
+    const prompts = useMemo(() => promptsQuery.data?.data ?? [], [promptsQuery.data]);
+    const datasets = useMemo(() => datasetsQuery.data?.data ?? [], [datasetsQuery.data]);
+    const models = useMemo(() => modelsQuery.data?.data ?? [], [modelsQuery.data]);
+    const optimizationNameTaken = useMemo(() => isProjectNameTaken(name, optimizations), [optimizations, name]);
+    // Effective selections: user choice or fall back to first-fit. Derived (no setState in render).
+    // experiment fallback uses successExperiments[0]: after list filtering, running/failed etc. are excluded;
+    // must align here, otherwise the form falls onto an invisible experiment when the user has not selected one
+    const successExperimentsHead = useMemo(() => experiments.find((item) => item.status === 'success') ?? null, [experiments]);
+    const effectiveExperimentId = selectedExperimentId || successExperimentsHead?.id || '';
+    const effectivePromptId = selectedPromptId || prompts[0]?.id || '';
+    // Start = experiment and the user has not manually picked a model: experiment model / analysis model defaults follow the experiment's bound model;
+    // when the bound model has been soft-deleted, returns undefined and falls back to models[0]
+    const experimentDefaultModelId = useMemo(() => {
+        if (originMode !== 'experiment')
+            return undefined;
+        const exp = experiments.find((item) => item.id === effectiveExperimentId);
+        if (!exp)
+            return undefined;
+        return models.find((m) => m.id === exp.modelId)?.id;
+    }, [originMode, effectiveExperimentId, experiments, models]);
+    const effectiveModelId = selectedModelId || experimentDefaultModelId || models[0]?.id || '';
+    const effectiveAnalysisModelId = analysisModelId || experimentDefaultModelId || models[0]?.id || '';
+    // resolve currently-selected resource
+    const selectedExperiment = useMemo(() => experiments.find((item) => item.id === effectiveExperimentId), [experiments, effectiveExperimentId]);
+    const selectedPrompt = useMemo(() => prompts.find((item) => item.id === effectivePromptId), [prompts, effectivePromptId]);
+    const promptDetailQuery = usePrompt(projectId, selectedPrompt?.id ?? '');
+    const experimentsLoading = useDelayedLoading(experimentsQuery.isLoading);
+    const promptsLoading = useDelayedLoading(promptsQuery.isLoading);
+    const promptDetailLoading = useDelayedLoading(promptDetailQuery.isLoading);
+    const datasetsLoading = useDelayedLoading(datasetsQuery.isLoading);
+    const modelsLoading = useDelayedLoading(modelsQuery.isLoading);
+    const promptVersions = useMemo(() => selectedPrompt && promptDetailQuery.data
+        ? promptDetailQuery.data.versions.map((version) => mapPromptVersionToOption(selectedPrompt, version, formatDateTime))
+        : [], [formatDateTime, promptDetailQuery.data, selectedPrompt]);
+    const preferredPromptVersion = useMemo(() => {
+        if (promptVersions.length === 0)
+            return null;
+        const fromUrl = initialPromptVersionId
+            ? promptVersions.find((option) => option.id === initialPromptVersionId)
+            : null;
+        const online = selectedPrompt?.currentOnlineVersionNumber
+            ? promptVersions.find((option) => option.version === `v${selectedPrompt.currentOnlineVersionNumber}`)
+            : null;
+        const latest = promptVersions.find((option) => option.isLatest);
+        return fromUrl ?? online ?? latest ?? promptVersions[0] ?? null;
+    }, [initialPromptVersionId, promptVersions, selectedPrompt]);
+    const effectivePromptVersionId = selectedPromptVersionId && promptVersions.some((option) => option.id === selectedPromptVersionId)
+        ? selectedPromptVersionId
+        : (preferredPromptVersion?.id ?? '');
+    const selectedPromptVersion = useMemo(() => promptVersions.find((option) => option.id === effectivePromptVersionId) ?? null, [effectivePromptVersionId, promptVersions]);
+    // Dataset selection priority: user choice → (prompt mode) prompt.defaultDatasetId → first dataset.
+    const effectiveDatasetId = selectedDatasetId ||
+        (originMode === 'prompt' ? (selectedPrompt?.defaultDatasetId ?? '') : '') ||
+        datasets[0]?.id ||
+        '';
+    const selectedDataset = useMemo(() => datasets.find((item) => item.id === effectiveDatasetId), [datasets, effectiveDatasetId]);
+    const impliedDatasetId = originMode === 'experiment' ? (selectedExperiment?.datasetId ?? null) : effectiveDatasetId || null; // Both prompt and dataset modes use effectiveDatasetId
+    const impliedDataset = useMemo(() => (impliedDatasetId ? (datasets.find((item) => item.id === impliedDatasetId) ?? null) : null), [datasets, impliedDatasetId]);
+    const { inputs: inputFields, metas: metaFields } = useMemo(() => deriveDatasetFields(impliedDataset), [impliedDataset]);
+    const selectedModel = useMemo(() => models.find((item) => item.id === effectiveModelId), [models, effectiveModelId]);
+    const selectedAnalysisModel = useMemo(() => models.find((item) => item.id === effectiveAnalysisModelId), [models, effectiveAnalysisModelId]);
+    // filtered lists — the experiment list only accepts status==='success' as a baseline candidate;
+    // only completed experiments have trustworthy run parameters + metrics that can be group-imported
+    const successExperiments = useMemo(() => experiments.filter((item) => item.status === 'success'), [experiments]);
+    const filteredExperiments = useMemo(() => {
+        const query = experimentSearch.trim().toLowerCase();
+        if (!query)
+            return successExperiments;
+        return successExperiments.filter((item) => `${item.name} ${item.description ?? ''} ${item.promptName} ${item.datasetName} ${item.modelName}`
+            .toLowerCase()
+            .includes(query));
+    }, [successExperiments, experimentSearch]);
+    const filteredPrompts = useMemo(() => {
+        const query = promptSearch.trim().toLowerCase();
+        if (!query)
+            return prompts;
+        return prompts.filter((item) => item.name.toLowerCase().includes(query));
+    }, [prompts, promptSearch]);
+    const filteredDatasets = useMemo(() => {
+        const query = datasetSearch.trim().toLowerCase();
+        if (!query)
+            return datasets;
+        return datasets.filter((item) => `${item.name} ${item.description ?? ''}`.toLowerCase().includes(query));
+    }, [datasets, datasetSearch]);
+    const filteredModels = useMemo(() => {
+        const query = modelSearch.trim().toLowerCase();
+        if (!query)
+            return models;
+        return models.filter((item) => `${item.name} ${item.providerType} ${item.providerModelId}`.toLowerCase().includes(query));
+    }, [models, modelSearch]);
+    const filteredAnalysisModels = useMemo(() => {
+        const query = analysisModelSearch.trim().toLowerCase();
+        if (!query)
+            return models;
+        return models.filter((item) => `${item.name} ${item.providerType} ${item.providerModelId}`.toLowerCase().includes(query));
+    }, [models, analysisModelSearch]);
+    // ---- Run parameter auto-sync helper (avoiding §4.21: all setState goes through a callback, not a useEffect listening to the same-name state) ----
+    // Look up the model in the project model list; returns undefined when not found (soft-deleted)
+    const modelOf = useCallback((id) => (id ? models.find((item) => item.id === id) : undefined), [models]);
+    // Selecting an experiment = whole-group override: modelId / analysisModelId(= modelId) / temperature / concurrency / rpm / tpm
+    // Experiment runConfig priority → model limit fallback → hardcoded backstop
+    const applyExperimentDefaults = useCallback((exp) => {
+        setSelectedExperimentId(exp.id);
+        const expModel = modelOf(exp.modelId);
+        if (expModel) {
+            setSelectedModelId(exp.modelId);
+            setAnalysisModelId(exp.modelId);
+        }
+        setTemperature(exp.runConfig?.temperature ?? 0);
+        setConcurrency(exp.runConfig?.concurrency ?? expModel?.concurrency.limit ?? 8);
+        setRpm(exp.runConfig?.rpmLimit ?? expModel?.rpm.limit ?? 60);
+        setTpm(exp.runConfig?.tpmLimit ?? expModel?.tpm.limit ?? 120_000);
+        setSampleTimeoutSeconds(exp.runConfig?.sampleTimeoutSeconds ?? 20);
+        setRetries(exp.runConfig?.retries ?? 0);
+        setImageEncoding(exp.runConfig?.imageEncoding ?? 'url');
+    }, [modelOf]);
+    // Switch model / switch away from experiment mode → run parameters follow the model default (temperature has no model field; keep user value)
+    const applyModelDefaults = useCallback((model) => {
+        setSelectedModelId(model.id);
+        setConcurrency(model.concurrency.limit > 0 ? model.concurrency.limit : 8);
+        setRpm(model.rpm.limit > 0 ? model.rpm.limit : 60);
+        setTpm(model.tpm.limit > 0 ? model.tpm.limit : 120_000);
+    }, []);
+    const handlePromptSelect = useCallback((promptId) => {
+        setSelectedPromptId(promptId);
+        setSelectedPromptVersionId('');
+    }, []);
+    // Switching start mode (experiment → other only) triggers applyModelDefaults, falling back to the run parameters bound to the experiment
+    const handleOriginModeChange = useCallback((next) => {
+        setOriginMode((current) => {
+            if (current === 'experiment' && next !== 'experiment' && selectedModel) {
+                applyModelDefaults(selectedModel);
+            }
+            return next;
+        });
+    }, [applyModelDefaults, selectedModel]);
+    // URL ?sourceExperimentId=<success-id> one-shot sync entry (the only allowed useEffect)
+    // ref sentinel ensures setState-induced re-renders do not retrigger this effect, so no loop
+    const didInitialSyncRef = useRef(false);
+    useEffect(() => {
+        if (didInitialSyncRef.current)
+            return;
+        if (!initialSourceExperimentId)
+            return;
+        if (experiments.length === 0)
+            return;
+        const exp = experiments.find((item) => item.id === initialSourceExperimentId);
+        if (exp && exp.status === 'success') {
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- URL entry first-time sync; ref guarantees one-shot
+            applyExperimentDefaults(exp);
+        }
+        didInitialSyncRef.current = true;
+    }, [experiments, initialSourceExperimentId, applyExperimentDefaults]);
+    // scope options derived from current dataset's category distribution
+    const scopeOptions = useMemo(() => classScopes(impliedDataset), [impliedDataset]);
+    // goal handlers
+    const addGoal = () => {
+        const id = `g${goals.length + 1}-${Date.now()}`;
+        setGoals((current) => [...current, { id, metric: 'recall', comparator: 'gte', target: '0.80', scope: 'overall' }]);
+    };
+    const updateGoal = (id, patch) => {
+        setGoals((current) => current.map((goal) => (goal.id === id ? { ...goal, ...patch } : goal)));
+    };
+    const removeGoal = (id) => {
+        setGoals((current) => current.filter((goal) => goal.id !== id));
+    };
+    // field selection handlers (override-based; key namespaced by datasetId)
+    const metaOverrideKey = (fieldName) => (impliedDataset ? `${impliedDataset.id}:${fieldName}` : fieldName);
+    const isMetaChecked = (fieldName) => metaOverrides[metaOverrideKey(fieldName)] ?? false;
+    const toggleMetaField = (fieldName) => {
+        const key = metaOverrideKey(fieldName);
+        setMetaOverrides((current) => ({ ...current, [key]: !(current[key] ?? false) }));
+    };
+    // origin picker status
+    const originStatus = originMode === 'experiment'
+        ? selectedExperiment
+            ? 'done'
+            : 'current'
+        : originMode === 'prompt'
+            ? selectedPrompt && selectedPromptVersion
+                ? 'done'
+                : 'current'
+            : selectedDataset
+                ? 'done'
+                : 'current';
+    const expStatus = selectedModel ? 'done' : 'current';
+    const optStatus = goals.length > 0 && selectedAnalysisModel ? 'done' : 'current';
+    // estimate (mockup-aligned synthetic numbers)
+    const sampleCount = impliedDataset?.sampleCount ?? selectedExperiment?.datasetSamples ?? 0;
+    const totalRuns = maxRounds;
+    const totalAnalysisTokens = maxRounds * 160_000;
+    const totalExperimentTokens = sampleCount * 2500 * totalRuns;
+    const experimentCost = selectedModel
+        ? ((totalExperimentTokens * 0.7) / 1_000_000) * selectedModel.pricing.inputPerMillion +
+            ((totalExperimentTokens * 0.3) / 1_000_000) * selectedModel.pricing.outputPerMillion
+        : 0;
+    const analysisCost = selectedAnalysisModel
+        ? ((totalAnalysisTokens * 0.7) / 1_000_000) * selectedAnalysisModel.pricing.inputPerMillion +
+            ((totalAnalysisTokens * 0.3) / 1_000_000) * selectedAnalysisModel.pricing.outputPerMillion
+        : 0;
+    const totalCost = experimentCost + analysisCost;
+    // --------------------------- submit ---------------------------
+    const router = useRouter();
+    const createMutation = useCreateOptimization(projectId);
+    const [submitError, setSubmitError] = useState(null);
+    const buildDto = () => {
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+            setSubmitError(t('optimizations.new.error.nameRequired'));
+            return null;
+        }
+        if (optimizationNameTaken) {
+            setSubmitError(t('common.formError.nameTaken'));
+            return null;
+        }
+        if (!effectiveDatasetId && originMode === 'dataset') {
+            setSubmitError(t('optimizations.new.error.datasetRequired'));
+            return null;
+        }
+        if (!effectiveModelId) {
+            setSubmitError(t('optimizations.new.error.modelRequired'));
+            return null;
+        }
+        if (!effectiveAnalysisModelId) {
+            setSubmitError(t('optimizations.new.error.analysisModelRequired'));
+            return null;
+        }
+        let startingMode;
+        let sourceExperimentId = null;
+        let promptIdValue = null;
+        let baseVersionIdValue = null;
+        let resolvedDatasetId;
+        if (originMode === 'experiment') {
+            if (!selectedExperiment) {
+                setSubmitError(t('optimizations.new.error.experimentRequired'));
+                return null;
+            }
+            startingMode = 'from_experiment';
+            sourceExperimentId = selectedExperiment.id;
+            resolvedDatasetId = selectedExperiment.datasetId;
+        }
+        else if (originMode === 'prompt') {
+            if (!selectedPrompt) {
+                setSubmitError(t('optimizations.new.error.promptRequired'));
+                return null;
+            }
+            if (!selectedPromptVersion) {
+                setSubmitError(t('optimizations.new.error.promptVersionRequired'));
+                return null;
+            }
+            if (!effectiveDatasetId) {
+                setSubmitError(t('optimizations.new.error.datasetRequired'));
+                return null;
+            }
+            startingMode = 'from_prompt_version';
+            promptIdValue = selectedPrompt.id;
+            baseVersionIdValue = selectedPromptVersion.id;
+            resolvedDatasetId = effectiveDatasetId;
+        }
+        else {
+            if (!selectedDataset) {
+                setSubmitError(t('optimizations.new.error.datasetRequired'));
+                return null;
+            }
+            startingMode = 'from_dataset_only';
+            resolvedDatasetId = selectedDataset.id;
+        }
+        const numericGoals = goals.map((goal) => ({
+            metric: goal.metric,
+            comparator: goal.comparator,
+            target: Number(goal.target),
+            scope: goal.scope,
+        }));
+        if (numericGoals.some((goal) => !Number.isFinite(goal.target) || goal.target < 0 || goal.target > 1)) {
+            setSubmitError(t('optimizations.new.error.goalTargetInvalid'));
+            return null;
+        }
+        if (numericGoals.length === 0) {
+            setSubmitError(t('optimizations.new.error.goalsRequired'));
+            return null;
+        }
+        const selectedMetaFields = metaFields.filter((field) => isMetaChecked(field.name)).map((field) => field.name);
+        const inputFieldNames = inputFields.map((field) => field.name);
+        const fieldWhitelist = impliedDataset ? { inputFields: inputFieldNames, metaFields: selectedMetaFields } : null;
+        const strategyConfig = startingMode === 'from_dataset_only' ? { initialSamplingRounds, initialSamplesPerRound } : undefined;
+        return {
+            name: trimmedName,
+            description: description.trim() ? description.trim() : null,
+            optimizationHint: optimizationHint.trim() ? optimizationHint.trim() : null,
+            promptLanguage: originMode === 'dataset' ? datasetPromptLanguage : undefined,
+            strategy: 'error_pattern_analysis',
+            strategyConfig,
+            startingMode,
+            sourceExperimentId,
+            promptId: promptIdValue,
+            baseVersionId: baseVersionIdValue,
+            datasetId: resolvedDatasetId,
+            experimentModelId: effectiveModelId,
+            analysisModelId: effectiveAnalysisModelId,
+            goals: numericGoals,
+            fieldWhitelist,
+            runConfig: {
+                temperature,
+                concurrency,
+                rpmLimit: rpm,
+                tpmLimit: tpm,
+                sampleTimeoutSeconds,
+                retries,
+                imageEncoding,
+            },
+            loopLimits: {
+                maxRounds,
+                stopAfterNoImprovementRounds: noImprovementRounds,
+            },
+        };
+    };
+    const handleSubmit = async () => {
+        setSubmitError(null);
+        const dto = buildDto();
+        if (!dto)
+            return;
+        try {
+            const created = await createMutation.mutateAsync(dto);
+            router.push(`/optimizations/${created.id}`);
+        }
+        catch (error) {
+            const message = getApiErrorMessage(error);
+            setSubmitError(message === 'optimization_name_taken'
+                ? t('common.formError.nameTaken')
+                : (message ?? t('optimizations.new.error.submitFailed')));
+        }
+    };
+    const isSubmitting = createMutation.isPending;
+    return (_jsx(Main, { className: "gap-0 bg-muted/35 p-0", children: _jsxs("div", { className: "mx-auto w-full max-w-[1760px] px-4 py-6 sm:px-6 lg:px-8", "data-testid": "optimization-new-page", children: [_jsx("div", { className: "mb-4 flex flex-wrap items-center gap-2 text-[12.5px] text-muted-foreground", children: _jsx(Link, { href: `/optimizations`, className: "hover:text-foreground", children: t('optimizations.new.backToList') }) }), _jsxs("div", { className: "mb-5 flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-[26px] font-semibold", children: t('optimizations.new.title') }), _jsx("p", { className: "mt-1 text-[12.5px] text-muted-foreground", children: t('optimizations.new.subtitle') })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { asChild: true, type: "button", variant: "ghost", size: "sm", className: "h-9", children: _jsx(Link, { href: `/optimizations`, children: t('optimizations.new.cancel') }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "h-9", disabled: isSubmitting, children: t('optimizations.new.saveDraft') }), _jsxs(Button, { type: "button", size: "sm", className: "h-9 gap-1", onClick: handleSubmit, disabled: isSubmitting || optimizationNameTaken, "data-testid": "optimization-new-submit", children: [isSubmitting ? _jsx(Loader2, { className: "size-3.5 animate-spin" }) : _jsx(Play, { className: "size-3.5" }), t('optimizations.new.start')] })] })] }), submitError && (_jsxs("div", { role: "alert", className: cn('mb-4 flex items-start gap-2 rounded-md border px-3 py-2 text-[12.5px]', 'border-destructive/40 bg-destructive/10 text-destructive'), children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3.5 flex-none", "aria-hidden": "true" }), _jsx("span", { className: "flex-1", children: submitError }), _jsx("button", { type: "button", onClick: () => setSubmitError(null), "aria-label": t('optimizations.new.error.dismiss'), className: "ml-2 inline-flex size-5 items-center justify-center rounded text-destructive/80 hover:text-destructive", children: _jsx(X, { className: "size-3.5" }) })] })), _jsxs("div", { className: "mb-5 grid grid-cols-1 gap-3 sm:grid-cols-3", children: [_jsx(StepIndicator, { step: 1, state: originStatus, title: t('optimizations.new.steps.naming'), detail: t('optimizations.new.steps.namingDetail') }), _jsx(StepIndicator, { step: 2, state: expStatus, title: t('optimizations.new.steps.experiment'), detail: t('optimizations.new.steps.experimentDetail') }), _jsx(StepIndicator, { step: 3, state: optStatus, title: t('optimizations.new.steps.optimization'), detail: t('optimizations.new.steps.optimizationDetail') })] }), _jsxs("div", { className: "grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_340px]", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [_jsxs("section", { className: "rounded-lg border bg-card", "data-testid": "optimization-new-step-naming", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-5 py-3", children: [_jsx(StepAnchor, { index: 1 }), _jsx("h3", { className: "text-[14px] font-semibold", children: t('optimizations.new.steps.naming') }), _jsx("span", { className: "text-[12px] text-muted-foreground", children: t('optimizations.new.steps.namingDetail') })] }), _jsxs("div", { className: "space-y-5 p-5", children: [_jsxs("div", { children: [_jsx(SubSectionHead, { tone: "info", label: t('optimizations.new.naming.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: "block text-[12.5px] font-medium", children: [t('optimizations.new.naming.name'), " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { value: name, onChange: (event) => setName(event.target.value), className: "font-mono text-[13px]", placeholder: t('optimizations.new.naming.namePlaceholder'), "aria-invalid": optimizationNameTaken || undefined, "data-testid": "optimization-new-name" }), optimizationNameTaken ? (_jsx("div", { className: "text-[11px] text-destructive", children: t('common.formError.nameTaken') })) : (_jsx("div", { className: "text-[11px] text-muted-foreground", children: t('optimizations.new.naming.nameHelp') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.naming.description') }), _jsx(Input, { value: description, onChange: (event) => setDescription(event.target.value), placeholder: t('optimizations.new.naming.descriptionPlaceholder') })] })] })] }), _jsxs("div", { className: "border-t border-dashed pt-5", children: [_jsx(SubSectionHead, { tone: "info", label: t('optimizations.new.naming.startingPoint') }), _jsxs("label", { className: "mb-2 block text-[12.5px] font-medium", children: [t('optimizations.new.origin.label'), " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs("div", { className: "grid grid-cols-1 gap-2.5 sm:grid-cols-3", children: [_jsx("div", { className: "contents", children: _jsx(ModeTile, { testId: "optimization-new-origin-mode-experiment", active: originMode === 'experiment', icon: FlaskConical, title: t('optimizations.new.origin.experimentTitle'), description: t('optimizations.new.origin.experimentDesc'), onClick: () => handleOriginModeChange('experiment') }) }), _jsx("div", { className: "contents", children: _jsx(ModeTile, { testId: "optimization-new-origin-mode-prompt", active: originMode === 'prompt', icon: FileText, title: t('optimizations.new.origin.promptTitle'), description: t('optimizations.new.origin.promptDesc'), onClick: () => handleOriginModeChange('prompt') }) }), _jsx("div", { className: "contents", children: _jsx(ModeTile, { testId: "optimization-new-origin-mode-dataset", active: originMode === 'dataset', icon: Database, title: t('optimizations.new.origin.datasetTitle'), description: t('optimizations.new.origin.datasetDesc'), onClick: () => handleOriginModeChange('dataset') }) })] }), _jsxs("div", { className: "mt-4 space-y-2", "data-testid": `optimization-new-origin-picker-${originMode}`, children: [_jsxs("label", { className: "block text-[12.5px] font-medium", children: [originMode === 'experiment'
+                                                                            ? t('optimizations.new.origin.experimentPicker')
+                                                                            : originMode === 'prompt'
+                                                                                ? t('optimizations.new.origin.promptPicker')
+                                                                                : t('optimizations.new.origin.datasetPicker'), ' ', _jsx("span", { className: "text-destructive", children: "*" })] }), originMode === 'experiment' ? (_jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,300px)_1fr]", children: [_jsxs("div", { className: "max-h-[360px] overflow-y-auto overflow-x-hidden rounded-md border bg-background", children: [_jsx(MiniSearch, { value: experimentSearch, onChange: setExperimentSearch, placeholder: t('optimizations.new.origin.searchExperiment') }), experimentsLoading ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.experimentLoading') })) : experimentsQuery.isError ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.experimentError') })) : filteredExperiments.length === 0 ? (_jsx(PickerEmpty, { children: experiments.length === 0
+                                                                                        ? t('optimizations.new.origin.experimentEmpty')
+                                                                                        : t('optimizations.new.origin.experimentEmptySuccess') })) : (filteredExperiments.map((experiment) => (_jsx(ExperimentRow, { experiment: experiment, selected: experiment.id === effectiveExperimentId, onSelect: () => applyExperimentDefaults(experiment) }, experiment.id))))] }), _jsx(ExperimentDetailPanel, { experiment: selectedExperiment ?? null, modelMissing: !!selectedExperiment && !modelOf(selectedExperiment.modelId) })] })) : originMode === 'prompt' ? (_jsxs("div", { className: "rounded-md border bg-background", children: [_jsx(MiniSearch, { value: promptSearch, onChange: setPromptSearch, placeholder: t('optimizations.new.origin.searchPrompt') }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [_jsxs("div", { className: "border-b md:border-b-0 md: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('optimizations.new.origin.promptColumn') }), _jsx("div", { className: "max-h-[360px] overflow-y-auto overflow-x-hidden", children: promptsLoading ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.promptLoading') })) : promptsQuery.isError ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.promptError') })) : filteredPrompts.length === 0 ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.promptEmpty') })) : (filteredPrompts.map((prompt) => (_jsx("div", { "data-testid": `optimization-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('optimizations.new.origin.versionColumn') }), _jsx("div", { className: "max-h-[360px] overflow-y-auto overflow-x-hidden", children: promptDetailLoading ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.promptVersionLoading') })) : promptDetailQuery.isError ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.promptVersionError') })) : promptVersions.length === 0 ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.promptVersionEmpty') })) : (promptVersions.map((version) => (_jsx("div", { "data-testid": `optimization-new-version-row-${version.id}`, children: _jsx(PromptVersionRow, { option: version, selected: version.id === effectivePromptVersionId, onSelect: () => setSelectedPromptVersionId(version.id) }) }, version.id)))) })] })] }), _jsx(PromptVersionPreview, { option: selectedPromptVersion })] })) : (_jsxs("div", { className: "max-h-[360px] overflow-y-auto overflow-x-hidden rounded-md border bg-background", children: [_jsx(MiniSearch, { value: datasetSearch, onChange: setDatasetSearch, placeholder: t('optimizations.new.origin.searchDataset') }), datasetsLoading ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.datasetLoading') })) : datasetsQuery.isError ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.datasetError') })) : filteredDatasets.length === 0 ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.datasetEmpty') })) : (filteredDatasets.map((dataset) => (_jsx("div", { "data-testid": `optimization-new-dataset-row-${dataset.id}`, children: _jsx(DatasetRow, { dataset: dataset, selected: dataset.id === effectiveDatasetId, onSelect: () => setSelectedDatasetId(dataset.id) }) }, dataset.id))))] }))] }), originMode === 'dataset' && (_jsxs("div", { className: cn('mt-3 flex items-start gap-2 rounded-md border px-3 py-2 text-[12px]', optimizationTone.info.border, optimizationTone.info.bg), "data-testid": "optimization-new-dataset-first-version-hint", children: [_jsx(Sparkles, { className: "mt-0.5 size-3.5 shrink-0 text-[var(--status-canary-fg)]", "aria-hidden": "true" }), _jsx("span", { children: t('optimizations.new.origin.datasetFirstVersionHint') })] })), originMode === 'prompt' && (_jsxs("div", { className: "mt-4 space-y-2", "data-testid": "optimization-new-origin-prompt-dataset-picker", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [_jsxs("label", { className: "block text-[12.5px] font-medium", children: [t('optimizations.new.origin.promptDatasetPicker'), ' ', _jsx("span", { className: "text-destructive", children: "*" })] }), selectedPrompt?.defaultDatasetId &&
+                                                                            effectiveDatasetId &&
+                                                                            effectiveDatasetId !== selectedPrompt.defaultDatasetId && (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10.5px]', optimizationTone.warning.pill), children: [_jsx(AlertTriangle, { className: "size-3", "aria-hidden": "true" }), t('optimizations.new.origin.promptDatasetMismatch')] })), selectedPrompt?.defaultDatasetId && effectiveDatasetId === selectedPrompt.defaultDatasetId && (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10.5px]', optimizationTone.positive.pill), children: [_jsx(Check, { className: "size-3", "aria-hidden": "true" }), t('optimizations.new.origin.promptDatasetDefault')] }))] }), _jsxs("div", { className: "max-h-[360px] overflow-y-auto overflow-x-hidden rounded-md border bg-background", children: [_jsx(MiniSearch, { value: datasetSearch, onChange: setDatasetSearch, placeholder: t('optimizations.new.origin.searchDataset') }), datasetsLoading ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.datasetLoading') })) : datasetsQuery.isError ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.datasetError') })) : filteredDatasets.length === 0 ? (_jsx(PickerEmpty, { children: t('optimizations.new.origin.datasetEmpty') })) : (filteredDatasets.map((dataset) => (_jsx("div", { "data-testid": `optimization-new-dataset-row-${dataset.id}`, children: _jsx(DatasetRow, { dataset: dataset, selected: dataset.id === effectiveDatasetId, onSelect: () => setSelectedDatasetId(dataset.id) }) }, dataset.id))))] })] }))] })] })] }), _jsxs("section", { className: "rounded-lg border bg-card", "data-testid": "optimization-new-step-experiment", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-5 py-3", children: [_jsx(StepAnchor, { index: 2 }), _jsx("h3", { className: "text-[14px] font-semibold", children: t('optimizations.new.steps.experiment') }), _jsx("span", { className: "text-[12px] text-muted-foreground", children: t('optimizations.new.steps.experimentDetail') })] }), _jsxs("div", { className: "space-y-5 p-5", children: [_jsxs("div", { children: [_jsxs("label", { className: "mb-1.5 block text-[12.5px] font-medium", children: [t('optimizations.new.experiment.modelPicker'), " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _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('optimizations.new.experiment.searchModel') }), modelsLoading ? (_jsx(PickerEmpty, { children: t('optimizations.new.experiment.modelLoading') })) : modelsQuery.isError ? (_jsx(PickerEmpty, { children: t('optimizations.new.experiment.modelError') })) : filteredModels.length === 0 ? (_jsx(PickerEmpty, { children: t('optimizations.new.experiment.modelEmpty') })) : (filteredModels.map((model) => (_jsx("div", { "data-testid": `optimization-new-model-row-${model.id}`, children: _jsx(ModelOptionRow, { model: model, selected: model.id === effectiveModelId, onSelect: () => applyModelDefaults(model) }) }, model.id))))] })] }), _jsxs("div", { className: "border-t border-dashed pt-5", children: [_jsx(SubSectionHead, { tone: "info", label: t('optimizations.new.experiment.params') }), _jsxs("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.experiment.temperature') }), _jsx(Input, { value: temperature, onChange: (event) => {
+                                                                                const next = Number(event.target.value);
+                                                                                if (Number.isFinite(next))
+                                                                                    setTemperature(next);
+                                                                            }, className: "font-mono text-[13px]", "data-testid": "optimization-new-temperature" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.experiment.concurrency') }), _jsx(Input, { value: concurrency, onChange: (event) => {
+                                                                                const next = Number(event.target.value);
+                                                                                if (Number.isFinite(next))
+                                                                                    setConcurrency(next);
+                                                                            }, className: "font-mono text-[13px]", "data-testid": "optimization-new-concurrency" }), _jsx("div", { className: "font-mono text-[10.5px] text-muted-foreground", "data-testid": "optimization-new-concurrency-limit", children: selectedModel
+                                                                                ? formatTemplate(t('optimizations.new.experiment.modelLimitSuffix'), {
+                                                                                    limit: formatModelLimit(selectedModel.concurrency.limit),
+                                                                                })
+                                                                                : t('optimizations.new.experiment.modelLimitMissing') })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.experiment.rpm') }), _jsx(Input, { value: rpm, onChange: (event) => {
+                                                                                const next = Number(event.target.value);
+                                                                                if (Number.isFinite(next))
+                                                                                    setRpm(next);
+                                                                            }, className: "font-mono text-[13px]", "data-testid": "optimization-new-rpm" }), _jsx("div", { className: "font-mono text-[10.5px] text-muted-foreground", "data-testid": "optimization-new-rpm-limit", children: selectedModel
+                                                                                ? formatTemplate(t('optimizations.new.experiment.modelLimitSuffix'), {
+                                                                                    limit: formatModelLimit(selectedModel.rpm.limit),
+                                                                                })
+                                                                                : t('optimizations.new.experiment.modelLimitMissing') })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.experiment.tpm') }), _jsx(Input, { value: formatThousand(tpm), onChange: (event) => {
+                                                                                const next = Number(event.target.value.replace(/\s/g, ''));
+                                                                                if (Number.isFinite(next))
+                                                                                    setTpm(next);
+                                                                            }, className: "font-mono text-[13px]", "data-testid": "optimization-new-tpm" }), _jsx("div", { className: "font-mono text-[10.5px] text-muted-foreground", "data-testid": "optimization-new-tpm-limit", children: selectedModel
+                                                                                ? formatTemplate(t('optimizations.new.experiment.modelLimitSuffix'), {
+                                                                                    limit: formatModelLimit(selectedModel.tpm.limit),
+                                                                                })
+                                                                                : t('optimizations.new.experiment.modelLimitMissing') })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.experiment.sampleTimeoutSeconds') }), _jsx(Input, { value: sampleTimeoutSeconds, onChange: (event) => {
+                                                                                const next = Number(event.target.value);
+                                                                                if (Number.isFinite(next) && next > 0)
+                                                                                    setSampleTimeoutSeconds(next);
+                                                                            }, className: "font-mono text-[13px]", "data-testid": "optimization-new-sample-timeout" }), _jsx("div", { className: "font-mono text-[10.5px] text-muted-foreground", children: t('optimizations.new.experiment.sampleTimeoutSecondsHint') })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.experiment.retries') }), _jsx(Input, { value: retries, onChange: (event) => {
+                                                                                const next = Number(event.target.value);
+                                                                                if (Number.isFinite(next) && next >= 0)
+                                                                                    setRetries(next);
+                                                                            }, className: "font-mono text-[13px]", "data-testid": "optimization-new-retries" }), _jsx("div", { className: "font-mono text-[10.5px] text-muted-foreground", children: t('optimizations.new.experiment.retriesHint') })] }), (impliedDataset?.hasImages ||
+                                                                    (originMode === 'experiment' && selectedExperiment?.datasetHasImages)) && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.experiment.imageEncoding') }), _jsxs("div", { className: "inline-flex rounded-md border bg-background p-0.5", "data-testid": "optimization-new-image-encoding", children: [_jsx("button", { type: "button", onClick: () => setImageEncoding('url'), className: cn('cursor-pointer rounded px-3 py-1 font-mono text-[12px] transition-colors', imageEncoding === 'url'
+                                                                                        ? 'bg-primary text-primary-foreground'
+                                                                                        : 'text-muted-foreground hover:bg-muted'), "data-testid": "optimization-new-image-encoding-url", children: t('optimizations.new.experiment.imageEncodingUrl') }), _jsx("button", { type: "button", onClick: () => setImageEncoding('base64'), className: cn('cursor-pointer rounded px-3 py-1 font-mono text-[12px] transition-colors', imageEncoding === 'base64'
+                                                                                        ? 'bg-primary text-primary-foreground'
+                                                                                        : 'text-muted-foreground hover:bg-muted'), "data-testid": "optimization-new-image-encoding-base64", children: t('optimizations.new.experiment.imageEncodingBase64') })] })] }))] })] })] })] }), _jsxs("section", { className: "rounded-lg border bg-card", "data-testid": "optimization-new-step-optimization", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-5 py-3", children: [_jsx(StepAnchor, { index: 3 }), _jsx("h3", { className: "text-[14px] font-semibold", children: t('optimizations.new.steps.optimization') }), _jsx("span", { className: "text-[12px] text-muted-foreground", children: t('optimizations.new.steps.optimizationDetail') })] }), _jsxs("div", { className: "space-y-6 p-5", children: [_jsxs("div", { children: [_jsx(SubSectionHead, { tone: "info", label: t('optimizations.new.optimization.hintSection') }), originMode === 'dataset' && (_jsx(PromptLanguageSelect, { value: datasetPromptLanguage, onChange: setDatasetPromptLanguage, helpKey: "optimizations.new.optimization.datasetPromptLanguageHelp", className: "mb-4 max-w-[420px]", triggerClassName: "h-8" })), _jsx("label", { htmlFor: "optimization-new-optimization-hint", className: "mb-1.5 block text-[12.5px] font-medium", children: t('optimizations.new.optimization.hint') }), _jsx("textarea", { id: "optimization-new-optimization-hint", "data-testid": "optimization-new-optimization-hint", value: optimizationHint, onChange: (event) => setOptimizationHint(event.target.value), maxLength: 4000, rows: 4, className: "min-h-[96px] w-full resize-y rounded-md border bg-background px-3 py-2 text-[12.5px] text-foreground shadow-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring", placeholder: t('optimizations.new.optimization.hintPlaceholder') }), _jsx("div", { className: "mt-1 flex justify-end font-mono text-[10.5px] text-muted-foreground", children: formatTemplate(t('optimizations.new.optimization.hintCounter'), {
+                                                                count: optimizationHint.length,
+                                                            }) })] }), _jsxs("div", { children: [_jsx(SubSectionHead, { tone: "info", label: t('optimizations.new.optimization.goalsSection') }), goals.length === 0 ? (_jsx(PickerEmpty, { children: t('optimizations.new.optimization.goalEmpty') })) : (_jsx("div", { className: "space-y-2", children: goals.map((goal) => (_jsxs("div", { className: "grid grid-cols-1 items-center gap-2 sm:grid-cols-[1.4fr_0.8fr_0.8fr_1.1fr_28px]", children: [_jsx("select", { value: goal.metric, onChange: (event) => updateGoal(goal.id, { metric: event.target.value }), className: "h-8 rounded-md border bg-background px-2.5 font-mono text-[12.5px] text-foreground", "aria-label": t('optimizations.new.optimization.metric.accuracy'), "data-testid": "optimization-new-goal-metric", children: Object.keys(METRIC_LABEL_KEY).map((metric) => (_jsx("option", { value: metric, children: t(METRIC_LABEL_KEY[metric]) }, metric))) }), _jsx("select", { value: goal.comparator, onChange: (event) => updateGoal(goal.id, { comparator: event.target.value }), className: "h-8 rounded-md border bg-background px-2.5 font-mono text-[12.5px] text-foreground", "aria-label": t('optimizations.new.optimization.comparator.gte'), "data-testid": "optimization-new-goal-comparator", children: Object.keys(COMPARATOR_LABEL_KEY).map((cmp) => (_jsx("option", { value: cmp, children: t(COMPARATOR_LABEL_KEY[cmp]) }, cmp))) }), _jsx(Input, { value: goal.target, onChange: (event) => updateGoal(goal.id, { target: event.target.value }), className: "h-8 font-mono text-[12.5px]", "data-testid": "optimization-new-goal-target" }), _jsxs("select", { value: goal.scope, onChange: (event) => updateGoal(goal.id, { scope: event.target.value }), className: "h-8 rounded-md border bg-background px-2.5 font-mono text-[12.5px] text-foreground", "aria-label": t('optimizations.new.optimization.scope.overall'), children: [_jsx("option", { value: "overall", children: t('optimizations.new.optimization.scope.overall') }), scopeOptions.map((label) => (_jsx("option", { value: label, children: formatTemplate(t('optimizations.new.optimization.scope.class'), { label }) }, label)))] }), _jsx("button", { type: "button", onClick: () => removeGoal(goal.id), "aria-label": t('optimizations.new.optimization.removeGoal'), className: "inline-flex size-7 items-center justify-center self-center justify-self-end rounded-md border border-border bg-background text-muted-foreground transition-colors hover:border-destructive/40 hover:bg-destructive/10 hover:text-destructive", children: _jsx(X, { className: "size-3.5" }) })] }, goal.id))) })), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: addGoal, className: "mt-2 h-8 gap-1 self-start", "data-testid": "optimization-new-goal-add", children: [_jsx(Plus, { className: "size-3.5" }), t('optimizations.new.optimization.addGoal')] })] }), _jsxs("div", { className: "border-t border-dashed pt-5", children: [_jsx(SubSectionHead, { tone: "positive", label: t('optimizations.new.optimization.iterSection') }), _jsx("label", { className: "mb-2 block text-[12.5px] font-medium", children: t('optimizations.new.optimization.fields') }), !impliedDataset ? (_jsx("div", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-6 text-center text-[12px] text-muted-foreground", children: originMode === 'prompt'
+                                                                ? t('optimizations.new.optimization.fieldsHint')
+                                                                : datasetsLoading
+                                                                    ? t('optimizations.new.optimization.fieldsLoading')
+                                                                    : t('optimizations.new.optimization.fieldsHint') })) : (_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "max-h-[360px] overflow-y-auto overflow-x-hidden rounded-md border bg-background", children: [_jsxs("div", { className: "flex items-center justify-between border-b bg-muted/60 px-3 py-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-[12.5px] font-semibold", children: [_jsx("span", { "aria-hidden": "true", className: cn('inline-block size-1.5 rounded-full', optimizationTone.info.fill) }), t('optimizations.new.optimization.inputFields')] }), _jsx("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: t('optimizations.new.optimization.inputFieldsHint') })] }), inputFields.length > 0 ? (inputFields.map((field) => (_jsxs("div", { className: "flex items-center gap-2.5 border-b px-3 py-2 font-mono text-[12px] last:border-b-0", children: [_jsx(FieldCheckbox, { checked: true, locked: true, ariaLabel: field.name }), _jsx("span", { className: "flex-1 font-medium text-foreground", children: field.name }), _jsx(Tag, { children: field.type })] }, field.name)))) : (_jsx(PickerEmpty, { children: t('optimizations.new.optimization.fieldsInputEmpty') }))] }), _jsxs("div", { className: "max-h-[360px] overflow-y-auto overflow-x-hidden rounded-md border bg-background", children: [_jsxs("div", { className: "flex items-center justify-between border-b bg-muted/60 px-3 py-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-[12.5px] font-semibold", children: [_jsx("span", { "aria-hidden": "true", className: cn('inline-block size-1.5 rounded-full', optimizationTone.warning.fill) }), t('optimizations.new.optimization.metaFields')] }), _jsx("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: t('optimizations.new.optimization.metaFieldsHint') })] }), metaFields.length > 0 ? (metaFields.map((field) => (_jsxs("div", { className: "flex items-center gap-2.5 border-b px-3 py-2 font-mono text-[12px] last:border-b-0", children: [_jsx(FieldCheckbox, { checked: isMetaChecked(field.name), ariaLabel: field.name, onClick: () => toggleMetaField(field.name) }), _jsx("span", { className: "flex-1 font-medium text-foreground", children: field.name }), _jsx(Tag, { children: field.type })] }, field.name)))) : (_jsx(PickerEmpty, { children: t('optimizations.new.optimization.fieldsMetaEmpty') }))] })] })), _jsxs("div", { className: "mt-5", children: [_jsxs("label", { className: "mb-1.5 block text-[12.5px] font-medium", children: [t('optimizations.new.optimization.analysisModel'), " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("div", { className: "text-[11px] text-muted-foreground", children: t('optimizations.new.optimization.analysisModelHelp') }), _jsxs("div", { className: "mt-2 max-h-[360px] overflow-y-auto overflow-x-hidden rounded-md border bg-background", children: [_jsx(MiniSearch, { value: analysisModelSearch, onChange: setAnalysisModelSearch, placeholder: t('optimizations.new.optimization.searchAnalysisModel') }), modelsLoading ? (_jsx(PickerEmpty, { children: t('optimizations.new.experiment.modelLoading') })) : modelsQuery.isError ? (_jsx(PickerEmpty, { children: t('optimizations.new.experiment.modelError') })) : filteredAnalysisModels.length === 0 ? (_jsx(PickerEmpty, { children: t('optimizations.new.experiment.modelEmpty') })) : (filteredAnalysisModels.map((model) => (_jsx("div", { "data-testid": `optimization-new-analysis-model-row-${model.id}`, children: _jsx(ModelOptionRow, { model: model, selected: model.id === effectiveAnalysisModelId, onSelect: () => setAnalysisModelId(model.id) }) }, model.id))))] })] }), _jsxs("div", { className: "mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.optimization.maxRounds') }), _jsx(Slider, { value: maxRounds, min: 3, max: 20, onChange: setMaxRounds, formatValue: (value) => formatTemplate(t('optimizations.new.optimization.maxRoundsValue'), { value }) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.optimization.noImprovement') }), _jsx(Slider, { value: noImprovementRounds, min: 0, max: 5, onChange: setNoImprovementRounds, formatValue: (value) => value === 0
+                                                                                ? t('optimizations.new.optimization.noImprovementUnlimited')
+                                                                                : formatTemplate(t('optimizations.new.optimization.noImprovementValue'), { value }) })] })] }), originMode === 'dataset' && (_jsxs("div", { className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.optimization.initialSamplingRounds') }), _jsx(Slider, { value: initialSamplingRounds, min: 1, max: 10, onChange: setInitialSamplingRounds, formatValue: (value) => formatTemplate(t('optimizations.new.optimization.initialSamplingRoundsValue'), { value }) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[12.5px] font-medium", children: t('optimizations.new.optimization.initialSamplesPerRound') }), _jsx(Slider, { value: initialSamplesPerRound, min: 5, max: 200, step: 5, onChange: setInitialSamplesPerRound, formatValue: (value) => formatTemplate(t('optimizations.new.optimization.initialSamplesPerRoundValue'), { value }) })] })] }))] })] })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { className: "text-[11.5px] text-muted-foreground", children: t('optimizations.new.footerNote') }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-9", disabled: isSubmitting, children: t('optimizations.new.saveDraft') }), _jsx(Button, { asChild: true, type: "button", variant: "outline", size: "sm", className: "h-9", children: _jsx(Link, { href: `/optimizations`, children: t('optimizations.new.cancel') }) }), _jsxs(Button, { type: "button", size: "sm", className: "h-9 gap-1", onClick: handleSubmit, disabled: isSubmitting || optimizationNameTaken, children: [isSubmitting ? _jsx(Loader2, { className: "size-3.5 animate-spin" }) : _jsx(Play, { className: "size-3.5" }), t('optimizations.new.start')] })] })] })] }), _jsx("aside", { className: "flex flex-col gap-3 xl:sticky xl:top-20 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto xl:overscroll-contain xl:pr-1", "data-testid": "optimization-new-side-panel", children: _jsxs("div", { className: cn('rounded-lg border p-4', optimizationTone.info.border, 'bg-[color-mix(in_oklab,var(--status-canary-bg)_50%,var(--card))]', optimizationTone.info.text), children: [_jsxs("div", { className: "mb-3 flex items-center gap-2 text-[13px] font-semibold", children: [_jsx(Calculator, { className: "size-3.5", "aria-hidden": "true" }), t('optimizations.new.estimate.title')] }), _jsxs("div", { className: "space-y-2 text-[12.5px]", children: [_jsx(EstimateRow, { label: t('optimizations.new.estimate.experimentTokens'), valueLabel: totalExperimentTokens > 0
+                                                    ? `~ ${(totalExperimentTokens / 1_000_000).toFixed(1)} M`
+                                                    : t('optimizations.new.estimate.unknown') }), _jsx(EstimateRow, { label: t('optimizations.new.estimate.experimentCost'), valueLabel: experimentCost > 0 ? `$ ${experimentCost.toFixed(2)}` : t('optimizations.new.estimate.unknown') }), _jsx(EstimateRow, { label: t('optimizations.new.estimate.analysisTokens'), valueLabel: totalAnalysisTokens > 0
+                                                    ? `~ ${(totalAnalysisTokens / 1_000_000).toFixed(2)} M`
+                                                    : t('optimizations.new.estimate.unknown') }), _jsx(EstimateRow, { label: t('optimizations.new.estimate.analysisCost'), valueLabel: analysisCost > 0 ? `$ ${analysisCost.toFixed(2)}` : t('optimizations.new.estimate.unknown') }), _jsxs("div", { className: cn('mt-1 flex items-baseline justify-between border-t pt-2 text-[13px]', optimizationTone.info.border), children: [_jsx("span", { className: "opacity-80", children: formatTemplate(t('optimizations.new.estimate.totalCost'), { rounds: maxRounds }) }), _jsxs("span", { className: "font-mono text-[16px] font-semibold", children: ["$ ", totalCost.toFixed(2)] })] })] })] }) })] })] }) }));
+}
+function EstimateRow({ label, valueLabel, subLabel }) {
+    return (_jsxs("div", { className: cn('flex items-baseline justify-between gap-3 border-b border-dashed pb-2 last:border-b-0 last:pb-0', optimizationTone.info.border), children: [_jsx("span", { className: "opacity-80", children: label }), _jsxs("span", { className: "font-mono font-semibold tabular-nums", children: [valueLabel, subLabel && _jsx("span", { className: "ml-1 text-[11px] font-medium text-muted-foreground", children: subLabel })] })] }));
+}
+//# sourceMappingURL=optimization-new-page.js.map