@proofhound/web-ui 0.1.6

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

@@ -0,0 +1,934 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { Fragment, useCallback, useMemo, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { AlertTriangle, ArrowDownNarrowWide, ArrowUpNarrowWide, Ban, Check, ChevronDown, ChevronRight, ChevronsDown, ChevronsUp, Clock, FileText, FlaskConical, Hourglass, Play, Square, Wrench, } from 'lucide-react';
+import { Button, Progress, formatProgressLabel, Switch, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TableActionIconButton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, DetailPageSkeleton, cn, } from '@proofhound/ui';
+import { Main } from '@proofhound/ui/layout';
+import { PromptDiffSplitView } from '../../components';
+import { useOptimization, useControlOptimization } from '../../hooks';
+import { useDateTimeFormatter } from '../../hooks';
+import { useDelayedLoading } from '../../hooks';
+import { AUTO_REFRESH_INTERVAL_MS, useAutoRefresh } from '../../hooks';
+import { useI18n } from '../../i18n';
+import { getApiErrorMessage } from '../../lib';
+import { optimizationTone } from './optimization-theme';
+import { OptimizationStatusBadge, OriginBadge } from './optimization-ui';
+import { OPTIMIZATION_ORIGIN_LABEL_KEYS, STARTING_MODE_TO_ORIGIN } from './optimization-mappers';
+function parseDate(value) {
+    if (!value)
+        return null;
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function getOptimizationDurationSeconds(detail) {
+    const startedAt = Date.parse(detail.startedAt ?? detail.createdAt);
+    const endedAt = detail.finishedAt
+        ? Date.parse(detail.finishedAt)
+        : detail.status === 'running'
+            ? Date.now()
+            : Date.parse(detail.updatedAt);
+    if (!Number.isFinite(startedAt) || !Number.isFinite(endedAt) || endedAt < startedAt)
+        return null;
+    return Math.round((endedAt - startedAt) / 1000);
+}
+function getDurationParts(totalSeconds) {
+    if (totalSeconds === null || totalSeconds < 0 || !Number.isFinite(totalSeconds))
+        return null;
+    const seconds = Math.round(totalSeconds);
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const remainingSeconds = seconds % 60;
+    if (days > 0) {
+        return [
+            { label: 'd', value: days },
+            { label: 'h', value: hours, pad: true },
+            { label: 'm', value: minutes, pad: true },
+            { label: 's', value: remainingSeconds, pad: true },
+        ];
+    }
+    if (hours > 0) {
+        return [
+            { label: 'h', value: hours },
+            { label: 'm', value: minutes, pad: true },
+            { label: 's', value: remainingSeconds, pad: true },
+        ];
+    }
+    if (minutes > 0) {
+        return [
+            { label: 'm', value: minutes },
+            { label: 's', value: remainingSeconds, pad: true },
+        ];
+    }
+    return [{ label: 's', value: remainingSeconds }];
+}
+function formatTemplate(template, values) {
+    return template.replace(/\{(\w+)\}/g, (_, key) => {
+        const value = values[key];
+        return value === undefined ? `{${key}}` : String(value);
+    });
+}
+function formatMetric(value, fractionDigits = 3) {
+    if (!Number.isFinite(value))
+        return '—';
+    return value.toFixed(fractionDigits);
+}
+const OPTIMIZATION_METRIC_LABEL_KEYS = {
+    accuracy: 'optimizations.metrics.accuracy',
+    precision: 'optimizations.metrics.precision',
+    recall: 'optimizations.metrics.recall',
+    f1: 'optimizations.metrics.f1',
+    fpr: 'optimizations.metrics.fpr',
+    inputTokens: 'optimizations.metrics.inputTokens',
+    outputTokens: 'optimizations.metrics.outputTokens',
+    costEstimate: 'optimizations.metrics.costEstimate',
+    averageLatencyMs: 'optimizations.metrics.averageLatencyMs',
+    p50LatencyMs: 'optimizations.metrics.p50LatencyMs',
+    p95LatencyMs: 'optimizations.metrics.p95LatencyMs',
+};
+const OPTIMIZATION_METRIC_ALIASES = {
+    acc: 'accuracy',
+    accuracy: 'accuracy',
+    precision: 'precision',
+    recall: 'recall',
+    f1: 'f1',
+    fpr: 'fpr',
+    inputtokens: 'inputTokens',
+    outputtokens: 'outputTokens',
+    costestimate: 'costEstimate',
+    averagelatencyms: 'averageLatencyMs',
+    p50latencyms: 'p50LatencyMs',
+    p95latencyms: 'p95LatencyMs',
+};
+const INTEGER_METRIC_KEYS = new Set(['inputTokens', 'outputTokens']);
+const LATENCY_METRIC_KEYS = new Set(['averageLatencyMs', 'p50LatencyMs', 'p95LatencyMs']);
+function resolveOptimizationMetricKey(label) {
+    const normalized = label.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
+    return OPTIMIZATION_METRIC_ALIASES[normalized] ?? null;
+}
+function formatMetricCost(value) {
+    if (!Number.isFinite(value))
+        return '—';
+    if (value === 0)
+        return '$0';
+    return `$${value < 0.01 ? value.toFixed(4) : value.toFixed(2)}`;
+}
+function formatMetricDisplayValue(label, value) {
+    const metricKey = resolveOptimizationMetricKey(label);
+    if (!metricKey)
+        return formatMetric(value);
+    if (INTEGER_METRIC_KEYS.has(metricKey))
+        return formatThousand(Math.round(value));
+    if (LATENCY_METRIC_KEYS.has(metricKey))
+        return `${formatThousand(Math.round(value))} ms`;
+    if (metricKey === 'costEstimate')
+        return formatMetricCost(value);
+    return formatMetric(value);
+}
+function formatMetricDisplayLabel(label, t) {
+    const metricKey = resolveOptimizationMetricKey(label);
+    return metricKey ? t(OPTIMIZATION_METRIC_LABEL_KEYS[metricKey]) : label;
+}
+function formatDelta(value) {
+    if (value === null || !Number.isFinite(value))
+        return '—';
+    return `${value >= 0 ? '+' : '−'}${Math.abs(value).toFixed(3)}`;
+}
+function formatThousand(value) {
+    return value.toLocaleString('en-US').replace(/,/g, ' ');
+}
+const OVERALL_TREND_SCOPE = 'overall';
+const TREND_METRIC_KEYS = [
+    'accuracy',
+    'precision',
+    'recall',
+    'f1',
+    'fpr',
+];
+const SCORE_TREND_METRICS = new Set(['accuracy', 'precision', 'recall', 'f1', 'fpr']);
+const LOWER_IS_BETTER_TREND_METRICS = new Set([
+    'fpr',
+    'inputTokens',
+    'outputTokens',
+    'costEstimate',
+    'averageLatencyMs',
+    'p50LatencyMs',
+    'p95LatencyMs',
+]);
+const TREND_SERIES_STYLES = [
+    { line: 'text-[var(--status-canary-dot)]', text: optimizationTone.info.text },
+    { line: 'text-[var(--status-running-dot)]', text: optimizationTone.positive.text },
+    { line: 'text-[var(--status-pending-dot)]', text: optimizationTone.warning.text },
+    { line: 'text-destructive', text: optimizationTone.danger.text },
+    { line: 'text-[var(--status-archived-dot)]', text: optimizationTone.muted.text },
+];
+function trendScopeIdForGoalScope(scope) {
+    return scope === OVERALL_TREND_SCOPE ? OVERALL_TREND_SCOPE : `class:${scope}`;
+}
+function trendClassLabel(scopeId) {
+    return scopeId === OVERALL_TREND_SCOPE ? null : scopeId.slice('class:'.length);
+}
+function goalMatchesTrendScope(goal, scopeId) {
+    return trendScopeIdForGoalScope(goal.scope) === scopeId;
+}
+function uniqueValues(values) {
+    return Array.from(new Set(values));
+}
+function computeF1(precision, recall) {
+    if (precision === null || recall === null)
+        return null;
+    const denominator = precision + recall;
+    return denominator > 0 ? (2 * precision * recall) / denominator : null;
+}
+function metricBetterIsLower(metricKey) {
+    return LOWER_IS_BETTER_TREND_METRICS.has(metricKey);
+}
+function readMetricCell(cells, metricKey) {
+    for (const cell of cells ?? []) {
+        if (resolveOptimizationMetricKey(cell.label) === metricKey && Number.isFinite(cell.value))
+            return cell.value;
+    }
+    return null;
+}
+function readTrendMetricValue(input, scopeId, metricKey) {
+    const classLabel = trendClassLabel(scopeId);
+    if (!classLabel) {
+        const overall = input.experimentResult?.overallRow;
+        if (metricKey === 'accuracy' && typeof overall?.accuracy === 'number')
+            return overall.accuracy;
+        if (metricKey === 'precision' && typeof overall?.precision === 'number')
+            return overall.precision;
+        if (metricKey === 'recall' && typeof overall?.recall === 'number')
+            return overall.recall;
+        if (metricKey === 'f1') {
+            return readMetricCell(input.metrics, metricKey) ?? computeF1(overall?.precision ?? null, overall?.recall ?? null);
+        }
+        return readMetricCell(input.metrics, metricKey);
+    }
+    const row = input.experimentResult?.classRows.find((item) => item.label === classLabel);
+    if (!row)
+        return null;
+    if (metricKey === 'accuracy')
+        return typeof row.accuracy === 'number' ? row.accuracy : null;
+    if (metricKey === 'precision')
+        return row.precision;
+    if (metricKey === 'recall')
+        return row.recall;
+    if (metricKey === 'f1')
+        return typeof row.f1 === 'number' ? row.f1 : computeF1(row.precision, row.recall);
+    if (metricKey === 'fpr')
+        return typeof row.fpr === 'number' ? row.fpr : null;
+    return null;
+}
+function buildTrendScopeOptions(detail) {
+    const classLabels = uniqueValues([
+        ...detail.goals.filter((goal) => goal.scope !== OVERALL_TREND_SCOPE).map((goal) => goal.scope),
+        ...(detail.baseline?.experimentResult?.classRows ?? []).map((row) => row.label),
+        ...detail.rounds.flatMap((round) => round.experimentResult?.classRows.map((row) => row.label) ?? []),
+    ]).filter(Boolean);
+    return [
+        { id: OVERALL_TREND_SCOPE, kind: 'overall' },
+        ...classLabels.map((label) => ({ id: `class:${label}`, kind: 'class', label })),
+    ];
+}
+function buildTrendMetricOptions(detail, scopeId) {
+    const metricKeys = new Set();
+    const goalMetricKeys = detail.goals
+        .filter((goal) => goalMatchesTrendScope(goal, scopeId))
+        .map((goal) => resolveOptimizationMetricKey(goal.metric))
+        .filter((key) => key !== null);
+    for (const key of goalMetricKeys)
+        metricKeys.add(key);
+    const sources = [
+        { experimentResult: detail.baseline?.experimentResult, metrics: detail.baseline?.metrics },
+        ...detail.rounds.map((round) => ({ experimentResult: round.experimentResult, metrics: round.metrics })),
+    ];
+    for (const key of TREND_METRIC_KEYS) {
+        if (sources.some((source) => readTrendMetricValue(source, scopeId, key) !== null)) {
+            metricKeys.add(key);
+        }
+    }
+    const options = [];
+    for (const key of TREND_METRIC_KEYS) {
+        if (metricKeys.has(key))
+            options.push({ value: key });
+    }
+    return options;
+}
+function buildTrendChartViewModel(detail, requestedScopeId, requestedMetricValue) {
+    const scopeOptions = buildTrendScopeOptions(detail);
+    const goalScope = detail.goals.find((goal) => goal.scope !== OVERALL_TREND_SCOPE)?.scope;
+    const goalScopeId = goalScope ? trendScopeIdForGoalScope(goalScope) : OVERALL_TREND_SCOPE;
+    const defaultScopeId = scopeOptions.some((option) => option.id === goalScopeId) ? goalScopeId : OVERALL_TREND_SCOPE;
+    const scopeId = requestedScopeId && scopeOptions.some((option) => option.id === requestedScopeId)
+        ? requestedScopeId
+        : defaultScopeId;
+    const metricOptions = buildTrendMetricOptions(detail, scopeId);
+    const matchingGoalKeys = detail.goals
+        .filter((goal) => goalMatchesTrendScope(goal, scopeId))
+        .map((goal) => resolveOptimizationMetricKey(goal.metric))
+        .filter((key) => key !== null);
+    const defaultMetricValue = uniqueValues(matchingGoalKeys).find((key) => metricOptions.some((option) => option.value === key)) ??
+        metricOptions[0]?.value ??
+        null;
+    const metricValue = requestedMetricValue && metricOptions.some((option) => option.value === requestedMetricValue)
+        ? requestedMetricValue
+        : defaultMetricValue;
+    const selectedMetricKeys = metricValue ? [metricValue] : [];
+    const sortedRounds = detail.rounds
+        .filter((round) => round.isBaseline !== true && round.index > 0)
+        .slice()
+        .sort((a, b) => a.index - b.index);
+    const baselineRound = detail.rounds.find((round) => round.isBaseline === true);
+    const baselineSource = {
+        experimentResult: detail.baseline?.experimentResult ?? baselineRound?.experimentResult,
+        metrics: detail.baseline?.metrics ?? baselineRound?.metrics,
+    };
+    const hasBaseline = selectedMetricKeys.some((key) => readTrendMetricValue(baselineSource, scopeId, key) !== null);
+    const slots = [
+        ...(hasBaseline ? [{ id: 'baseline', kind: 'baseline', roundIndex: 0 }] : []),
+        ...sortedRounds.map((round) => ({ id: `round:${round.index}`, kind: 'round', roundIndex: round.index })),
+    ];
+    const goalByMetric = new Map();
+    for (const goal of detail.goals.filter((item) => goalMatchesTrendScope(item, scopeId))) {
+        const key = resolveOptimizationMetricKey(goal.metric);
+        if (key && !goalByMetric.has(key))
+            goalByMetric.set(key, goal);
+    }
+    const series = selectedMetricKeys
+        .map((metricKey, index) => {
+        const values = slots.map((slot) => {
+            if (slot.kind === 'baseline')
+                return readTrendMetricValue(baselineSource, scopeId, metricKey);
+            const round = sortedRounds.find((item) => item.index === slot.roundIndex);
+            return round ? readTrendMetricValue(round, scopeId, metricKey) : null;
+        });
+        if (!values.some((value) => value !== null))
+            return null;
+        const betterIsLower = metricBetterIsLower(metricKey);
+        let bestSlotIndex;
+        values.forEach((value, slotIndex) => {
+            if (value === null)
+                return;
+            const bestValue = bestSlotIndex === undefined ? null : values[bestSlotIndex];
+            if (bestValue === null || bestValue === undefined || (betterIsLower ? value < bestValue : value > bestValue)) {
+                bestSlotIndex = slotIndex;
+            }
+        });
+        return {
+            id: `${scopeId}:${metricKey}`,
+            metricKey,
+            labelKey: OPTIMIZATION_METRIC_LABEL_KEYS[metricKey],
+            values,
+            target: goalByMetric.get(metricKey)?.target,
+            bestSlotIndex,
+            style: TREND_SERIES_STYLES[index % TREND_SERIES_STYLES.length],
+        };
+    })
+        .filter((item) => item !== null);
+    const currentSlotIndex = slots.findIndex((slot) => slot.kind === 'round' && slot.roundIndex === detail.currentRound) >= 0
+        ? slots.findIndex((slot) => slot.kind === 'round' && slot.roundIndex === detail.currentRound)
+        : detail.currentRound <= 0 && hasBaseline
+            ? 0
+            : Math.max(0, slots.length - 1);
+    return {
+        scopeOptions,
+        metricOptions,
+        defaultScopeId,
+        defaultMetricValue,
+        slots,
+        series,
+        hasBaseline,
+        currentSlotIndex,
+        primaryBestSlotIndex: series[0]?.bestSlotIndex,
+    };
+}
+function formatTrendScopeOption(option, t) {
+    if (option.kind === 'overall')
+        return t('optimizations.detail.trend.scopeOverall');
+    return formatTemplate(t('optimizations.detail.trend.scopeClass'), { label: option.label ?? '' });
+}
+function formatTrendMetricOption(option, t) {
+    return t(OPTIMIZATION_METRIC_LABEL_KEYS[option.value]);
+}
+function buildTrendLinePath(values, xForIndex, yToPx) {
+    let path = '';
+    let open = false;
+    values.forEach((value, index) => {
+        if (value === null) {
+            open = false;
+            return;
+        }
+        path += `${open ? 'L' : 'M'}${xForIndex(index).toFixed(2)},${yToPx(value).toFixed(2)} `;
+        open = true;
+    });
+    return path.trim();
+}
+function deriveTrendScale(series) {
+    const values = series.flatMap((item) => [
+        ...item.values.filter((value) => value !== null),
+        ...(typeof item.target === 'number' ? [item.target] : []),
+    ]);
+    if (values.length === 0)
+        return { min: 0, max: 1, ticks: [0, 0.25, 0.5, 0.75, 1] };
+    const minValue = Math.min(...values);
+    const maxValue = Math.max(...values);
+    const ratioScale = series.every((item) => SCORE_TREND_METRICS.has(item.metricKey));
+    const span = Math.max(0.0001, maxValue - minValue);
+    const padding = ratioScale ? Math.max(0.02, span * 0.18) : Math.max(span * 0.18, maxValue * 0.03, 1);
+    const min = ratioScale ? Math.max(0, minValue - padding) : Math.max(0, minValue - padding);
+    const max = ratioScale ? Math.min(1, maxValue + padding) : maxValue + padding;
+    const safeMax = max <= min ? min + (ratioScale ? 0.1 : 1) : max;
+    const step = (safeMax - min) / 4;
+    return { min, max: safeMax, ticks: Array.from({ length: 5 }, (_, i) => min + step * i) };
+}
+function formatTrendAxisValue(value, metricKey) {
+    if (!metricKey)
+        return value.toFixed(2);
+    if (INTEGER_METRIC_KEYS.has(metricKey))
+        return formatThousand(Math.round(value));
+    if (LATENCY_METRIC_KEYS.has(metricKey))
+        return formatThousand(Math.round(value));
+    if (metricKey === 'costEstimate')
+        return formatMetricCost(value);
+    return value.toFixed(2);
+}
+function BestPointer({ label, className }) {
+    return (_jsx("span", { className: cn('inline-flex items-center gap-1 rounded-md bg-[var(--status-canary-dot)] px-1.5 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-wide text-white', className), children: label }));
+}
+function PhaseTag({ phase, currentRound, maxRounds, }) {
+    const { t } = useI18n();
+    const phaseKey = phase === 'analysis'
+        ? 'optimizations.detail.control.phase.analysis'
+        : phase === 'experiment'
+            ? 'optimizations.detail.control.phase.experiment'
+            : phase === 'paused'
+                ? 'optimizations.detail.control.phase.paused'
+                : 'optimizations.detail.control.phase.finishing';
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 font-mono text-[11.5px]', optimizationTone.info.pill), children: [_jsx("span", { className: cn('size-1.5 animate-pulse rounded-full', optimizationTone.info.dot), "aria-hidden": "true" }), formatTemplate(t('optimizations.detail.control.round'), {
+                current: currentRound,
+                total: maxRounds,
+                phase: t(phaseKey),
+            })] }));
+}
+function FailureBanner({ detail }) {
+    const { t } = useI18n();
+    if (detail.status !== 'failed')
+        return null;
+    if (!detail.summary && !detail.analysisFailureReason)
+        return null;
+    const reason = detail.summary?.reason ?? t('optimizations.detail.failureBanner.noDetail');
+    return (_jsxs("div", { className: "mb-4 flex items-start gap-3 rounded-md border border-destructive/40 bg-destructive/5 px-4 py-3 text-[12.5px] text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-4 shrink-0", "aria-hidden": "true" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "font-mono text-[11px] uppercase tracking-wide", children: t('optimizations.detail.failureBanner.title') }), _jsx("p", { className: "mt-1 break-words text-foreground", children: reason }), detail.analysisFailureReason && (_jsxs("p", { className: "mt-2 text-[11.5px] text-destructive/85", children: [_jsx("span", { className: "font-mono uppercase tracking-wide", children: t('optimizations.detail.failureBanner.analysisLabel') }), ": ", _jsx("span", { className: "break-words text-foreground", children: detail.analysisFailureReason })] }))] })] }));
+}
+function TimePoint({ date, includeDate }) {
+    const { formatDate, formatTime } = useDateTimeFormatter();
+    if (!date)
+        return _jsx("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: "\u2014" });
+    return (_jsxs("span", { className: "inline-flex items-baseline gap-1 font-mono tabular-nums", children: [includeDate && _jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate(date, { fallback: '—' }) }), _jsx("span", { className: "text-[10.5px] font-semibold text-foreground sm:text-[11px]", children: formatTime(date, { fallback: '—' }) })] }));
+}
+function OptimizationTimingSubtitle({ detail, className }) {
+    const { formatDate } = useDateTimeFormatter();
+    const startDate = parseDate(detail.startedAt ?? detail.createdAt);
+    const finishedDate = parseDate(detail.finishedAt);
+    const duration = getDurationParts(getOptimizationDurationSeconds(detail));
+    const comparisonEndDate = finishedDate ?? (detail.status === 'running' ? new Date() : parseDate(detail.updatedAt));
+    const includeDate = Boolean(startDate &&
+        comparisonEndDate &&
+        formatDate(startDate, { fallback: '' }) !== formatDate(comparisonEndDate, { fallback: '' }));
+    return (_jsxs("div", { className: cn('flex w-fit max-w-full flex-col items-center gap-0.5', className), children: [_jsxs("div", { className: cn('flex flex-wrap items-baseline gap-x-1 gap-y-0.5 font-mono tabular-nums', optimizationTone.positive.text), children: [_jsx(Hourglass, { className: "size-3 self-center", "aria-hidden": "true" }), duration ? (_jsx(_Fragment, { children: duration.map((part) => (_jsxs("span", { className: "inline-flex items-baseline gap-0.5", children: [_jsx("span", { className: "text-[10px] font-semibold leading-none tracking-normal sm:text-[11px]", children: part.pad ? String(part.value).padStart(2, '0') : part.value }), _jsx("span", { className: "text-[8px] font-semibold sm:text-[8.5px]", children: part.label })] }, part.label))) })) : (_jsx("span", { className: "text-[10px] font-semibold leading-none tracking-normal sm:text-[11px]", children: "\u2014" }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-0.5", children: [_jsx(Play, { className: cn('size-2 fill-current stroke-current', optimizationTone.positive.text), "aria-hidden": "true" }), _jsx(TimePoint, { date: startDate, includeDate: includeDate }), _jsx("span", { className: "font-mono text-[10.5px] text-muted-foreground/70 sm:text-[11px]", "aria-hidden": "true", children: "\u2192" }), _jsx(TimePoint, { date: finishedDate, includeDate: includeDate })] })] }));
+}
+function OptimizationProgressCard({ detail }) {
+    const { t } = useI18n();
+    const control = detail.controlStrip;
+    const maxRounds = Math.max(1, detail.maxRounds);
+    const currentRound = Math.min(detail.currentRound, maxRounds);
+    const percent = Math.min(100, (currentRound / maxRounds) * 100);
+    const progressLabel = formatProgressLabel({
+        value: currentRound,
+        max: maxRounds,
+        percent,
+        fractionDigits: 1,
+    });
+    const goalScopes = uniqueValues(detail.goals.map((goal) => goal.scope)).map((scope) => scope === OVERALL_TREND_SCOPE
+        ? t('optimizations.detail.trend.scopeOverall')
+        : formatTemplate(t('optimizations.detail.trend.scopeClass'), { label: scope }));
+    const goalMetrics = uniqueValues(detail.goals.map((goal) => goal.metric)).map((metric) => formatMetricDisplayLabel(metric, t));
+    return (_jsxs("section", { className: "mb-4 rounded-lg border bg-card", "data-testid": "optimization-detail-progress", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b px-4 py-3", children: [_jsx("h2", { className: "text-[13px] font-semibold", children: t('optimizations.detail.progress.title') }), control ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [_jsx(PhaseTag, { phase: control.phase, currentRound: control.currentRound, maxRounds: control.maxRounds }), _jsxs("span", { className: "font-mono text-[11.5px] text-muted-foreground", children: [_jsx("b", { className: "font-bold text-foreground", children: formatThousand(control.samplesDone) }), _jsxs("span", { className: "ml-1", children: ["/ ", formatThousand(control.samplesTotal)] })] }), _jsxs("span", { className: "font-mono text-[11.5px] text-muted-foreground", children: [formatTemplate(t('optimizations.detail.control.roundEta'), { value: control.roundRemaining }), _jsx("span", { className: "px-1 text-muted-foreground/70", "aria-hidden": "true", children: "\u00B7" }), formatTemplate(t('optimizations.detail.control.totalEta'), { value: control.totalRemaining })] })] })) : null] }), _jsxs("div", { className: "space-y-3 p-5", children: [_jsx(Progress, { value: currentRound, max: maxRounds, label: progressLabel }), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-x-6 gap-y-3", children: [_jsx("div", { className: "flex min-w-[260px] max-w-full flex-col gap-1.5", children: _jsxs("div", { className: "grid gap-1 font-mono text-[11px] text-muted-foreground sm:grid-cols-3", children: [_jsxs("span", { className: "min-w-0", children: [t('optimizations.detail.progress.goalScope'), ' ', _jsx("span", { className: "text-foreground", children: goalScopes.join(' / ') || '—' })] }), _jsxs("span", { className: "min-w-0", children: [t('optimizations.detail.progress.goalMetric'), ' ', _jsx("span", { className: "text-foreground", children: goalMetrics.join(' / ') || '—' })] }), _jsxs("span", { className: "min-w-0", children: [t('optimizations.detail.progress.actualVsTarget'), ' ', _jsx("span", { className: "inline-flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-foreground", children: detail.goalProgress.length > 0
+                                                        ? detail.goalProgress.map((goal, index) => {
+                                                            const achieved = goal.achieved === 'hit' || goal.achieved === 'critical';
+                                                            return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [index > 0 && (_jsx("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "/" })), _jsxs("span", { children: [goal.currentText, " vs ", goal.targetText] }), achieved && (_jsx(Check, { className: cn('size-3', optimizationTone.positive.text), "aria-hidden": "true" }))] }, `${goal.label}-${index}`));
+                                                        })
+                                                        : '—' })] })] }) }), _jsx(OptimizationTimingSubtitle, { detail: detail, className: "ml-auto" })] })] })] }));
+}
+function KvRow({ label, children }) {
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "font-mono text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }), _jsx("span", { className: "truncate font-mono text-[12px] text-foreground", children: children })] }));
+}
+function ScopeChip({ tone, label }) {
+    return (_jsx("span", { className: cn('inline-flex items-center rounded-full border px-2 py-0.5 text-[10.5px]', tone === 'overall' ? 'border-border bg-secondary/60 text-foreground' : optimizationTone.warning.pill), children: label }));
+}
+const STARTING_MODE_DESC_KEY = {
+    from_experiment: 'optimizations.new.origin.experimentDesc',
+    from_prompt_version: 'optimizations.new.origin.promptDesc',
+    from_dataset_only: 'optimizations.new.origin.datasetDesc',
+};
+function ConfigSection({ detail }) {
+    const { t } = useI18n();
+    const [open, setOpen] = useState(true);
+    const cfg = detail.experimentConfig;
+    const iter = detail.iterationConfig;
+    const origin = STARTING_MODE_TO_ORIGIN[detail.startingMode];
+    const originRef = detail.sourceExperimentName ?? detail.promptName ?? detail.datasetName;
+    const originLabel = t(OPTIMIZATION_ORIGIN_LABEL_KEYS[origin]);
+    const originDesc = t(STARTING_MODE_DESC_KEY[detail.startingMode]);
+    return (_jsxs("section", { className: "overflow-hidden rounded-lg border bg-card", "data-testid": "optimization-detail-config", children: [_jsxs("button", { type: "button", onClick: () => setOpen((prev) => !prev), "aria-expanded": open, "aria-controls": "optimization-detail-config-body", "aria-label": t(open ? 'optimizations.detail.config.collapse' : 'optimizations.detail.config.expand'), className: cn('flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left transition-colors hover:bg-muted/30', open && 'border-b'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("h2", { className: "text-[13px] font-semibold", children: t('optimizations.detail.config.title') }), _jsx(TooltipProvider, { delayDuration: 160, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "data-testid": "optimization-detail-config-starting-mode", className: "min-w-0", children: _jsx(OriginBadge, { origin: origin, originRef: originRef }) }) }), _jsxs(TooltipContent, { className: "max-w-xs text-[12px] leading-snug", children: [_jsx("div", { className: "font-semibold", children: originLabel }), _jsx("div", { className: "mt-0.5 text-muted-foreground", children: originDesc })] })] }) })] }), _jsx(ChevronDown, { className: cn('size-4 text-muted-foreground transition-transform duration-200', open ? 'rotate-0' : '-rotate-90'), "aria-hidden": "true" })] }), open && (_jsxs("div", { id: "optimization-detail-config-body", children: [cfg ? (_jsxs("div", { className: "px-4 py-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: cn('inline-block h-2.5 w-[3px] rounded-sm', optimizationTone.info.fill), "aria-hidden": "true" }), _jsx("span", { className: "font-mono text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: t('optimizations.detail.config.experiment') })] }), _jsxs("div", { className: "grid grid-cols-1 gap-y-2", children: [_jsx(KvRow, { label: t('optimizations.detail.config.dataset'), children: _jsx(Link, { href: "#", className: cn('underline decoration-dotted underline-offset-2', optimizationTone.info.text), children: cfg.datasetName }) }), _jsxs(KvRow, { label: t('optimizations.detail.config.prompt'), children: [_jsx(Link, { href: "#", className: cn('underline decoration-dotted underline-offset-2', optimizationTone.info.text), children: cfg.promptName }), _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", cfg.promptVersion] })] }), _jsx(KvRow, { label: t('optimizations.detail.config.model'), children: _jsx(Link, { href: "#", className: cn('underline decoration-dotted underline-offset-2', optimizationTone.info.text), children: cfg.modelName }) }), _jsx(KvRow, { label: t('optimizations.detail.config.baselineExperiment'), children: _jsx(Link, { href: "#", className: cn('underline decoration-dotted underline-offset-2', optimizationTone.info.text), children: cfg.baselineExperiment }) }), _jsx(KvRow, { label: t('optimizations.detail.config.temperature'), children: cfg.temperature.toFixed(1) }), _jsx(KvRow, { label: t('optimizations.detail.config.concurrency'), children: cfg.concurrency }), _jsx(KvRow, { label: t('optimizations.detail.config.rpm'), children: cfg.rpm }), _jsx(KvRow, { label: t('optimizations.detail.config.tpm'), children: formatThousand(cfg.tpm) })] })] })) : null, iter ? (_jsxs("div", { className: "border-t border-dashed px-4 py-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: cn('inline-block h-2.5 w-[3px] rounded-sm', optimizationTone.positive.fill), "aria-hidden": "true" }), _jsx("span", { className: "font-mono text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: t('optimizations.detail.config.iter') })] }), _jsxs("div", { className: "grid grid-cols-1 gap-y-2", children: [_jsx("div", { children: _jsx(KvRow, { label: t('optimizations.detail.config.goal'), children: _jsx("span", { className: "flex flex-col gap-1 font-sans text-[12px] font-normal text-foreground", children: detail.goalsLines.map((line) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: cn('size-1.5 rounded-full', line.tone === 'class' ? optimizationTone.warning.fill : optimizationTone.positive.fill), "aria-hidden": "true" }), line.label, " ", _jsx("b", { className: "font-semibold", children: line.targetText })] }, line.label))) }) }) }), _jsx(KvRow, { label: t('optimizations.detail.config.goalScope'), children: _jsx("span", { className: "flex flex-wrap gap-1 font-sans", children: detail.goalScope.kind === 'overall' ? (_jsx(ScopeChip, { tone: "overall", label: t('optimizations.detail.config.scopeOverall') })) : (_jsxs(_Fragment, { children: [_jsx(ScopeChip, { tone: "overall", label: t('optimizations.detail.config.scopeOverall') }), (detail.goalScope.classes ?? []).map((cls) => (_jsx(ScopeChip, { tone: "class", label: formatTemplate(t('optimizations.detail.config.scopeClass'), { label: cls }) }, cls)))] })) }) }), _jsx(KvRow, { label: t('optimizations.detail.config.analysisModel'), children: _jsx(Link, { href: "#", className: cn('underline decoration-dotted underline-offset-2', optimizationTone.info.text), children: iter.analysisModel }) }), _jsx(KvRow, { label: t('optimizations.detail.config.strategy'), children: iter.strategy }), _jsx(KvRow, { label: t('optimizations.detail.config.maxRounds'), children: iter.maxRounds }), _jsx(KvRow, { label: t('optimizations.detail.config.noImprovement'), children: formatTemplate(t('optimizations.detail.config.noImprovementValue'), {
+                                            value: iter.noImprovementStop,
+                                        }) })] }), detail.optimizationHint ? (_jsxs("div", { className: "mt-3 border-t border-dashed pt-3", children: [_jsx("div", { className: "mb-1 font-mono text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: t('optimizations.detail.config.optimizationHint') }), _jsx("p", { className: "whitespace-pre-wrap text-[12px] leading-relaxed text-foreground", children: detail.optimizationHint })] })) : null] })) : null] }))] }));
+}
+function TrendChart({ detail }) {
+    const { t } = useI18n();
+    const [selectedScopeId, setSelectedScopeId] = useState(null);
+    const [selectedMetricValue, setSelectedMetricValue] = useState(null);
+    const trend = useMemo(() => buildTrendChartViewModel(detail, selectedScopeId, selectedMetricValue), [detail, selectedMetricValue, selectedScopeId]);
+    const scopeValue = selectedScopeId && trend.scopeOptions.some((option) => option.id === selectedScopeId)
+        ? selectedScopeId
+        : trend.defaultScopeId;
+    const metricValue = selectedMetricValue && trend.metricOptions.some((option) => option.value === selectedMetricValue)
+        ? selectedMetricValue
+        : trend.defaultMetricValue;
+    const series = trend.series;
+    if (series.length === 0) {
+        return (_jsxs("section", { className: "rounded-lg border bg-card", "data-testid": "optimization-detail-trend", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3", children: [_jsx("h2", { className: "text-[13px] font-semibold", children: t('optimizations.detail.trend.title') }), _jsx(TrendChartControls, { scopeOptions: trend.scopeOptions, metricOptions: trend.metricOptions, scopeValue: scopeValue, metricValue: metricValue, onScopeChange: (value) => setSelectedScopeId(value), onMetricChange: (value) => setSelectedMetricValue(value) })] }), _jsx("div", { className: "px-4 py-10 text-center text-[12px] text-muted-foreground", children: t('optimizations.detail.trend.empty') })] }));
+    }
+    const W = 720;
+    const H = 220;
+    const padL = 50;
+    const padR = 20;
+    const padT = 20;
+    const padB = 28;
+    const innerW = W - padL - padR;
+    const innerH = H - padT - padB;
+    const maxRoundIndex = Math.max(0, trend.slots.length - 1);
+    const totalSlots = Math.max(1, maxRoundIndex);
+    const xForIndex = (i) => padL + (i / totalSlots) * innerW;
+    const scale = deriveTrendScale(series);
+    const yToPx = (v) => padT + (1 - (Math.max(scale.min, Math.min(scale.max, v)) - scale.min) / (scale.max - scale.min)) * innerH;
+    const axisMetricKey = series[0]?.metricKey;
+    const bestPointerLabel = formatTemplate(t('optimizations.detail.trend.bestPointer'), {
+        label: detail.bestRoundLabel === 'baseline'
+            ? t('optimizations.detail.round.baseline')
+            : (detail.bestRoundLabel ?? '—'),
+    });
+    return (_jsxs("section", { className: "rounded-lg border bg-card", "data-testid": "optimization-detail-trend", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3", children: [_jsxs("h2", { className: "inline-flex items-center gap-2 text-[13px] font-semibold", children: [t('optimizations.detail.trend.title'), _jsx(BestPointer, { label: bestPointerLabel })] }), _jsx(TrendChartControls, { scopeOptions: trend.scopeOptions, metricOptions: trend.metricOptions, scopeValue: scopeValue, metricValue: metricValue, onScopeChange: (value) => setSelectedScopeId(value), onMetricChange: (value) => setSelectedMetricValue(value) })] }), _jsx("div", { className: "px-4 py-3", children: _jsxs("svg", { viewBox: `0 0 ${W} ${H}`, className: "block w-full", preserveAspectRatio: "xMidYMid meet", role: "img", "aria-label": t('optimizations.detail.trend.title'), style: { height: 220 }, children: [scale.ticks.map((tick) => (_jsxs("g", { children: [_jsx("line", { x1: padL, x2: W - padR, y1: yToPx(tick), y2: yToPx(tick), stroke: "currentColor", strokeDasharray: "2 3", strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "text-border opacity-70" }), _jsx("text", { x: padL - 6, y: yToPx(tick) + 3, textAnchor: "end", fill: "currentColor", className: "font-mono text-muted-foreground", style: { fontSize: 9.5 }, children: formatTrendAxisValue(tick, axisMetricKey) })] }, `y-${tick}`))), series.map((s) => {
+                            if (typeof s.target !== 'number')
+                                return null;
+                            return (_jsx("line", { x1: padL, x2: W - padR, y1: yToPx(s.target), y2: yToPx(s.target), stroke: "currentColor", strokeDasharray: "4 4", strokeWidth: 1.2, vectorEffect: "non-scaling-stroke", className: cn(s.style.line, 'opacity-80') }, `target-${s.id}`));
+                        }), series.map((s) => {
+                            const path = buildTrendLinePath(s.values, xForIndex, yToPx);
+                            return (_jsx("path", { d: path, fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", className: s.style.line }, `line-${s.id}`));
+                        }), series.map((s) => s.values.map((v, i) => {
+                            if (v === null)
+                                return null;
+                            const isBest = i === s.bestSlotIndex;
+                            return (_jsx("circle", { cx: xForIndex(i), cy: yToPx(v), r: isBest ? 5 : 3.5, fill: isBest ? 'currentColor' : 'var(--card)', stroke: "currentColor", strokeWidth: 1.5, vectorEffect: "non-scaling-stroke", className: s.style.line }, `pt-${s.id}-${i}`));
+                        })), trend.slots.map((slot, i) => {
+                            const x = xForIndex(i);
+                            const isCurrent = i === trend.currentSlotIndex;
+                            const isBest = trend.primaryBestSlotIndex === i;
+                            const label = slot.kind === 'baseline'
+                                ? t('optimizations.detail.trend.baseline')
+                                : isCurrent
+                                    ? formatTemplate(t('optimizations.detail.trend.roundCurrent'), { index: slot.roundIndex })
+                                    : isBest
+                                        ? formatTemplate(t('optimizations.detail.trend.roundBest'), { index: slot.roundIndex })
+                                        : formatTemplate(t('optimizations.detail.trend.roundShort'), { index: slot.roundIndex });
+                            return (_jsxs("g", { children: [_jsx("line", { x1: x, x2: x, y1: padT + innerH, y2: padT + innerH + 6, stroke: "currentColor", strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "text-border" }), _jsx("text", { x: x, y: padT + innerH + 18, textAnchor: "middle", fill: "currentColor", className: cn('font-mono', isCurrent ? optimizationTone.info.text : 'text-muted-foreground'), style: { fontSize: 9.5, fontWeight: isCurrent ? 600 : 400 }, children: label })] }, `x-${slot.id}`));
+                        }), typeof trend.primaryBestSlotIndex === 'number' && (_jsx("line", { x1: xForIndex(trend.primaryBestSlotIndex), x2: xForIndex(trend.primaryBestSlotIndex), y1: padT, y2: padT + innerH, stroke: "currentColor", strokeDasharray: "3 4", strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: cn(optimizationTone.info.text, 'opacity-40') }))] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-3 px-4 pb-3 font-mono text-[11px] text-muted-foreground", children: [series.map((s) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: cn('inline-block h-[2px] w-4 rounded-[1px] bg-current', s.style.text) }), _jsx("span", { className: s.style.text, children: t(s.labelKey) })] }, `lg-${s.id}`))), _jsx("span", { className: "text-muted-foreground", children: t('optimizations.detail.trend.legendGoal') })] })] }));
+}
+function TrendChartControls({ scopeOptions, metricOptions, scopeValue, metricValue, onScopeChange, onMetricChange, }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsxs(Select, { value: scopeValue, onValueChange: onScopeChange, children: [_jsx(SelectTrigger, { className: "h-8 w-[150px] rounded-md px-2 text-[12px]", "aria-label": t('optimizations.detail.trend.scopeLabel'), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: scopeOptions.map((option) => (_jsx(SelectItem, { value: option.id, children: formatTrendScopeOption(option, t) }, option.id))) })] }), _jsxs(Select, { value: metricValue ?? undefined, onValueChange: onMetricChange, disabled: metricOptions.length === 0, children: [_jsx(SelectTrigger, { className: "h-8 w-[150px] rounded-md px-2 text-[12px]", "aria-label": t('optimizations.detail.trend.metricLabel'), children: _jsx(SelectValue, { placeholder: t('optimizations.detail.trend.metricEmpty') }) }), _jsx(SelectContent, { children: metricOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: formatTrendMetricOption(option, t) }, option.value))) })] })] }));
+}
+function RoundGoalChipRow({ chips }) {
+    const safeChips = chips ?? [];
+    if (!safeChips.length)
+        return null;
+    return (_jsx("div", { className: "flex min-w-0 flex-wrap items-center justify-end gap-x-2 gap-y-1 font-mono text-[11px]", "data-testid": "round-goal-chips", children: safeChips.map((chip, i) => (_jsxs(Fragment, { children: [i > 0 && (_jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u00B7" })), _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: cn('size-1.5 rounded-full', chip.achieved === 'hit' ? optimizationTone.positive.dot : 'bg-muted-foreground/40'), "aria-hidden": true }), _jsx("span", { className: "text-foreground", children: chip.label }), _jsx("span", { className: "text-muted-foreground", children: chip.targetText }), _jsx("span", { className: "text-muted-foreground", children: "\u00B7" }), _jsx("span", { className: cn('font-semibold tabular-nums', chip.achieved === 'hit' && optimizationTone.positive.text), children: chip.currentText })] })] }, `${chip.label}-${i}`))) }));
+}
+function RoundStreamBlock({ stream }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: cn('min-h-[80px] space-y-2 rounded-md border px-3 py-2.5 font-mono text-[12px] leading-relaxed', optimizationTone.info.border, optimizationTone.info.bg), children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10.5px] font-semibold uppercase tracking-wide text-muted-foreground", children: [_jsx("span", { className: cn('size-1.5 animate-pulse rounded-full', optimizationTone.info.dot), "aria-hidden": "true" }), stream.stage] }), _jsx("div", { className: "space-y-2 text-foreground", children: stream.segments.map((seg, idx) => (_jsxs("p", { className: "leading-relaxed", children: [seg.kind !== 'plain' && (_jsx("span", { className: cn('mr-1 rounded px-1 font-mono text-[11px] font-semibold', optimizationTone.info.bg, optimizationTone.info.text), children: seg.kind === 'observation'
+                                ? t('optimizations.detail.round.stream.observation')
+                                : seg.kind === 'hypothesis'
+                                    ? t('optimizations.detail.round.stream.hypothesis')
+                                    : t('optimizations.detail.round.stream.rewrite') })), _jsx("span", { dangerouslySetInnerHTML: { __html: seg.text } }), idx === stream.segments.length - 1 && stream.showCursor && (_jsx("span", { className: cn('ml-1 inline-block h-3 w-1.5 align-[-2px] animate-pulse', optimizationTone.info.fill), "aria-hidden": "true" }))] }, idx))) })] }));
+}
+function EmptyBlockPlaceholder({ roundStatus, emptyKey, }) {
+    const { t } = useI18n();
+    const suffix = roundStatus === 'running' ? 'Running' : roundStatus === 'failed' ? 'Failed' : 'Empty';
+    const key = (emptyKey === 'errorPatterns'
+        ? `optimizations.detail.round.errorPatternsEmpty${suffix === 'Empty' ? '' : suffix}`
+        : emptyKey === 'improvementSuggestions'
+            ? `optimizations.detail.round.improvementSuggestionsEmpty${suffix === 'Empty' ? '' : suffix}`
+            : `optimizations.detail.round.promptDiffEmpty${suffix === 'Empty' ? '' : suffix}`);
+    return _jsx("div", { className: "border-t border-dashed px-4 py-4 text-center text-[12px] text-muted-foreground", children: t(key) });
+}
+// Render the three steps in a fixed order: mirrors ph_runs.optimization_round_steps + service.STEP_ORDER
+const ROUND_STEP_ORDER = ['error_analysis', 'generate_prompt', 'experiment'];
+const STEP_LABEL_KEY = {
+    error_analysis: 'optimizations.detail.round.steps.errorAnalysis',
+    generate_prompt: 'optimizations.detail.round.steps.generatePrompt',
+    experiment: 'optimizations.detail.round.steps.experiment',
+};
+const STEP_STATUS_LABEL_KEY = {
+    pending: 'optimizations.detail.round.steps.statusPending',
+    running: 'optimizations.detail.round.steps.statusRunning',
+    success: 'optimizations.detail.round.steps.statusSuccess',
+    failed: 'optimizations.detail.round.steps.statusFailed',
+    skipped: 'optimizations.detail.round.steps.statusSkipped',
+};
+function getStepByKind(steps, kind) {
+    return (steps ?? []).find((s) => s.step === kind);
+}
+// Three-dot stepper: shows which step (error_analysis / generate_prompt / experiment) the current round is at;
+// colors all go through theme tokens, covering light / dark / twilight / electric themes.
+function RoundStepIndicator({ steps }) {
+    const { t } = useI18n();
+    return (_jsx("div", { className: "inline-flex items-center gap-1.5", role: "list", "aria-label": t('optimizations.detail.round.steps.errorAnalysis'), "data-testid": "optimization-round-step-indicator", children: ROUND_STEP_ORDER.map((kind, idx) => {
+            const step = getStepByKind(steps, kind);
+            // Missing is treated as pending (not yet started)
+            const status = step?.status ?? 'pending';
+            const labelKey = STEP_LABEL_KEY[kind];
+            const statusKey = STEP_STATUS_LABEL_KEY[status];
+            const tooltip = formatTemplate(t('optimizations.detail.round.steps.tooltipFormat'), {
+                label: t(labelKey),
+                status: t(statusKey),
+            });
+            const dotBase = 'flex size-[14px] items-center justify-center rounded-full border';
+            let dotClass = '';
+            if (status === 'running') {
+                dotClass = cn(optimizationTone.info.border, optimizationTone.info.fill, 'animate-pulse');
+            }
+            else if (status === 'success') {
+                dotClass = cn(optimizationTone.positive.border, optimizationTone.positive.fill);
+            }
+            else if (status === 'failed') {
+                dotClass = cn(optimizationTone.danger.border, optimizationTone.danger.fill);
+            }
+            else if (status === 'skipped') {
+                dotClass = cn(optimizationTone.muted.border, 'bg-card opacity-60');
+            }
+            else {
+                // pending
+                dotClass = cn(optimizationTone.muted.border, 'bg-card');
+            }
+            const showCheck = status === 'success';
+            const showAlert = status === 'failed';
+            return (_jsxs("span", { className: "inline-flex items-center gap-1", role: "listitem", children: [_jsxs("span", { title: tooltip, "aria-label": tooltip, className: cn(dotBase, dotClass), children: [showCheck && _jsx(Check, { className: "size-[10px] text-white", "aria-hidden": "true" }), showAlert && _jsx(AlertTriangle, { className: "size-[10px] text-white", "aria-hidden": "true" })] }), _jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground", children: t(labelKey) }), idx < ROUND_STEP_ORDER.length - 1 && _jsx("span", { "aria-hidden": "true", className: "block h-px w-3 bg-border" })] }, kind));
+        }) }));
+}
+function DatasetBaselineStepIndicator({ round }) {
+    const { t } = useI18n();
+    const generateStep = getStepByKind(round.steps, 'generate_prompt');
+    const experimentStatus = round.experimentResult?.experimentStatus === 'success'
+        ? 'success'
+        : round.experimentResult?.experimentStatus === 'failed'
+            ? 'failed'
+            : round.experimentResult?.experimentStatus === 'running'
+                ? 'running'
+                : 'pending';
+    const steps = [
+        {
+            key: 'generate_first_prompt',
+            labelKey: 'optimizations.detail.round.steps.generateFirstPrompt',
+            status: generateStep?.status ?? (round.promptDiff ? 'success' : 'pending'),
+        },
+        {
+            key: 'baseline_experiment',
+            labelKey: 'optimizations.detail.round.steps.baselineExperiment',
+            status: experimentStatus,
+        },
+    ];
+    return (_jsx("div", { className: "inline-flex items-center gap-1.5", role: "list", "aria-label": t('optimizations.detail.round.datasetBaselineKind'), "data-testid": "optimization-baseline-step-indicator", children: steps.map((step, idx) => {
+            const statusKey = STEP_STATUS_LABEL_KEY[step.status];
+            const tooltip = formatTemplate(t('optimizations.detail.round.steps.tooltipFormat'), {
+                label: t(step.labelKey),
+                status: t(statusKey),
+            });
+            const dotBase = 'flex size-[14px] items-center justify-center rounded-full border';
+            const dotClass = step.status === 'running'
+                ? cn(optimizationTone.info.border, optimizationTone.info.fill, 'animate-pulse')
+                : step.status === 'success'
+                    ? cn(optimizationTone.positive.border, optimizationTone.positive.fill)
+                    : step.status === 'failed'
+                        ? cn(optimizationTone.danger.border, optimizationTone.danger.fill)
+                        : cn(optimizationTone.muted.border, 'bg-card');
+            return (_jsxs("span", { className: "inline-flex items-center gap-1", role: "listitem", children: [_jsxs("span", { title: tooltip, "aria-label": tooltip, className: cn(dotBase, dotClass), children: [step.status === 'success' && _jsx(Check, { className: "size-[10px] text-white", "aria-hidden": "true" }), step.status === 'failed' && _jsx(AlertTriangle, { className: "size-[10px] text-white", "aria-hidden": "true" })] }), _jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground", children: t(step.labelKey) }), idx < steps.length - 1 && _jsx("span", { "aria-hidden": "true", className: "block h-px w-3 bg-border" })] }, step.key));
+        }) }));
+}
+// Step error info bar: only shown when the step is failed and has an errorMessage.
+// Reuse optimizationTone.danger, which auto-adapts to all 4 themes.
+function StepErrorBanner({ step }) {
+    const { t } = useI18n();
+    if (!step || step.status !== 'failed' || !step.errorMessage)
+        return null;
+    return (_jsx("div", { className: cn('border-t border-dashed px-4 py-2', optimizationTone.danger.bg, optimizationTone.danger.border), "data-testid": `optimization-round-step-error-${step.step}`, children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertTriangle, { className: cn('mt-0.5 size-3.5 shrink-0', optimizationTone.danger.text), "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsx("div", { className: cn('text-[11.5px] font-semibold', optimizationTone.danger.text), children: t('optimizations.detail.round.steps.errorBannerTitle') }), step.errorClass && (_jsxs("div", { className: "font-mono text-[10.5px] text-muted-foreground", children: [t('optimizations.detail.round.steps.errorClassLabel'), ": ", step.errorClass] })), _jsx("div", { className: "break-words text-[11.5px] leading-snug text-foreground", children: step.errorMessage })] })] }) }));
+}
+function BaselineMetricStrip({ metrics }) {
+    const { t } = useI18n();
+    if (metrics.length === 0)
+        return null;
+    return (_jsx("div", { className: "grid gap-2 sm:grid-cols-3", "data-testid": "optimization-baseline-metrics", children: metrics.map((metric) => (_jsxs("div", { className: "rounded-md border bg-secondary/25 px-3 py-2", children: [_jsx("div", { className: "truncate font-mono text-[10px] uppercase tracking-wide text-muted-foreground", children: formatMetricDisplayLabel(metric.label, t) }), _jsx("div", { className: "mt-1 font-mono text-[18px] font-semibold tabular-nums text-foreground", children: formatMetricDisplayValue(metric.label, metric.value) })] }, metric.label))) }));
+}
+function BaselinePromptPreviewBlock({ promptPreview, open, onToggle, controlsId, }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "overflow-hidden rounded-md border", "data-testid": "optimization-baseline-prompt", children: [_jsx("button", { type: "button", onClick: onToggle, "aria-expanded": open, "aria-controls": controlsId, "aria-label": t(open
+                    ? 'optimizations.detail.round.baselinePromptCollapse'
+                    : 'optimizations.detail.round.baselinePromptExpand'), className: cn('flex w-full cursor-pointer items-center justify-between gap-3 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:bg-muted/30', open && 'border-b'), children: _jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx(ChevronRight, { className: cn('size-3 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90'), "aria-hidden": "true" }), _jsx(FileText, { className: "size-3 shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: t('optimizations.detail.round.datasetBaselinePromptTitle') })] }) }), open && (_jsx("pre", { id: controlsId, className: "max-h-[300px] overflow-auto whitespace-pre-wrap break-words bg-muted/25 px-3 py-2.5 font-mono text-[12px] leading-relaxed text-foreground", children: promptPreview }))] }));
+}
+function DatasetBaselineBlock({ detail, round, promptOpen, onPromptToggle, }) {
+    const { t } = useI18n();
+    const promptText = round.promptDiff?.toText?.trim();
+    return (_jsxs("div", { className: "border-t border-dashed px-4 py-3", "data-testid": "optimization-dataset-baseline-context", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: [_jsx(FileText, { className: "size-3", "aria-hidden": "true" }), t('optimizations.detail.round.datasetBaselineTitle')] }), _jsx("div", { className: "mt-1.5 text-[12px] leading-relaxed text-muted-foreground", children: formatTemplate(t('optimizations.detail.round.datasetBaselineMeta'), {
+                    dataset: detail.datasetName,
+                    samples: formatThousand(detail.datasetSamples),
+                    model: detail.analysisModelName,
+                }) }), round.summaryFallback && (_jsx("p", { className: "mt-2 text-[12.5px] leading-relaxed text-foreground", children: round.summaryFallback })), promptText && (_jsx("div", { className: "mt-3", children: _jsx(BaselinePromptPreviewBlock, { promptPreview: promptText, open: promptOpen, onToggle: onPromptToggle, controlsId: `optimization-round-${round.index}-baseline-prompt-preview` }) }))] }));
+}
+function ErrorPatternBlock({ patterns, roundStatus, open, onToggle, step, }) {
+    const { t } = useI18n();
+    const hasData = Array.isArray(patterns) && patterns.length > 0;
+    return (_jsxs("div", { className: "border-t border-dashed", "data-testid": "optimization-round-error-patterns", children: [_jsxs("button", { type: "button", onClick: onToggle, "aria-expanded": open, className: "flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-2 text-left text-[11.5px] font-medium text-muted-foreground transition-colors hover:bg-muted/30", children: [_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(ChevronRight, { className: cn('size-3 text-muted-foreground transition-transform', open && 'rotate-90'), "aria-hidden": "true" }), t('optimizations.detail.round.errorTitle')] }), _jsx("span", { className: "rounded-full border bg-secondary px-1.5 font-mono text-[10.5px] text-muted-foreground", children: hasData
+                            ? formatTemplate(t('optimizations.detail.round.errorTag'), { count: patterns.length })
+                            : t('optimizations.detail.round.emptyTag') })] }), open && !hasData && _jsx(EmptyBlockPlaceholder, { roundStatus: roundStatus, emptyKey: "errorPatterns" }), open && hasData && (_jsx("div", { className: "space-y-1.5 border-t border-dashed px-4 py-3", children: patterns.map((p, idx) => (_jsxs("div", { className: cn('grid items-center gap-2.5 rounded border px-2 py-1.5 [grid-template-columns:42px_minmax(0,1fr)_auto]', optimizationTone.danger.border, optimizationTone.danger.bg), children: [_jsxs("div", { className: cn('text-right font-mono text-[13px] font-bold tabular-nums', optimizationTone.danger.text), children: [p.percent, "%"] }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[12.5px] font-medium leading-snug text-foreground", children: p.title }), _jsx("div", { className: "text-[11px] leading-snug text-muted-foreground", children: p.detail })] }), _jsxs("div", { className: "font-mono text-[11px] tabular-nums text-muted-foreground", children: [p.count.hit, " / ", p.count.total] })] }, idx))) })), _jsx(StepErrorBanner, { step: step })] }));
+}
+function RoundJumpButtons({ promptId, promptVersionId, experimentId, }) {
+    const { t } = useI18n();
+    const router = useRouter();
+    const hasPromptJump = Boolean(promptId && promptVersionId);
+    const hasExperimentJump = Boolean(experimentId);
+    if (!hasPromptJump && !hasExperimentJump)
+        return null;
+    return (_jsxs("span", { className: "inline-flex items-center gap-0.5", children: [hasPromptJump && (_jsx(TableActionIconButton, { label: t('optimizations.detail.round.openPromptTooltip'), onClick: (event) => {
+                    event.stopPropagation();
+                    router.push(`/prompts/${promptId}?version=${promptVersionId}`);
+                }, children: _jsx(FileText, { className: "size-3.5", "aria-hidden": "true" }) })), hasExperimentJump && (_jsx(TableActionIconButton, { label: t('optimizations.detail.round.openExperimentTooltip'), onClick: (event) => {
+                    event.stopPropagation();
+                    router.push(`/experiments/${experimentId}`);
+                }, children: _jsx(FlaskConical, { className: "size-3.5", "aria-hidden": "true" }) }))] }));
+}
+// The failure banner for the error-analysis step is shown by ErrorPatternBlock; do not duplicate here (suggested improvements and error analysis share the same LLM).
+function ImprovementSuggestionsBlock({ suggestions, roundStatus, open, onToggle, }) {
+    const { t } = useI18n();
+    const hasData = Array.isArray(suggestions) && suggestions.length > 0;
+    const toneForPriority = (priority) => {
+        if (priority === 'high')
+            return optimizationTone.danger;
+        if (priority === 'medium')
+            return optimizationTone.info;
+        if (priority === 'low')
+            return optimizationTone.muted;
+        return optimizationTone.muted;
+    };
+    const priorityLabel = (priority) => {
+        if (priority === 'high')
+            return t('optimizations.detail.round.improvementPriority.high');
+        if (priority === 'medium')
+            return t('optimizations.detail.round.improvementPriority.medium');
+        if (priority === 'low')
+            return t('optimizations.detail.round.improvementPriority.low');
+        return null;
+    };
+    return (_jsxs("div", { className: "border-t border-dashed", "data-testid": "optimization-round-improvement-suggestions", children: [_jsxs("button", { type: "button", onClick: onToggle, "aria-expanded": open, className: "flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-2 text-left text-[11.5px] font-medium text-muted-foreground transition-colors hover:bg-muted/30", children: [_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(ChevronRight, { className: cn('size-3 text-muted-foreground transition-transform', open && 'rotate-90'), "aria-hidden": "true" }), t('optimizations.detail.round.improvementTitle')] }), _jsx("span", { className: "rounded-full border bg-secondary px-1.5 font-mono text-[10.5px] text-muted-foreground", children: hasData
+                            ? formatTemplate(t('optimizations.detail.round.improvementTag'), {
+                                count: suggestions.length,
+                            })
+                            : t('optimizations.detail.round.emptyTag') })] }), open && !hasData && _jsx(EmptyBlockPlaceholder, { roundStatus: roundStatus, emptyKey: "improvementSuggestions" }), open && hasData && (_jsx("div", { className: "space-y-1.5 border-t border-dashed px-4 py-3", children: suggestions.map((s, idx) => {
+                    const tone = toneForPriority(s.priority);
+                    const label = priorityLabel(s.priority);
+                    return (_jsxs("div", { className: cn('grid items-start gap-2.5 rounded border px-2 py-1.5 [grid-template-columns:auto_minmax(0,1fr)]', tone.border, tone.bg), children: [_jsxs("div", { className: "flex flex-col items-start gap-1 pt-[2px]", children: [label && (_jsx("span", { className: cn('inline-flex items-center rounded-full border px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide', tone.pill), children: label })), _jsx("span", { className: "rounded border bg-secondary px-1.5 font-mono text-[10px] text-muted-foreground", children: s.section })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[12.5px] font-medium leading-snug text-foreground", children: s.title }), s.detail && _jsx("div", { className: "text-[11px] leading-snug text-muted-foreground", children: s.detail })] })] }, idx));
+                }) }))] }));
+}
+function PromptDiffBlock({ diff, roundStatus, open, onToggle, step, }) {
+    const { t } = useI18n();
+    const hasData = Boolean(diff);
+    return (_jsxs("div", { className: "border-t border-dashed", "data-testid": "optimization-round-prompt-diff", children: [_jsxs("button", { type: "button", onClick: onToggle, "aria-expanded": open, className: "flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-2 text-left text-[11.5px] font-medium text-muted-foreground transition-colors hover:bg-muted/30", children: [_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(ChevronRight, { className: cn('size-3 text-muted-foreground transition-transform', open && 'rotate-90'), "aria-hidden": "true" }), t('optimizations.detail.round.diffTitle')] }), _jsx("span", { className: "rounded-full border bg-secondary px-1.5 font-mono text-[10.5px] text-muted-foreground", children: hasData
+                            ? formatTemplate(t('optimizations.detail.round.diffTag'), {
+                                from: diff.from,
+                                to: diff.to,
+                            })
+                            : t('optimizations.detail.round.emptyTag') })] }), open && !hasData && _jsx(EmptyBlockPlaceholder, { roundStatus: roundStatus, emptyKey: "promptDiff" }), open && hasData && (_jsxs("div", { className: "border-t border-dashed px-4 py-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 pb-2 text-[11px] text-muted-foreground", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded border bg-destructive/10 px-1.5 py-0.5 text-destructive", children: ["- ", t('optimizations.detail.round.diffRemoved')] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-[var(--status-running-bd)] bg-[var(--status-running-bg)] px-1.5 py-0.5 text-[var(--status-running-fg)]", children: ["+ ", t('optimizations.detail.round.diffAdded')] })] }), _jsx(PromptDiffSplitView, { fromLabel: diff.from, toLabel: diff.to, fromText: diff.fromText, toText: diff.toText })] })), _jsx(StepErrorBanner, { step: step })] }));
+}
+function MetricValue({ value, comparison, showComparison, muted, }) {
+    const showDelta = showComparison && comparison;
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-baseline justify-end gap-1.5", children: [_jsx("span", { className: cn(muted && 'text-muted-foreground'), children: value }), showDelta && (_jsx("span", { className: cn('text-[10.5px] font-semibold leading-none', comparison.tone === 'ok' && optimizationTone.positive.text, comparison.tone === 'bad' && optimizationTone.danger.text, comparison.tone === 'neutral' && 'text-muted-foreground'), children: formatDelta(comparison.value) }))] }));
+}
+function ExperimentResultBlock({ result, showMetricComparisons, }) {
+    const { t } = useI18n();
+    const total = result.samplesTotal || 1;
+    const percent = Math.min(100, (result.samplesDone / total) * 100);
+    const progressLabel = formatProgressLabel({ value: result.samplesDone, max: Math.max(1, total), percent });
+    const okWidth = result.correct && total ? (result.correct / total) * 100 : 0;
+    const badWidth = result.wrong && total ? (result.wrong / total) * 100 : 0;
+    const correctLabel = formatTemplate(t('optimizations.detail.round.correctLabel'), {
+        count: formatThousand(result.correct),
+    });
+    const wrongLabel = formatTemplate(t('optimizations.detail.round.wrongLabel'), {
+        count: formatThousand(result.wrong),
+    });
+    return (_jsxs("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)]", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between font-mono text-[11.5px] text-muted-foreground", children: [_jsxs("span", { children: [_jsx("b", { className: "font-bold text-foreground", children: formatThousand(result.samplesDone) }), " /", ' ', formatThousand(result.samplesTotal)] }), _jsxs("span", { className: cn('font-bold', optimizationTone.positive.text), children: [percent.toFixed(0), " %"] })] }), _jsx(Progress, { value: result.samplesDone, max: Math.max(1, total), label: progressLabel }), _jsx(TooltipProvider, { delayDuration: 160, children: _jsxs("div", { className: "flex h-5 overflow-hidden rounded border", children: [okWidth > 0 && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: cn('flex min-w-0 items-center justify-center overflow-hidden whitespace-nowrap px-1.5 font-mono text-[10.5px]', optimizationTone.positive.bg, optimizationTone.positive.text), style: { width: `${okWidth}%` }, "aria-label": correctLabel, children: correctLabel }) }), _jsx(TooltipContent, { children: correctLabel })] })), badWidth > 0 && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: cn('flex min-w-0 items-center justify-center overflow-hidden whitespace-nowrap px-1.5 font-mono text-[10.5px]', optimizationTone.danger.bg, optimizationTone.danger.text), style: { width: `${badWidth}%` }, "aria-label": wrongLabel, children: wrongLabel }) }), _jsx(TooltipContent, { children: wrongLabel })] }))] }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 font-mono text-[11px] text-muted-foreground", children: [_jsx("span", { children: formatTemplate(t('optimizations.detail.round.timing'), { elapsed: result.elapsed }) }), _jsxs("span", { children: [result.tokenSummary, " \u00B7 ", result.costLabel] })] })] }), _jsx("div", { className: "overflow-hidden rounded-md border", children: _jsxs("table", { className: "w-full font-mono text-[12px] tabular-nums", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-muted/50 text-left text-[10px] uppercase tracking-wide text-muted-foreground", children: [_jsx("th", { className: "px-2 py-1.5", children: t('optimizations.detail.round.cls.category') }), _jsx("th", { className: "px-2 py-1.5 text-right", children: t('optimizations.detail.round.cls.accuracy') }), _jsx("th", { className: "px-2 py-1.5 text-right", children: t('optimizations.detail.round.cls.precision') }), _jsx("th", { className: "px-2 py-1.5 text-right", children: t('optimizations.detail.round.cls.recall') })] }) }), _jsxs("tbody", { children: [result.overallRow && (_jsxs("tr", { className: "border-b-2 border-foreground/40 bg-muted/40 font-semibold", "data-testid": "round-overall-row", children: [_jsx("td", { className: "px-2 py-1.5 font-sans text-[12px] text-foreground", children: t('optimizations.detail.round.cls.overall') }), _jsx("td", { className: "px-2 py-1.5 text-right", children: _jsx(MetricValue, { value: result.overallRow.accuracy.toFixed(3), comparison: result.overallRow.deltas?.accuracy, showComparison: showMetricComparisons }) }), _jsx("td", { className: "px-2 py-1.5 text-right", children: _jsx(MetricValue, { value: result.overallRow.precision.toFixed(3), comparison: result.overallRow.deltas?.precision, showComparison: showMetricComparisons }) }), _jsx("td", { className: "px-2 py-1.5 text-right", children: _jsx(MetricValue, { value: result.overallRow.recall.toFixed(3), comparison: result.overallRow.deltas?.recall, showComparison: showMetricComparisons }) })] })), result.classRows.map((row) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "px-2 py-1.5 font-sans text-[12px] font-medium text-foreground", children: row.label }), _jsx("td", { className: "px-2 py-1.5 text-right", children: _jsx(MetricValue, { value: "\u2014", showComparison: false, muted: true }) }), _jsx("td", { className: "px-2 py-1.5 text-right", children: _jsx(MetricValue, { value: row.precision.toFixed(3), comparison: row.deltas?.precision, showComparison: showMetricComparisons }) }), _jsx("td", { className: "px-2 py-1.5 text-right", children: _jsx(MetricValue, { value: row.recall.toFixed(3), comparison: row.deltas?.recall, showComparison: showMetricComparisons }) })] }, row.label)))] })] }) })] }));
+}
+function TimelineRoundCard({ round, detail, defaultOpen, promptId, showMetricComparisons, }) {
+    const { t } = useI18n();
+    const { formatTime } = useDateTimeFormatter();
+    const [errorOpen, setErrorOpen] = useState(defaultOpen);
+    const [suggestionsOpen, setSuggestionsOpen] = useState(defaultOpen);
+    const [diffOpen, setDiffOpen] = useState(defaultOpen);
+    const [baselinePromptOpen, setBaselinePromptOpen] = useState(defaultOpen);
+    const isCurrent = round.status === 'running';
+    const isFailed = round.status === 'failed';
+    const isBest = round.isBest;
+    const isCollapsed = round.collapsed;
+    const isBaselineRound = round.isBaseline === true;
+    const errorAnalysisStep = getStepByKind(round.steps, 'error_analysis');
+    const generatePromptStep = getStepByKind(round.steps, 'generate_prompt');
+    const experimentStep = getStepByKind(round.steps, 'experiment');
+    const title = isBaselineRound
+        ? t('optimizations.detail.round.baseline')
+        : formatTemplate(t('optimizations.detail.round.label'), { index: round.index });
+    const kindLabel = isBaselineRound ? t('optimizations.detail.round.datasetBaselineKind') : round.kindLabel;
+    const dotClass = cn('absolute -left-7 top-4 z-10 inline-flex size-[18px] items-center justify-center rounded-full border-2 bg-card', isBest
+        ? cn('text-white border-[var(--status-canary-dot)]', optimizationTone.info.fill)
+        : isCurrent
+            ? 'border-[var(--status-canary-dot)] ring-[3px] ring-[var(--status-canary-dot)]/30'
+            : round.status === 'failed'
+                ? 'border-destructive'
+                : 'border-[var(--status-running-dot)]');
+    const footMain = round.totalElapsed || round.totalCost
+        ? `${round.totalElapsed ? formatTemplate(t('optimizations.detail.round.timing'), { elapsed: round.totalElapsed }) + ' · ' : ''}${round.totalCost ?? ''}`
+        : round.startedAt
+            ? formatTemplate(t('optimizations.detail.round.startedAt'), {
+                at: formatTime(round.startedAt, { fallback: '—' }),
+            })
+            : '';
+    return (_jsxs("article", { className: "relative pl-8", "data-testid": `optimization-round-${round.index}`, children: [_jsx("div", { "aria-hidden": "true", className: "absolute bottom-0 left-1 top-0 w-[2px] bg-border" }), _jsx("span", { className: dotClass, "aria-hidden": "true", children: isBest && _jsx("span", { className: "text-[10px] font-bold leading-none", children: "\u2605" }) }), _jsxs("div", { className: cn('overflow-hidden rounded-lg border bg-card shadow-xs', isCurrent && 'border-[color-mix(in_oklab,var(--status-canary-dot)_40%,var(--border))]', isBest && 'border-[color-mix(in_oklab,var(--status-canary-dot)_50%,var(--border))]'), children: [_jsxs("div", { className: "grid items-center gap-4 border-b bg-secondary/30 px-4 py-2.5 [grid-template-columns:minmax(0,1fr)_auto]", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-mono text-[14px] font-bold text-foreground", children: title }), _jsx(RoundJumpButtons, { promptId: promptId, promptVersionId: round.promptVersionId, experimentId: round.experimentId }), _jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: kindLabel }), isCurrent && !isFailed && (_jsxs("span", { className: cn('inline-flex items-center gap-1.5 rounded-full border px-1.5 py-0.5 text-[10.5px]', optimizationTone.info.pill), children: [_jsx("span", { className: cn('size-1 animate-pulse rounded-full', optimizationTone.info.dot), "aria-hidden": "true" }), t('optimizations.detail.round.live')] })), isFailed && (_jsxs("span", { className: cn('inline-flex items-center gap-1.5 rounded-full border px-1.5 py-0.5 text-[10.5px]', optimizationTone.danger.pill), "data-testid": `optimization-round-${round.index}-status-failed`, children: [_jsx("span", { className: cn('size-1 rounded-full', optimizationTone.danger.dot), "aria-hidden": "true" }), t('optimizations.detail.round.statusFailed')] })), round.autoPatched && (_jsxs("span", { className: cn('inline-flex items-center gap-1.5 rounded-full border px-1.5 py-0.5 text-[10.5px]', optimizationTone.warning.pill), "data-testid": `optimization-round-${round.index}-auto-patched`, title: formatTemplate(t('optimizations.detail.round.autoPatchedTooltip'), {
+                                            vars: (round.patchedVariables ?? []).join(', '),
+                                        }), children: [_jsx(Wrench, { className: "size-3", "aria-hidden": "true" }), t('optimizations.detail.round.autoPatchedBadge')] })), isBest && _jsx(BestPointer, { label: t('optimizations.detail.round.bestPointer') }), isBaselineRound ? (_jsx(DatasetBaselineStepIndicator, { round: round })) : ((round.steps?.length ?? 0) > 0 && _jsx(RoundStepIndicator, { steps: round.steps }))] }), _jsx(RoundGoalChipRow, { chips: round.goalChips })] }), !isCollapsed && (_jsx("div", { className: "px-4 py-3", children: round.experimentResult ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("h3", { className: "flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: [_jsx(FlaskConical, { className: "size-3", "aria-hidden": "true" }), t('optimizations.detail.round.experimentResult'), _jsxs("span", { className: "font-mono text-[10.5px] font-medium normal-case text-muted-foreground", children: [round.experimentId ? (_jsx(Link, { href: `/experiments/${round.experimentId}`, className: cn('underline decoration-dotted underline-offset-2', optimizationTone.info.text), children: round.experimentResult.experimentRef })) : (_jsx("span", { children: round.experimentResult.experimentRef })), ' · ', round.experimentResult.experimentStatus === 'success' ? (_jsx("span", { children: t('optimizations.detail.round.experimentDone') })) : round.experimentResult.experimentStatus === 'failed' ? (_jsx("span", { className: cn('font-semibold', optimizationTone.danger.text), children: t('optimizations.detail.round.experimentFailed') })) : (_jsx("span", { children: t('optimizations.detail.round.experimentRunning') }))] })] }), _jsx(ExperimentResultBlock, { result: round.experimentResult, showMetricComparisons: showMetricComparisons }), _jsx(StepErrorBanner, { step: experimentStep })] })) : experimentStep && experimentStep.status === 'failed' ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("h3", { className: "flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: [_jsx(FlaskConical, { className: "size-3", "aria-hidden": "true" }), t('optimizations.detail.round.experimentResult'), _jsx("span", { className: cn('font-semibold', optimizationTone.danger.text), children: t('optimizations.detail.round.experimentFailed') })] }), _jsx(StepErrorBanner, { step: experimentStep })] })) : round.stream ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("h3", { className: "flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: [_jsx(Clock, { className: "size-3", "aria-hidden": "true" }), t('optimizations.detail.round.streamHeader'), _jsx("span", { className: "font-mono text-[10.5px] font-medium normal-case text-muted-foreground", children: round.stream.analysisModel })] }), _jsx(RoundStreamBlock, { stream: round.stream })] })) : round.summaryFallback ? (_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: t('optimizations.detail.round.summary') }), _jsxs("p", { className: "text-[12.5px] leading-relaxed text-muted-foreground", children: [round.summaryFallback, _jsxs("span", { className: "ml-1", children: ["\u00B7", ' ', _jsx(Link, { href: "#", className: cn('underline decoration-dotted underline-offset-2', optimizationTone.info.text), children: t('optimizations.detail.round.expandSummary') })] })] })] })) : null })), isBaselineRound ? (_jsx(DatasetBaselineBlock, { detail: detail, round: round, promptOpen: baselinePromptOpen, onPromptToggle: () => setBaselinePromptOpen((p) => !p) })) : (_jsxs(_Fragment, { children: [_jsx(ErrorPatternBlock, { patterns: round.errorPatterns, roundStatus: round.status, open: errorOpen, onToggle: () => setErrorOpen((p) => !p), step: errorAnalysisStep }), _jsx(ImprovementSuggestionsBlock, { suggestions: round.improvementSuggestions, roundStatus: round.status, open: suggestionsOpen, onToggle: () => setSuggestionsOpen((p) => !p) })] })), !isBaselineRound && (_jsx(PromptDiffBlock, { diff: round.promptDiff, roundStatus: round.status, open: diffOpen, onToggle: () => setDiffOpen((p) => !p), step: generatePromptStep })), (round.startedAt || round.totalElapsed || round.totalCost) && footMain && (_jsx("div", { className: "flex flex-wrap items-center gap-2 border-t bg-secondary/20 px-4 py-2 font-mono text-[11px] text-muted-foreground", children: _jsx("span", { children: footMain }) }))] })] }));
+}
+function BaselineRow({ detail, defaultPromptOpen }) {
+    const { t } = useI18n();
+    const [promptOpen, setPromptOpen] = useState(defaultPromptOpen);
+    const baseline = detail.baseline;
+    if (!baseline)
+        return null;
+    const promptPreview = baseline.promptPreview?.trim() ?? '';
+    const hasBody = Boolean(baseline.experimentResult || baseline.metrics.length > 0 || promptPreview);
+    return (_jsxs("article", { className: "relative pl-8", "data-testid": "optimization-baseline", children: [_jsx("div", { "aria-hidden": "true", className: "absolute left-1 top-0 h-10 w-[2px] bg-border" }), _jsx("span", { className: "absolute -left-7 top-4 z-10 inline-flex size-[18px] items-center justify-center rounded-full border-2 border-border bg-card", "aria-hidden": "true" }), _jsxs("div", { className: "overflow-hidden rounded-lg border bg-card shadow-xs", children: [_jsx("div", { className: cn('flex items-center gap-4 px-4 py-2.5', hasBody && 'border-b bg-secondary/30'), children: _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-mono text-[14px] font-bold text-muted-foreground", children: t('optimizations.detail.round.baseline') }), _jsx(RoundJumpButtons, { promptId: detail.promptId, promptVersionId: detail.baseVersionId, experimentId: detail.sourceExperimentId }), _jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: formatTemplate(t('optimizations.detail.round.baselineFrom'), {
+                                        experiment: baseline.baselineExperiment,
+                                        version: baseline.promptVersion,
+                                    }) })] }) }), hasBody && (_jsxs("div", { className: "space-y-4 px-4 py-3", children: [baseline.experimentResult ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("h3", { className: "flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: [_jsx(FlaskConical, { className: "size-3", "aria-hidden": "true" }), t('optimizations.detail.round.experimentResult'), _jsxs("span", { className: "font-mono text-[10.5px] font-medium normal-case text-muted-foreground", children: [baseline.experimentResult.experimentRef, ' · ', baseline.experimentResult.experimentStatus === 'success' ? (_jsx("span", { children: t('optimizations.detail.round.experimentDone') })) : baseline.experimentResult.experimentStatus === 'failed' ? (_jsx("span", { className: cn('font-semibold', optimizationTone.danger.text), children: t('optimizations.detail.round.experimentFailed') })) : (_jsx("span", { children: t('optimizations.detail.round.experimentRunning') }))] })] }), _jsx(ExperimentResultBlock, { result: baseline.experimentResult, showMetricComparisons: false })] })) : (_jsx(BaselineMetricStrip, { metrics: baseline.metrics })), promptPreview && (_jsx(BaselinePromptPreviewBlock, { promptPreview: promptPreview, open: promptOpen, onToggle: () => setPromptOpen((p) => !p), controlsId: "optimization-baseline-prompt-preview" }))] }))] })] }));
+}
+function BestVersionCard({ detail }) {
+    const { t } = useI18n();
+    const best = detail.bestVersion;
+    const promptId = detail.promptId;
+    const generatedAtLabel = best?.generatedAtRoundLabel === 'baseline'
+        ? t('optimizations.detail.round.baseline')
+        : typeof best?.generatedAtRoundIndex === 'number'
+            ? detail.startingMode === 'from_dataset_only' && best.generatedAtRoundIndex === 0
+                ? t('optimizations.detail.round.baseline')
+                : formatTemplate(t('optimizations.detail.round.label'), { index: best.generatedAtRoundIndex })
+            : (best?.generatedAtRoundLabel ?? '—');
+    return (_jsxs("section", { className: "rounded-lg border bg-card", "data-testid": "optimization-detail-best", children: [_jsx("div", { className: "border-b px-4 py-2.5", children: _jsx("h3", { className: "text-[13px] font-semibold", children: t('optimizations.detail.best.title') }) }), best ? (_jsxs("div", { className: "px-4 py-3 font-mono text-[12px] leading-7", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: t('optimizations.detail.best.prompt') }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [promptId && best.promptVersionId ? (_jsx(Link, { href: `/prompts/${promptId}?version=${best.promptVersionId}`, className: cn('underline decoration-dotted underline-offset-2', optimizationTone.info.text), children: best.promptRef })) : (_jsx("span", { children: best.promptRef })), _jsx(RoundJumpButtons, { promptId: promptId, promptVersionId: best.promptVersionId, experimentId: null })] })] }), _jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: t('optimizations.detail.best.generatedAt') }), _jsx("span", { children: generatedAtLabel })] }), best.metrics.map((m) => (_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: formatMetricDisplayLabel(m.label, t) }), _jsx("span", { className: cn('tabular-nums', m.tone === 'ok' && optimizationTone.positive.text), children: formatMetricDisplayValue(m.label, m.value) })] }, m.label))), _jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: t('optimizations.detail.best.experiment') }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [best.experimentId ? (_jsx(Link, { href: `/experiments/${best.experimentId}`, className: cn('underline decoration-dotted underline-offset-2', optimizationTone.info.text), children: best.experimentRef })) : (_jsx("span", { children: best.experimentRef })), _jsx(RoundJumpButtons, { promptId: null, promptVersionId: null, experimentId: best.experimentId })] })] })] })) : (_jsx("div", { className: "px-4 py-6 text-center text-[12px] text-muted-foreground", children: t('optimizations.detail.best.empty') }))] }));
+}
+export function OptimizationDetailPage({ projectId, optimizationId, }) {
+    const { t } = useI18n();
+    const detailQuery = useOptimization(projectId, optimizationId);
+    const detail = detailQuery.data ?? null;
+    const [expandAll, setExpandAll] = useState(true);
+    const [timelineOrder, setTimelineOrder] = useState('desc');
+    const [showMetricComparisons, setShowMetricComparisons] = useState(false);
+    const [actionError, setActionError] = useState(null);
+    const controlMutation = useControlOptimization(projectId);
+    const queryClient = useQueryClient();
+    const onAutoRefreshTick = useCallback(async () => {
+        await queryClient.invalidateQueries({ queryKey: ['optimizations', projectId], exact: false });
+    }, [queryClient, projectId]);
+    useAutoRefresh({
+        intervalMs: AUTO_REFRESH_INTERVAL_MS,
+        enabled: detail?.status === 'running',
+        onTick: onAutoRefreshTick,
+    });
+    const hasMetricComparisons = useMemo(() => {
+        if (!detail)
+            return false;
+        return detail.rounds.some((round) => {
+            const result = round.experimentResult;
+            if (!result)
+                return false;
+            const overallDeltas = result.overallRow?.deltas ? Object.keys(result.overallRow.deltas) : [];
+            const classDeltas = result.classRows.some((row) => row.deltas && Object.keys(row.deltas).length > 0);
+            return overallDeltas.length > 0 || classDeltas;
+        });
+    }, [detail]);
+    const timelineItems = useMemo(() => {
+        if (!detail)
+            return [];
+        const rounds = detail.rounds.slice().sort((a, b) => a.index - b.index);
+        const hasRoundBaseline = rounds.some((round) => round.isBaseline === true);
+        const items = [];
+        if (timelineOrder === 'asc') {
+            if (detail.baseline && !hasRoundBaseline)
+                items.push({ kind: 'baseline' });
+            rounds.forEach((round) => items.push({ kind: 'round', round }));
+        }
+        else {
+            rounds
+                .slice()
+                .reverse()
+                .forEach((round) => items.push({ kind: 'round', round }));
+            if (detail.baseline && !hasRoundBaseline)
+                items.push({ kind: 'baseline' });
+        }
+        return items;
+    }, [detail, timelineOrder]);
+    const detailLoading = useDelayedLoading(detailQuery.isLoading);
+    if (detailLoading) {
+        return (_jsx(Main, { className: "gap-0 bg-muted/35 p-0", children: _jsx("div", { className: "mx-auto w-full max-w-[1280px] px-6 py-12", "data-testid": "optimization-detail-loading", children: _jsx(DetailPageSkeleton, {}) }) }));
+    }
+    if (!detail) {
+        return (_jsx(Main, { className: "gap-0 bg-muted/35 p-0", children: _jsxs("div", { className: "mx-auto w-full max-w-[1280px] px-6 py-12", "data-testid": "optimization-detail-not-found", children: [_jsx("h1", { className: "text-[20px] font-semibold", children: t('optimizations.notFound.title') }), _jsx("p", { className: "mt-2 text-[12.5px] text-muted-foreground", children: t('optimizations.notFound.description') }), _jsx(Button, { asChild: true, variant: "outline", className: "mt-4", children: _jsx(Link, { href: `/optimizations`, children: t('optimizations.new.backToList') }) })] }) }));
+    }
+    const status = detail.status;
+    const canStop = status === 'running';
+    const canResume = status === 'stopped';
+    const canCancel = status === 'running' || status === 'stopped';
+    const mutationPending = controlMutation.isPending;
+    const handleControl = async (action) => {
+        if (action === 'cancel' && !window.confirm(t('optimizations.detail.confirm.cancel')))
+            return;
+        setActionError(null);
+        try {
+            await controlMutation.mutateAsync({ optimizationId: detail.id, action });
+        }
+        catch (error) {
+            setActionError(getApiErrorMessage(error) ?? t('optimizations.list.actionFailed'));
+        }
+    };
+    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-detail-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.detail.backToList') }) }), _jsxs("div", { className: "mb-5 flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between", children: [_jsx("div", { className: "min-w-0", children: _jsxs("h1", { className: "flex flex-wrap items-baseline gap-2 text-[24px] font-semibold tracking-tight", children: [_jsx("span", { className: "font-mono", children: detail.name }), _jsx("span", { "data-testid": "optimization-detail-status-badge", children: _jsx(OptimizationStatusBadge, { status: status }) })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [canStop && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-9 gap-1", disabled: mutationPending, "aria-label": t('optimizations.action.stop'), "data-testid": "optimization-detail-action-stop", onClick: () => {
+                                        void handleControl('stop');
+                                    }, children: [_jsx(Square, { className: "size-4", "aria-hidden": "true" }), t('optimizations.action.stop')] })), canResume && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-9 gap-1", disabled: mutationPending, "aria-label": t('optimizations.action.resume'), "data-testid": "optimization-detail-action-resume", onClick: () => {
+                                        void handleControl('resume');
+                                    }, children: [_jsx(Play, { className: "size-4", "aria-hidden": "true" }), t('optimizations.action.resume')] })), canCancel && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-9 gap-1 border-destructive/40 text-destructive hover:text-destructive", disabled: mutationPending, "aria-label": t('optimizations.action.cancel'), "data-testid": "optimization-detail-action-cancel", onClick: () => {
+                                        void handleControl('cancel');
+                                    }, children: [_jsx(Ban, { className: "size-4", "aria-hidden": "true" }), t('optimizations.action.cancel')] }))] })] }), actionError && (_jsx("div", { role: "alert", "data-testid": "optimization-detail-action-error", className: "mb-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12.5px] text-destructive", children: actionError })), _jsx(FailureBanner, { detail: detail }), _jsx(OptimizationProgressCard, { detail: detail }), _jsxs("div", { className: "grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1fr)_320px]", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [_jsx(TrendChart, { detail: detail }), _jsxs("section", { "data-testid": "optimization-detail-timeline", children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-2", children: [_jsx("h2", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: t(timelineOrder === 'desc'
+                                                        ? 'optimizations.detail.timeline.titleDesc'
+                                                        : 'optimizations.detail.timeline.titleAsc') }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: cn('inline-flex h-8 items-center gap-2 rounded-md border bg-card px-2.5', !hasMetricComparisons && 'opacity-60'), children: [_jsx(Switch, { id: "optimization-metric-comparison-toggle", checked: showMetricComparisons, onCheckedChange: setShowMetricComparisons, disabled: !hasMetricComparisons, "aria-label": t('optimizations.detail.timeline.metricComparisonToggleAriaLabel'), "data-testid": "optimization-metric-comparison-toggle" }), _jsx("label", { htmlFor: "optimization-metric-comparison-toggle", className: cn('select-none text-[12px] text-muted-foreground', hasMetricComparisons ? 'cursor-pointer' : 'cursor-not-allowed'), children: t('optimizations.detail.timeline.metricComparisonToggle') })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 gap-1 cursor-pointer", onClick: () => setTimelineOrder((prev) => (prev === 'desc' ? 'asc' : 'desc')), "aria-pressed": timelineOrder === 'asc', "aria-label": t('optimizations.detail.timeline.orderToggleAriaLabel'), "data-testid": "optimization-timeline-order-toggle", children: [timelineOrder === 'desc' ? (_jsx(ArrowDownNarrowWide, { className: "size-3.5" })) : (_jsx(ArrowUpNarrowWide, { className: "size-3.5" })), t(timelineOrder === 'desc'
+                                                                    ? 'optimizations.detail.timeline.orderDesc'
+                                                                    : 'optimizations.detail.timeline.orderAsc')] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 gap-1 cursor-pointer", onClick: () => setExpandAll((prev) => !prev), "aria-pressed": expandAll, children: [expandAll ? _jsx(ChevronsUp, { className: "size-3.5" }) : _jsx(ChevronsDown, { className: "size-3.5" }), t(expandAll
+                                                                    ? 'optimizations.detail.timeline.collapseAll'
+                                                                    : 'optimizations.detail.timeline.expandAll')] })] })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [timelineItems.map((item) => item.kind === 'baseline' ? (_jsx(BaselineRow, { detail: detail, defaultPromptOpen: expandAll }, `baseline-${expandAll ? 'open' : 'closed'}`)) : (_jsx(TimelineRoundCard, { round: item.round, detail: detail, defaultOpen: expandAll, promptId: detail.promptId, showMetricComparisons: showMetricComparisons }, `round-${item.round.index}-${expandAll ? 'open' : 'closed'}`))), timelineItems.length === 0 && (_jsx("div", { className: "rounded-lg border bg-card py-10 text-center text-[12px] text-muted-foreground", children: t('optimizations.detail.timeline.empty') }))] })] })] }), _jsxs("aside", { className: "flex flex-col gap-3 xl:sticky xl:top-20 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto xl:pr-1", children: [_jsx(ConfigSection, { detail: detail }), _jsx(BestVersionCard, { detail: detail })] })] })] }) }));
+}
+//# sourceMappingURL=optimization-detail-page.js.map