@proofhound/web-ui 0.1.8 → 0.1.10

package/dist/screens/releases/release-line-detail-page.js

@@ -1,44 +1,50 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import Link from 'next/link';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Link } from '../../components/navigation/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useRouter } from '../../hooks/use-router';
 import { useQueryClient } from '@tanstack/react-query';
-import { Activity, AlertTriangle, ClipboardCheck, CircleDollarSign, Copy, Gauge, Plus, Square, Timer, } from 'lucide-react';
-import { CartesianGrid, Line, LineChart as RechartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { Activity, AlertTriangle, Archive, Check, ChevronDown, CircleDollarSign, Gauge, MoreHorizontal, Play, Plus, RotateCcw, ScrollText, Search, SlidersHorizontal, Square, Tag, Trash2, Timer, } from 'lucide-react';
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import { DataZoomComponent, GridComponent, ToolboxComponent, TooltipComponent, } from 'echarts/components';
+import { SVGRenderer } from 'echarts/renderers';
 import { Main } from '@proofhound/ui/layout';
-import { Button, DateRangeSegmented, resolveDateRangePreset, resolveRollingDateRangeValue, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, PlatformLoader, DetailPageSkeleton, ResourcePaginationFooter, Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow, cn, } from '@proofhound/ui';
-import { useAnnotationTaskList } from '../../hooks';
+import { Button, DateRangeSegmented, resolveDateRangePreset, resolveRollingDateRangeValue, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, PlatformLoader, Popover, PopoverContent, PopoverTrigger, DetailPageSkeleton, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, ResourcePaginationFooter, Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow, cn, } from '@proofhound/ui';
 import { useDelayedLoading } from '../../hooks';
 import { useProjectModels } from '../../hooks';
-import { useProductionReleaseHistory, useStopProductionRelease } from '../../hooks';
+import { useConnectors, useProductionReleaseHistory, useStopCanaryRelease } from '../../hooks';
 import { useProjectMonitoringStats, useProjectMonitoringTimeseries } from '../../hooks';
-import { useReleaseLineEvents, useReleaseLineList, useUpdateReleaseLineRunConfig, useUpdateReleaseLineTrafficRatio, } from '../../hooks';
+import { useArchiveReleaseLine, usePromoteReleaseLineCanary, useDeleteReleaseLine, useReleaseLineDeleteImpact, useReleaseLineEvents, useReleaseLineList, useRestoreReleaseLineHistoryToCanary, useRestoreReleaseLineHistoryToProduction, useStartReleaseLine, useStopReleaseLine, useUnarchiveReleaseLine, useUpdateReleaseLineInputRoute, useUpdateReleaseLineOutputRoute, useUpdateReleaseLineRunConfig, useUpdateReleaseLineTrafficRatio, } from '../../hooks';
 import { useReleaseRunResults } from '../../hooks';
 import { AUTO_REFRESH_INTERVAL_MS, useAutoRefresh, useDateTimeFormatter } from '../../hooks';
 import { useI18n } from '../../i18n';
-import { getReleaseLineId, getReleaseStopConfirmationName } from '../../lib';
+import { getApiErrorMessage, getReleaseLineId, getReleaseStopConfirmationName } from '../../lib';
 import { BigChartCard } from '../monitoring/big-chart-card';
-import { ReleaseEventPill, ReleaseMetricCard, formatCount, formatPercent, } from './release-line-ui';
+import { formatCount, formatPercent } from './release-line-ui';
 import { ReleaseTopologyCanvas } from './release-topology-canvas';
+echarts.use([LineChart, GridComponent, TooltipComponent, DataZoomComponent, ToolboxComponent, SVGRenderer]);
 const DETAIL_TABS = [
     { value: 'monitoring', key: 'releases.detail.tab.monitoring' },
-    { value: 'variants', key: 'releases.detail.tab.variants' },
     { value: 'results', key: 'releases.detail.tab.results' },
     { value: 'quality', key: 'releases.detail.tab.quality' },
     { value: 'history', key: 'releases.detail.tab.history' },
+    { value: 'settings', key: 'releases.detail.tab.settings' },
 ];
 const RESULT_COLUMNS = [
     { key: 'externalId', width: 'normal' },
     { key: 'input', width: 'wide' },
     { key: 'output', width: 'wide' },
     { key: 'source', width: 'compact' },
-    { key: 'variant', width: 'normal' },
+    { key: 'version', width: 'normal' },
     { key: 'latency', width: 'compact' },
     { key: 'tokens', width: 'compact' },
     { key: 'createdAt', width: 'normal' },
 ];
 const RESULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const HISTORY_INITIAL_GROUP_LIMIT = 8;
+const HISTORY_GROUP_PAGE_SIZE = 8;
 const EMPTY_BY_SOURCE = { prod: 0, canary: 0, iter: 0, exp: 0 };
 const EMPTY_TIMESERIES_POINTS = [];
 const RELEASE_MONITORING_SOURCE_KEYS = ['prod', 'canary'];
@@ -46,6 +52,21 @@ function useDateTimeOrDash() {
     const { formatDateTime } = useDateTimeFormatter();
     return useCallback((value) => (value ? formatDateTime(value, { fallback: '—' }) : '—'), [formatDateTime]);
 }
+const QUALITY_OVERALL_SCOPE = '__overall__';
+const QUALITY_METRIC_OPTIONS = [
+    { key: 'recall', labelKey: 'releases.detail.quality.metric.recall' },
+    { key: 'precision', labelKey: 'releases.detail.quality.metric.precision' },
+    { key: 'f1', labelKey: 'releases.detail.quality.metric.f1' },
+    { key: 'accuracy', labelKey: 'releases.detail.quality.metric.accuracy' },
+];
+const QUALITY_SERIES_COLORS = [
+    'var(--primary)',
+    'var(--src-iter)',
+    'var(--status-pending-dot)',
+    'var(--destructive)',
+    'var(--foreground)',
+    'var(--muted-foreground)',
+];
 const COMPACT_METRIC_DOT_CLASS = {
     default: 'bg-muted-foreground',
     production: 'bg-[var(--src-prod-fg)]',
@@ -53,9 +74,6 @@ const COMPACT_METRIC_DOT_CLASS = {
     success: 'bg-[var(--status-running-fg)]',
     danger: 'bg-destructive',
 };
-const QUALITY_LINE_COLORS = {
-    score: 'var(--src-canary)',
-};
 function normalizeLineId(value) {
     try {
         return decodeURIComponent(value);
@@ -67,13 +85,17 @@ function normalizeLineId(value) {
 function resolveTab(value) {
     if (value === 'annotation')
         return 'quality';
+    if (value === 'variants' || value === 'versions')
+        return 'history';
     if (value === 'monitoring' ||
-        value === 'variants' ||
         value === 'results' ||
         value === 'quality' ||
-        value === 'history') {
+        value === 'history' ||
+        value === 'settings') {
         return value;
     }
+    if (value === 'delete')
+        return 'settings';
     return 'monitoring';
 }
 function createDefaultMonitoringRange() {
@@ -87,6 +109,17 @@ function createDefaultMonitoringRange() {
         to: now.toISOString(),
     };
 }
+function createDefaultResultDateRange() {
+    const preset = resolveDateRangePreset('d7');
+    if (preset)
+        return { preset: 'all', ...preset };
+    const now = new Date();
+    return {
+        preset: 'all',
+        from: new Date(now.getTime() - 7 * 24 * 60 * 60_000).toISOString(),
+        to: now.toISOString(),
+    };
+}
 function getMonitoringRefreshInterval(preset) {
     if (preset === 'h1')
         return AUTO_REFRESH_INTERVAL_MS;
@@ -96,6 +129,12 @@ function getMonitoringRefreshInterval(preset) {
         return 60_000;
     return false;
 }
+function isResultDateRangeApplied(value) {
+    return value.preset !== 'all';
+}
+function isResultDateRangeRolling(value) {
+    return value.preset !== 'all' && value.preset !== 'custom';
+}
 function hasRunningRelease(line) {
     return line?.production?.currentEvent?.status === 'running' || line?.canary?.status === 'running';
 }
@@ -156,29 +195,261 @@ function timeValue(value) {
     const parsed = Date.parse(value);
     return Number.isFinite(parsed) ? parsed : 0;
 }
-function buildAnnotationQualityPoints(tasks) {
+function latestTime(values) {
+    const latest = values
+        .filter((value) => Boolean(value))
+        .sort((left, right) => timeValue(right) - timeValue(left))[0];
+    return latest ?? null;
+}
+function qualityVersionLane(kind) {
+    return kind === 'production' ? 'production' : 'canary';
+}
+function isRecord(value) {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+function stringFromQualityRecord(record, key) {
+    const value = record[key];
+    return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null;
+}
+function numberFromQualityRecord(record, key) {
+    const value = record[key];
+    const parsed = typeof value === 'number' ? value : typeof value === 'string' ? Number(value) : Number.NaN;
+    if (!Number.isFinite(parsed) || parsed < 0)
+        return null;
+    if (parsed <= 1)
+        return toPercentPoint(parsed);
+    if (parsed <= 100)
+        return parsed;
+    return null;
+}
+function countFromQualityRecord(record, key) {
+    const value = record[key];
+    const parsed = typeof value === 'number' ? value : typeof value === 'string' ? Number(value) : Number.NaN;
+    if (!Number.isFinite(parsed) || parsed < 0)
+        return null;
+    return Math.round(parsed);
+}
+function readReleaseQualityMetricSet(value) {
+    if (!isRecord(value))
+        return null;
+    const recall = numberFromQualityRecord(value, 'recall');
+    const precision = numberFromQualityRecord(value, 'precision');
+    const f1 = numberFromQualityRecord(value, 'f1');
+    const accuracy = numberFromQualityRecord(value, 'accuracy');
+    if (recall === null || precision === null || f1 === null || accuracy === null)
+        return null;
+    const sampleCount = countFromQualityRecord(value, 'sampleCount');
+    return {
+        recall,
+        precision,
+        f1,
+        accuracy,
+        sampleCount,
+    };
+}
+function readReleaseQualityScopes(metrics, overallLabel) {
+    const quality = isRecord(metrics?.['quality']) ? metrics['quality'] : null;
+    if (!quality)
+        return [];
+    const scopes = [];
+    const overallMetrics = readReleaseQualityMetricSet(quality['overall']);
+    if (overallMetrics) {
+        scopes.push({ scope: QUALITY_OVERALL_SCOPE, label: overallLabel, metrics: overallMetrics });
+    }
+    const rawScopes = quality['scopes'];
+    if (Array.isArray(rawScopes)) {
+        for (const item of rawScopes) {
+            if (!isRecord(item))
+                continue;
+            const scope = stringFromQualityRecord(item, 'key') ?? stringFromQualityRecord(item, 'label');
+            if (!scope)
+                continue;
+            const metricSet = readReleaseQualityMetricSet(item['metrics']) ?? readReleaseQualityMetricSet(item);
+            if (!metricSet)
+                continue;
+            scopes.push({
+                scope,
+                label: stringFromQualityRecord(item, 'label') ?? scope,
+                metrics: metricSet,
+            });
+        }
+    }
+    else if (isRecord(rawScopes)) {
+        for (const [scope, value] of Object.entries(rawScopes)) {
+            if (!isRecord(value))
+                continue;
+            const metricSet = readReleaseQualityMetricSet(value['metrics']) ?? readReleaseQualityMetricSet(value);
+            if (!metricSet)
+                continue;
+            scopes.push({
+                scope,
+                label: stringFromQualityRecord(value, 'label') ?? scope,
+                metrics: metricSet,
+            });
+        }
+    }
+    return scopes;
+}
+function buildReleaseQualityPoints(releaseEvents, overallLabel) {
     const points = [];
-    for (const task of tasks) {
-        if (task.quality) {
+    for (const event of releaseEvents) {
+        if (!event.releaseVersionId)
+            continue;
+        const releaseVersionKind = event.releaseVersionKind ?? (event.laneType === 'production' ? 'production' : 'candidate');
+        for (const scope of readReleaseQualityScopes(event.metrics, overallLabel)) {
             points.push({
-                id: task.id,
-                x: '',
-                name: task.name,
-                promptVersionLabel: task.promptVersionLabel ?? '—',
-                modelName: task.modelName ?? '—',
-                releaseVariantLabel: task.releaseVariantLabel,
-                submitted: task.progress.submitted,
-                total: task.progress.total,
-                matched: task.quality.matched,
-                mismatched: task.quality.mismatched,
-                updatedAt: task.updatedAt,
-                score: toPercentPoint(task.quality.score),
+                id: `${event.id}:${scope.scope}`,
+                eventId: event.id,
+                eventLabel: event.operation,
+                scope: scope.scope,
+                scopeLabel: scope.label,
+                releaseVersionId: event.releaseVersionId,
+                releaseVersionKind,
+                lane: qualityVersionLane(releaseVersionKind),
+                promptVersionLabel: event.promptVersionLabel ?? formatShortId(event.promptVersionId),
+                modelName: event.modelName ?? formatShortId(event.modelId),
+                releaseVersionLabel: event.releaseVersionLabel ?? formatShortId(event.releaseVersionId),
+                sampleCount: scope.metrics.sampleCount,
+                createdAt: event.createdAt,
+                updatedAt: event.updatedAt,
+                recall: scope.metrics.recall,
+                precision: scope.metrics.precision,
+                f1: scope.metrics.f1,
+                accuracy: scope.metrics.accuracy,
             });
         }
     }
-    return points
-        .sort((left, right) => timeValue(left.updatedAt) - timeValue(right.updatedAt))
-        .map((point, index) => ({ ...point, x: `#${index + 1}` }));
+    return points.sort((left, right) => timeValue(left.createdAt) - timeValue(right.createdAt));
+}
+function buildQualityChartSeries(points, metrics, scopes) {
+    const sortedPoints = [...points].sort((left, right) => timeValue(left.createdAt) - timeValue(right.createdAt));
+    const eventOrder = new Map();
+    for (const point of sortedPoints) {
+        if (!eventOrder.has(point.eventId))
+            eventOrder.set(point.eventId, eventOrder.size + 1);
+    }
+    const series = [];
+    for (const scope of scopes) {
+        const scopedPoints = sortedPoints.filter((point) => point.scope === scope.id);
+        if (scopedPoints.length === 0)
+            continue;
+        for (const metric of metrics) {
+            const seriesId = `${scope.id}:${metric.id}`;
+            const seriesLabel = `${scope.label} · ${metric.label}`;
+            const color = QUALITY_SERIES_COLORS[series.length % QUALITY_SERIES_COLORS.length] ?? 'var(--primary)';
+            series.push({
+                id: seriesId,
+                label: seriesLabel,
+                color,
+                metric: metric.id,
+                metricLabel: metric.label,
+                scope: scope.id,
+                scopeLabel: scope.label,
+                points: scopedPoints.map((point) => ({
+                    ...point,
+                    xIndex: eventOrder.get(point.eventId) ?? 0,
+                    xLabel: `#${eventOrder.get(point.eventId) ?? 0}`,
+                    metric: metric.id,
+                    metricLabel: metric.label,
+                    seriesId,
+                    seriesLabel,
+                    seriesColor: color,
+                    value: point[metric.id],
+                })),
+            });
+        }
+    }
+    return series;
+}
+function buildQualityChartAxisData(series) {
+    const points = new Map();
+    for (const item of series) {
+        for (const point of item.points) {
+            points.set(point.eventId, point);
+        }
+    }
+    return [...points.values()].sort((left, right) => left.xIndex - right.xIndex);
+}
+function buildQualityVersionOptions(points) {
+    const versions = new Map();
+    for (const point of points) {
+        const existing = versions.get(point.releaseVersionId);
+        const latestAt = latestTime([existing?.latestAt, point.updatedAt ?? point.createdAt]);
+        if (existing) {
+            versions.set(point.releaseVersionId, {
+                ...existing,
+                pointCount: existing.pointCount + 1,
+                latestAt,
+            });
+            continue;
+        }
+        versions.set(point.releaseVersionId, {
+            id: point.releaseVersionId,
+            label: point.releaseVersionLabel,
+            kind: point.releaseVersionKind,
+            promptVersion: point.promptVersionLabel,
+            model: point.modelName,
+            pointCount: 1,
+            latestAt,
+        });
+    }
+    return [...versions.values()].sort((left, right) => left.label.localeCompare(right.label, undefined, { numeric: true }));
+}
+function buildQualityScopeOptions(points) {
+    const scopes = new Map();
+    for (const point of points) {
+        scopes.set(point.scope, { id: point.scope, label: point.scopeLabel });
+    }
+    return [...scopes.values()].sort((left, right) => {
+        if (left.id === QUALITY_OVERALL_SCOPE)
+            return -1;
+        if (right.id === QUALITY_OVERALL_SCOPE)
+            return 1;
+        return left.label.localeCompare(right.label, undefined, { numeric: true });
+    });
+}
+function resolveActiveQualityScopes(selectedScopes, options) {
+    if (selectedScopes) {
+        const selectedSet = new Set(selectedScopes);
+        const activeOptions = options.filter((option) => selectedSet.has(option.id));
+        if (activeOptions.length > 0)
+            return activeOptions;
+    }
+    const fallback = options.find((option) => option.id === QUALITY_OVERALL_SCOPE) ?? options[0] ?? null;
+    return fallback ? [fallback] : [];
+}
+function resolveActiveQualityMetrics(selectedMetrics, options) {
+    if (selectedMetrics) {
+        const selectedSet = new Set(selectedMetrics);
+        const activeOptions = options.filter((option) => selectedSet.has(option.id));
+        if (activeOptions.length > 0)
+            return activeOptions;
+    }
+    return options.filter((option) => option.id === 'f1');
+}
+function filterQualityPoints(points, versionIds, scopes) {
+    if (scopes.length === 0)
+        return [];
+    const versionSet = new Set(versionIds);
+    const scopeSet = new Set(scopes.map((scope) => scope.id));
+    return points.filter((point) => versionSet.has(point.releaseVersionId) && scopeSet.has(point.scope));
+}
+function toggleQualityFilterValue(values, value) {
+    if (!values.includes(value))
+        return [...values, value];
+    if (values.length <= 1)
+        return values;
+    return values.filter((item) => item !== value);
+}
+function normalizeQualitySearch(value) {
+    return value.trim().toLowerCase();
+}
+function qualitySearchIncludes(query, parts) {
+    return parts
+        .filter((part) => part !== null && part !== undefined)
+        .join(' ')
+        .toLowerCase()
+        .includes(query);
 }
 function comparisonFromDelta(current, previous, formatter, label, unit) {
     const delta = current - previous;
@@ -282,6 +553,41 @@ function CompactMetricGroup({ title, items, className, }) {
                     return (_jsxs("div", { className: "min-w-0", children: [_jsxs("dt", { className: "flex items-center gap-1.5 text-[12px] text-muted-foreground", children: [_jsx("span", { className: cn('size-1.5 shrink-0 rounded-full', COMPACT_METRIC_DOT_CLASS[tone]) }), _jsx("span", { className: "truncate", children: item.label })] }), _jsx("dd", { className: cn('mt-1 truncate text-[20px] font-semibold leading-none text-foreground', tone === 'danger' && 'text-destructive'), children: item.value })] }, item.label));
                 }) })] }));
 }
+function ReleaseLineDeleteImpactPanel({ impact, loading, }) {
+    const { t } = useI18n();
+    if (loading && !impact) {
+        return (_jsx("div", { className: "rounded-lg border bg-muted/35 px-3 py-2 text-[12px] text-muted-foreground", "data-testid": "release-line-delete-impact", children: t('releases.deleteImpact.loading') }));
+    }
+    if (!impact)
+        return null;
+    const items = [
+        {
+            key: 'events',
+            label: t('releases.deleteImpact.events'),
+            hint: t('releases.deleteImpact.eventsHint'),
+            count: impact.events.length,
+        },
+        {
+            key: 'versions',
+            label: t('releases.deleteImpact.versions'),
+            hint: t('releases.deleteImpact.versionsHint'),
+            count: impact.versions.length,
+        },
+        {
+            key: 'run-results',
+            label: t('releases.deleteImpact.runResults'),
+            hint: t('releases.deleteImpact.runResultsHint'),
+            count: impact.runResults,
+        },
+        {
+            key: 'annotation-tasks',
+            label: t('releases.deleteImpact.annotationTasks'),
+            hint: t('releases.deleteImpact.annotationTasksHint'),
+            count: impact.annotationTasks.length,
+        },
+    ];
+    return (_jsx("div", { className: "rounded-lg border border-destructive/25 bg-background p-3", "data-testid": "release-line-delete-impact", children: impact.total === 0 ? (_jsx("div", { className: "text-[12px] text-muted-foreground", children: t('releases.deleteImpact.empty') })) : (_jsx("div", { className: "grid gap-2 sm:grid-cols-4", children: items.map((item) => (_jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", "data-testid": `release-line-delete-impact-${item.key}`, children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground", children: item.label }), _jsx("div", { className: "mt-1 font-mono text-[18px] font-semibold leading-none", children: formatCount(item.count) }), _jsx("div", { className: "mt-1 truncate text-[10.5px] text-muted-foreground", children: item.hint })] }, item.key))) })) }));
+}
 export function ReleaseLineDetailPage({ projectId, releaseLineId }) {
     const router = useRouter();
     const pathname = usePathname();
@@ -293,17 +599,35 @@ export function ReleaseLineDetailPage({ projectId, releaseLineId }) {
     const line = useMemo(() => listQuery.data.find((item) => item.id === lineId || getReleaseLineId(item.promptId, item.inputConnectorId) === lineId) ?? null, [lineId, listQuery.data]);
     const historyQuery = useProductionReleaseHistory(projectId, line?.promptId ?? '');
     const releaseLineEventsQuery = useReleaseLineEvents(projectId, line?.id ?? '');
-    const stopProductionMutation = useStopProductionRelease(projectId);
+    const stopLineMutation = useStopReleaseLine(projectId);
+    const startLineMutation = useStartReleaseLine(projectId);
+    const archiveLineMutation = useArchiveReleaseLine(projectId);
+    const unarchiveLineMutation = useUnarchiveReleaseLine(projectId);
+    const deleteLineMutation = useDeleteReleaseLine(projectId);
+    const stopCanaryMutation = useStopCanaryRelease(projectId);
     const updateTrafficRatioMutation = useUpdateReleaseLineTrafficRatio(projectId);
+    const promoteCanaryMutation = usePromoteReleaseLineCanary(projectId);
     const updateRunConfigMutation = useUpdateReleaseLineRunConfig(projectId);
+    const updateOutputRouteMutation = useUpdateReleaseLineOutputRoute(projectId);
+    const updateInputRouteMutation = useUpdateReleaseLineInputRoute(projectId);
     const modelQuery = useProjectModels(projectId);
+    const outputConnectorsQuery = useConnectors(projectId, { direction: 'output' });
     const tab = resolveTab(searchParams.get('tab'));
-    const selectedReleaseVariantId = searchParams.get('variant') ?? undefined;
+    const selectedReleaseVersionId = searchParams.get('version') ?? undefined;
     const [stopDialogOpen, setStopDialogOpen] = useState(false);
     const [stopConfirmationText, setStopConfirmationText] = useState('');
+    const [archiveDialogOpen, setArchiveDialogOpen] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [deleteState, setDeleteState] = useState({ lineId: '', confirmationText: '', error: null });
+    const activeDeleteLineId = line?.id ?? '';
+    const deleteConfirmationText = deleteState.lineId === activeDeleteLineId ? deleteState.confirmationText : '';
+    const deleteError = deleteState.lineId === activeDeleteLineId ? deleteState.error : null;
+    const deleteImpactQuery = useReleaseLineDeleteImpact(projectId, deleteDialogOpen ? activeDeleteLineId : '');
     const productionReleaseName = useMemo(() => getReleaseStopConfirmationName(line), [line]);
     const canConfirmStopProduction = stopConfirmationText === productionReleaseName && productionReleaseName.length > 0;
-    const canAddCanary = Boolean(line && line.production?.currentEvent?.status === 'running' && !line.canary);
+    const canConfirmDelete = Boolean(line && deleteConfirmationText === line.label);
+    const canAddCanary = Boolean(line && line.production?.currentEvent?.status === 'running');
+    const canaryActionPending = stopCanaryMutation.isPending || promoteCanaryMutation.isPending;
     const isLive = hasRunningRelease(line);
     const onAutoRefreshTick = useCallback(async () => {
         await Promise.all([
@@ -318,10 +642,18 @@ export function ReleaseLineDetailPage({ projectId, releaseLineId }) {
         onTick: onAutoRefreshTick,
     });
     useEffect(() => {
-        if (searchParams.get('tab') !== 'annotation')
+        const rawTab = searchParams.get('tab');
+        const normalizedTab = rawTab === 'annotation'
+            ? 'quality'
+            : rawTab === 'variants' || rawTab === 'versions'
+                ? 'history'
+                : rawTab === 'delete'
+                    ? 'settings'
+                    : null;
+        if (!normalizedTab)
             return;
         const params = new URLSearchParams(searchParams.toString());
-        params.set('tab', 'quality');
+        params.set('tab', normalizedTab);
         router.replace(`${pathname}?${params.toString()}`, { scroll: false });
     }, [pathname, router, searchParams]);
     const selectTab = useCallback((next) => {
@@ -331,7 +663,7 @@ export function ReleaseLineDetailPage({ projectId, releaseLineId }) {
         else
             params.set('tab', next);
         if (next !== 'results')
-            params.delete('variant');
+            params.delete('version');
         const query = params.toString();
         router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
     }, [pathname, router, searchParams]);
@@ -343,22 +675,22 @@ export function ReleaseLineDetailPage({ projectId, releaseLineId }) {
         return (_jsx(Main, { fixed: true, className: "bg-muted/35", children: _jsx("div", { className: "rounded-lg border bg-card p-10 text-center text-sm text-muted-foreground", children: t('releases.detail.notFound') }) }));
     }
     function openStopProductionDialog() {
-        if (!line?.production?.currentEvent)
+        if (!line || line.status !== 'running')
             return;
         setStopConfirmationText('');
         setStopDialogOpen(true);
     }
     function closeStopProductionDialog() {
-        if (stopProductionMutation.isPending)
+        if (stopLineMutation.isPending)
             return;
         setStopDialogOpen(false);
         setStopConfirmationText('');
     }
     function confirmStopProduction() {
-        if (!line?.production?.currentEvent || !canConfirmStopProduction)
+        if (!line || !canConfirmStopProduction)
             return;
-        stopProductionMutation.mutate({
-            eventId: line.production.currentEvent.id,
+        stopLineMutation.mutate({
+            releaseLineId: line.id,
             body: { reason: t('releases.detail.stopReason') },
         }, {
             onSuccess: () => {
@@ -367,22 +699,116 @@ export function ReleaseLineDetailPage({ projectId, releaseLineId }) {
             },
         });
     }
+    function startReleaseLine() {
+        if (!line || line.status !== 'stopped')
+            return;
+        startLineMutation.mutate({
+            releaseLineId: line.id,
+            body: { reason: t('releases.detail.startReason') },
+        });
+    }
+    function openArchiveDialog() {
+        if (!line || line.status !== 'stopped')
+            return;
+        setArchiveDialogOpen(true);
+    }
+    function closeArchiveDialog() {
+        if (archiveLineMutation.isPending)
+            return;
+        setArchiveDialogOpen(false);
+    }
+    function confirmArchiveReleaseLine() {
+        if (!line || line.status !== 'stopped')
+            return;
+        archiveLineMutation.mutate({
+            releaseLineId: line.id,
+            body: { reason: t('releases.detail.archiveReason') },
+        }, {
+            onSuccess: () => setArchiveDialogOpen(false),
+        });
+    }
+    function unarchiveReleaseLine() {
+        if (!line || line.status !== 'archived')
+            return;
+        unarchiveLineMutation.mutate({
+            releaseLineId: line.id,
+            body: { reason: t('releases.detail.unarchiveReason') },
+        });
+    }
+    function openDeleteDialog() {
+        if (!line)
+            return;
+        setDeleteState({ lineId: line.id, confirmationText: '', error: null });
+        setDeleteDialogOpen(true);
+    }
+    function closeDeleteDialog() {
+        if (deleteLineMutation.isPending)
+            return;
+        setDeleteDialogOpen(false);
+        if (line)
+            setDeleteState({ lineId: line.id, confirmationText: '', error: null });
+    }
+    async function confirmDeleteReleaseLine() {
+        if (!line || !canConfirmDelete)
+            return;
+        setDeleteState((current) => ({
+            lineId: line.id,
+            confirmationText: current.lineId === line.id ? current.confirmationText : '',
+            error: null,
+        }));
+        try {
+            await deleteLineMutation.mutateAsync({
+                releaseLineId: line.id,
+                body: {
+                    confirmationName: line.label,
+                    reason: t('releases.detail.deleteReason'),
+                },
+            });
+            setDeleteDialogOpen(false);
+            router.push('/releases');
+        }
+        catch (error) {
+            setDeleteState((current) => ({
+                lineId: line.id,
+                confirmationText: current.lineId === line.id ? current.confirmationText : '',
+                error: getApiErrorMessage(error) ?? t('releases.detail.deleteFailed'),
+            }));
+        }
+    }
     function openAddCanaryPage() {
         if (!line || !canAddCanary)
             return;
         router.push(`/releases/new?mode=canary&line=${encodeURIComponent(line.id)}`);
     }
-    return (_jsxs(Main, { fixed: true, className: "gap-5 overflow-auto bg-muted/35 pb-8", children: [_jsxs("div", { className: "mx-auto flex w-full max-w-[1760px] flex-col gap-5", "data-testid": "release-line-detail-page", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsx("div", { className: "min-w-0", children: _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("h1", { className: "truncate text-[22px] font-semibold leading-tight", children: line.promptName }), _jsx("span", { "data-testid": "release-line-detail-status", className: "sr-only", children: line.production?.currentEvent?.status ?? line.canary?.status ?? line.status })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [line.production?.currentEvent?.status === 'running' ? (_jsxs(Button, { variant: "outline", onClick: openStopProductionDialog, disabled: stopProductionMutation.isPending, className: "text-destructive hover:text-destructive", "data-testid": "release-line-detail-stop", children: [_jsx(Square, { className: "size-4" }), t('releases.detail.action.stopProduction')] })) : null, canAddCanary ? (_jsxs(Button, { onClick: openAddCanaryPage, children: [_jsx(Plus, { className: "size-4" }), t('releases.detail.action.addCanary')] })) : null] })] }), _jsx(ReleaseTopologyCanvas, { line: line, models: modelQuery.data?.data ?? [], modelsLoading: modelQuery.isLoading, onUpdateTrafficRatio: (_canary, trafficRatio) => updateTrafficRatioMutation.mutateAsync({
+    return (_jsxs(Main, { fixed: true, className: "gap-5 overflow-auto bg-muted/35 pb-8", children: [_jsxs("div", { className: "mx-auto flex w-full max-w-[1760px] flex-col gap-5", "data-testid": "release-line-detail-page", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsx("div", { className: "min-w-0", children: _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("h1", { className: "truncate text-[22px] font-semibold leading-tight", children: line.promptName }), _jsx("span", { "data-testid": "release-line-detail-status", className: "sr-only", children: line.status })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [line.status === 'running' ? (_jsxs(Button, { variant: "outline", onClick: openStopProductionDialog, disabled: stopLineMutation.isPending, className: "text-destructive hover:text-destructive", "data-testid": "release-line-detail-stop", children: [_jsx(Square, { className: "size-4" }), t('releases.detail.action.stopProduction')] })) : null, line.status === 'stopped' ? (_jsxs(Button, { variant: "outline", onClick: startReleaseLine, disabled: startLineMutation.isPending, "data-testid": "release-line-detail-start", children: [_jsx(Play, { className: "size-4" }), startLineMutation.isPending ? t('releases.detail.action.starting') : t('releases.detail.action.start')] })) : null, line.status === 'stopped' ? (_jsxs(Button, { variant: "outline", onClick: openArchiveDialog, disabled: archiveLineMutation.isPending, "data-testid": "release-line-detail-archive", children: [_jsx(Archive, { className: "size-4" }), archiveLineMutation.isPending
+                                                ? t('releases.detail.action.archiving')
+                                                : t('releases.detail.action.archive')] })) : null, line.status === 'archived' ? (_jsxs(Button, { variant: "outline", onClick: unarchiveReleaseLine, disabled: unarchiveLineMutation.isPending, "data-testid": "release-line-detail-unarchive", children: [_jsx(RotateCcw, { className: "size-4" }), unarchiveLineMutation.isPending
+                                                ? t('releases.detail.action.unarchiving')
+                                                : t('releases.detail.action.unarchive')] })) : null, canAddCanary ? (_jsxs(Button, { onClick: openAddCanaryPage, children: [_jsx(Plus, { className: "size-4" }), line.canary ? t('releases.detail.action.replaceCanary') : t('releases.detail.action.addCanary')] })) : null] })] }), _jsx(ReleaseTopologyCanvas, { line: line, models: modelQuery.data?.data ?? [], modelsLoading: modelQuery.isLoading, outputConnectors: outputConnectorsQuery.data?.data ?? [], outputConnectorsLoading: outputConnectorsQuery.isLoading, onUpdateTrafficRatio: (_canary, trafficRatio) => updateTrafficRatioMutation.mutateAsync({
                             releaseLineId: line.id,
                             body: { trafficRatio },
                         }), trafficRatioPending: updateTrafficRatioMutation.isPending, onUpdateRunConfig: (body) => updateRunConfigMutation.mutateAsync({
                             releaseLineId: line.id,
                             body,
-                        }), runConfigPending: updateRunConfigMutation.isPending, onAddCanary: canAddCanary ? openAddCanaryPage : undefined }), _jsx("div", { className: "inline-flex w-fit flex-wrap gap-0.5 rounded-lg border bg-card p-1", children: DETAIL_TABS.map((item) => (_jsx("button", { type: "button", onClick: () => selectTab(item.value), className: cn('rounded-md px-3.5 py-1.5 text-[13px] font-medium transition-colors', tab === item.value
+                        }), runConfigPending: updateRunConfigMutation.isPending, onUpdateOutputRoute: (body) => updateOutputRouteMutation.mutateAsync({
+                            releaseLineId: line.id,
+                            body,
+                        }), outputRoutePending: updateOutputRouteMutation.isPending, onUpdateInputRoute: (body) => updateInputRouteMutation.mutateAsync({
+                            releaseLineId: line.id,
+                            body,
+                        }), inputRoutePending: updateInputRouteMutation.isPending, onAddCanary: canAddCanary ? openAddCanaryPage : undefined, onStopCanary: (canary) => stopCanaryMutation.mutateAsync(canary.id), onPromoteCanary: () => promoteCanaryMutation.mutateAsync(line.id), canaryActionPending: canaryActionPending }), _jsx("div", { className: "inline-flex w-fit flex-wrap gap-0.5 rounded-lg border bg-card p-1", children: DETAIL_TABS.map((item) => (_jsx("button", { type: "button", onClick: () => selectTab(item.value), className: cn('rounded-md px-3.5 py-1.5 text-[13px] font-medium transition-colors', tab === item.value
                                 ? 'bg-muted font-semibold text-foreground'
-                                : 'text-muted-foreground hover:text-foreground'), children: t(item.key) }, item.value))) }), tab === 'monitoring' ? (_jsx(MonitoringPane, { projectId: projectId, line: line, releaseEvents: releaseLineEventsQuery.data?.data ?? [] })) : null, tab === 'variants' ? (_jsx(VariantsPane, { line: line, releaseEvents: releaseLineEventsQuery.data?.data ?? [], loading: releaseLineEventsQuery.isLoading })) : null, tab === 'results' ? (_jsx(ResultsPane, { projectId: projectId, line: line, releaseEvents: releaseLineEventsQuery.data?.data ?? [], initialReleaseVariantId: selectedReleaseVariantId })) : null, tab === 'quality' ? _jsx(QualityMetricsPane, { projectId: projectId, line: line }) : null, tab === 'history' ? (_jsx(HistoryPane, { line: line, productionHistory: historyQuery.data?.data ?? [], releaseEvents: releaseLineEventsQuery.data?.data ?? [], loading: historyQuery.isLoading || releaseLineEventsQuery.isLoading })) : null] }), _jsx(Dialog, { open: stopDialogOpen, onOpenChange: (open) => (open ? setStopDialogOpen(true) : closeStopProductionDialog()), children: _jsxs(DialogContent, { "data-testid": "release-stop-production-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('releases.detail.stopDialog.title') }), _jsx(DialogDescription, { children: t('releases.detail.stopDialog.description') })] }), _jsxs("div", { className: "rounded-lg border bg-muted/40 p-3", children: [_jsx("div", { className: "text-[11.5px] font-medium text-muted-foreground", children: t('releases.detail.stopDialog.releaseName') }), _jsx("div", { className: "mt-1 break-all font-mono text-[13px] font-semibold", children: productionReleaseName || '—' })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "release-stop-production-name", className: "text-[12.5px] font-medium", children: t('releases.detail.stopDialog.inputLabel') }), _jsx(Input, { id: "release-stop-production-name", value: stopConfirmationText, onChange: (event) => setStopConfirmationText(event.target.value), placeholder: t('releases.detail.stopDialog.inputPlaceholder').replace('{name}', productionReleaseName), autoComplete: "off" }), stopConfirmationText.length > 0 && !canConfirmStopProduction ? (_jsx("p", { className: "text-[12px] text-destructive", children: t('releases.detail.stopDialog.mismatch') })) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: closeStopProductionDialog, disabled: stopProductionMutation.isPending, children: t('common.cancel') }), _jsxs(Button, { type: "button", variant: "destructive", onClick: confirmStopProduction, disabled: !canConfirmStopProduction || stopProductionMutation.isPending, children: [_jsx(Square, { className: "size-4" }), stopProductionMutation.isPending
+                                : 'text-muted-foreground hover:text-foreground'), children: t(item.key) }, item.value))) }), tab === 'monitoring' ? (_jsx(MonitoringPane, { projectId: projectId, line: line, releaseEvents: releaseLineEventsQuery.data?.data ?? [] })) : null, tab === 'results' ? (_jsx(ResultsPane, { projectId: projectId, line: line, releaseEvents: releaseLineEventsQuery.data?.data ?? [], initialReleaseVersionId: selectedReleaseVersionId })) : null, tab === 'quality' ? (_jsx(QualityMetricsPane, { line: line, releaseEvents: releaseLineEventsQuery.data?.data ?? [] })) : null, tab === 'history' ? (_jsx(HistoryPane, { projectId: projectId, line: line, productionHistory: historyQuery.data?.data ?? [], releaseEvents: releaseLineEventsQuery.data?.data ?? [], loading: historyQuery.isLoading || releaseLineEventsQuery.isLoading })) : null, tab === 'settings' ? (_jsxs("section", { className: "rounded-lg border bg-card", "data-testid": "release-line-settings-tab", children: [_jsxs("div", { className: "border-b px-4 py-3", children: [_jsx("div", { className: "text-[13px] font-semibold", children: t('releases.detail.settings.title') }), _jsx("p", { className: "mt-1 text-[12px] text-muted-foreground", children: t('releases.detail.settings.description') })] }), _jsx("div", { className: "p-4", children: _jsxs("div", { className: "flex flex-col gap-3 rounded-md border border-destructive/30 bg-destructive/5 p-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 text-[13px] font-semibold text-destructive", children: [_jsx(AlertTriangle, { className: "size-4" }), t('releases.detail.delete.dangerTitle')] }), _jsx("p", { className: "mt-1 max-w-3xl text-[12px] text-muted-foreground", children: t('releases.detail.delete.description') })] }), _jsxs(Button, { type: "button", variant: "destructive", onClick: openDeleteDialog, "data-testid": "release-line-delete-open", children: [_jsx(Trash2, { className: "size-4" }), t('releases.detail.delete.open')] })] }) })] })) : null] }), _jsx(Dialog, { open: stopDialogOpen, onOpenChange: (open) => (open ? setStopDialogOpen(true) : closeStopProductionDialog()), children: _jsxs(DialogContent, { "data-testid": "release-stop-production-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('releases.detail.stopDialog.title') }), _jsx(DialogDescription, { children: t('releases.detail.stopDialog.description') })] }), _jsxs("div", { className: "rounded-lg border bg-muted/40 p-3", children: [_jsx("div", { className: "text-[11.5px] font-medium text-muted-foreground", children: t('releases.detail.stopDialog.releaseName') }), _jsx("div", { className: "mt-1 break-all font-mono text-[13px] font-semibold", children: productionReleaseName || '—' })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "release-stop-production-name", className: "text-[12.5px] font-medium", children: t('releases.detail.stopDialog.inputLabel') }), _jsx(Input, { id: "release-stop-production-name", value: stopConfirmationText, onChange: (event) => setStopConfirmationText(event.target.value), placeholder: t('releases.detail.stopDialog.inputPlaceholder').replace('{name}', productionReleaseName), autoComplete: "off" }), stopConfirmationText.length > 0 && !canConfirmStopProduction ? (_jsx("p", { className: "text-[12px] text-destructive", children: t('releases.detail.stopDialog.mismatch') })) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: closeStopProductionDialog, disabled: stopLineMutation.isPending, children: t('common.cancel') }), _jsxs(Button, { type: "button", variant: "destructive", onClick: confirmStopProduction, disabled: !canConfirmStopProduction || stopLineMutation.isPending, "data-testid": "release-stop-production-confirm", children: [_jsx(Square, { className: "size-4" }), stopLineMutation.isPending
                                             ? t('releases.detail.stopDialog.stopping')
-                                            : t('releases.detail.stopDialog.confirm')] })] })] }) })] }));
+                                            : t('releases.detail.stopDialog.confirm')] })] })] }) }), _jsx(Dialog, { open: archiveDialogOpen, onOpenChange: (open) => (open ? setArchiveDialogOpen(true) : closeArchiveDialog()), children: _jsxs(DialogContent, { "data-testid": "release-line-detail-archive-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('releases.archiveDialog.title') }), _jsx(DialogDescription, { children: t('releases.archiveDialog.description') })] }), _jsxs("div", { className: "rounded-lg border bg-muted/40 p-3", children: [_jsx("div", { className: "text-[11.5px] font-medium text-muted-foreground", children: t('releases.detail.stopDialog.releaseName') }), _jsx("div", { className: "mt-1 break-all font-mono text-[13px] font-semibold", children: line.label })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: closeArchiveDialog, disabled: archiveLineMutation.isPending, children: t('common.cancel') }), _jsxs(Button, { type: "button", onClick: confirmArchiveReleaseLine, disabled: archiveLineMutation.isPending, "data-testid": "release-line-detail-archive-confirm", children: [_jsx(Archive, { className: "size-4" }), archiveLineMutation.isPending
+                                            ? t('releases.archiveDialog.archiving')
+                                            : t('releases.archiveDialog.confirm')] })] })] }) }), _jsx(Dialog, { open: deleteDialogOpen, onOpenChange: (open) => (open ? openDeleteDialog() : closeDeleteDialog()), children: _jsxs(DialogContent, { "data-testid": "release-line-delete-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('releases.detail.delete.title') }), _jsx(DialogDescription, { children: t('releases.detail.delete.dialogDescription') })] }), _jsxs("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-3", children: [_jsx("div", { className: "text-[11.5px] font-medium text-muted-foreground", children: t('releases.detail.delete.releaseName') }), _jsx("div", { className: "mt-1 break-all font-mono text-[13px] font-semibold", children: line.label })] }), _jsx(ReleaseLineDeleteImpactPanel, { impact: deleteImpactQuery.data, loading: deleteImpactQuery.isLoading || deleteImpactQuery.isFetching }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "release-line-delete-name", className: "text-[12.5px] font-medium", children: t('releases.detail.delete.inputLabel') }), _jsx(Input, { id: "release-line-delete-name", value: deleteConfirmationText, onChange: (event) => setDeleteState({
+                                        lineId: line.id,
+                                        confirmationText: event.target.value,
+                                        error: null,
+                                    }), placeholder: t('releases.detail.delete.inputPlaceholder').replace('{name}', line.label), autoComplete: "off" }), deleteConfirmationText.length > 0 && !canConfirmDelete ? (_jsx("p", { className: "text-[12px] text-destructive", children: t('releases.detail.delete.mismatch') })) : null] }), deleteError ? (_jsx("div", { className: "rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive", children: deleteError })) : null, _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: closeDeleteDialog, disabled: deleteLineMutation.isPending, children: t('common.cancel') }), _jsxs(Button, { type: "button", variant: "destructive", onClick: () => void confirmDeleteReleaseLine(), disabled: !canConfirmDelete || deleteLineMutation.isPending, "data-testid": "release-line-delete-confirm", children: [_jsx(Trash2, { className: "size-4" }), deleteLineMutation.isPending
+                                            ? t('releases.detail.delete.deleting')
+                                            : t('releases.detail.delete.confirm')] })] })] }) })] }));
 }
 function MonitoringPane({ projectId, line, releaseEvents, }) {
     const { t, language } = useI18n();
@@ -505,58 +931,57 @@ function MonitoringPane({ projectId, line, releaseEvents, }) {
                                 },
                             ] })] }) }), _jsxs("section", { className: "space-y-3", "aria-label": t('releases.detail.metric.engineering'), children: [_jsx("h3", { className: "text-[14px] font-semibold", children: t('releases.detail.metric.engineering') }), _jsxs("div", { className: "grid grid-cols-1 gap-4 xl:grid-cols-2 2xl:grid-cols-4", children: [_jsx(BigChartCard, { title: t('releases.detail.metric.rpm'), icon: _jsx(Gauge, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-pending-bg)", iconFg: "var(--status-pending-fg)", total: formatRateValue(timeseriesMax.rpm), comparison: comparisonFromDelta(timeseriesMax.rpm, stats?.rpmPeak.previous ?? 0, formatRateValue, vsPreviousPeriodLabel), subtitle: t('monitoring.delta.rpmSubtitle'), data: pickTimeseries('rpm'), yTickFormatter: formatRateValue, legendFormatter: formatRateValue, bySource: stats?.rpmPeak.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.tpm'), icon: _jsx(Activity, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--src-iter-soft)", iconFg: "var(--src-iter-fg)", total: formatBigNumber(timeseriesMax.tpm), comparison: comparisonFromDelta(timeseriesMax.tpm, stats?.tpmPeak.previous ?? 0, formatBigNumber, vsPreviousPeriodLabel), subtitle: t('monitoring.delta.tpmSubtitle'), data: pickTimeseries('tpm'), yTickFormatter: formatBigNumber, legendFormatter: formatBigNumber, bySource: stats?.tpmPeak.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.averageLatency'), icon: _jsx(Timer, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--src-canary-soft)", iconFg: "var(--src-canary-fg)", total: formatLatencyMs(timeseriesMax.latencyAverageMs), comparison: comparisonFromDelta(timeseriesMax.latencyAverageMs, stats?.latencyAverageMs.previous ?? 0, formatLatencyMs, vsPreviousPeriodLabel), data: pickTimeseries('latencyAverageMs'), yTickFormatter: formatLatencyMs, legendFormatter: formatLatencyMs, bySource: stats?.latencyAverageMs.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.p50Latency'), icon: _jsx(Timer, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--src-prod-soft)", iconFg: "var(--src-prod-fg)", total: formatLatencyMs(timeseriesMax.latencyP50Ms), comparison: comparisonFromDelta(timeseriesMax.latencyP50Ms, stats?.latencyP50Ms.previous ?? 0, formatLatencyMs, vsPreviousPeriodLabel), data: pickTimeseries('latencyP50Ms'), yTickFormatter: formatLatencyMs, legendFormatter: formatLatencyMs, bySource: stats?.latencyP50Ms.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.p95Latency'), icon: _jsx(Timer, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-running-bg)", iconFg: "var(--status-running-fg)", total: formatLatencyMs(timeseriesMax.latencyP95Ms), comparison: comparisonFromDelta(timeseriesMax.latencyP95Ms, stats?.latencyP95Ms.previous ?? 0, formatLatencyMs, vsPreviousPeriodLabel), data: pickTimeseries('latencyP95Ms'), yTickFormatter: formatLatencyMs, legendFormatter: formatLatencyMs, bySource: stats?.latencyP95Ms.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.p99Latency'), icon: _jsx(Timer, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-pending-bg)", iconFg: "var(--status-pending-fg)", total: formatLatencyMs(timeseriesMax.latencyP99Ms), comparison: comparisonFromDelta(timeseriesMax.latencyP99Ms, stats?.latencyP99Ms.previous ?? 0, formatLatencyMs, vsPreviousPeriodLabel), data: pickTimeseries('latencyP99Ms'), yTickFormatter: formatLatencyMs, legendFormatter: formatLatencyMs, bySource: stats?.latencyP99Ms.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.cost'), icon: _jsx(CircleDollarSign, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-running-bg)", iconFg: "var(--status-running-fg)", total: formatCostValue(timeseriesMax.cost), comparison: comparisonFromDelta(timeseriesMax.cost, stats?.cost.previous ?? 0, formatCostValue, vsPreviousPeriodLabel), subtitle: t('monitoring.delta.costSubtitle'), data: pickTimeseries('cost'), yTickFormatter: formatCostValue, legendFormatter: formatCostValue, bySource: stats?.cost.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.failureRate'), icon: _jsx(AlertTriangle, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-pending-bg)", iconFg: "var(--status-pending-fg)", total: timeseriesMax.failureRatePercent.toFixed(2), unit: "%", comparison: comparisonFromDelta(timeseriesMax.failureRatePercent, failureRatePercent(stats, 'previous'), (value) => value.toFixed(2), vsPreviousPeriodLabel, '%'), subtitle: t('monitoring.delta.failureRateSubtitle'), data: pickFailureRateTimeseries(), yTickFormatter: formatPercentValue, legendFormatter: formatPercentValue, bySource: failureRateBySourcePercent(stats), sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, sourceDistributionLabel: chartLabels.sourceDistributionLabel, totalLabel: chartLabels.failureRateTotalLabel })] })] })] }));
 }
-function VariantsPane({ line, releaseEvents, loading, }) {
-    const { t } = useI18n();
-    const formatDateTimeOrDash = useDateTimeOrDash();
-    const details = useMemo(() => buildReleaseVariantDetails(line, releaseEvents), [line, releaseEvents]);
-    const showLoader = useDelayedLoading(loading);
-    if (loading && details.length === 0) {
-        return showLoader ? _jsx(PlatformLoader, { className: "py-8", size: "sm" }) : null;
-    }
-    if (details.length === 0) {
-        return (_jsx("div", { className: "rounded-lg border bg-card p-10 text-center text-sm text-muted-foreground", children: t('releases.detail.variants.empty') }));
-    }
-    return (_jsx("section", { className: "space-y-3", "data-testid": "release-variants-pane", children: _jsx("div", { className: "grid grid-cols-1 gap-3 xl:grid-cols-2", children: details.map((detail) => (_jsxs("article", { className: "rounded-lg border bg-card p-4", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-mono text-[17px] font-semibold", children: detail.label }), _jsx(ReleaseVariantStageBadge, { stage: detail.stage })] }), _jsxs("div", { className: "mt-1 max-w-full truncate text-[12px] text-muted-foreground", children: [detail.promptName, " \u00B7 ", detail.promptVersionLabel ?? formatShortId(detail.promptVersionId), " \u00B7", ' ', detail.modelName ?? formatShortId(detail.modelId)] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void navigator.clipboard?.writeText(detail.id), children: [_jsx(Copy, { className: "size-3.5" }), t('releases.detail.variants.copyId')] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", asChild: true, children: _jsxs(Link, { href: `/releases/${encodeURIComponent(line.id)}?tab=results&variant=${encodeURIComponent(detail.id)}`, children: [_jsx(Activity, { className: "size-3.5" }), t('releases.detail.variants.viewResults')] }) }), _jsx(Button, { type: "button", size: "sm", asChild: true, children: _jsxs(Link, { href: `/annotations/new?line=${encodeURIComponent(line.id)}&variant=${encodeURIComponent(detail.id)}`, children: [_jsx(ClipboardCheck, { className: "size-3.5" }), t('releases.detail.variants.newAnnotation')] }) })] })] }), _jsxs("dl", { className: "mt-4 grid grid-cols-2 gap-3 border-t pt-4 md:grid-cols-4", children: [_jsx(VariantMeta, { label: t('releases.detail.variants.promptVersion'), value: detail.promptVersionLabel ?? formatShortId(detail.promptVersionId) }), _jsx(VariantMeta, { label: t('releases.detail.variants.model'), value: detail.modelName ?? formatShortId(detail.modelId) }), _jsx(VariantMeta, { label: t('releases.detail.variants.provider'), value: detail.modelProvider ?? '—' }), _jsx(VariantMeta, { label: t('releases.detail.variants.updatedAt'), value: formatDateTimeOrDash(detail.updatedAt) }), _jsx(VariantMeta, { label: t('releases.detail.variants.productionEvents'), value: formatCount(detail.productionEventCount) }), _jsx(VariantMeta, { label: t('releases.detail.variants.canaryEvents'), value: formatCount(detail.canaryEventCount) }), _jsx(VariantMeta, { label: t('releases.detail.variants.processed'), value: formatCount(detail.totalProcessed) }), _jsx(VariantMeta, { label: t('releases.detail.variants.errors'), value: formatCount(detail.totalErrors) })] }), _jsxs("div", { className: "mt-4 border-t pt-4", children: [_jsx("div", { className: "mb-2 text-[12px] font-medium text-muted-foreground", children: t('releases.detail.variants.events') }), detail.events.length === 0 ? (_jsx("div", { className: "text-[12px] text-muted-foreground", children: t('releases.detail.variants.noEvents') })) : (_jsx("div", { className: "space-y-2", children: detail.events.slice(0, 5).map((event) => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 text-[12px]", children: [_jsx(ReleaseEventPill, { event: event.operation }), _jsx("span", { className: "font-mono text-muted-foreground", children: t(event.laneType === 'production'
-                                                ? 'releases.detail.history.productionLane'
-                                                : 'releases.detail.history.canaryLane') }), _jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: event.submitReason || event.status }), _jsx("span", { className: "font-mono text-[11.5px] text-muted-foreground", children: formatDateTimeOrDash(event.createdAt) })] }, event.id))) }))] }), _jsx("div", { className: "mt-4 border-t pt-3", children: _jsx("div", { className: "font-mono text-[11px] text-muted-foreground", children: detail.id }) })] }, detail.id))) }) }));
-}
-function VariantMeta({ label, value }) {
-    return (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "truncate text-[11.5px] text-muted-foreground", children: label }), _jsx("dd", { className: "mt-1 truncate font-mono text-[12.5px] font-medium text-foreground", children: value })] }));
-}
-function ReleaseVariantStageBadge({ stage }) {
-    const { t } = useI18n();
-    const isProduction = stage === 'production' || stage === 'production_canary';
-    const isCanary = stage === 'canary' || stage === 'production_canary';
-    return (_jsx("span", { className: "inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium", style: {
-            background: isProduction ? 'var(--src-prod-soft)' : isCanary ? 'var(--src-canary-soft)' : 'var(--muted)',
-            color: isProduction ? 'var(--src-prod-fg)' : isCanary ? 'var(--src-canary-fg)' : 'var(--muted-foreground)',
-            borderColor: isProduction
-                ? 'color-mix(in srgb, var(--src-prod) 30%, transparent)'
-                : isCanary
-                    ? 'color-mix(in srgb, var(--src-canary) 30%, transparent)'
-                    : 'var(--border)',
-        }, children: t(`releases.detail.variants.stage.${stage}`) }));
-}
-function ResultsPane({ projectId, line, releaseEvents, initialReleaseVariantId, }) {
-    const { t } = useI18n();
+function ResultsPane({ projectId, line, releaseEvents, initialReleaseVersionId, }) {
+    const { t, language } = useI18n();
     const formatDateTimeOrDash = useDateTimeOrDash();
-    const [sourceFilter, setSourceFilter] = useState('all');
-    const [releaseVariantFilter, setReleaseVariantFilter] = useState(initialReleaseVariantId ?? 'all');
-    const [promptVersionFilter, setPromptVersionFilter] = useState('all');
+    const [dateRange, setDateRange] = useState(() => createDefaultResultDateRange());
+    const [releaseVersionFilter, setReleaseVersionFilter] = useState(initialReleaseVersionId ?? 'all');
     const [pageIndex, setPageIndex] = useState(0);
     const [pageSize, setPageSize] = useState(20);
     const sourceIds = useMemo(() => getReleaseResultSourceIds(line, releaseEvents), [line, releaseEvents]);
-    const releaseVariantOptions = useMemo(() => getReleaseResultVariantOptions(line, releaseEvents), [line, releaseEvents]);
-    const promptVersionOptions = useMemo(() => getReleaseResultPromptVersionOptions(line, releaseEvents), [line, releaseEvents]);
-    const activeReleaseVariantFilter = releaseVariantFilter === 'all' || releaseVariantOptions.some((option) => option.id === releaseVariantFilter)
-        ? releaseVariantFilter
-        : 'all';
-    const activePromptVersionFilter = promptVersionFilter === 'all' || promptVersionOptions.some((option) => option.id === promptVersionFilter)
-        ? promptVersionFilter
+    const releaseVersionOptions = useMemo(() => getReleaseResultVersionOptions(line, releaseEvents), [line, releaseEvents]);
+    const activeReleaseVersionFilter = releaseVersionFilter === 'all' || releaseVersionOptions.some((option) => option.id === releaseVersionFilter)
+        ? releaseVersionFilter
         : 'all';
-    const laneFilter = sourceFilter === 'all' ? undefined : [sourceFilter];
-    const releaseVariantIds = activeReleaseVariantFilter === 'all' ? undefined : [activeReleaseVariantFilter];
-    const promptVersionIds = activePromptVersionFilter === 'all' ? undefined : [activePromptVersionFilter];
+    const releaseVersionIds = activeReleaseVersionFilter === 'all' ? undefined : [activeReleaseVersionFilter];
+    const applyDateRange = isResultDateRangeApplied(dateRange);
+    const handleDateRangeChange = useCallback((next) => {
+        setDateRange(next);
+        setPageIndex(0);
+    }, []);
+    const refreshResultDateRange = useCallback(() => {
+        const nextDateRange = resolveRollingDateRangeValue(dateRange);
+        if (nextDateRange.preset !== dateRange.preset ||
+            nextDateRange.from !== dateRange.from ||
+            nextDateRange.to !== dateRange.to) {
+            setDateRange(nextDateRange);
+        }
+    }, [dateRange]);
+    useAutoRefresh({
+        intervalMs: AUTO_REFRESH_INTERVAL_MS,
+        enabled: sourceIds.length > 0 && isResultDateRangeRolling(dateRange),
+        onTick: refreshResultDateRange,
+    });
+    const dateRangePresetLabels = useMemo(() => [
+        { value: 'all', label: t('releases.detail.results.dateFilter.all') },
+        { value: 'h24', label: t('monitoring.timeRange.preset.h24') },
+        { value: 'd7', label: t('monitoring.timeRange.preset.d7') },
+        { value: 'd30', label: t('monitoring.timeRange.preset.d30') },
+        { value: 'custom', label: t('monitoring.timeRange.preset.custom') },
+    ], [t]);
+    const dateRangeLabels = useMemo(() => ({
+        ariaLabel: t('releases.detail.results.dateFilter.ariaLabel'),
+        customRangeAriaLabel: t('releases.detail.results.dateFilter.customRangeAriaLabel'),
+        fromLabel: t('monitoring.timeRange.from'),
+        toLabel: t('monitoring.timeRange.to'),
+        dateLabel: t('monitoring.timeRange.date'),
+        timeLabel: t('monitoring.timeRange.time'),
+        previousMonth: t('monitoring.timeRange.previousMonth'),
+        nextMonth: t('monitoring.timeRange.nextMonth'),
+        cancel: t('common.cancel'),
+        apply: t('common.apply'),
+        invalidRange: t('monitoring.timeRange.invalidRange'),
+    }), [t]);
     const resultsQuery = useReleaseRunResults(projectId, {
         page: pageIndex + 1,
         pageSize,
@@ -565,9 +990,10 @@ function ResultsPane({ projectId, line, releaseEvents, initialReleaseVariantId,
         judgmentStatus: undefined,
         isCorrect: undefined,
         sourceIds,
-        releaseVariantIds,
-        promptVersionIds,
-        lane: laneFilter,
+        releaseVersionIds,
+        releaseVersionScope: 'exact',
+        from: applyDateRange ? dateRange.from : undefined,
+        to: applyDateRange ? dateRange.to : undefined,
     }, sourceIds.length > 0);
     const rows = resultsQuery.data?.data ?? [];
     const resultsLoading = useDelayedLoading(resultsQuery.isLoading);
@@ -575,16 +1001,10 @@ function ResultsPane({ projectId, line, releaseEvents, initialReleaseVariantId,
     const pageCount = Math.max(1, Math.ceil(total / pageSize));
     const from = total === 0 ? 0 : pageIndex * pageSize + 1;
     const to = Math.min((pageIndex + 1) * pageSize, total);
-    return (_jsxs("div", { className: "overflow-hidden rounded-lg border bg-card", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3", children: [_jsx("div", { children: _jsx("h2", { className: "text-[14px] font-semibold", children: t('releases.detail.tab.results') }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("label", { className: "sr-only", htmlFor: "release-result-variant-filter", children: t('releases.detail.results.variant') }), _jsxs("select", { id: "release-result-variant-filter", name: "releaseVariantFilter", value: activeReleaseVariantFilter, onChange: (event) => {
-                                    setReleaseVariantFilter(event.currentTarget.value);
+    return (_jsxs("div", { className: "overflow-hidden rounded-lg border bg-card", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3", children: [_jsx("div", { children: _jsx("h2", { className: "text-[14px] font-semibold", children: t('releases.detail.tab.results') }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(DateRangeSegmented, { value: dateRange, onChange: handleDateRangeChange, presetLabels: dateRangePresetLabels, labels: dateRangeLabels, locale: language }), _jsx("label", { className: "sr-only", htmlFor: "release-result-version-filter", children: t('releases.detail.results.version') }), _jsx(ResultReleaseVersionSelect, { id: "release-result-version-filter", options: releaseVersionOptions, value: activeReleaseVersionFilter, onChange: (next) => {
+                                    setReleaseVersionFilter(next);
                                     setPageIndex(0);
-                                }, className: "h-9 rounded-md border bg-background px-3 text-[12px] font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", disabled: releaseVariantOptions.length === 0, children: [_jsx("option", { value: "all", children: t('releases.detail.results.variantFilter.all') }), releaseVariantOptions.map((option) => (_jsxs("option", { value: option.id, children: [option.label, " \u00B7 ", option.detail] }, option.id)))] }), _jsx("label", { className: "sr-only", htmlFor: "release-result-prompt-version-filter", children: t('releases.detail.results.promptVersion') }), _jsxs("select", { id: "release-result-prompt-version-filter", name: "promptVersionFilter", value: activePromptVersionFilter, onChange: (event) => {
-                                    setPromptVersionFilter(event.currentTarget.value);
-                                    setPageIndex(0);
-                                }, className: "h-9 rounded-md border bg-background px-3 text-[12px] font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", disabled: promptVersionOptions.length === 0, children: [_jsx("option", { value: "all", children: t('releases.detail.results.promptVersionFilter.all') }), promptVersionOptions.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id)))] }), _jsx("div", { className: "inline-flex rounded-lg border bg-background p-1", children: ['all', 'production', 'canary'].map((value) => (_jsx("button", { type: "button", onClick: () => {
-                                        setSourceFilter(value);
-                                        setPageIndex(0);
-                                    }, className: cn('h-7 rounded-md px-3 text-[12px] font-medium transition-colors', sourceFilter === value ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'), children: t(`releases.detail.results.sourceFilter.${value}`) }, value))) })] })] }), _jsxs(Table, { columns: RESULT_COLUMNS, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { column: "externalId", children: t('releases.detail.results.externalId') }), _jsx(TableHead, { column: "input", children: t('releases.detail.results.input') }), _jsx(TableHead, { column: "output", children: t('releases.detail.results.output') }), _jsx(TableHead, { column: "source", children: t('releases.detail.results.source') }), _jsx(TableHead, { column: "variant", children: t('releases.detail.results.variant') }), _jsx(TableHead, { column: "latency", children: t('releases.detail.results.latency') }), _jsx(TableHead, { column: "tokens", children: t('releases.detail.results.tokens') }), _jsx(TableHead, { column: "createdAt", children: t('releases.detail.results.createdAt') })] }) }), _jsxs(TableBody, { children: [resultsLoading && rows.length === 0 ? (_jsx(TableEmpty, { children: _jsx(PlatformLoader, { className: "py-1", size: "sm" }) })) : null, resultsQuery.isError ? _jsx(TableEmpty, { children: t('releases.detail.results.loadFailed') }) : null, !resultsQuery.isLoading && !resultsQuery.isError && rows.length === 0 ? (_jsx(TableEmpty, { children: t('releases.detail.results.empty') })) : null, rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { column: "externalId", truncate: true, className: "font-mono text-[11.5px] text-muted-foreground", children: _jsx("span", { title: row.externalId ?? undefined, children: row.externalId ?? '—' }) }), _jsx(TableCell, { column: "input", truncate: 2, className: "text-[12px]", children: _jsx("span", { title: formatReleaseRunResultInput(row, 1000), children: formatReleaseRunResultInput(row, 220) }) }), _jsx(TableCell, { column: "output", truncate: 2, className: "text-[12px]", children: _jsx("span", { title: formatReleaseRunResultOutput(row, 1000), children: formatReleaseRunResultOutput(row, 220) }) }), _jsx(TableCell, { column: "source", children: _jsx(ReleaseRunResultLaneBadge, { lane: row.lane }) }), _jsx(TableCell, { column: "variant", className: "text-[12px]", children: _jsx(ReleaseRunResultVariant, { value: row }) }), _jsx(TableCell, { column: "latency", className: "font-mono text-[11.5px] text-muted-foreground", children: formatResultLatency(row.latencyMs) }), _jsx(TableCell, { column: "tokens", className: "font-mono text-[11.5px] text-muted-foreground", children: formatResultTokens(row) }), _jsx(TableCell, { column: "createdAt", className: "font-mono text-[11.5px] text-muted-foreground", children: formatDateTimeOrDash(row.createdAt) })] }, `${row.id}:${row.createdAt}`)))] })] }), _jsx(ResourcePaginationFooter, { summary: _jsx("span", { children: t('releases.detail.results.summary')
+                                }, disabled: releaseVersionOptions.length === 0 })] })] }), _jsxs(Table, { columns: RESULT_COLUMNS, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { column: "externalId", children: t('releases.detail.results.externalId') }), _jsx(TableHead, { column: "input", children: t('releases.detail.results.input') }), _jsx(TableHead, { column: "output", children: t('releases.detail.results.output') }), _jsx(TableHead, { column: "source", children: t('releases.detail.results.source') }), _jsx(TableHead, { column: "version", children: t('releases.detail.results.version') }), _jsx(TableHead, { column: "latency", children: t('releases.detail.results.latency') }), _jsx(TableHead, { column: "tokens", children: t('releases.detail.results.tokens') }), _jsx(TableHead, { column: "createdAt", children: t('releases.detail.results.createdAt') })] }) }), _jsxs(TableBody, { children: [resultsLoading && rows.length === 0 ? (_jsx(TableEmpty, { children: _jsx(PlatformLoader, { className: "py-1", size: "sm" }) })) : null, resultsQuery.isError ? _jsx(TableEmpty, { children: t('releases.detail.results.loadFailed') }) : null, !resultsQuery.isLoading && !resultsQuery.isError && rows.length === 0 ? (_jsx(TableEmpty, { children: t('releases.detail.results.empty') })) : null, rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { column: "externalId", truncate: true, className: "font-mono text-[11.5px] text-muted-foreground", children: _jsx("span", { title: row.externalId ?? undefined, children: row.externalId ?? '—' }) }), _jsx(TableCell, { column: "input", truncate: 2, className: "text-[12px]", children: _jsx("span", { title: formatReleaseRunResultInput(row, 1000), children: formatReleaseRunResultInput(row, 220) }) }), _jsx(TableCell, { column: "output", truncate: 2, className: "text-[12px]", children: _jsx("span", { title: formatReleaseRunResultOutput(row, 1000), children: formatReleaseRunResultOutput(row, 220) }) }), _jsx(TableCell, { column: "source", children: _jsx(ReleaseRunResultLaneBadge, { lane: row.lane }) }), _jsx(TableCell, { column: "version", className: "text-[12px]", children: _jsx(ReleaseRunResultVersion, { value: row }) }), _jsx(TableCell, { column: "latency", className: "font-mono text-[11.5px] text-muted-foreground", children: formatResultLatency(row.latencyMs) }), _jsx(TableCell, { column: "tokens", className: "font-mono text-[11.5px] text-muted-foreground", children: formatResultTokens(row) }), _jsx(TableCell, { column: "createdAt", className: "font-mono text-[11.5px] text-muted-foreground", children: formatDateTimeOrDash(row.createdAt) })] }, `${row.id}:${row.createdAt}`)))] })] }), _jsx(ResourcePaginationFooter, { summary: _jsx("span", { children: t('releases.detail.results.summary')
                         .replace('{from}', String(from))
                         .replace('{to}', String(to))
                         .replace('{total}', formatCount(total)) }), pageIndex: pageIndex, pageCount: pageCount, pageSize: pageSize, pageSizeOptions: RESULT_PAGE_SIZE_OPTIONS, previousPageLabel: t('common.previousPage'), nextPageLabel: t('common.nextPage'), onPageChange: setPageIndex, onPageSizeChange: (nextPageSize) => {
@@ -592,6 +1012,60 @@ function ResultsPane({ projectId, line, releaseEvents, initialReleaseVariantId,
                     setPageIndex(0);
                 } })] }));
 }
+function ResultReleaseVersionSelect({ id, options, value, onChange, disabled, }) {
+    const { t } = useI18n();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const selectedOption = value === 'all' ? null : (options.find((option) => option.id === value) ?? null);
+    const allLabel = t('releases.detail.results.versionFilter.all');
+    const triggerLabel = selectedOption?.label ?? allLabel;
+    const triggerDetail = selectedOption?.detail ?? null;
+    const normalizedQuery = normalizeResultVersionSearch(query);
+    const allOptionVisible = !normalizedQuery || resultVersionSearchIncludes(normalizedQuery, [allLabel, 'all']);
+    const filteredOptions = useMemo(() => {
+        if (!normalizedQuery)
+            return options;
+        return options.filter((option) => resultVersionSearchIncludes(normalizedQuery, [
+            option.id,
+            option.label,
+            option.promptVersion,
+            option.model,
+            option.detail,
+        ]));
+    }, [normalizedQuery, options]);
+    function select(next) {
+        onChange(next);
+        setOpen(false);
+        setQuery('');
+    }
+    return (_jsxs(Popover, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            if (!next)
+                setQuery('');
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "data-testid": "release-result-version-filter", className: "h-auto min-h-10 w-full justify-between px-3 py-2 text-left sm:w-[340px]", children: [_jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate font-mono text-[13px] font-semibold", children: triggerLabel }), triggerDetail ? (_jsx("span", { className: "mt-0.5 block truncate text-[11px] font-normal text-muted-foreground", children: triggerDetail })) : null] }), _jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" })] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 6, className: "w-[calc(100vw-2rem)] p-0 sm:w-[720px]", children: [_jsx(ResultDropdownSearchInput, { value: query, onChange: setQuery, placeholder: t('releases.detail.results.versionDropdown.search') }), _jsxs("div", { className: "max-h-[360px] overflow-y-auto p-1.5", children: [allOptionVisible ? (_jsxs("button", { type: "button", "data-testid": "release-result-version-option-all", onClick: () => select('all'), className: cn('flex w-full items-start gap-3 rounded-md px-3 py-2.5 text-left hover:bg-accent', value === 'all' && 'bg-primary/5'), children: [_jsx(ResultVersionSelectionCheck, { selected: value === 'all' }), _jsx("span", { className: "min-w-0 flex-1", children: _jsx("span", { className: "block min-w-0 truncate font-mono text-[13px] font-semibold", children: allLabel }) })] })) : null, filteredOptions.length === 0 && !allOptionVisible ? (_jsx("div", { className: "px-3 py-8 text-center text-[12px] text-muted-foreground", children: t('releases.detail.results.versionDropdown.noMatches') })) : (filteredOptions.map((option) => {
+                                const selected = option.id === value;
+                                return (_jsxs("button", { type: "button", "data-testid": `release-result-version-option-${option.id}`, onClick: () => select(option.id), className: cn('flex w-full items-start gap-3 rounded-md px-3 py-2.5 text-left hover:bg-accent', selected && 'bg-primary/5'), children: [_jsx(ResultVersionSelectionCheck, { selected: selected }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block min-w-0 truncate font-mono text-[13px] font-semibold", children: option.label }), _jsxs("span", { className: "mt-1 grid gap-x-4 gap-y-1 text-[11.5px] text-muted-foreground sm:grid-cols-3", children: [_jsx("span", { className: "min-w-0 truncate", children: _jsx(ResultDropdownFieldLabel, { label: t('releases.detail.results.versionDropdown.promptVersion'), value: option.promptVersion }) }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ResultDropdownFieldLabel, { label: t('releases.detail.results.versionDropdown.model'), value: option.model }) }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ResultDropdownFieldLabel, { label: t('releases.detail.results.versionDropdown.versionId'), value: formatShortId(option.id) }) })] })] })] }, option.id));
+                            }))] })] })] }));
+}
+function ResultDropdownSearchInput({ value, onChange, placeholder, }) {
+    return (_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [_jsx(Search, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { value: value, onChange: (event) => onChange(event.target.value), onKeyDown: (event) => event.stopPropagation(), placeholder: placeholder, "data-testid": "release-result-version-search", className: "h-8 border-0 bg-transparent px-0 text-[13px] shadow-none focus-visible:ring-0 focus-visible:ring-offset-0" })] }));
+}
+function ResultVersionSelectionCheck({ selected }) {
+    return (_jsx("span", { className: cn('mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-full border', selected ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground/35 bg-background'), "aria-hidden": "true", children: _jsx(Check, { className: cn('size-3', selected ? 'opacity-100' : 'opacity-0') }) }));
+}
+function ResultDropdownFieldLabel({ label, value }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { className: "mx-1 text-muted-foreground/60", children: "-" }), _jsx("span", { className: "text-foreground", children: value })] }));
+}
+function normalizeResultVersionSearch(value) {
+    return value.trim().toLowerCase();
+}
+function resultVersionSearchIncludes(query, parts) {
+    return parts
+        .filter((part) => part !== null && part !== undefined)
+        .join(' ')
+        .toLowerCase()
+        .includes(query);
+}
 function getReleaseLineEventSourceIds(line, releaseEvents) {
     const ids = [
         ...releaseEvents.flatMap((event) => [
@@ -628,103 +1102,7 @@ function getReleaseLineEventSources(line, releaseEvents) {
 function getReleaseResultSourceIds(line, releaseEvents) {
     return getReleaseLineEventSourceIds(line, releaseEvents);
 }
-function buildReleaseVariantDetails(line, releaseEvents) {
-    const baseById = new Map();
-    const eventsByVariant = new Map();
-    const addVariant = (variant) => {
-        baseById.set(variant.id, {
-            id: variant.id,
-            variantNumber: variant.variantNumber,
-            label: variant.label,
-            promptName: variant.promptName,
-            promptVersionId: variant.promptVersionId,
-            promptVersionLabel: variant.promptVersionLabel,
-            modelId: variant.modelId,
-            modelName: variant.modelName,
-            modelProvider: variant.modelProvider,
-            createdAt: variant.createdAt,
-            updatedAt: variant.updatedAt,
-        });
-    };
-    for (const variant of line.variants)
-        addVariant(variant);
-    for (const event of releaseEvents) {
-        if (!event.releaseVariantId)
-            continue;
-        const events = eventsByVariant.get(event.releaseVariantId) ?? [];
-        events.push(event);
-        eventsByVariant.set(event.releaseVariantId, events);
-        if (!baseById.has(event.releaseVariantId)) {
-            baseById.set(event.releaseVariantId, {
-                id: event.releaseVariantId,
-                variantNumber: event.releaseVariantNumber,
-                label: event.releaseVariantLabel ?? formatShortId(event.releaseVariantId),
-                promptName: event.promptName,
-                promptVersionId: event.promptVersionId,
-                promptVersionLabel: event.promptVersionLabel,
-                modelId: event.modelId,
-                modelName: event.modelName,
-                modelProvider: event.modelProvider,
-                createdAt: event.createdAt,
-                updatedAt: event.updatedAt,
-            });
-        }
-    }
-    const currentProductionVariantId = releaseEvents.find((event) => event.id === line.production?.currentEvent?.id)?.releaseVariantId ?? null;
-    const activeCanaryVariantId = line.canary?.releaseVariantId ??
-        releaseEvents.find((event) => event.id === line.canary?.id)?.releaseVariantId ??
-        null;
-    return [...baseById.values()]
-        .map((base) => {
-        const events = (eventsByVariant.get(base.id) ?? []).sort((left, right) => timeValue(right.createdAt) - timeValue(left.createdAt));
-        return {
-            ...base,
-            createdAt: minDateString([base.createdAt, ...events.map((event) => event.createdAt)]),
-            updatedAt: maxDateString([base.updatedAt, ...events.map((event) => event.updatedAt ?? event.createdAt)]),
-            stage: resolveReleaseVariantStage(base.id, currentProductionVariantId, activeCanaryVariantId, events),
-            events,
-            productionEventCount: events.filter((event) => event.laneType === 'production').length,
-            canaryEventCount: events.filter((event) => event.laneType === 'canary').length,
-            totalProcessed: events.reduce((sum, event) => sum + event.totalProcessed, 0),
-            totalErrors: events.reduce((sum, event) => sum + event.totalErrors, 0),
-        };
-    })
-        .sort((left, right) => {
-        if (left.variantNumber !== null && right.variantNumber !== null)
-            return left.variantNumber - right.variantNumber;
-        if (left.variantNumber !== null)
-            return -1;
-        if (right.variantNumber !== null)
-            return 1;
-        return left.label.localeCompare(right.label, undefined, { numeric: true });
-    });
-}
-function resolveReleaseVariantStage(releaseVariantId, currentProductionVariantId, activeCanaryVariantId, events) {
-    const isProduction = currentProductionVariantId === releaseVariantId ||
-        events.some((event) => event.laneType === 'production' && event.status === 'running');
-    const isCanary = activeCanaryVariantId === releaseVariantId ||
-        events.some((event) => event.laneType === 'canary' && (event.status === 'running' || event.status === 'stopped'));
-    if (isProduction && isCanary)
-        return 'production_canary';
-    if (isProduction)
-        return 'production';
-    if (isCanary)
-        return 'canary';
-    return 'history';
-}
-function minDateString(values) {
-    const dates = values.filter((value) => Boolean(value));
-    if (dates.length === 0)
-        return null;
-    return dates.reduce((min, value) => (timeValue(value) < timeValue(min) ? value : min));
-}
-function maxDateString(values) {
-    const dates = values.filter((value) => Boolean(value));
-    if (dates.length === 0)
-        return null;
-    return dates.reduce((max, value) => (timeValue(value) > timeValue(max) ? value : max));
-}
-function getReleaseResultVariantOptions(line, releaseEvents) {
+function getReleaseResultVersionOptions(line, releaseEvents) {
     const options = new Map();
     const add = (input) => {
         if (!input.id)
@@ -734,23 +1112,25 @@ function getReleaseResultVariantOptions(line, releaseEvents) {
         options.set(input.id, {
             id: input.id,
             label: input.label?.trim() || formatShortId(input.id),
+            promptVersion,
+            model,
             detail: `${promptVersion} · ${model}`,
         });
     };
-    for (const variant of line.variants) {
+    for (const version of line.versions) {
         add({
-            id: variant.id,
-            label: variant.label,
-            promptVersionLabel: variant.promptVersionLabel,
-            promptVersionId: variant.promptVersionId,
-            modelName: variant.modelName,
-            modelId: variant.modelId,
+            id: version.id,
+            label: version.label,
+            promptVersionLabel: version.promptVersionLabel,
+            promptVersionId: version.promptVersionId,
+            modelName: version.modelName,
+            modelId: version.modelId,
         });
     }
     for (const event of releaseEvents) {
         add({
-            id: event.releaseVariantId,
-            label: event.releaseVariantLabel,
+            id: event.releaseVersionId,
+            label: event.releaseVersionLabel,
             promptVersionLabel: event.promptVersionLabel,
             promptVersionId: event.promptVersionId,
             modelName: event.modelName,
@@ -759,20 +1139,6 @@ function getReleaseResultVariantOptions(line, releaseEvents) {
     }
     return [...options.values()].sort((left, right) => left.label.localeCompare(right.label, undefined, { numeric: true }));
 }
-function getReleaseResultPromptVersionOptions(line, releaseEvents) {
-    const options = new Map();
-    const add = (id, label) => {
-        if (!id)
-            return;
-        options.set(id, label?.trim() || formatShortId(id));
-    };
-    add(line.production?.currentEvent?.promptVersionId, line.productionVersionLabel);
-    add(line.canary?.promptVersionId, line.canaryVersionLabel);
-    for (const event of releaseEvents) {
-        add(event.promptVersionId, event.promptVersionLabel);
-    }
-    return [...options.entries()].map(([id, label]) => ({ id, label }));
-}
 function formatReleaseRunResultInput(row, maxLength) {
     return compactReleaseRunResultValue(row.inputVariables, maxLength);
 }
@@ -849,125 +1215,1314 @@ function ReleaseRunResultLaneBadge({ lane }) {
                 : 'color-mix(in srgb, var(--src-canary) 30%, transparent)',
         }, children: t(isProduction ? 'releases.detail.results.lane.production' : 'releases.detail.results.lane.canary') }));
 }
-function ReleaseRunResultVariant({ value }) {
-    const label = value.releaseVariantLabel ?? formatShortId(value.releaseVariantId);
+function ReleaseRunResultVersion({ value }) {
+    const label = value.releaseVersionLabel ?? formatShortId(value.releaseVersionId);
     const promptVersion = formatReleaseRunResultPromptVersion(value);
     const model = value.modelName ?? formatShortId(value.modelId);
     return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-mono text-[11.5px] font-semibold", children: label }), _jsxs("div", { className: "mt-0.5 truncate text-[11.5px] text-muted-foreground", children: [promptVersion, " \u00B7 ", model] })] }));
 }
-function QualityMetricsPane({ projectId, line }) {
+function QualityMetricsPane({ line, releaseEvents }) {
     const { t } = useI18n();
-    const annotationTasksQuery = useAnnotationTaskList(projectId);
-    const annotationTasksLoading = useDelayedLoading(annotationTasksQuery.isLoading);
-    const lineTasks = useMemo(() => (annotationTasksQuery.data?.data ?? []).filter((task) => task.releaseLineId === line.id), [annotationTasksQuery.data, line.id]);
-    const points = useMemo(() => buildAnnotationQualityPoints(lineTasks), [lineTasks]);
-    const latest = points[points.length - 1] ?? null;
-    const submitted = lineTasks.reduce((sum, task) => sum + task.progress.submitted, 0);
-    const matched = lineTasks.reduce((sum, task) => sum + (task.quality?.matched ?? 0), 0);
-    const mismatched = lineTasks.reduce((sum, task) => sum + (task.quality?.mismatched ?? 0), 0);
-    const judged = matched + mismatched;
-    const aggregateScore = judged > 0 ? toPercentPoint(matched / judged) : null;
-    const annotationHref = `/annotations/new?line=${encodeURIComponent(line.id)}`;
-    return (_jsxs("div", { className: "space-y-4", "data-testid": "release-quality-metrics-pane", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("h2", { className: "text-[14px] font-semibold", children: t('releases.detail.quality.title') }), _jsx(Button, { asChild: true, children: _jsxs(Link, { href: annotationHref, children: [_jsx(ClipboardCheck, { className: "size-4" }), t('releases.detail.action.newAnnotation')] }) })] }), annotationTasksLoading && lineTasks.length === 0 ? (_jsx(PlatformLoader, { className: "rounded-lg border bg-card py-10", size: "sm" })) : null, annotationTasksQuery.isError ? (_jsx("div", { className: "rounded-lg border bg-card px-4 py-3 text-sm text-destructive", children: t('releases.detail.quality.loadFailed') })) : null, !annotationTasksQuery.isLoading && !annotationTasksQuery.isError && lineTasks.length === 0 ? (_jsxs("div", { className: "rounded-lg border bg-card p-10 text-center", "data-testid": "release-quality-empty", children: [_jsx("div", { className: "text-[15px] font-semibold", children: t('releases.detail.quality.empty') }), _jsx(Button, { className: "mt-5", asChild: true, children: _jsxs(Link, { href: annotationHref, children: [_jsx(ClipboardCheck, { className: "size-4" }), t('releases.detail.action.newAnnotation')] }) })] })) : null, lineTasks.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-5", children: [_jsx(ReleaseMetricCard, { label: t('releases.detail.quality.matchRate'), value: formatQualityPercent(aggregateScore), detail: t('releases.detail.quality.tasksCount').replace('{count}', formatCount(lineTasks.length)), tone: "canary" }), _jsx(ReleaseMetricCard, { label: t('releases.detail.quality.latestMatchRate'), value: formatQualityPercent(latest?.score), detail: latest?.name ?? t('common.noData') }), _jsx(ReleaseMetricCard, { label: t('releases.detail.quality.matched'), value: formatCount(matched), detail: t('releases.detail.quality.matchedHint') }), _jsx(ReleaseMetricCard, { label: t('releases.detail.quality.mismatched'), value: formatCount(mismatched), detail: t('releases.detail.quality.mismatchedHint') }), _jsx(ReleaseMetricCard, { label: t('releases.detail.quality.submitted'), value: formatCount(submitted), detail: t('releases.detail.quality.submittedHint') })] }), points.length > 0 ? (_jsxs("div", { className: "rounded-lg border bg-card p-4", children: [_jsxs("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { children: _jsx("div", { className: "text-[14px] font-semibold", children: t('releases.detail.quality.chartTitle') }) }), _jsx(QualityLegend, {})] }), _jsx(QualityMetricsChart, { data: points })] })) : (_jsx("div", { className: "rounded-lg border bg-card p-8 text-center text-sm text-muted-foreground", children: t('releases.detail.quality.noComparable') }))] })) : null] }));
-}
-function QualityLegend() {
+    const [selectedVersionIds, setSelectedVersionIds] = useState(null);
+    const [selectedScopeIds, setSelectedScopeIds] = useState(null);
+    const [selectedMetricIds, setSelectedMetricIds] = useState(['f1']);
+    const overallLabel = t('releases.detail.quality.scope.overall');
+    const qualityPoints = useMemo(() => buildReleaseQualityPoints(releaseEvents, overallLabel), [overallLabel, releaseEvents]);
+    const versionOptions = useMemo(() => buildQualityVersionOptions(qualityPoints), [qualityPoints]);
+    const scopeOptions = useMemo(() => buildQualityScopeOptions(qualityPoints), [qualityPoints]);
+    const metricOptions = useMemo(() => QUALITY_METRIC_OPTIONS.map((option) => ({ id: option.key, label: t(option.labelKey) })), [t]);
+    const activeVersionIds = useMemo(() => {
+        const available = versionOptions.map((option) => option.id);
+        if (selectedVersionIds === null)
+            return available;
+        return selectedVersionIds.filter((id) => available.includes(id));
+    }, [selectedVersionIds, versionOptions]);
+    const activeScopes = resolveActiveQualityScopes(selectedScopeIds, scopeOptions);
+    const activeMetrics = resolveActiveQualityMetrics(selectedMetricIds, metricOptions);
+    const visiblePoints = useMemo(() => filterQualityPoints(qualityPoints, activeVersionIds, activeScopes), [activeScopes, activeVersionIds, qualityPoints]);
+    const chartSeries = useMemo(() => buildQualityChartSeries(visiblePoints, activeMetrics, activeScopes), [activeMetrics, activeScopes, visiblePoints]);
+    const chartAxisData = useMemo(() => buildQualityChartAxisData(chartSeries), [chartSeries]);
+    const annotationHref = buildQualityAnnotationHref(line, releaseEvents);
+    return (_jsxs("section", { className: "space-y-4", "data-testid": "release-quality-metrics-pane", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-[14px] font-semibold", children: t('releases.detail.quality.title') }), _jsx("p", { className: "mt-1 max-w-3xl text-[12px] leading-5 text-muted-foreground", children: t('releases.detail.quality.description') })] }), _jsxs("div", { className: "overflow-hidden rounded-lg border bg-card shadow-sm", children: [qualityPoints.length > 0 ? (_jsxs("div", { className: "flex flex-wrap items-end gap-3 border-b px-4 py-3", children: [_jsx(QualityVersionFilter, { options: versionOptions, activeIds: activeVersionIds, onChange: setSelectedVersionIds }), _jsx(QualityScopeFilter, { options: scopeOptions, activeIds: activeScopes.map((scope) => scope.id), onChange: setSelectedScopeIds }), _jsx(QualityMetricFilter, { options: metricOptions, activeIds: activeMetrics.map((metric) => metric.id), onChange: setSelectedMetricIds })] })) : null, _jsx("div", { className: "px-4 pb-2 pt-4", children: _jsx(QualityMetricsChart, { axisData: chartAxisData, series: chartSeries, children: chartSeries.length === 0 ? (qualityPoints.length === 0 ? (_jsx(QualityEmptyChartMessage, { annotationHref: annotationHref })) : (_jsx(QualityFilteredEmptyChartMessage, {}))) : null }) }), chartSeries.length > 0 ? _jsx(QualityLegend, { series: chartSeries }) : null] })] }));
+}
+function QualityVersionFilter({ options, activeIds, onChange, }) {
     const { t } = useI18n();
-    const items = [
-        { key: 'score', label: t('releases.detail.quality.matchRate') },
-    ];
-    return (_jsx("div", { className: "flex flex-wrap items-center gap-3 text-[11.5px] text-muted-foreground", children: items.map((item) => (_jsxs("div", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-full", style: { background: QUALITY_LINE_COLORS[item.key] }, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }, item.key))) }));
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const activeSet = useMemo(() => new Set(activeIds), [activeIds]);
+    const normalizedQuery = normalizeQualitySearch(query);
+    const latestOption = useMemo(() => [...options].sort((left, right) => timeValue(right.latestAt) - timeValue(left.latestAt))[0] ?? null, [options]);
+    const productionVersionIds = useMemo(() => options.filter((option) => option.kind === 'production').map((option) => option.id), [options]);
+    const canaryVersionIds = useMemo(() => options.filter((option) => option.kind !== 'production').map((option) => option.id), [options]);
+    const selectedOptions = options.filter((option) => activeSet.has(option.id));
+    const allSelected = options.length > 0 && selectedOptions.length === options.length;
+    const productionSelected = productionVersionIds.length > 0 &&
+        selectedOptions.length === productionVersionIds.length &&
+        productionVersionIds.every((id) => activeSet.has(id));
+    const canarySelected = canaryVersionIds.length > 0 &&
+        selectedOptions.length === canaryVersionIds.length &&
+        canaryVersionIds.every((id) => activeSet.has(id));
+    let triggerLabel = formatTemplate(t('releases.detail.quality.filter.selectedVersions'), {
+        count: formatCount(selectedOptions.length),
+    });
+    if (allSelected) {
+        triggerLabel = t('releases.detail.quality.filter.allVersions');
+    }
+    else if (productionSelected) {
+        triggerLabel = t('releases.detail.quality.filter.allProductionVersions');
+    }
+    else if (canarySelected) {
+        triggerLabel = t('releases.detail.quality.filter.allCanaryVersions');
+    }
+    else if (selectedOptions.length === 1) {
+        triggerLabel = selectedOptions[0]?.label ?? triggerLabel;
+    }
+    const filteredOptions = useMemo(() => {
+        if (!normalizedQuery)
+            return options;
+        return options.filter((option) => qualitySearchIncludes(normalizedQuery, [option.label, option.promptVersion, option.model, option.id]));
+    }, [normalizedQuery, options]);
+    function commit(next) {
+        onChange(next.length === options.length ? null : next);
+    }
+    return (_jsxs("div", { className: "flex min-w-[220px] flex-col gap-1.5", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: t('releases.detail.quality.filter.version') }), _jsxs(Popover, { open: open, onOpenChange: (next) => {
+                    setOpen(next);
+                    if (!next)
+                        setQuery('');
+                }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", disabled: options.length === 0, className: "h-10 justify-between gap-2 px-3 text-left", children: [_jsx("span", { className: "min-w-0 truncate font-mono text-[13px] font-semibold", children: triggerLabel }), _jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-[calc(100vw-2rem)] p-0 sm:w-[560px]", children: [_jsx(ResultDropdownSearchInput, { value: query, onChange: setQuery, placeholder: t('releases.detail.quality.filter.versionSearch') }), _jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 border-b px-3 py-2 text-[12px]", children: [_jsx("button", { type: "button", className: "font-medium text-primary", onClick: () => onChange(null), children: t('releases.detail.quality.filter.selectAll') }), _jsx("button", { type: "button", className: "font-medium text-primary disabled:text-muted-foreground", disabled: !latestOption, onClick: () => {
+                                            if (latestOption)
+                                                onChange([latestOption.id]);
+                                        }, children: t('releases.detail.quality.filter.latestOnly') }), _jsx("button", { type: "button", className: "font-medium text-primary disabled:text-muted-foreground", disabled: productionVersionIds.length === 0, onClick: () => commit(productionVersionIds), children: t('releases.detail.quality.filter.allProductionVersions') }), _jsx("button", { type: "button", className: "font-medium text-primary disabled:text-muted-foreground", disabled: canaryVersionIds.length === 0, onClick: () => commit(canaryVersionIds), children: t('releases.detail.quality.filter.allCanaryVersions') })] }), _jsx("div", { className: "max-h-[320px] overflow-y-auto p-1.5", children: filteredOptions.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-center text-[12px] text-muted-foreground", children: t('releases.detail.quality.filter.noVersions') })) : (filteredOptions.map((option) => {
+                                    const selected = activeSet.has(option.id);
+                                    return (_jsxs("button", { type: "button", onClick: () => commit(toggleQualityFilterValue(activeIds, option.id)), className: cn('flex w-full items-start gap-3 rounded-md px-3 py-2.5 text-left hover:bg-accent', selected && 'bg-primary/5'), children: [_jsx(ResultVersionSelectionCheck, { selected: selected }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "min-w-0 truncate font-mono text-[13px] font-semibold", children: option.label }), _jsx(QualityVersionKindBadge, { kind: option.kind })] }), _jsxs("span", { className: "mt-1 grid gap-x-4 gap-y-1 text-[11.5px] text-muted-foreground sm:grid-cols-3", children: [_jsx("span", { className: "min-w-0 truncate", children: _jsx(ResultDropdownFieldLabel, { label: t('releases.detail.results.versionDropdown.promptVersion'), value: option.promptVersion }) }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ResultDropdownFieldLabel, { label: t('releases.detail.results.versionDropdown.model'), value: option.model }) }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ResultDropdownFieldLabel, { label: t('releases.detail.quality.filter.points'), value: formatCount(option.pointCount) }) })] })] })] }, option.id));
+                                })) })] })] })] }));
+}
+function QualityScopeFilter({ options, activeIds, onChange, }) {
+    return (_jsx(QualityMultiSelectFilter, { labelKey: "releases.detail.quality.filter.scope", options: options, activeIds: activeIds, onChange: onChange, allLabelKey: "releases.detail.quality.filter.allScopes", selectedLabelKey: "releases.detail.quality.filter.selectedScopes", emptyLabelKey: "releases.detail.quality.filter.scopeEmpty", minWidthClassName: "min-w-[190px]" }));
 }
-function QualityMetricsChart({ data }) {
+function QualityMetricFilter({ options, activeIds, onChange, }) {
+    return (_jsx(QualityMultiSelectFilter, { labelKey: "releases.detail.quality.filter.metric", options: options, activeIds: activeIds, onChange: onChange, allLabelKey: "releases.detail.quality.filter.allMetrics", selectedLabelKey: "releases.detail.quality.filter.selectedMetrics", emptyLabelKey: "releases.detail.quality.filter.metricEmpty", minWidthClassName: "min-w-[170px]" }));
+}
+function QualityMultiSelectFilter({ labelKey, options, activeIds, onChange, allLabelKey, selectedLabelKey, emptyLabelKey, minWidthClassName, }) {
     const { t } = useI18n();
-    const metricLabels = useMemo(() => ({
-        score: t('releases.detail.quality.matchRate'),
-    }), [t]);
-    return (_jsx("div", { className: "h-[320px] min-w-0 w-full", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 1, minHeight: 1, initialDimension: { width: 960, height: 320 }, children: _jsxs(RechartsLineChart, { data: data, margin: { top: 12, right: 16, bottom: 8, left: 0 }, children: [_jsx(CartesianGrid, { strokeDasharray: "2 3", vertical: false, stroke: "var(--border)" }), _jsx(XAxis, { dataKey: "x", axisLine: false, tickLine: false, tick: {
-                            fontSize: 10,
-                            fontFamily: 'JetBrains Mono, ui-monospace, monospace',
-                            fill: 'var(--muted-foreground)',
-                        } }), _jsx(YAxis, { axisLine: false, tickLine: false, domain: [0, 100], tick: {
-                            fontSize: 10,
-                            fontFamily: 'JetBrains Mono, ui-monospace, monospace',
-                            fill: 'var(--muted-foreground)',
-                        }, tickFormatter: (value) => `${value}%`, width: 42 }), _jsx(Tooltip, { cursor: { stroke: 'var(--border)', strokeDasharray: '4 4' }, content: (props) => (_jsx(QualityChartTooltip, { ...props, metricLabels: metricLabels, submittedLabel: t('releases.detail.quality.submitted') })) }), ['score'].map((key) => (_jsx(Line, { type: "monotone", dataKey: key, name: metricLabels[key], stroke: QUALITY_LINE_COLORS[key], strokeWidth: 2, dot: { r: 3, strokeWidth: 1.5 }, activeDot: { r: 4 }, isAnimationActive: false }, key)))] }) }) }));
-}
-function QualityChartTooltip({ active, payload, label, metricLabels, submittedLabel, }) {
+    const [open, setOpen] = useState(false);
+    const activeSet = useMemo(() => new Set(activeIds), [activeIds]);
+    const selectedOptions = options.filter((option) => activeSet.has(option.id));
+    const allSelected = options.length > 0 && selectedOptions.length === options.length;
+    const triggerLabel = allSelected
+        ? t(allLabelKey)
+        : selectedOptions.length === 1
+            ? selectedOptions[0]?.label
+            : selectedOptions.length > 1
+                ? formatTemplate(t(selectedLabelKey), { count: formatCount(selectedOptions.length) })
+                : t(emptyLabelKey);
+    function commit(next) {
+        if (next.length === 0)
+            return;
+        onChange(next);
+    }
+    return (_jsxs("div", { className: cn('flex flex-col gap-1.5', minWidthClassName), children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: t(labelKey) }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", disabled: options.length === 0, className: "h-10 justify-between gap-2 px-3 text-left", children: [_jsx("span", { className: "min-w-0 truncate text-[13px] font-semibold", children: triggerLabel }), _jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-64 p-0", children: [_jsx("div", { className: "flex gap-3 border-b px-3 py-2 text-[12px]", children: _jsx("button", { type: "button", className: "font-medium text-primary disabled:text-muted-foreground", disabled: allSelected, onClick: () => onChange(options.map((option) => option.id)), children: t('releases.detail.quality.filter.selectAll') }) }), _jsx("div", { className: "max-h-[260px] overflow-y-auto p-1.5", children: options.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-center text-[12px] text-muted-foreground", children: t(emptyLabelKey) })) : (options.map((option) => {
+                                    const selected = activeSet.has(option.id);
+                                    return (_jsxs("button", { type: "button", onClick: () => commit(toggleQualityFilterValue(activeIds, option.id)), className: cn('flex w-full items-center gap-3 rounded-md px-3 py-2 text-left hover:bg-accent', selected && 'bg-primary/5'), children: [_jsx(ResultVersionSelectionCheck, { selected: selected }), _jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] font-medium", children: option.label }), option.meta ? (_jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: option.meta })) : null] }, option.id));
+                                })) })] })] })] }));
+}
+function QualityVersionKindBadge({ kind }) {
+    const { t } = useI18n();
+    const isProduction = kind === 'production';
+    return (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-full border px-2 py-0.5 text-[10.5px] font-medium leading-4", style: {
+            background: isProduction ? 'var(--src-prod-soft)' : 'var(--src-canary-soft)',
+            color: isProduction ? 'var(--src-prod-fg)' : 'var(--src-canary-fg)',
+            borderColor: isProduction
+                ? 'color-mix(in srgb, var(--src-prod) 30%, transparent)'
+                : 'color-mix(in srgb, var(--src-canary) 30%, transparent)',
+        }, children: t(isProduction
+            ? 'releases.detail.history.versionKind.production'
+            : 'releases.detail.history.versionKind.candidate') }));
+}
+function QualityLegend({ series }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-5 gap-y-2 border-t px-4 py-3 text-[11.5px] text-muted-foreground", children: [series.map((item) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "h-0.5 w-5 rounded-full", style: { background: item.color }, "aria-hidden": true }), item.label] }, item.id))), _jsxs("span", { className: "inline-flex items-center gap-1.5 border-l pl-4", children: [_jsx("span", { className: "size-2.5 rounded-full bg-[var(--src-prod)]", "aria-hidden": true }), t('releases.detail.quality.legend.production')] }), _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "size-2.5 rounded-full border-2 border-[var(--src-canary)] bg-card", "aria-hidden": true }), t('releases.detail.quality.legend.canary')] })] }));
+}
+function readChartCssColor(name, fallback) {
+    if (typeof window === 'undefined')
+        return fallback;
+    const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    return value || fallback;
+}
+function resolveChartColor(value, fallback) {
+    const variableName = value.match(/var\((--[^),\s]+)/)?.[1];
+    return variableName ? readChartCssColor(variableName, fallback) : value;
+}
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (char) => {
+        const escaped = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#39;',
+        };
+        return escaped[char] ?? char;
+    });
+}
+function resolveQualityPercentAxisExtent(extent) {
+    if (!Number.isFinite(extent.min) || !Number.isFinite(extent.max)) {
+        return { min: 0, max: 100 };
+    }
+    const dataMin = Math.max(0, Math.min(100, Math.min(extent.min, extent.max)));
+    const dataMax = Math.max(0, Math.min(100, Math.max(extent.min, extent.max)));
+    const dataSpan = dataMax - dataMin;
+    const padding = Math.max(2, dataSpan * 0.2);
+    let nextMin = Math.max(0, dataMin - padding);
+    let nextMax = Math.min(100, dataMax + padding);
+    if (nextMax - nextMin < 10) {
+        const center = (dataMin + dataMax) / 2;
+        nextMin = Math.max(0, center - 5);
+        nextMax = Math.min(100, center + 5);
+        if (nextMin === 0)
+            nextMax = Math.min(100, Math.max(10, nextMax));
+        if (nextMax === 100)
+            nextMin = Math.max(0, Math.min(90, nextMin));
+    }
+    const roundedMin = Math.max(0, Math.floor(nextMin / 5) * 5);
+    const roundedMax = Math.min(100, Math.ceil(nextMax / 5) * 5);
+    return roundedMax > roundedMin ? { min: roundedMin, max: roundedMax } : { min: 0, max: 100 };
+}
+function getQualityPercentAxisMin(extent) {
+    return resolveQualityPercentAxisExtent(extent).min;
+}
+function getQualityPercentAxisMax(extent) {
+    return resolveQualityPercentAxisExtent(extent).max;
+}
+function QualityMetricsChart({ axisData, series, children, }) {
     const { t } = useI18n();
     const formatDateTimeOrDash = useDateTimeOrDash();
-    if (!active || !payload || payload.length === 0)
-        return null;
-    const point = payload[0]?.payload;
-    if (!point)
-        return null;
-    return (_jsxs("div", { className: "min-w-[220px] rounded-md border bg-popover px-2.5 py-2 text-[12px] shadow-md", children: [_jsxs("div", { className: "mb-1 font-mono text-[10.5px] text-muted-foreground", children: [label, " \u00B7 ", formatDateTimeOrDash(point.updatedAt)] }), _jsx("div", { className: "font-semibold", children: point.name }), _jsxs("div", { className: "mt-0.5 text-[11.5px] text-muted-foreground", children: [point.releaseVariantLabel, " \u00B7 ", point.promptVersionLabel, " \u00B7 ", point.modelName] }), _jsxs("div", { className: "mt-2 space-y-0.5", children: [['score'].map((key) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "size-2 rounded-full", style: { background: QUALITY_LINE_COLORS[key] }, "aria-hidden": true }), _jsx("span", { className: "text-muted-foreground", children: metricLabels[key] }), _jsx("span", { className: "ml-auto font-mono", children: formatQualityPercent(point[key]) })] }, key))), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: t('releases.detail.quality.matched') }), _jsx("span", { className: "ml-auto font-mono", children: formatCount(point.matched) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: t('releases.detail.quality.mismatched') }), _jsx("span", { className: "ml-auto font-mono", children: formatCount(point.mismatched) })] }), _jsxs("div", { className: "mt-1 flex items-center gap-2 border-t pt-1", children: [_jsx("span", { className: "text-muted-foreground", children: submittedLabel }), _jsxs("span", { className: "ml-auto font-mono", children: [formatCount(point.submitted), " / ", formatCount(point.total)] })] })] })] }));
+    const chartRef = useRef(null);
+    const chartInstanceRef = useRef(null);
+    const [chartColorVersion, setChartColorVersion] = useState(0);
+    useEffect(() => {
+        if (typeof MutationObserver === 'undefined')
+            return undefined;
+        const observer = new MutationObserver(() => setChartColorVersion((current) => current + 1));
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'style', 'data-theme'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    const chartOption = useMemo(() => {
+        void chartColorVersion;
+        const foregroundColor = readChartCssColor('--foreground', '#e5e7eb');
+        const mutedColor = readChartCssColor('--muted-foreground', '#94a3b8');
+        const borderColor = readChartCssColor('--border', '#1f2937');
+        const cardColor = readChartCssColor('--card', '#020617');
+        const popoverColor = readChartCssColor('--popover', cardColor);
+        const primaryColor = readChartCssColor('--primary', '#60a5fa');
+        const productionColor = readChartCssColor('--src-prod', '#22c55e');
+        const canaryColor = readChartCssColor('--src-canary', '#3b82f6');
+        const categoryLabels = axisData.map((point) => point.releaseVersionLabel);
+        const qualitySeries = series.map((item) => {
+            const pointByEvent = new Map(item.points.map((point) => [point.eventId, point]));
+            const lineColor = resolveChartColor(item.color, primaryColor);
+            return {
+                id: item.id,
+                name: item.label,
+                type: 'line',
+                smooth: true,
+                connectNulls: true,
+                showSymbol: true,
+                symbol: 'circle',
+                symbolSize: 8,
+                lineStyle: {
+                    width: 2,
+                    color: lineColor,
+                    opacity: 1,
+                },
+                itemStyle: {
+                    color: lineColor,
+                    opacity: 1,
+                },
+                emphasis: {
+                    disabled: true,
+                },
+                blur: {
+                    lineStyle: {
+                        opacity: 1,
+                    },
+                    itemStyle: {
+                        opacity: 1,
+                    },
+                },
+                data: axisData.map((axisPoint) => {
+                    const point = pointByEvent.get(axisPoint.eventId);
+                    if (!point)
+                        return null;
+                    const laneColor = point.lane === 'production' ? productionColor : canaryColor;
+                    return {
+                        value: point.value,
+                        qualityPoint: point,
+                        symbol: 'circle',
+                        symbolSize: 8,
+                        itemStyle: {
+                            color: point.lane === 'production' ? laneColor : cardColor,
+                            borderColor: laneColor,
+                            borderWidth: 2,
+                        },
+                    };
+                }),
+            };
+        });
+        return {
+            animation: false,
+            backgroundColor: 'transparent',
+            grid: {
+                top: 26,
+                right: 24,
+                bottom: axisData.length > 1 ? 62 : 38,
+                left: 48,
+                containLabel: false,
+            },
+            tooltip: {
+                trigger: 'axis',
+                appendToBody: true,
+                confine: true,
+                borderWidth: 1,
+                borderColor,
+                backgroundColor: popoverColor,
+                textStyle: {
+                    color: foregroundColor,
+                    fontSize: 12,
+                    fontFamily: 'inherit',
+                },
+                extraCssText: 'box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22); border-radius: 6px;',
+                axisPointer: {
+                    type: 'line',
+                    lineStyle: {
+                        color: borderColor,
+                        type: 'dashed',
+                    },
+                },
+                formatter: (rawParams) => {
+                    const params = (Array.isArray(rawParams) ? rawParams : [rawParams]);
+                    const points = params
+                        .map((param) => param.data?.qualityPoint)
+                        .filter((point) => Boolean(point));
+                    const point = points[0];
+                    if (!point)
+                        return '';
+                    const kindText = t(point.releaseVersionKind === 'production'
+                        ? 'releases.detail.history.versionKind.production'
+                        : 'releases.detail.history.versionKind.candidate');
+                    const rows = params
+                        .map((param) => {
+                        const qualityPoint = param.data?.qualityPoint;
+                        if (!qualityPoint)
+                            return '';
+                        const sampleCount = qualityPoint.sampleCount === null
+                            ? '—'
+                            : formatTemplate(t('releases.detail.quality.sampleCountShort'), {
+                                count: formatCount(qualityPoint.sampleCount),
+                            });
+                        return [
+                            '<div style="display:flex;align-items:center;gap:8px;min-width:260px;margin-top:4px;">',
+                            param.marker ?? '',
+                            `<span style="min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:${mutedColor};">${escapeHtml(param.seriesName ?? qualityPoint.seriesLabel)}</span>`,
+                            `<span style="font-family:JetBrains Mono, ui-monospace, monospace;font-weight:600;">${escapeHtml(formatQualityPercent(qualityPoint.value))}</span>`,
+                            `<span style="font-family:JetBrains Mono, ui-monospace, monospace;font-size:11px;color:${mutedColor};">${escapeHtml(sampleCount)}</span>`,
+                            '</div>',
+                        ].join('');
+                    })
+                        .join('');
+                    return [
+                        '<div style="min-width:280px;">',
+                        `<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;font-family:JetBrains Mono, ui-monospace, monospace;font-size:11px;color:${mutedColor};">`,
+                        `<span>${escapeHtml(point.xLabel)}</span><span>·</span><span>${escapeHtml(formatDateTimeOrDash(point.updatedAt ?? point.createdAt))}</span>`,
+                        '</div>',
+                        '<div style="display:flex;align-items:center;gap:8px;min-width:0;">',
+                        `<span style="min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;">${escapeHtml(point.eventLabel)}</span>`,
+                        `<span style="display:inline-flex;align-items:center;border-radius:999px;border:1px solid ${borderColor};padding:1px 6px;font-size:11px;color:${mutedColor};">${escapeHtml(kindText)}</span>`,
+                        '</div>',
+                        `<div style="margin-top:2px;font-size:11.5px;color:${mutedColor};">${escapeHtml(point.releaseVersionLabel)} · ${escapeHtml(point.promptVersionLabel)} · ${escapeHtml(point.modelName)}</div>`,
+                        `<div style="margin-top:8px;">${rows}</div>`,
+                        '</div>',
+                    ].join('');
+                },
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: categoryLabels,
+                axisLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLabel: {
+                    color: mutedColor,
+                    fontSize: 10,
+                    fontFamily: 'JetBrains Mono, ui-monospace, monospace',
+                    hideOverlap: true,
+                    margin: 10,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                min: getQualityPercentAxisMin,
+                max: getQualityPercentAxisMax,
+                scale: true,
+                splitNumber: 4,
+                axisLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLabel: {
+                    color: mutedColor,
+                    fontSize: 10,
+                    fontFamily: 'JetBrains Mono, ui-monospace, monospace',
+                    formatter: '{value}%',
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: borderColor,
+                        type: 'dashed',
+                        opacity: 0.7,
+                    },
+                },
+            },
+            dataZoom: axisData.length > 1
+                ? [
+                    {
+                        type: 'inside',
+                        xAxisIndex: 0,
+                        filterMode: 'filter',
+                        zoomOnMouseWheel: true,
+                        moveOnMouseWheel: 'shift',
+                        moveOnMouseMove: true,
+                        preventDefaultMouseMove: true,
+                        minValueSpan: 1,
+                    },
+                    {
+                        type: 'slider',
+                        xAxisIndex: 0,
+                        filterMode: 'filter',
+                        bottom: 10,
+                        height: 24,
+                        showDetail: false,
+                        brushSelect: true,
+                        minValueSpan: 1,
+                        borderColor,
+                        fillerColor: 'rgba(59, 130, 246, 0.18)',
+                        backgroundColor: 'transparent',
+                        dataBackground: {
+                            lineStyle: {
+                                color: borderColor,
+                            },
+                            areaStyle: {
+                                color: 'rgba(148, 163, 184, 0.14)',
+                            },
+                        },
+                        selectedDataBackground: {
+                            lineStyle: {
+                                color: primaryColor,
+                            },
+                            areaStyle: {
+                                color: 'rgba(59, 130, 246, 0.22)',
+                            },
+                        },
+                        moveHandleStyle: {
+                            color: primaryColor,
+                        },
+                        handleStyle: {
+                            color: cardColor,
+                            borderColor: primaryColor,
+                        },
+                    },
+                ]
+                : [],
+            toolbox: {
+                show: axisData.length > 1,
+                right: 8,
+                top: 0,
+                itemSize: 14,
+                iconStyle: {
+                    borderColor: mutedColor,
+                },
+                emphasis: {
+                    iconStyle: {
+                        borderColor: foregroundColor,
+                    },
+                },
+                feature: {
+                    restore: {
+                        title: t('releases.detail.quality.chart.resetView'),
+                    },
+                },
+            },
+            series: qualitySeries,
+        };
+    }, [axisData, chartColorVersion, formatDateTimeOrDash, series, t]);
+    useEffect(() => {
+        const element = chartRef.current;
+        if (!element)
+            return undefined;
+        const instance = echarts.init(element, undefined, { renderer: 'svg' });
+        chartInstanceRef.current = instance;
+        const resizeObserver = typeof ResizeObserver === 'undefined'
+            ? null
+            : new ResizeObserver(() => {
+                instance.resize();
+            });
+        resizeObserver?.observe(element);
+        return () => {
+            resizeObserver?.disconnect();
+            chartInstanceRef.current = null;
+            instance.dispose();
+        };
+    }, []);
+    useEffect(() => {
+        chartInstanceRef.current?.setOption(chartOption, true);
+    }, [chartOption]);
+    return (_jsx("div", { className: "relative min-w-0 w-full", children: _jsxs("div", { className: "relative h-[360px] min-w-0 w-full", children: [_jsx("div", { ref: chartRef, className: "h-full w-full", role: "img", "aria-label": t('releases.detail.quality.chartTitle'), "data-testid": "release-quality-echarts-chart" }), children ? (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center px-4", children: _jsx("div", { className: "pointer-events-auto w-full max-w-[360px] rounded-lg border bg-card/95 px-4 py-4 text-center shadow-sm", children: children }) })) : null] }) }));
+}
+function QualityEmptyChartMessage({ annotationHref }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { "data-testid": "release-quality-empty", children: [_jsx("div", { className: "text-[14px] font-semibold", children: t('releases.detail.quality.empty') }), _jsx("p", { className: "mx-auto mt-1 max-w-[300px] text-[12px] leading-5 text-muted-foreground", children: t('releases.detail.quality.emptyDescription') }), _jsx(Button, { asChild: true, size: "sm", className: "mt-3 h-8 gap-1.5", children: _jsxs(Link, { href: annotationHref, children: [_jsx(Plus, { className: "size-3.5", "aria-hidden": true }), t('releases.detail.quality.emptyAction')] }) })] }));
+}
+function QualityFilteredEmptyChartMessage() {
+    const { t } = useI18n();
+    return (_jsx("div", { className: "text-[13px] font-medium text-muted-foreground", children: t('releases.detail.quality.filteredEmpty') }));
 }
-function buildReleaseEventMeta(event) {
+function formatTemplate(template, values) {
+    return template.replace(/\{(\w+)\}/g, (_, key) => String(values[key] ?? ''));
+}
+const RELEASE_CONFIG_OPERATIONS = new Set([
+    'traffic_updated',
+    'mode_updated',
+    'config_changed',
+]);
+export function buildHistoryGroups(line, releaseEvents, productionHistory, t) {
+    if (releaseEvents.length > 0 || line.versions.length > 0) {
+        return buildCanonicalHistoryGroups(line, releaseEvents, t);
+    }
+    return buildLegacyHistoryGroups(line, productionHistory, t);
+}
+function buildCanonicalHistoryGroups(line, releaseEvents, t) {
+    const eventsByVersion = groupReleaseEventsByVersion(releaseEvents);
+    const rowsByVersion = new Map();
+    const looseRows = [];
+    for (const version of line.versions) {
+        const events = eventsByVersion.get(version.id) ?? [];
+        rowsByVersion.set(version.id, buildHistoryRowFromVersion(line, version, events, t));
+    }
+    for (const [key, events] of eventsByVersion.entries()) {
+        if (rowsByVersion.has(key))
+            continue;
+        looseRows.push(buildHistoryRowFromEvents(line, events, t));
+    }
+    const grouped = new Map();
+    for (const row of [...rowsByVersion.values(), ...looseRows]) {
+        const key = getHistoryGroupKey(row);
+        const group = ensureHistoryGroup(grouped, key, row);
+        if (isProductionHistoryRow(row)) {
+            group.production = chooseNewestHistoryRow(group.production, row);
+            group.productionNumber = row.productionNumber ?? row.targetProductionNumber ?? group.productionNumber;
+        }
+        else {
+            group.candidates.push(row);
+        }
+        group.isLive = group.isLive || isHistoryRowLive(row);
+        group.sortAt = chooseNewestDate(group.sortAt, row.updatedAt ?? row.createdAt);
+    }
+    return [...grouped.values()]
+        .map((group) => ({
+        ...group,
+        candidates: group.candidates.sort(compareHistoryRows),
+    }))
+        .sort(compareHistoryGroups);
+}
+function buildLegacyHistoryGroups(line, productionHistory, t) {
+    const productionRows = productionHistory.map((item) => buildLegacyProductionHistoryRow(item, t));
+    const canaryRows = (line.canaryHistory.length > 0 ? line.canaryHistory : line.canary ? [line.canary] : []).map((item) => buildLegacyCanaryHistoryRow(item, t));
+    if (productionRows.length === 0 && canaryRows.length === 0)
+        return [];
+    const groups = productionRows.map((row) => ({
+        id: row.id,
+        production: row,
+        candidates: [],
+        isLive: isHistoryRowLive(row),
+        sortAt: row.updatedAt ?? row.createdAt,
+        productionNumber: row.productionNumber,
+    }));
+    const fallbackGroup = groups[0] ??
+        {
+            id: canaryRows[0]?.id ?? 'legacy-canary',
+            production: null,
+            candidates: [],
+            isLive: false,
+            sortAt: canaryRows[0]?.updatedAt ?? canaryRows[0]?.createdAt ?? null,
+            productionNumber: null,
+        };
+    if (groups.length === 0)
+        groups.push(fallbackGroup);
+    for (const row of canaryRows) {
+        fallbackGroup.candidates.push(row);
+        fallbackGroup.isLive = fallbackGroup.isLive || isHistoryRowLive(row);
+        fallbackGroup.sortAt = chooseNewestDate(fallbackGroup.sortAt, row.updatedAt ?? row.createdAt);
+    }
+    return groups
+        .map((group) => ({ ...group, candidates: group.candidates.sort(compareHistoryRows) }))
+        .sort(compareHistoryGroups);
+}
+function groupReleaseEventsByVersion(events) {
+    const grouped = new Map();
+    for (const event of events) {
+        const key = event.releaseVersionId ?? event.id;
+        const current = grouped.get(key) ?? [];
+        current.push(event);
+        grouped.set(key, current);
+    }
+    return grouped;
+}
+function buildHistoryRowFromVersion(line, version, events, t) {
+    const latest = getLatestReleaseEvent(events);
+    const label = latest?.releaseVersionLabel ?? version.label;
+    return {
+        id: latest?.id ?? version.id,
+        sourceEventId: latest?.id ?? null,
+        releaseVersionId: version.id,
+        releaseVersionKind: version.kind,
+        releaseVersionLabel: label,
+        productionNumber: version.productionVersionNumber,
+        targetProductionNumber: version.targetProductionVersionNumber,
+        candidateNumber: version.candidateNumber,
+        event: latest?.operation ?? (version.kind === 'production' ? 'create_production' : 'create_canary'),
+        laneType: latest?.laneType ?? (version.kind === 'production' ? 'production' : 'canary'),
+        promptName: latest?.promptName ?? version.promptName,
+        promptVersionId: latest?.promptVersionId ?? version.promptVersionId,
+        promptVersionLabel: latest?.promptVersionLabel ??
+            version.promptVersionLabel ??
+            (version.promptVersionNumber ? `v${version.promptVersionNumber}` : formatShortId(version.promptVersionId)),
+        modelId: latest?.modelId ?? version.modelId,
+        modelName: formatHistoryModel(latest?.modelName ?? version.modelName, latest?.modelId ?? version.modelId),
+        modelProvider: latest?.modelProvider ?? version.modelProvider,
+        inputConnectorName: latest?.inputConnectorName ?? line.inputConnectorName,
+        inputConnectorType: latest?.inputConnectorType ?? line.inputConnectorType,
+        outputConnectors: latest?.outputConnectors ?? line.outputConnectors,
+        runConfig: normalizeRunConfig(latest?.runConfig),
+        trafficRatio: latest?.trafficRatio ?? null,
+        trafficMode: latest?.trafficMode ?? null,
+        recordMode: latest?.recordMode ?? null,
+        recordCategories: latest?.recordCategories ?? [],
+        status: latest ? formatReleaseEventStatus(latest) : null,
+        isLive: latest?.status === 'running',
+        countSummary: latest ? formatReleaseEventCounts(latest, t) : null,
+        relations: latest ? formatReleaseEventRelations(latest, t) : null,
+        reason: latest?.submitReason.trim() || null,
+        createdAt: latest?.createdAt ?? version.createdAt,
+        updatedAt: latest?.updatedAt ?? version.updatedAt,
+        configChanges: buildReleaseConfigChanges(events, t),
+    };
+}
+function buildHistoryRowFromEvents(line, events, t) {
+    const latest = getLatestReleaseEvent(events);
+    if (!latest) {
+        return {
+            id: 'empty',
+            sourceEventId: null,
+            releaseVersionId: null,
+            releaseVersionKind: null,
+            releaseVersionLabel: '—',
+            productionNumber: null,
+            targetProductionNumber: null,
+            candidateNumber: null,
+            event: null,
+            laneType: null,
+            promptName: line.promptName,
+            promptVersionId: null,
+            promptVersionLabel: '—',
+            modelId: null,
+            modelName: '—',
+            modelProvider: null,
+            inputConnectorName: line.inputConnectorName,
+            inputConnectorType: line.inputConnectorType,
+            outputConnectors: line.outputConnectors,
+            runConfig: {},
+            trafficRatio: null,
+            trafficMode: null,
+            recordMode: null,
+            recordCategories: [],
+            status: null,
+            isLive: false,
+            countSummary: null,
+            relations: null,
+            reason: null,
+            createdAt: null,
+            updatedAt: null,
+            configChanges: [],
+        };
+    }
+    return {
+        id: latest.id,
+        sourceEventId: latest.id,
+        releaseVersionId: latest.releaseVersionId,
+        releaseVersionKind: latest.releaseVersionKind,
+        releaseVersionLabel: latest.releaseVersionLabel ?? formatShortId(latest.releaseVersionId),
+        productionNumber: latest.releaseVersionProductionNumber,
+        targetProductionNumber: latest.releaseVersionTargetProductionNumber,
+        candidateNumber: latest.releaseVersionCandidateNumber,
+        event: latest.operation,
+        laneType: latest.laneType,
+        promptName: latest.promptName,
+        promptVersionId: latest.promptVersionId,
+        promptVersionLabel: latest.promptVersionLabel ?? formatShortId(latest.promptVersionId),
+        modelId: latest.modelId,
+        modelName: formatHistoryModel(latest.modelName, latest.modelId),
+        modelProvider: latest.modelProvider,
+        inputConnectorName: latest.inputConnectorName ?? line.inputConnectorName,
+        inputConnectorType: latest.inputConnectorType ?? line.inputConnectorType,
+        outputConnectors: latest.outputConnectors.length > 0 ? latest.outputConnectors : line.outputConnectors,
+        runConfig: normalizeRunConfig(latest.runConfig),
+        trafficRatio: latest.trafficRatio,
+        trafficMode: latest.trafficMode,
+        recordMode: latest.recordMode,
+        recordCategories: latest.recordCategories,
+        status: formatReleaseEventStatus(latest),
+        isLive: latest.status === 'running',
+        countSummary: formatReleaseEventCounts(latest, t),
+        relations: formatReleaseEventRelations(latest, t),
+        reason: latest.submitReason.trim() || null,
+        createdAt: latest.createdAt,
+        updatedAt: latest.updatedAt,
+        configChanges: buildReleaseConfigChanges(events, t),
+    };
+}
+function buildLegacyProductionHistoryRow(item, t) {
+    const configChanges = item.eventType === 'config_change'
+        ? [
+            {
+                id: item.id,
+                at: item.updatedAt,
+                event: item.eventType,
+                items: buildLegacyProductionConfigItems(item, t),
+            },
+        ]
+        : [];
+    const relations = [
+        item.sourceExperimentId
+            ? `${t('releases.detail.history.relation.sourceExperiment')} ${formatShortId(item.sourceExperimentId)}`
+            : null,
+        item.sourceCanaryId
+            ? `${t('releases.detail.history.relation.sourceEvent')} ${formatShortId(item.sourceCanaryId)}`
+            : null,
+        item.rollbackTargetEventId
+            ? `${t('releases.detail.history.relation.rollbackTarget')} ${formatShortId(item.rollbackTargetEventId)}`
+            : null,
+    ].filter((value) => Boolean(value));
+    return {
+        id: item.id,
+        sourceEventId: item.id,
+        releaseVersionId: null,
+        releaseVersionKind: 'production',
+        releaseVersionLabel: item.promptVersionLabel ?? formatShortId(item.id),
+        productionNumber: null,
+        targetProductionNumber: null,
+        candidateNumber: null,
+        event: item.eventType,
+        laneType: 'production',
+        promptName: item.promptVersionLabel ?? '—',
+        promptVersionId: item.promptVersionId,
+        promptVersionLabel: item.promptVersionLabel ?? formatShortId(item.promptVersionId),
+        modelId: item.modelId,
+        modelName: item.modelName ?? formatShortId(item.modelId),
+        modelProvider: null,
+        inputConnectorName: item.inputConnectorName,
+        inputConnectorType: null,
+        outputConnectors: [],
+        runConfig: normalizeRunConfig(item.runConfig),
+        trafficRatio: null,
+        trafficMode: null,
+        recordMode: item.recordMode,
+        recordCategories: item.recordCategories ?? [],
+        status: formatLegacyProductionStatus(item),
+        isLive: item.status === 'running',
+        countSummary: null,
+        relations: relations.length > 0 ? relations.join(' · ') : null,
+        reason: item.submitReason.trim() || null,
+        createdAt: item.createdAt,
+        updatedAt: item.updatedAt,
+        configChanges,
+    };
+}
+function buildLegacyCanaryHistoryRow(canary, t) {
+    return {
+        id: canary.id,
+        sourceEventId: canary.id,
+        releaseVersionId: canary.releaseVersionId,
+        releaseVersionKind: 'candidate',
+        releaseVersionLabel: canary.releaseVersionLabel ?? canary.promptVersionLabel ?? formatShortId(canary.id),
+        productionNumber: null,
+        targetProductionNumber: null,
+        candidateNumber: null,
+        event: canary.status === 'running' ? 'ratio_change' : 'create_canary',
+        laneType: 'canary',
+        promptName: canary.promptName ?? canary.name ?? '—',
+        promptVersionId: canary.promptVersionId,
+        promptVersionLabel: canary.promptVersionLabel ?? formatShortId(canary.promptVersionId),
+        modelId: canary.modelId,
+        modelName: formatHistoryModel(canary.modelName, canary.modelId, canary.modelProvider),
+        modelProvider: canary.modelProvider,
+        inputConnectorName: canary.inputConnectorName,
+        inputConnectorType: canary.inputConnectorType,
+        outputConnectors: canary.outputConnectors,
+        runConfig: normalizeRunConfig(canary.runConfig),
+        trafficRatio: canary.trafficRatio,
+        trafficMode: canary.trafficMode,
+        recordMode: canary.recordMode,
+        recordCategories: canary.recordCategories ?? [],
+        status: canary.status,
+        isLive: canary.status === 'running',
+        countSummary: formatCanaryCounts(canary, t),
+        relations: null,
+        reason: canary.description?.trim() || null,
+        createdAt: canary.createdAt,
+        updatedAt: canary.updatedAt,
+        configChanges: [],
+    };
+}
+function formatReleaseEventStatus(event) {
     const parts = [
         event.status,
-        event.trafficRatio !== null ? `${Math.round(event.trafficRatio * 100)}%` : null,
-        event.trafficMode,
-        event.submitReason,
+        event.terminalReason ? `${event.terminalReason}` : null,
+        event.controlState ? `${event.controlState}` : null,
+    ].filter((value) => Boolean(value));
+    return parts.join(' · ') || '—';
+}
+function formatLegacyProductionStatus(item) {
+    return [item.status, item.stopReason, item.controlState].filter(Boolean).join(' · ') || '—';
+}
+function formatHistoryModel(name, id, provider) {
+    const model = name ?? formatShortId(id);
+    return provider ? `${model} · ${provider}` : model;
+}
+function formatRecordMode(mode, t, categories = []) {
+    if (mode === 'all')
+        return t('releases.detail.topology.recordMode.all');
+    if (mode === 'selected_categories' || mode === 'correct_only') {
+        const label = t('releases.detail.topology.recordMode.selectedCategories');
+        return categories.length > 0 ? `${label}: ${categories.join('、')}` : label;
+    }
+    return mode || '—';
+}
+function formatReleaseEventCounts(event, t) {
+    return [
+        `${t('releases.detail.metric.received')} ${formatCount(event.totalReceived)}`,
+        `${t('releases.detail.metric.processed')} ${formatCount(event.totalProcessed)}`,
+        `${t('releases.detail.metric.errors')} ${formatCount(event.totalErrors)}`,
+    ].join(' · ');
+}
+function formatCanaryCounts(canary, t) {
+    return [
+        `${t('releases.detail.metric.received')} ${formatCount(canary.totalReceived)}`,
+        `${t('releases.detail.metric.processed')} ${formatCount(canary.totalProcessed)}`,
+        `${t('releases.detail.metric.errors')} ${formatCount(canary.totalErrors)}`,
+    ].join(' · ');
+}
+function formatReleaseEventRelations(event, t) {
+    const parts = [
+        event.sourceEventId
+            ? `${t('releases.detail.history.relation.sourceEvent')} ${formatShortId(event.sourceEventId)}`
+            : null,
+        event.supersedesEventId
+            ? `${t('releases.detail.history.relation.supersedes')} ${formatShortId(event.supersedesEventId)}`
+            : null,
+        event.rollbackTargetEventId
+            ? `${t('releases.detail.history.relation.rollbackTarget')} ${formatShortId(event.rollbackTargetEventId)}`
+            : null,
+        event.sourceExperimentId
+            ? `${t('releases.detail.history.relation.sourceExperiment')} ${formatShortId(event.sourceExperimentId)}`
+            : null,
     ].filter((value) => Boolean(value));
-    return parts.join(' · ') || event.id;
+    return parts.length > 0 ? parts.join(' · ') : null;
+}
+function ensureHistoryGroup(map, id, seed) {
+    const current = map.get(id);
+    if (current)
+        return current;
+    const next = {
+        id,
+        production: null,
+        candidates: [],
+        isLive: false,
+        sortAt: seed.updatedAt ?? seed.createdAt,
+        productionNumber: seed.productionNumber ?? seed.targetProductionNumber,
+    };
+    map.set(id, next);
+    return next;
+}
+function chooseNewestHistoryRow(current, next) {
+    if (!current)
+        return next;
+    return timeValue(next.updatedAt ?? next.createdAt) >= timeValue(current.updatedAt ?? current.createdAt)
+        ? next
+        : current;
+}
+function chooseNewestDate(current, next) {
+    if (!next)
+        return current;
+    if (!current)
+        return next;
+    return timeValue(next) >= timeValue(current) ? next : current;
+}
+function compareHistoryRows(left, right) {
+    const candidateDelta = (right.candidateNumber ?? 0) - (left.candidateNumber ?? 0);
+    if (candidateDelta !== 0)
+        return candidateDelta;
+    return timeValue(right.updatedAt ?? right.createdAt) - timeValue(left.updatedAt ?? left.createdAt);
+}
+export function compareHistoryGroups(left, right) {
+    // Total order, "newest production first":
+    // 1. Groups WITH a productionNumber rank above those without (candidate-only / legacy),
+    //    so a numbered production group never sinks below a null group on timestamp alone.
+    // 2. Within numbered groups: productionNumber descending.
+    // 3. Within null groups (single class): sortAt descending.
+    // 4. Ties: sortAt descending.
+    const leftHasNumber = left.productionNumber !== null;
+    const rightHasNumber = right.productionNumber !== null;
+    if (leftHasNumber !== rightHasNumber)
+        return leftHasNumber ? -1 : 1;
+    if (leftHasNumber && rightHasNumber) {
+        const numberDelta = right.productionNumber - left.productionNumber;
+        if (numberDelta !== 0)
+            return numberDelta;
+    }
+    return timeValue(right.sortAt) - timeValue(left.sortAt);
+}
+function getLatestReleaseEvent(events) {
+    return [...events].sort((left, right) => timeValue(right.updatedAt) - timeValue(left.updatedAt))[0] ?? null;
+}
+function isProductionHistoryRow(row) {
+    return row.releaseVersionKind === 'production' || row.laneType === 'production';
+}
+export function isHistoryRowLive(row) {
+    return row.isLive;
+}
+function getHistoryGroupKey(row) {
+    const productionNumber = row.releaseVersionKind === 'candidate'
+        ? row.targetProductionNumber
+        : (row.productionNumber ?? row.targetProductionNumber);
+    if (productionNumber !== null)
+        return `production-${productionNumber}`;
+    return row.releaseVersionId ?? row.id;
+}
+function normalizeRunConfig(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return {};
+    return value;
+}
+function getRunConfigNumber(config, key) {
+    const value = config[key];
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function buildReleaseConfigChanges(events, t) {
+    const sorted = [...events].sort((left, right) => timeValue(left.updatedAt) - timeValue(right.updatedAt));
+    const changes = [];
+    sorted.forEach((event, index) => {
+        if (!RELEASE_CONFIG_OPERATIONS.has(event.operation))
+            return;
+        const previous = [...sorted.slice(0, index)].reverse().find((item) => item.releaseVersionId === event.releaseVersionId) ?? null;
+        changes.push({
+            id: event.id,
+            at: event.updatedAt ?? event.createdAt,
+            event: event.operation,
+            items: buildConfigChangeItems(previous, event, t),
+        });
+    });
+    return changes;
+}
+function buildLegacyProductionConfigItems(item, t) {
+    const config = normalizeRunConfig(item.runConfig);
+    const changes = [];
+    addConfigChange(changes, t('releases.detail.topology.field.rpmLimit'), '—', formatHistoryNumber(getRunConfigNumber(config, 'rpmLimit')), true);
+    addConfigChange(changes, t('releases.detail.topology.field.tpmLimit'), '—', formatHistoryNumber(getRunConfigNumber(config, 'tpmLimit')), true);
+    addConfigChange(changes, t('releases.detail.topology.field.concurrency'), '—', formatHistoryNumber(getRunConfigNumber(config, 'concurrency')), true);
+    addConfigChange(changes, t('releases.detail.topology.field.temperature'), '—', formatHistoryTemperature(getRunConfigNumber(config, 'temperature')), true);
+    if (changes.length > 0)
+        return changes;
+    return [
+        {
+            field: t('releases.detail.history.field.snapshot'),
+            previous: '—',
+            next: t('releases.detail.history.change.updated'),
+        },
+    ];
+}
+function buildConfigChangeItems(previous, current, t) {
+    const previousConfig = normalizeRunConfig(previous?.runConfig);
+    const currentConfig = normalizeRunConfig(current.runConfig);
+    const changes = [];
+    const includeInitial = previous === null;
+    addConfigChange(changes, t('releases.detail.history.traffic'), formatRatioValue(previous?.trafficRatio ?? null), formatRatioValue(current.trafficRatio), includeInitial);
+    addConfigChange(changes, t('releases.detail.history.field.trafficMode'), previous?.trafficMode ?? '—', current.trafficMode ?? '—', includeInitial);
+    addConfigChange(changes, t('releases.detail.topology.field.rpmLimit'), formatHistoryNumber(getRunConfigNumber(previousConfig, 'rpmLimit')), formatHistoryNumber(getRunConfigNumber(currentConfig, 'rpmLimit')), includeInitial);
+    addConfigChange(changes, t('releases.detail.topology.field.tpmLimit'), formatHistoryNumber(getRunConfigNumber(previousConfig, 'tpmLimit')), formatHistoryNumber(getRunConfigNumber(currentConfig, 'tpmLimit')), includeInitial);
+    addConfigChange(changes, t('releases.detail.topology.field.concurrency'), formatHistoryNumber(getRunConfigNumber(previousConfig, 'concurrency')), formatHistoryNumber(getRunConfigNumber(currentConfig, 'concurrency')), includeInitial);
+    addConfigChange(changes, t('releases.detail.topology.field.temperature'), formatHistoryTemperature(getRunConfigNumber(previousConfig, 'temperature')), formatHistoryTemperature(getRunConfigNumber(currentConfig, 'temperature')), includeInitial);
+    addConfigChange(changes, t('releases.detail.history.model'), formatHistoryModel(previous?.modelName, previous?.modelId, previous?.modelProvider), formatHistoryModel(current.modelName, current.modelId, current.modelProvider), includeInitial);
+    addConfigChange(changes, t('releases.detail.field.upstream'), formatConnectorLabel(previous?.inputConnectorName ?? null, previous?.inputConnectorType ?? null), formatConnectorLabel(current.inputConnectorName, current.inputConnectorType), includeInitial);
+    addConfigChange(changes, t('releases.detail.history.field.outputConnectors'), formatOutputConnectors(previous?.outputConnectors ?? []), formatOutputConnectors(current.outputConnectors), includeInitial);
+    addConfigChange(changes, t('releases.detail.history.recordMode'), formatRecordMode(previous?.recordMode, t, previous?.recordCategories ?? []), formatRecordMode(current.recordMode, t, current.recordCategories), includeInitial);
+    if (changes.length > 0)
+        return changes;
+    return [
+        {
+            field: t('releases.detail.history.field.snapshot'),
+            previous: '—',
+            next: t('releases.detail.history.change.updated'),
+        },
+    ];
+}
+function addConfigChange(changes, field, previous, next, includeInitial = false) {
+    if (next === '—')
+        return;
+    if (!includeInitial && previous === next)
+        return;
+    changes.push({ field, previous, next });
+}
+function formatRatioValue(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? `${Math.round(value * 100)}%` : '—';
+}
+function formatHistoryNumber(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return '—';
+    return Number.isInteger(value) ? formatCount(value) : formatHistoryTemperature(value);
+}
+function formatHistoryTemperature(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return '—';
+    return value.toFixed(2).replace(/\.?0+$/, '');
+}
+function formatConnectorLabel(name, type) {
+    if (!name && !type)
+        return '—';
+    return [type, name].filter((value) => Boolean(value)).join(' · ');
+}
+function formatOutputConnectors(connectors) {
+    if (connectors.length === 0)
+        return '—';
+    return connectors.map((connector) => formatConnectorLabel(connector.name, connector.type)).join(' / ');
+}
+function formatHistoryVersionLabel(label) {
+    return label.replace(/^v(?=\d)/, 'V');
+}
+function buildHistoryRuntimeItems(row, t) {
+    const items = [];
+    const rpm = getRunConfigNumber(row.runConfig, 'rpmLimit');
+    const tpm = getRunConfigNumber(row.runConfig, 'tpmLimit');
+    const concurrency = getRunConfigNumber(row.runConfig, 'concurrency');
+    const temperature = getRunConfigNumber(row.runConfig, 'temperature');
+    if (row.trafficRatio !== null || row.trafficMode) {
+        items.push({ label: t('releases.detail.history.traffic'), value: formatReleaseRowTraffic(row), mono: true });
+    }
+    if (rpm !== null)
+        items.push({ label: t('releases.detail.topology.field.rpmLimit'), value: formatHistoryNumber(rpm), mono: true });
+    if (tpm !== null)
+        items.push({ label: t('releases.detail.topology.field.tpmLimit'), value: formatHistoryNumber(tpm), mono: true });
+    if (concurrency !== null) {
+        items.push({
+            label: t('releases.detail.topology.field.concurrency'),
+            value: formatHistoryNumber(concurrency),
+            mono: true,
+        });
+    }
+    if (temperature !== null) {
+        items.push({
+            label: t('releases.detail.topology.field.temperature'),
+            value: formatHistoryTemperature(temperature),
+            mono: true,
+        });
+    }
+    if (row.recordMode) {
+        items.push({
+            label: t('releases.detail.history.recordMode'),
+            value: formatRecordMode(row.recordMode, t, row.recordCategories),
+            mono: true,
+        });
+    }
+    return items;
 }
-function formatReleaseEventVariant(event) {
-    if (!event.releaseVariantId)
+function buildHistoryConnectorItems(row, t) {
+    return [
+        {
+            label: t('releases.detail.field.upstream'),
+            value: formatConnectorLabel(row.inputConnectorName, row.inputConnectorType),
+        },
+        {
+            label: t('releases.detail.field.downstream'),
+            value: row.outputConnectors.length > 0
+                ? formatOutputConnectors(row.outputConnectors)
+                : t('releases.detail.history.field.noDownstream'),
+        },
+    ];
+}
+function buildHistoryReasonItems(row, t) {
+    if (!row.reason)
+        return [];
+    return [{ label: t('releases.detail.history.reason'), value: row.reason }];
+}
+function formatReleaseRowTraffic(row) {
+    return ([formatRatioValue(row.trafficRatio), row.trafficMode].filter((value) => value && value !== '—').join(' · ') || '—');
+}
+function buildReleaseResultsHref(line, row) {
+    if (!row.releaseVersionId)
+        return null;
+    return `/releases/${encodeURIComponent(line.id)}?tab=results&version=${encodeURIComponent(row.releaseVersionId)}`;
+}
+function buildAnnotationHref(line, row) {
+    if (!row.releaseVersionId)
         return null;
-    const label = event.releaseVariantLabel ?? formatShortId(event.releaseVariantId);
-    const promptVersion = event.promptVersionLabel ?? formatShortId(event.promptVersionId);
-    const model = event.modelName ?? formatShortId(event.modelId);
-    return `${label} · ${promptVersion} · ${model}`;
+    return `/annotations/new?line=${encodeURIComponent(line.id)}&version=${encodeURIComponent(row.releaseVersionId)}`;
 }
-function HistoryPane({ line, productionHistory, releaseEvents, loading, }) {
+function buildQualityAnnotationHref(line, releaseEvents) {
+    const latestEvent = [...releaseEvents]
+        .filter((event) => Boolean(event.releaseVersionId))
+        .sort((left, right) => timeValue(right.updatedAt ?? right.createdAt) - timeValue(left.updatedAt ?? left.createdAt))[0];
+    const params = new URLSearchParams({ line: line.id });
+    if (latestEvent?.releaseVersionId)
+        params.set('version', latestEvent.releaseVersionId);
+    return `/annotations/new?${params.toString()}`;
+}
+function HistoryPane({ projectId, line, productionHistory, releaseEvents, loading, }) {
     const { t } = useI18n();
     const formatDateTimeOrDash = useDateTimeOrDash();
-    const items = useMemo(() => {
-        if (releaseEvents.length > 0) {
-            return releaseEvents.map((event) => ({
-                id: event.id,
-                event: event.operation,
-                title: `${event.laneType === 'production' ? t('releases.detail.history.productionLane') : t('releases.detail.history.canaryLane')} · ${event.promptVersionLabel ?? event.id.slice(0, 8)}`,
-                createdAt: event.createdAt,
-                meta: buildReleaseEventMeta(event),
-                variant: formatReleaseEventVariant(event),
-            }));
-        }
-        const prod = productionHistory.map((item) => ({
-            id: item.id,
-            event: item.eventType,
-            title: item.promptVersionLabel ?? item.id.slice(0, 8),
-            createdAt: item.createdAt,
-            meta: item.submitReason || item.status,
-            variant: null,
-        }));
-        const canary = line.canary
-            ? [
-                {
-                    id: line.canary.id,
-                    event: line.canary.status === 'running' ? 'ratio_change' : 'create_canary',
-                    title: `${line.canary.promptVersionLabel ?? line.canary.id.slice(0, 8)} · ${Math.round(line.canary.trafficRatio * 100)}%`,
-                    createdAt: line.canary.updatedAt,
-                    meta: line.canary.description ?? line.canary.status,
-                    variant: line.canary.releaseVariantLabel
-                        ? `${line.canary.releaseVariantLabel} · ${line.canary.promptVersionLabel ?? '-'} · ${line.canary.modelName ?? '-'}`
-                        : null,
-                },
-            ]
-            : [];
-        return [...canary, ...prod].sort((left, right) => (right.createdAt ? Date.parse(right.createdAt) : 0) - (left.createdAt ? Date.parse(left.createdAt) : 0));
-    }, [line.canary, productionHistory, releaseEvents, t]);
+    const restoreToProductionMutation = useRestoreReleaseLineHistoryToProduction(projectId);
+    const restoreToCanaryMutation = useRestoreReleaseLineHistoryToCanary(projectId);
+    const restorePending = restoreToProductionMutation.isPending || restoreToCanaryMutation.isPending;
+    const [restoreFeedback, setRestoreFeedback] = useState(null);
+    const groups = useMemo(() => buildHistoryGroups(line, releaseEvents, productionHistory, t), [line, productionHistory, releaseEvents, t]);
+    const [groupOpen, setGroupOpen] = useState({});
+    const [moreOpen, setMoreOpen] = useState({});
+    const [configOpen, setConfigOpen] = useState({});
+    const historyGroupResetKey = `${line.id}:${groups.length}`;
+    const [visibleGroupState, setVisibleGroupState] = useState(() => ({
+        key: historyGroupResetKey,
+        count: HISTORY_INITIAL_GROUP_LIMIT,
+    }));
+    const [loadingMoreKey, setLoadingMoreKey] = useState(null);
+    const loadingMoreKeyRef = useRef(null);
+    const loadMoreTimerRef = useRef(null);
     const showLoader = useDelayedLoading(loading);
+    const visibleGroupCount = visibleGroupState.key === historyGroupResetKey ? visibleGroupState.count : HISTORY_INITIAL_GROUP_LIMIT;
+    const visibleGroups = useMemo(() => groups.slice(0, visibleGroupCount), [groups, visibleGroupCount]);
+    const hasMoreGroups = visibleGroupCount < groups.length;
+    const isLoadingMoreGroups = loadingMoreKey === historyGroupResetKey && hasMoreGroups;
+    const restoreHistoryToProduction = useCallback((row, versionLabel) => {
+        if (!row.sourceEventId || line.status === 'archived')
+            return;
+        setRestoreFeedback(null);
+        restoreToProductionMutation.mutate({
+            releaseLineId: line.id,
+            body: {
+                sourceEventId: row.sourceEventId,
+                reason: formatTemplate(t('releases.detail.history.action.restoreToProductionReason'), {
+                    version: versionLabel,
+                }),
+            },
+        }, {
+            onSuccess: () => setRestoreFeedback({
+                tone: 'success',
+                message: t('releases.detail.history.action.restoreSuccess'),
+            }),
+            onError: (error) => setRestoreFeedback({
+                tone: 'error',
+                message: getApiErrorMessage(error) ?? t('releases.detail.history.action.restoreFailed'),
+            }),
+        });
+    }, [line.id, line.status, restoreToProductionMutation, t]);
+    const restoreHistoryToCanary = useCallback((row, versionLabel) => {
+        if (!row.sourceEventId || line.status === 'archived')
+            return;
+        setRestoreFeedback(null);
+        restoreToCanaryMutation.mutate({
+            releaseLineId: line.id,
+            body: {
+                sourceEventId: row.sourceEventId,
+                reason: formatTemplate(t('releases.detail.history.action.restoreToCanaryReason'), {
+                    version: versionLabel,
+                }),
+            },
+        }, {
+            onSuccess: () => setRestoreFeedback({
+                tone: 'success',
+                message: t('releases.detail.history.action.restoreSuccess'),
+            }),
+            onError: (error) => setRestoreFeedback({
+                tone: 'error',
+                message: getApiErrorMessage(error) ?? t('releases.detail.history.action.restoreFailed'),
+            }),
+        });
+    }, [line.id, line.status, restoreToCanaryMutation, t]);
+    const loadMoreHistoryGroups = useCallback(() => {
+        if (!hasMoreGroups)
+            return;
+        if (loadingMoreKeyRef.current === historyGroupResetKey)
+            return;
+        loadingMoreKeyRef.current = historyGroupResetKey;
+        setLoadingMoreKey(historyGroupResetKey);
+        setVisibleGroupState((current) => {
+            const currentCount = current.key === historyGroupResetKey ? current.count : HISTORY_INITIAL_GROUP_LIMIT;
+            return {
+                key: historyGroupResetKey,
+                count: Math.min(groups.length, currentCount + HISTORY_GROUP_PAGE_SIZE),
+            };
+        });
+        if (loadMoreTimerRef.current)
+            window.clearTimeout(loadMoreTimerRef.current);
+        loadMoreTimerRef.current = window.setTimeout(() => {
+            loadingMoreKeyRef.current = null;
+            setLoadingMoreKey((current) => (current === historyGroupResetKey ? null : current));
+            loadMoreTimerRef.current = null;
+        }, 360);
+    }, [groups.length, hasMoreGroups, historyGroupResetKey]);
+    useEffect(() => {
+        return () => {
+            if (loadMoreTimerRef.current) {
+                window.clearTimeout(loadMoreTimerRef.current);
+                loadMoreTimerRef.current = null;
+            }
+            loadingMoreKeyRef.current = null;
+        };
+    }, []);
     if (loading) {
         return showLoader ? _jsx(PlatformLoader, { className: "py-8", size: "sm" }) : null;
     }
-    if (items.length === 0) {
+    if (groups.length === 0) {
         return (_jsx("div", { className: "rounded-lg border bg-card p-10 text-center text-sm text-muted-foreground", children: t('releases.detail.history.empty') }));
     }
-    return (_jsxs("div", { className: "relative space-y-3 pl-8", children: [_jsx("div", { className: "absolute bottom-0 left-[11px] top-0 w-0.5 bg-border" }), items.map((item, index) => (_jsxs("div", { className: "relative rounded-lg border bg-card", children: [_jsx("div", { className: "absolute left-[-27px] top-[18px] size-3.5 rounded-full border-2", style: {
-                            background: index === 0 ? 'var(--status-canary-dot)' : 'var(--card)',
-                            borderColor: index === 0 ? 'var(--status-canary-dot)' : 'var(--border)',
-                            boxShadow: index === 0 ? '0 0 0 4px color-mix(in srgb, var(--status-canary-dot) 25%, transparent)' : undefined,
-                        } }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-4 py-3", children: [_jsx(ReleaseEventPill, { event: item.event }), _jsx("span", { className: "text-[14px] font-semibold", children: item.title }), _jsxs("span", { className: "ml-auto font-mono text-[11.5px] text-muted-foreground", children: [formatDateTimeOrDash(item.createdAt), " \u00B7 ", item.id.slice(0, 8)] })] }), _jsxs("div", { className: "space-y-2 px-4 py-3 text-[12.5px] text-muted-foreground", children: [item.variant ? (_jsxs("div", { children: [_jsx("span", { className: "font-medium text-foreground", children: t('releases.detail.history.variant') }), _jsx("span", { className: "ml-2 font-mono", children: item.variant })] })) : null, _jsx("div", { children: item.meta })] })] }, item.id)))] }));
+    return (_jsxs("section", { className: "w-full", "aria-label": t('releases.detail.history.title'), children: [restoreFeedback ? (_jsxs("div", { role: restoreFeedback.tone === 'error' ? 'alert' : 'status', className: cn('mb-3 flex items-center gap-2 rounded-md border px-3 py-2 text-[12.5px]', restoreFeedback.tone === 'error'
+                    ? 'border-destructive/35 bg-destructive/5 text-destructive'
+                    : 'border-border bg-muted/55 text-muted-foreground'), children: [restoreFeedback.tone === 'error' ? _jsx(AlertTriangle, { className: "size-3.5" }) : _jsx(Check, { className: "size-3.5" }), _jsx("span", { children: restoreFeedback.message })] })) : null, _jsx("div", { className: "relative pl-[30px]", children: visibleGroups.map((group, index) => {
+                    const headline = group.production ?? group.candidates[0] ?? null;
+                    if (!headline)
+                        return null;
+                    const children = group.production ? group.candidates : group.candidates.slice(1);
+                    const defaultOpen = group.isLive || index === 0;
+                    const isOpen = groupOpen[group.id] ?? defaultOpen;
+                    return (_jsxs("div", { className: "relative mb-4", children: [_jsx("div", { className: "absolute bottom-3.5 left-[-22px] top-[18px] w-[1.5px] bg-border", "aria-hidden": true }), _jsx(HistoryVersionCard, { line: line, row: headline, variant: isProductionHistoryRow(headline) ? 'production' : 'canary', live: group.isLive && isProductionHistoryRow(headline), hasChildren: children.length > 0, childrenOpen: isOpen, moreOpen: Boolean(moreOpen[headline.id]), configOpen: Boolean(configOpen[headline.id]), onToggleChildren: () => setGroupOpen((current) => ({
+                                    ...current,
+                                    [group.id]: !(current[group.id] ?? defaultOpen),
+                                })), onToggleMore: () => setMoreOpen((current) => ({
+                                    ...current,
+                                    [headline.id]: !current[headline.id],
+                                })), onToggleConfig: () => setConfigOpen((current) => ({
+                                    ...current,
+                                    [headline.id]: !current[headline.id],
+                                })), onRestoreToProduction: restoreHistoryToProduction, onRestoreToCanary: restoreHistoryToCanary, restorePending: restorePending, formatDateTimeOrDash: formatDateTimeOrDash }), isOpen && children.length > 0 ? (_jsx("div", { className: "mb-0.5 mt-2.5 flex flex-col gap-2.5", children: children.map((row) => (_jsx(HistoryVersionCard, { line: line, row: row, variant: "canary", compact: true, live: isHistoryRowLive(row), hasChildren: false, childrenOpen: false, moreOpen: Boolean(moreOpen[row.id]), configOpen: Boolean(configOpen[row.id]), onToggleChildren: () => undefined, onToggleMore: () => setMoreOpen((current) => ({
+                                        ...current,
+                                        [row.id]: !current[row.id],
+                                    })), onToggleConfig: () => setConfigOpen((current) => ({
+                                        ...current,
+                                        [row.id]: !current[row.id],
+                                    })), onRestoreToProduction: restoreHistoryToProduction, onRestoreToCanary: restoreHistoryToCanary, restorePending: restorePending, formatDateTimeOrDash: formatDateTimeOrDash }, row.id))) })) : null] }, group.id));
+                }) }), hasMoreGroups ? (_jsx(HistoryLoadMoreIndicator, { loading: isLoadingMoreGroups, label: isLoadingMoreGroups ? t('releases.detail.history.loadingMore') : t('releases.detail.history.moreAvailable'), onClick: loadMoreHistoryGroups })) : null] }));
+}
+function HistoryLoadMoreIndicator({ loading, label, onClick, }) {
+    if (!loading) {
+        return (_jsx("div", { className: "flex justify-center py-3", children: _jsxs("button", { type: "button", onClick: onClick, className: "inline-flex h-8 items-center gap-1.5 rounded-full border bg-card px-3.5 text-[12px] font-medium text-muted-foreground shadow-sm transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: [_jsx(ChevronDown, { className: "size-3.5", "aria-hidden": true }), _jsx("span", { children: label })] }) }));
+    }
+    return (_jsxs("div", { className: "flex justify-center py-4", role: "status", "aria-live": "polite", "aria-label": label, children: [_jsx("span", { className: "sr-only", children: label }), _jsxs("span", { className: "relative flex h-8 w-28 items-center justify-center", "aria-hidden": true, children: [_jsx("span", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gradient-to-r from-transparent via-border to-transparent" }), _jsx("span", { className: "relative inline-flex items-center gap-1.5 rounded-full border bg-card px-3 py-2 shadow-sm", children: [0, 1, 2].map((index) => (_jsx("span", { className: "size-1.5 rounded-full bg-muted-foreground/80 motion-safe:animate-bounce", style: { animationDelay: `${index * 120}ms` } }, index))) })] })] }));
+}
+function HistoryVersionCard({ line, row, variant, live, compact = false, hasChildren, childrenOpen, moreOpen, configOpen, onToggleChildren, onToggleMore, onToggleConfig, onRestoreToProduction, onRestoreToCanary, restorePending, formatDateTimeOrDash, }) {
+    const { t } = useI18n();
+    const isProduction = variant === 'production';
+    const runtimeItems = buildHistoryRuntimeItems(row, t);
+    const connectorItems = buildHistoryConnectorItems(row, t);
+    const reasonItems = buildHistoryReasonItems(row, t);
+    const hasConfig = row.configChanges.length > 0;
+    const dateLabel = formatDateTimeOrDash(row.updatedAt ?? row.createdAt);
+    const resultsHref = buildReleaseResultsHref(line, row);
+    const annotationHref = buildAnnotationHref(line, row);
+    const versionLabel = formatHistoryVersionLabel(row.releaseVersionLabel || '—');
+    const expandLabel = formatTemplate(t(childrenOpen ? 'releases.detail.history.action.collapseVersion' : 'releases.detail.history.action.expandVersion'), { version: versionLabel });
+    const moreLabel = formatTemplate(t('releases.detail.history.action.moreInfo'), { version: versionLabel });
+    const configLabel = formatTemplate(t('releases.detail.history.action.configChanges'), { version: versionLabel });
+    const resultLabel = formatTemplate(t('releases.detail.history.action.viewResults'), { version: versionLabel });
+    const annotationLabel = formatTemplate(t('releases.detail.history.action.createAnnotation'), {
+        version: versionLabel,
+    });
+    const actionMenuLabel = formatTemplate(t('releases.detail.history.action.moreActions'), { version: versionLabel });
+    const restoreDisabled = !row.sourceEventId || line.status === 'archived' || restorePending;
+    const restoreHistoryRow = () => {
+        if (isProduction)
+            onRestoreToProduction(row, versionLabel);
+        else
+            onRestoreToCanary(row, versionLabel);
+    };
+    const rowClickProps = hasChildren
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            'aria-expanded': childrenOpen,
+            'aria-label': expandLabel,
+            onClick: onToggleChildren,
+            onKeyDown: (event) => {
+                if (event.key !== 'Enter' && event.key !== ' ')
+                    return;
+                event.preventDefault();
+                onToggleChildren();
+            },
+        }
+        : {};
+    return (_jsxs("div", { ...rowClickProps, className: cn('relative flex flex-wrap items-center gap-x-3 gap-y-2 rounded-[10px] border bg-card px-[15px] shadow-sm transition-shadow hover:shadow-md', hasChildren && 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', compact ? 'py-[11px]' : 'py-[13px]'), style: live && isProduction
+            ? {
+                borderColor: 'color-mix(in srgb, var(--src-prod) 35%, var(--border))',
+                boxShadow: '0 1px 3px color-mix(in srgb, var(--src-prod) 12%, transparent)',
+            }
+            : undefined, children: [_jsx("span", { className: cn('absolute z-10 rounded-full bg-card', isProduction
+                    ? 'left-[-29px] top-[14px] size-4 border-[2.5px]'
+                    : 'left-[-26px] top-[15px] size-2.5 border-[2.5px]'), style: {
+                    background: live ? (isProduction ? 'var(--src-prod)' : 'var(--src-canary)') : 'var(--card)',
+                    borderColor: isProduction ? (live ? 'var(--src-prod)' : 'var(--muted-foreground)') : 'var(--src-canary)',
+                    boxShadow: live
+                        ? `0 0 0 4px color-mix(in srgb, ${isProduction ? 'var(--src-prod)' : 'var(--src-canary)'} 16%, transparent)`
+                        : undefined,
+                }, "aria-hidden": true }), _jsx("span", { className: "absolute left-[-14px] top-[19px] h-[1.5px] w-[11px] bg-border", style: !isProduction ? { background: 'color-mix(in srgb, var(--src-canary) 35%, var(--border))' } : undefined, "aria-hidden": true }), _jsx(HistoryVersionBadge, { label: versionLabel, variant: variant, compact: compact }), _jsxs("div", { className: "flex min-w-0 flex-1 items-center", children: [_jsxs("div", { className: "flex w-[200px] min-w-0 shrink-0 items-baseline gap-[7px] whitespace-nowrap", children: [_jsx("span", { className: "shrink-0 text-[11.5px] text-muted-foreground", children: t('releases.detail.history.model') }), _jsx("span", { className: "min-w-0 truncate text-[13.5px] font-medium text-foreground", children: row.modelName })] }), _jsxs("div", { className: "flex w-[212px] min-w-0 shrink-0 items-baseline gap-[7px] whitespace-nowrap", children: [_jsx("span", { className: "shrink-0 text-[11.5px] text-muted-foreground", children: t('releases.detail.history.field.prompt') }), _jsx("span", { className: "min-w-0 truncate text-[13.5px] font-medium text-foreground", children: row.promptName }), _jsx("span", { className: "shrink-0 text-muted-foreground", children: "\u00B7" }), _jsx("span", { className: "shrink-0 font-mono text-[12.5px] font-semibold text-muted-foreground", children: row.promptVersionLabel })] }), _jsx("div", { className: "shrink-0 whitespace-nowrap font-mono text-[11.5px] text-muted-foreground", children: dateLabel })] }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: onToggleMore, "aria-pressed": moreOpen, "aria-label": moreLabel, title: moreLabel, className: cn('inline-flex size-[30px] items-center justify-center rounded-lg border bg-card p-0 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', moreOpen && 'border-ring bg-muted text-foreground', compact && 'size-7 rounded-md'), children: _jsx(ChevronDown, { className: cn(compact ? 'size-3.5' : 'size-4', 'transition-transform', moreOpen && 'rotate-180') }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": actionMenuLabel, title: actionMenuLabel, className: cn('inline-flex size-[30px] items-center justify-center rounded-lg border bg-card p-0 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', compact && 'size-7 rounded-md'), children: _jsx(MoreHorizontal, { className: compact ? 'size-3.5' : 'size-4' }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", onClick: (event) => event.stopPropagation(), children: [_jsxs(DropdownMenuItem, { disabled: !hasConfig, onSelect: onToggleConfig, className: "gap-2", children: [_jsx(SlidersHorizontal, { className: "size-3.5" }), configLabel] }), _jsx(HistoryDropdownLink, { href: resultsHref, label: resultLabel, children: _jsx(ScrollText, { className: "size-3.5" }) }), _jsx(HistoryDropdownLink, { href: annotationHref, label: annotationLabel, children: _jsx(Tag, { className: "size-3.5" }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: restoreDisabled, onSelect: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            restoreHistoryRow();
+                                        }, className: "gap-2", children: [_jsx(RotateCcw, { className: "size-3.5" }), restorePending
+                                                ? t('releases.detail.history.action.restoring')
+                                                : t('releases.detail.history.action.restore')] })] })] })] }), moreOpen ? (_jsx(HistoryMorePanel, { runtimeItems: runtimeItems, connectorItems: connectorItems, reasonItems: reasonItems })) : null, configOpen && hasConfig ? (_jsx(HistoryConfigPanel, { changes: row.configChanges, formatDateTimeOrDash: formatDateTimeOrDash })) : null] }));
+}
+function HistoryDropdownLink({ href, label, children }) {
+    if (!href) {
+        return (_jsxs(DropdownMenuItem, { disabled: true, className: "gap-2", children: [children, label] }));
+    }
+    return (_jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: _jsxs(Link, { href: href, children: [children, label] }) }));
+}
+function HistoryMorePanel({ runtimeItems, connectorItems, reasonItems, }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "mt-3 basis-full rounded-lg border bg-muted/55 px-[13px] py-[11px]", children: [_jsx(HistoryPanelRow, { title: t('releases.detail.history.runtimeSection'), items: runtimeItems }), _jsx(HistoryPanelRow, { title: t('releases.detail.history.connectorSection'), items: connectorItems }), reasonItems.length > 0 ? (_jsx(HistoryPanelRow, { title: t('releases.detail.history.reasonSection'), items: reasonItems })) : null] }));
+}
+function HistoryPanelRow({ title, items }) {
+    if (items.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-2 py-[7px] first:pt-0 last:pb-0 sm:flex-row sm:items-baseline [&+&]:border-t", children: [_jsx("div", { className: "w-[58px] shrink-0 text-[11.5px] font-semibold text-muted-foreground", children: title }), _jsx("dl", { className: "flex min-w-0 flex-1 flex-wrap gap-x-[30px] gap-y-[9px]", children: items.map((item) => (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "text-[11px] text-muted-foreground", children: item.label }), _jsx("dd", { className: cn('mt-0.5 max-w-[360px] break-words text-[13px] font-semibold text-foreground', item.mono && 'font-mono'), children: item.value })] }, item.label))) })] }));
+}
+function HistoryConfigPanel({ changes, formatDateTimeOrDash, }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "mt-3 basis-full rounded-lg border bg-muted/55 px-[13px] py-[11px]", children: [_jsx("div", { className: "mb-2 text-[11.5px] font-semibold text-muted-foreground", children: t('releases.detail.history.configChanges') }), _jsx("div", { className: "ml-[3px] flex flex-col gap-2.5 border-l-[1.5px] border-dotted border-muted-foreground/60 pl-[13px]", children: changes.map((change) => (_jsxs("div", { className: "relative flex flex-col gap-1.5 sm:flex-row sm:items-baseline sm:gap-4", children: [_jsx("span", { className: "absolute left-[-16.5px] top-1.5 size-1.5 rounded-full bg-muted-foreground", "aria-hidden": true }), _jsx("span", { className: "min-w-[118px] shrink-0 font-mono text-[11.5px] text-muted-foreground", children: formatDateTimeOrDash(change.at) }), _jsx("div", { className: "flex min-w-0 flex-wrap gap-x-0 gap-y-1", children: change.items.map((item) => (_jsxs("span", { className: "inline-flex items-baseline border-l px-3 text-[12.5px] first:border-l-0 first:pl-0", children: [_jsx("span", { className: "mr-2 font-semibold text-foreground", children: item.field }), _jsx("span", { className: "font-mono text-muted-foreground", children: item.previous }), _jsx("span", { className: "mx-1.5 text-muted-foreground", children: "\u2192" }), _jsx("span", { className: "font-mono font-semibold text-foreground", children: item.next })] }, `${change.id}-${item.field}-${item.next}`))) })] }, change.id))) })] }));
+}
+function HistoryVersionBadge({ label, variant, compact, }) {
+    const isProduction = variant === 'production';
+    return (_jsx("span", { className: cn('inline-flex h-[26px] w-[54px] shrink-0 items-center justify-center truncate rounded-md border px-2 font-mono text-[13px] font-semibold leading-none', compact && 'h-[25px] text-[12px]'), style: {
+            background: isProduction ? 'var(--src-prod-soft)' : 'var(--src-canary-soft)',
+            color: isProduction ? 'var(--src-prod-fg)' : 'var(--src-canary-fg)',
+            borderColor: isProduction
+                ? 'color-mix(in srgb, var(--src-prod) 35%, var(--border))'
+                : 'color-mix(in srgb, var(--src-canary) 35%, var(--border))',
+        }, children: label }));
 }
 //# sourceMappingURL=release-line-detail-page.js.map