@proofhound/web-ui 0.1.8 → 0.1.10

package/dist/screens/releases/release-topology-canvas.js

@@ -1,13 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { Background, Controls, Handle, MarkerType, Position, ReactFlow, } from '@xyflow/react';
-import { Cable, FlaskConical, Plus, RadioTower, Rocket, Save, Split } from 'lucide-react';
-import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, cn, } from '@proofhound/ui';
+import { Link } from '../../components/navigation/link';
+import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, Position, ReactFlow, getSmoothStepPath, } from '@xyflow/react';
+import { Cable, Check, ChevronDown, GitCompareArrows, Plus, RadioTower, Rocket, Save, Search, Split, Square, X, } from 'lucide-react';
+import { canaryReleaseFilterRulesSchema, deriveClassificationOptionsFromPromptOutputSchema } from '@proofhound/shared';
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn, } from '@proofhound/ui';
 import { useDateTimeFormatter } from '../../hooks';
 import { useI18n } from '../../i18n';
 import { getApiErrorMessage } from '../../lib';
+import { FieldMappingTable, FilterRulesBuilder, canaryInputRouteMappingFromRecord, collectFilterRuleFields, extractInputFieldOptionsFromSnapshot, extractPromptVariablesFromSnapshot, inputRouteMappingRecord, mergeInputFieldOptions, } from './release-input-route-editor';
 import { ReleasePill, formatPercent } from './release-line-ui';
+const EMPTY_RECORD = {};
 const TONE_STYLES = {
     neutral: {
         bg: 'var(--card)',
@@ -44,19 +48,48 @@ const NODE_ICONS = {
     upstream: RadioTower,
     router: Split,
     production: Rocket,
-    canary: FlaskConical,
+    canary: Split,
+    canarySplit: Split,
+    canaryDualRun: GitCompareArrows,
     downstream: Cable,
     addCanary: Plus,
 };
+function canaryTopologyIcon(canary) {
+    return canary?.trafficMode === 'dual_run' ? 'canaryDualRun' : 'canarySplit';
+}
+function EdgeLaneBadge({ label, items, text }) {
+    return (_jsx(TooltipProvider, { delayDuration: 140, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { className: "flex h-6 items-center gap-1 rounded-md border bg-card px-1.5 font-mono text-[10.5px] font-semibold text-muted-foreground shadow-sm", "aria-label": label, title: label, children: [items.map(({ icon: Icon, tone }, index) => (_jsx(Icon, { className: "size-3.5", style: { color: TONE_STYLES[tone].dot }, "aria-hidden": "true" }, `${tone}-${index}`))), text ? _jsx("span", { className: "leading-none", children: text }) : null] }) }), _jsx(TooltipContent, { side: "top", children: label })] }) }));
+}
+function EdgeTextBadge({ label, title = label }) {
+    return (_jsx("span", { className: "flex h-5 items-center rounded-md border bg-card px-1.5 font-mono text-[10.5px] font-semibold leading-none text-muted-foreground shadow-sm", "aria-label": title, title: title, children: label }));
+}
 function ReleaseTopologyNodeCard({ data, selected }) {
     const token = TONE_STYLES[data.tone];
     const Icon = NODE_ICONS[data.icon];
     const borderColor = data.mutedBorder ? 'var(--border)' : token.bd;
-    return (_jsxs("div", { className: cn('relative h-[116px] w-[236px] cursor-pointer rounded-lg border px-3 py-3 shadow-sm transition', data.tone === 'muted' && 'border-dashed opacity-80', data.action === 'addCanary' && 'hover:border-[var(--status-canary-bd)] hover:opacity-100', selected && 'ring-2 ring-primary/25'), style: { background: token.bg, borderColor }, children: [_jsx(Handle, { type: "target", position: Position.Left, className: "!size-2 !border !bg-card !opacity-0", style: { borderColor: token.bd } }), _jsx(Handle, { type: "source", position: Position.Right, className: "!size-2 !border !bg-card !opacity-0", style: { borderColor: token.bd } }), _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border", style: { background: 'var(--background)', borderColor: token.bd, color: token.dot }, children: _jsx(Icon, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx("span", { className: "truncate text-[11.5px] font-medium text-muted-foreground", children: data.label }), data.badges?.[0] ? (_jsx(ReleasePill, { tone: data.tone === 'production' ? 'production' : data.tone === 'canary' ? 'canary' : 'neutral', className: "max-w-[92px] shrink-0 truncate", children: data.badges[0] })) : null] }), _jsx("div", { className: "mt-1 truncate font-mono text-[13px] font-semibold", title: data.title, children: data.title }), data.meta ? (_jsx("div", { className: "mt-1 truncate font-mono text-[11.5px] text-muted-foreground", title: data.meta, children: data.meta })) : null, data.detail ? (_jsx("div", { className: "mt-1.5 truncate text-[11.5px] font-medium", style: { color: token.fg }, title: data.detail, children: data.detail })) : null] })] })] }));
+    return (_jsxs("div", { className: cn('relative h-[116px] w-[236px] cursor-pointer rounded-lg border px-3 py-3 shadow-sm transition', data.tone === 'muted' && 'border-dashed opacity-80', data.action === 'addCanary' && 'hover:border-[var(--status-canary-bd)] hover:opacity-100', selected && 'ring-2 ring-primary/25'), style: { background: token.bg, borderColor }, children: [_jsx(Handle, { type: "target", position: Position.Left, className: "!size-2 !border !bg-card !opacity-0", style: { borderColor: token.bd } }), _jsx(Handle, { type: "source", position: Position.Right, className: "!size-2 !border !bg-card !opacity-0", style: { borderColor: token.bd } }), data.compact ? (_jsxs("div", { className: "flex h-full items-center justify-center gap-2.5", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md border", style: { background: 'var(--background)', borderColor: token.bd, color: token.dot }, children: _jsx(Icon, { className: "size-4" }) }), _jsx("span", { className: "truncate text-[13px] font-semibold", children: data.label })] })) : (_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border", style: { background: 'var(--background)', borderColor: token.bd, color: token.dot }, children: _jsx(Icon, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx("span", { className: "truncate text-[11.5px] font-medium text-muted-foreground", children: data.label }), data.badges?.[0] ? (_jsx(ReleasePill, { tone: data.tone === 'production' ? 'production' : data.tone === 'canary' ? 'canary' : 'neutral', className: "max-w-[92px] shrink-0 truncate", children: data.badges[0] })) : null] }), _jsx("div", { className: "mt-1 truncate font-mono text-[13px] font-semibold", title: data.title, children: data.title }), data.meta ? (_jsx("div", { className: "mt-1 truncate font-mono text-[11.5px] text-muted-foreground", title: data.meta, children: data.meta })) : null, data.detail ? (_jsx("div", { className: "mt-1.5 truncate text-[11.5px] font-medium", style: { color: token.fg }, title: data.detail, children: data.detail })) : null] })] }))] }));
 }
 const nodeTypes = {
     releaseTopology: ReleaseTopologyNodeCard,
 };
+function ReleaseTopologyEdgePath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, style, label, interactionWidth, }) {
+    const [edgePath, labelX, labelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { path: edgePath, markerEnd: markerEnd, style: style, interactionWidth: interactionWidth }), label ? (_jsx(EdgeLabelRenderer, { children: _jsx("div", { className: "nodrag nopan absolute -translate-x-1/2 -translate-y-1/2", style: {
+                        pointerEvents: 'all',
+                        zIndex: 20,
+                        transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+                    }, children: label }) })) : null] }));
+}
+const edgeTypes = {
+    releaseTopology: ReleaseTopologyEdgePath,
+};
 function createEdge({ id, source, target, label, tone = 'neutral', dashed = false, animated, }) {
     const color = EDGE_STYLES[tone];
     return {
@@ -64,7 +97,7 @@ function createEdge({ id, source, target, label, tone = 'neutral', dashed = fals
         source,
         target,
         label,
-        type: 'smoothstep',
+        type: 'releaseTopology',
         animated: animated ?? (tone === 'production' || tone === 'canary'),
         markerEnd: { type: MarkerType.ArrowClosed, color },
         style: {
@@ -72,25 +105,13 @@ function createEdge({ id, source, target, label, tone = 'neutral', dashed = fals
             strokeWidth: tone === 'muted' ? 1.3 : 2,
             strokeDasharray: dashed ? '6 5' : undefined,
         },
-        labelStyle: {
-            fill: 'var(--muted-foreground)',
-            fontSize: 11,
-            fontFamily: 'var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-            fontWeight: 600,
-        },
-        labelBgStyle: {
-            fill: 'var(--card)',
-            fillOpacity: 0.92,
-        },
-        labelBgPadding: [6, 4],
-        labelBgBorderRadius: 6,
     };
 }
 function outputNodePosition(index, total) {
     const compact = total <= 2;
     const step = compact ? 126 : 108;
     const startY = 136 - ((total - 1) * step) / 2;
-    return { x: 1240, y: startY + index * step };
+    return { x: 1420, y: startY + index * step };
 }
 function clampTrafficRatio(value) {
     return typeof value === 'number' && Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0;
@@ -110,9 +131,12 @@ function getTrafficState(line) {
         canaryHasTraffic: Boolean(line.canary) && canaryRatio > 0,
     };
 }
+function getOutputScopeLabel({ inProduction, inCanary, labels, }) {
+    return [inProduction ? labels.productionLane : null, inCanary ? labels.canaryLane : null].filter(Boolean).join(' + ');
+}
 function buildTopology(line, labels) {
     const traffic = getTrafficState(line);
-    const canaryTraffic = line.canary ? formatPercent(traffic.canaryRatio, 0) : labels.noTraffic;
+    const canAnimateTraffic = line.status === 'running';
     const canAddCanary = !line.canary && line.production?.currentEvent?.status === 'running';
     const nodes = [
         {
@@ -133,9 +157,9 @@ function buildTopology(line, labels) {
             data: {
                 icon: 'router',
                 label: labels.inputRoute,
-                title: `${labels.productionTrafficLabel} ${labels.productionTraffic}`,
-                meta: `${labels.canaryTrafficLabel} ${canaryTraffic}`,
+                title: labels.inputRoute,
                 tone: 'neutral',
+                compact: true,
             },
         },
     ];
@@ -144,14 +168,13 @@ function buildTopology(line, labels) {
             id: 'upstream-router',
             source: 'upstream',
             target: 'input-route',
-            label: labels.ingress,
         }),
     ];
     if (line.production?.currentEvent) {
         nodes.push({
             id: 'production',
             type: 'releaseTopology',
-            position: { x: 620, y: 62 },
+            position: { x: 680, y: 62 },
             data: {
                 icon: 'production',
                 label: labels.productionNode,
@@ -167,16 +190,16 @@ function buildTopology(line, labels) {
             id: 'router-production',
             source: 'input-route',
             target: 'production',
-            label: line.canary ? labels.productionTraffic : '100%',
+            label: (_jsx(EdgeTextBadge, { label: line.canary ? labels.productionTraffic : '100%', title: `${labels.productionTrafficLabel} ${line.canary ? labels.productionTraffic : '100%'}` })),
             tone: 'production',
-            animated: traffic.productionHasTraffic,
+            animated: canAnimateTraffic && traffic.productionHasTraffic,
         }));
     }
     else {
         nodes.push({
             id: 'production',
             type: 'releaseTopology',
-            position: { x: 620, y: 62 },
+            position: { x: 680, y: 62 },
             data: {
                 icon: 'production',
                 label: labels.productionNode,
@@ -189,7 +212,7 @@ function buildTopology(line, labels) {
             id: 'router-production-empty',
             source: 'input-route',
             target: 'production',
-            label: labels.noTraffic,
+            label: (_jsx(EdgeTextBadge, { label: labels.noTraffic, title: `${labels.productionTrafficLabel} ${labels.noTraffic}` })),
             tone: 'muted',
             dashed: true,
         }));
@@ -198,9 +221,9 @@ function buildTopology(line, labels) {
         nodes.push({
             id: 'canary',
             type: 'releaseTopology',
-            position: { x: 620, y: 210 },
+            position: { x: 680, y: 210 },
             data: {
-                icon: 'canary',
+                icon: canaryTopologyIcon(line.canary),
                 label: labels.canaryNode,
                 title: line.promptName,
                 meta: line.canaryVersionLabel ?? labels.unconfigured,
@@ -214,18 +237,18 @@ function buildTopology(line, labels) {
             id: 'router-canary',
             source: 'input-route',
             target: 'canary',
-            label: formatPercent(traffic.canaryRatio, 0),
+            label: (_jsx(EdgeTextBadge, { label: formatPercent(traffic.canaryRatio, 0), title: `${labels.canaryTrafficLabel} ${formatPercent(traffic.canaryRatio, 0)}` })),
             tone: 'canary',
-            animated: traffic.canaryHasTraffic,
+            animated: canAnimateTraffic && traffic.canaryHasTraffic,
         }));
     }
     else {
         nodes.push({
             id: 'canary',
             type: 'releaseTopology',
-            position: { x: 620, y: 210 },
+            position: { x: 680, y: 210 },
             data: {
-                icon: canAddCanary ? 'addCanary' : 'canary',
+                icon: canAddCanary ? 'addCanary' : 'canarySplit',
                 label: labels.canaryNode,
                 title: canAddCanary ? labels.addCanary : labels.noCanary,
                 meta: canAddCanary ? labels.noCanary : undefined,
@@ -239,7 +262,7 @@ function buildTopology(line, labels) {
             id: 'router-canary-empty',
             source: 'input-route',
             target: 'canary',
-            label: labels.noTraffic,
+            label: _jsx(EdgeTextBadge, { label: labels.noTraffic, title: `${labels.canaryTrafficLabel} ${labels.noTraffic}` }),
             tone: 'muted',
             dashed: true,
         }));
@@ -249,32 +272,28 @@ function buildTopology(line, labels) {
     nodes.push({
         id: 'output-route',
         type: 'releaseTopology',
-        position: { x: 930, y: 136 },
+        position: { x: 990, y: 136 },
         data: {
             icon: 'router',
             label: labels.outputRoute,
-            title: labels.outputRouteTitle,
-            meta: labels.outputMapping,
-            detail: line.canary?.outputMapping.length ? `${line.canary.outputMapping.length}` : labels.outputMappingEmpty,
+            title: labels.outputRoute,
             tone: 'neutral',
-            badges: [labels.outputDirection],
+            compact: true,
         },
     });
     edges.push(createEdge({
         id: 'production-output-route',
         source: 'production',
         target: 'output-route',
-        label: 'production',
         tone: line.production?.currentEvent ? 'production' : 'muted',
-        animated: traffic.productionHasTraffic,
+        animated: canAnimateTraffic && traffic.productionHasTraffic,
         dashed: !line.production?.currentEvent,
     }), createEdge({
         id: 'canary-output-route',
         source: 'canary',
         target: 'output-route',
-        label: 'gray',
         tone: line.canary ? 'canary' : 'muted',
-        animated: traffic.canaryHasTraffic,
+        animated: canAnimateTraffic && traffic.canaryHasTraffic,
         dashed: !line.canary,
     }));
     const outputs = line.outputConnectors.length > 0
@@ -285,6 +304,12 @@ function buildTopology(line, labels) {
         const isEmpty = connector.id === 'empty-output';
         const inProduction = productionOutputIds.has(connector.id);
         const inCanary = canaryOutputIds.has(connector.id);
+        const outputScope = getOutputScopeLabel({ inProduction, inCanary, labels });
+        const CanaryScopeIcon = line.canary?.trafficMode === 'dual_run' ? GitCompareArrows : Split;
+        const outputScopeItems = [
+            ...(inProduction ? [{ icon: Rocket, tone: 'production' }] : []),
+            ...(inCanary ? [{ icon: CanaryScopeIcon, tone: 'canary' }] : []),
+        ];
         nodes.push({
             id,
             type: 'releaseTopology',
@@ -294,9 +319,7 @@ function buildTopology(line, labels) {
                 label: labels.downstream,
                 title: connector.name,
                 meta: connector.type,
-                detail: isEmpty
-                    ? labels.noDownstreamDetail
-                    : [inProduction ? 'production' : null, inCanary ? 'gray' : null].filter(Boolean).join(' + '),
+                detail: isEmpty ? labels.noDownstreamDetail : outputScope,
                 tone: isEmpty ? 'muted' : 'neutral',
                 badges: [connector.type],
             },
@@ -315,9 +338,10 @@ function buildTopology(line, labels) {
             id: `output-route-${id}`,
             source: 'output-route',
             target: id,
-            label: [inProduction ? 'production' : null, inCanary ? 'gray' : null].filter(Boolean).join(' + ') || undefined,
-            tone: inCanary ? 'canary' : inProduction ? 'production' : 'neutral',
-            animated: (inProduction && traffic.productionHasTraffic) || (inCanary && traffic.canaryHasTraffic),
+            label: outputScope ? _jsx(EdgeLaneBadge, { label: outputScope, items: outputScopeItems }) : undefined,
+            tone: 'neutral',
+            animated: canAnimateTraffic &&
+                ((inProduction && traffic.productionHasTraffic) || (inCanary && traffic.canaryHasTraffic)),
         }));
     });
     return { nodes, edges };
@@ -332,6 +356,7 @@ function useTopologyLabels(line) {
         model: t('releases.detail.field.model'),
         externalId: t('releases.detail.field.externalId'),
         startedAt: t('releases.detail.field.startedAt'),
+        createdAt: t('common.createdAt'),
         status: t('releases.detail.field.status'),
         trafficRatio: t('releases.detail.field.trafficRatio'),
         updatedAt: t('releases.detail.field.updatedAt'),
@@ -343,11 +368,18 @@ function useTopologyLabels(line) {
         canaryBadge: t('releases.detail.topology.badge.canary'),
         productionTrafficLabel: t('releases.detail.topology.traffic.production'),
         canaryTrafficLabel: t('releases.detail.topology.traffic.canary'),
+        productionLane: t('releases.detail.topology.lane.production'),
+        canaryLane: t('releases.detail.topology.lane.canary'),
         router: t('releases.detail.topology.router'),
         inputRoute: t('releases.detail.topology.inputRoute'),
         inputRouteMeta: t('releases.detail.topology.inputRouteMeta'),
         outputRoute: t('releases.detail.topology.outputRoute'),
         outputRouteTitle: t('releases.detail.topology.outputRouteTitle'),
+        inputRouteSaveFailed: t('releases.detail.topology.inputRoute.saveFailed'),
+        inputRouteInvalid: t('releases.detail.topology.inputRoute.invalid'),
+        inputRouteNoLane: t('releases.detail.topology.inputRoute.noLane'),
+        inputRouteEditFilter: t('releases.detail.topology.inputRoute.editFilter'),
+        inputRouteHideFilter: t('releases.detail.topology.inputRoute.hideFilter'),
         ingress: t('releases.detail.topology.ingress'),
         routeMeta: t('releases.detail.topology.routeMeta'),
         latestEvent: t('releases.detail.topology.latestEvent'),
@@ -365,7 +397,6 @@ function useTopologyLabels(line) {
         offline: t('releases.traffic.offline'),
         readyForCandidate: t('releases.detail.topology.readyForCandidate'),
         inspector: t('releases.detail.topology.inspector'),
-        clickHint: t('releases.detail.topology.clickHint'),
         connectorId: t('releases.detail.topology.field.connectorId'),
         connectorName: t('releases.detail.topology.field.connectorName'),
         connectorType: t('releases.detail.topology.field.connectorType'),
@@ -380,81 +411,336 @@ function useTopologyLabels(line) {
         tpmLimit: t('releases.detail.topology.field.tpmLimit'),
         concurrency: t('releases.detail.topology.field.concurrency'),
         temperature: t('releases.detail.topology.field.temperature'),
-        recordMode: t('releases.detail.topology.field.recordMode'),
+        termination: t('releases.detail.topology.field.termination'),
         trafficMode: t('releases.detail.topology.field.trafficMode'),
         outputScope: t('releases.detail.topology.field.outputScope'),
         productionScope: t('releases.detail.topology.scope.production'),
         canaryScope: t('releases.detail.topology.scope.canary'),
-        routeStatus: t('releases.detail.topology.field.routeStatus'),
         fieldMapping: t('releases.detail.topology.field.fieldMapping'),
-        fieldMappingEmpty: t('releases.detail.config.mappingEmpty'),
         filterRules: t('releases.detail.topology.field.filterRules'),
         filterEmpty: t('releases.detail.topology.filterEmpty'),
+        inputFields: t('releases.detail.topology.field.inputFields'),
+        inputFieldsEmpty: t('releases.detail.topology.inputFields.empty'),
         outputMapping: t('releases.detail.topology.field.outputMapping'),
         outputMappingEmpty: t('releases.detail.topology.outputMappingEmpty'),
+        outputRouteSaveFailed: t('releases.detail.topology.outputRoute.saveFailed'),
+        outputRouteNoLane: t('releases.detail.topology.outputRoute.noLane'),
+        outputRouteNoConnector: t('releases.detail.topology.outputRoute.noConnector'),
+        outputRouteEdit: t('releases.detail.topology.outputRoute.edit'),
+        outputRouteDialogTitle: t('releases.detail.topology.outputRoute.dialogTitle'),
+        outputRouteDialogDescription: t('releases.detail.topology.outputRoute.dialogDescription'),
+        outputRouteNewConnector: t('releases.detail.topology.outputRoute.newConnector'),
+        outputRouteConnectorFilter: t('releases.detail.topology.outputRoute.connectorFilter'),
+        outputRouteConnectorSelect: t('releases.detail.topology.outputRoute.connectorSelect'),
+        outputRouteNoAddableConnector: t('releases.detail.topology.outputRoute.noAddableConnector'),
+        outputRouteAvailableConnectors: t('releases.detail.topology.outputRoute.availableConnectors'),
+        outputRouteSelectedConnectors: t('releases.detail.topology.outputRoute.selectedConnectors'),
+        outputRouteNoSelectedConnector: t('releases.detail.topology.outputRoute.noSelectedConnector'),
+        outputRouteAddConnector: t('releases.detail.topology.outputRoute.addConnector'),
+        outputRouteRemoveConnector: t('releases.detail.topology.outputRoute.removeConnector'),
+        outputRoutePassThrough: t('releases.detail.topology.outputRoute.passThrough'),
+        outputRouteConnectorHelp: t('releases.detail.topology.outputRoute.connectorHelp'),
+        outputRouteMappingHelp: t('releases.detail.topology.outputRoute.mappingHelp'),
+        outputRouteSource: t('releases.detail.topology.outputRoute.source'),
+        outputRouteTarget: t('releases.detail.topology.outputRoute.target'),
+        outputRouteSourceDecisionOutput: t('releases.detail.topology.outputRoute.sourceDecisionOutput'),
+        outputRouteSourceParsedOutput: t('releases.detail.topology.outputRoute.sourceParsedOutput'),
+        outputRouteSourceRawResponse: t('releases.detail.topology.outputRoute.sourceRawResponse'),
+        outputRouteSourceRunResultId: t('releases.detail.topology.outputRoute.sourceRunResultId'),
+        outputRouteSourceModelOutput: t('releases.detail.topology.outputRoute.sourceModelOutput'),
+        outputRouteSourceLegacy: t('releases.detail.topology.outputRoute.sourceLegacy'),
+        outputRouteProductionConnectors: t('releases.detail.topology.outputRoute.productionConnectors'),
+        outputRouteCanaryConnectors: t('releases.detail.topology.outputRoute.canaryConnectors'),
+        outputRouteProductionMapping: t('releases.detail.topology.outputRoute.productionMapping'),
+        outputRouteCanaryMapping: t('releases.detail.topology.outputRoute.canaryMapping'),
+        outputRouteSummaryConnectors: t('releases.detail.topology.outputRoute.summaryConnectors'),
+        outputRouteSummaryMapping: t('releases.detail.topology.outputRoute.summaryMapping'),
+        outputRouteSave: t('releases.detail.topology.outputRoute.saveRoute'),
+        outputRouteSourceSearch: t('releases.detail.topology.outputRoute.sourceSearch'),
+        outputRouteSourceEmpty: t('releases.detail.topology.outputRoute.sourceEmpty'),
+        outputRouteSourcePlaceholder: t('releases.detail.topology.outputRoute.sourcePlaceholder'),
+        outputRouteSourceGroupUpstream: t('releases.detail.topology.outputRoute.sourceGroup.upstream'),
+        outputRouteSourceGroupModel: t('releases.detail.topology.outputRoute.sourceGroup.model'),
+        outputRouteSourceGroupMeta: t('releases.detail.topology.outputRoute.sourceGroup.meta'),
+        outputRouteNewBadge: t('releases.detail.topology.outputRoute.newBadge'),
+        outputRouteConnectorPickerTitle: t('releases.detail.topology.outputRoute.connectorPickerTitle'),
+        outputRouteNoMoreConnectors: t('releases.detail.topology.outputRoute.noMoreConnectors'),
+        outputRouteLaneReadonly: t('releases.detail.topology.outputRoute.laneReadonly'),
+        outputRouteConnectorCount: (count) => formatTemplate(t('releases.detail.topology.outputRoute.connectorCount'), { count }),
+        outputRouteFooterSummary: (production, canary, mappings) => formatTemplate(t('releases.detail.topology.outputRoute.footerSummary'), { production, canary, mappings }),
+        addMapping: t('releases.detail.topology.outputRoute.addMapping'),
+        removeMapping: t('releases.detail.topology.outputRoute.removeMapping'),
         adjustTraffic: t('releases.detail.action.adjustTraffic'),
         trafficBox: t('releases.detail.topology.trafficBox'),
         noCanaryToAdjust: t('releases.detail.topology.noCanaryToAdjust'),
         trafficInvalid: t('releases.detail.trafficDialog.invalid'),
         trafficUpdateFailed: t('releases.detail.trafficDialog.updateFailed'),
+        laneIdentityTitle: t('releases.detail.topology.identity.title'),
         runConfigTitle: t('releases.detail.topology.runConfig.title'),
         runConfigInvalid: t('releases.detail.topology.runConfig.invalid'),
         runConfigUpdateFailed: t('releases.detail.topology.runConfig.updateFailed'),
         runConfigModelUnavailable: t('releases.detail.topology.runConfig.modelUnavailable'),
         modelLimit: (limit) => t('releases.detail.topology.runConfig.modelLimit').replace('{limit}', limit),
         unlimited: t('releases.detail.topology.runConfig.unlimited'),
+        terminationManual: t('canaryReleases.new.field.termination.manual'),
+        terminationByCount: t('canaryReleases.new.field.termination.byCount'),
+        terminationByTime: t('canaryReleases.new.field.termination.byTime'),
+        recordModeTitle: t('releases.detail.topology.recordMode.title'),
+        recordCategories: t('releases.detail.topology.recordCategories'),
+        recordCategoriesEmpty: t('releases.detail.topology.recordCategories.empty'),
+        recordCategoriesSelected: (count) => formatTemplate(t('releases.detail.topology.recordCategories.selected'), { count }),
+        recordCategoriesSelectAll: t('releases.detail.topology.recordCategories.selectAll'),
+        recordCategoriesClear: t('releases.detail.topology.recordCategories.clear'),
+        canaryActionFailed: t('releases.detail.topology.canaryActionFailed'),
+        promoteCanary: t('releases.detail.action.promoteCanary'),
+        stopCanary: t('releases.detail.action.stopCanary'),
+        replaceCanary: t('releases.detail.action.replaceCanary'),
         loading: t('common.loading'),
         trafficPercentInput: t('releases.detail.trafficDialog.percentInput'),
         trafficPercentAriaLabel: t('releases.detail.trafficDialog.percentAriaLabel'),
+        cancel: t('common.cancel'),
         save: t('common.save'),
         savePending: t('common.savePending'),
         canaryMode: (mode) => mode === 'dual_run' ? t('releases.detail.topology.mode.dualRun') : t('releases.detail.topology.mode.split'),
+        filterOp: (op) => t(`canaryReleases.new.filter.op.${op}`),
     };
 }
+function formatTemplate(template, values) {
+    return template.replace(/\{(\w+)\}/g, (_, key) => {
+        const value = values[key];
+        return value === undefined ? `{${key}}` : String(value);
+    });
+}
 function toDisplayValue(value) {
     if (value === null || value === undefined || value === '')
         return '—';
     return String(value);
 }
-function stringifyConfig(value, emptyLabel) {
-    if (value === null || value === undefined)
-        return emptyLabel;
-    if (typeof value === 'string')
-        return value.trim() || emptyLabel;
-    if (Array.isArray(value) && value.length === 0)
-        return emptyLabel;
-    if (typeof value === 'object' && Object.keys(value).length === 0)
-        return emptyLabel;
-    return JSON.stringify(value, null, 2);
-}
-function getVariableMappingBody(line, emptyLabel) {
-    if (line.canary) {
-        if (line.canary.variableMapping.length === 0)
-            return emptyLabel;
-        return line.canary.variableMapping
-            .map((item) => {
-            const required = item.required ? ' *' : '';
-            const defaultValue = item.defaultValue === undefined ? '' : ` = ${stringifyConfig(item.defaultValue, '')}`;
-            return `${item.source} -> ${item.target}${required}${defaultValue}`;
-        })
-            .join('\n');
+function positiveIntegerValue(value) {
+    return typeof value === 'number' && Number.isInteger(value) && value > 0 ? value : null;
+}
+function formatCanaryStopConditions(config, labels) {
+    const stopConditions = readCanaryStopConditions(readRecord(config)?.['stopConditions']);
+    if (!stopConditions)
+        return labels.terminationManual;
+    const parts = [];
+    if (stopConditions.maxSamples !== null)
+        parts.push(`${labels.terminationByCount} · ${stopConditions.maxSamples}`);
+    if (stopConditions.maxDurationSeconds !== null) {
+        parts.push(`${labels.terminationByTime} · ${stopConditions.maxDurationSeconds}s`);
     }
-    const productionMapping = line.production?.currentEvent?.variableMapping ?? {};
-    const entries = Object.entries(productionMapping);
-    if (entries.length === 0)
-        return emptyLabel;
-    return entries.map(([target, source]) => `${source} -> ${target}${target === 'id' ? ' *' : ''}`).join('\n');
+    return parts.length > 0 ? parts.join(' / ') : labels.terminationManual;
 }
-function getFilterRulesBody(line, labels) {
-    const filterRules = line.canary?.filterRules ?? line.production?.currentEvent?.filterRules ?? null;
-    return stringifyConfig(filterRules, labels.filterEmpty);
+function readCanaryStopConditions(value) {
+    const record = readRecord(value);
+    if (!record)
+        return null;
+    const maxSamples = positiveIntegerValue(record['maxSamples']);
+    const maxDurationSeconds = positiveIntegerValue(record['maxDurationSeconds']);
+    if (maxSamples === null && maxDurationSeconds === null)
+        return null;
+    return { maxDurationSeconds, maxSamples };
+}
+function normalizeOutputMapping(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value
+        .filter((item) => {
+        return (Boolean(item) &&
+            typeof item === 'object' &&
+            'source' in item &&
+            'target' in item &&
+            typeof item.source === 'string' &&
+            typeof item.target === 'string');
+    })
+        .map((item) => ({ source: item.source, target: item.target }));
 }
-function getOutputMappingBody(line, labels) {
-    const canaryMapping = line.canary?.outputMapping ?? [];
-    if (canaryMapping.length > 0) {
-        return canaryMapping.map((item) => `${item.source} -> ${item.target}`).join('\n');
+function normalizeConnectorOutputRoutes(value, connectorIds) {
+    const selectedIds = new Set(connectorIds);
+    const routes = new Map();
+    if (Array.isArray(value)) {
+        for (const item of value) {
+            if (!item || typeof item !== 'object' || Array.isArray(item))
+                continue;
+            const record = item;
+            const connectorId = record['connectorId'];
+            if (typeof connectorId !== 'string' || !selectedIds.has(connectorId))
+                continue;
+            routes.set(connectorId, normalizeOutputMapping(record['outputMapping']));
+        }
     }
-    return labels.outputMappingEmpty;
+    if (routes.size > 0) {
+        return connectorIds.map((connectorId) => ({
+            connectorId,
+            outputMapping: routes.get(connectorId) ?? [],
+        }));
+    }
+    const legacyMapping = normalizeOutputMapping(value);
+    return connectorIds.map((connectorId) => ({ connectorId, outputMapping: legacyMapping }));
+}
+function countOutputMappingRows(value) {
+    if (!Array.isArray(value))
+        return 0;
+    const connectorRouteCount = value.reduce((total, item) => {
+        if (!item || typeof item !== 'object' || Array.isArray(item))
+            return total;
+        const record = item;
+        if (typeof record['connectorId'] !== 'string')
+            return total;
+        return total + normalizeOutputMapping(record['outputMapping']).length;
+    }, 0);
+    return connectorRouteCount > 0 ? connectorRouteCount : normalizeOutputMapping(value).length;
+}
+function serializeOutputRoutes(value) {
+    return JSON.stringify(value
+        .map((route) => ({
+        connectorId: route.connectorId,
+        outputMapping: cleanOutputMapping(route.outputMapping),
+    }))
+        .sort((left, right) => left.connectorId.localeCompare(right.connectorId)));
+}
+function cleanOutputMapping(value) {
+    return normalizeOutputMapping(value)
+        .map((item) => ({ source: item.source.trim(), target: item.target.trim() }))
+        .filter((item) => item.source.length > 0 && item.target.length > 0);
+}
+function cleanOutputRoutes(value) {
+    return value.map((route) => ({
+        connectorId: route.connectorId,
+        outputMapping: cleanOutputMapping(route.outputMapping),
+    }));
+}
+function getOutputSourceGroups(snapshot, upstreamFields, labels) {
+    const upstreamOptions = dedupeOutputSourceOptions(upstreamFields.map((field) => ({
+        value: field.key,
+        label: field.key,
+        description: field.description || field.type,
+    })));
+    const modelOptions = [
+        {
+            value: 'decision_output',
+            label: labels.outputRouteSourceDecisionOutput,
+            description: 'decision_output',
+        },
+        {
+            value: 'parsed_output',
+            label: labels.outputRouteSourceParsedOutput,
+            description: 'parsed_output',
+        },
+        {
+            value: 'raw_response',
+            label: labels.outputRouteSourceRawResponse,
+            description: 'raw_response',
+        },
+    ];
+    const metaOptions = [
+        {
+            value: 'status',
+            label: labels.status,
+            description: 'status',
+        },
+        {
+            value: 'external_id',
+            label: labels.externalId,
+            description: 'external_id',
+        },
+        {
+            value: 'run_result_id',
+            label: labels.outputRouteSourceRunResultId,
+            description: 'run_result_id',
+        },
+        {
+            value: 'metrics.latency_ms',
+            label: labels.outputRouteSourceModelOutput,
+            description: 'metrics.latency_ms',
+        },
+    ];
+    const outputSchema = readRecord(readRecord(snapshot)?.['outputSchema']);
+    const fields = Array.isArray(outputSchema?.['fields']) ? outputSchema['fields'] : [];
+    const schemaOptions = fields
+        .map((field) => {
+        const record = readRecord(field);
+        const key = typeof record?.['key'] === 'string' ? record['key'].trim() : '';
+        if (!key)
+            return null;
+        const value = typeof record?.['value'] === 'string' ? record['value'].trim() : '';
+        return {
+            value: key,
+            label: key,
+            description: value || labels.outputRouteSourceModelOutput,
+        };
+    })
+        .filter((option) => option !== null);
+    const groups = [
+        {
+            key: 'upstream',
+            label: labels.outputRouteSourceGroupUpstream,
+            badge: labels.outputRouteNewBadge,
+            options: upstreamOptions,
+        },
+        {
+            key: 'model',
+            label: labels.outputRouteSourceGroupModel,
+            options: dedupeOutputSourceOptions([...schemaOptions, ...modelOptions]),
+        },
+        {
+            key: 'meta',
+            label: labels.outputRouteSourceGroupMeta,
+            options: metaOptions,
+        },
+    ];
+    return groups.filter((group) => group.options.length > 0);
+}
+function dedupeOutputSourceOptions(options) {
+    return Array.from(new Map(options.map((option) => [option.value, option])).values());
+}
+function readRecord(value) {
+    return value && typeof value === 'object' && !Array.isArray(value) ? value : null;
+}
+function getOutputRouteConnectorItems(connectorIds, connectors) {
+    const connectorById = new Map(connectors.map((connector) => [connector.id, connector]));
+    return connectorIds.map((connectorId) => ({
+        id: connectorId,
+        name: connectorById.get(connectorId)?.name ?? connectorId,
+    }));
+}
+function OutputRouteConnectorList({ connectorIds, connectors, emptyLabel, }) {
+    const items = getOutputRouteConnectorItems(connectorIds, connectors);
+    if (items.length === 0)
+        return _jsx("span", { className: "text-muted-foreground", children: emptyLabel });
+    return (_jsx("div", { className: "space-y-1", children: items.map((item, index) => (_jsx("div", { className: "truncate", title: item.name, children: item.name }, `${item.id}:${index}`))) }));
+}
+function getOutputRouteMappingSummary(outputMapping, labels) {
+    const count = countOutputMappingRows(outputMapping);
+    return count > 0 ? String(count) : labels.outputRoutePassThrough;
+}
+function OutputRouteSummaryCards({ line, outputConnectors, labels, }) {
+    const productionEvent = line.production?.currentEvent ?? null;
+    const productionConnectorIds = productionEvent?.outputConnectorIds ?? [];
+    const canaryConnectorIds = line.canary?.outputConnectorIds ?? [];
+    return (_jsxs("div", { className: "grid gap-3", children: [_jsx(OutputRouteSummaryCard, { title: labels.production, tone: productionEvent ? 'production' : 'muted', rows: [
+                    {
+                        label: labels.outputRouteSummaryConnectors,
+                        valueNode: (_jsx(OutputRouteConnectorList, { connectorIds: productionConnectorIds, connectors: outputConnectors, emptyLabel: labels.noDownstream })),
+                    },
+                    {
+                        label: labels.outputRouteSummaryMapping,
+                        value: getOutputRouteMappingSummary(line.productionOutputMapping, labels),
+                    },
+                ] }), _jsx(OutputRouteSummaryCard, { title: labels.canary, tone: line.canary ? 'canary' : 'muted', rows: [
+                    {
+                        label: labels.outputRouteSummaryConnectors,
+                        valueNode: line.canary ? (_jsx(OutputRouteConnectorList, { connectorIds: canaryConnectorIds, connectors: outputConnectors, emptyLabel: labels.noDownstream })) : (_jsx("span", { className: "text-muted-foreground", children: labels.noCanary })),
+                    },
+                    {
+                        label: labels.outputRouteSummaryMapping,
+                        value: line.canary ? getOutputRouteMappingSummary(line.canaryOutputMapping, labels) : labels.noCanary,
+                    },
+                ] })] }));
+}
+function OutputRouteSummaryCard({ title, tone, rows, }) {
+    const token = TONE_STYLES[tone];
+    return (_jsxs("section", { className: "rounded-lg border bg-card p-3", style: { borderColor: token.bd }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "size-2 rounded-full", style: { background: token.dot } }), _jsx("span", { className: "text-[12px] font-semibold", children: title })] }), _jsx("div", { className: "mt-3 space-y-2", children: rows.map((row) => (_jsx(InspectorRowView, { row: { ...row, mono: false } }, `${title}:${row.label}`))) })] }));
 }
 function trafficPercentFromText(value, max = 100) {
     const parsed = Number(value.trim());
@@ -470,8 +756,417 @@ function getProductionTrafficPercent(canaryPercent) {
 function isAdjustableCanary(canary) {
     return canary?.status === 'pending' || canary?.status === 'running' || canary?.status === 'stopped';
 }
+function normalizeInputRouteFilterRules(value) {
+    const parsed = canaryReleaseFilterRulesSchema.safeParse(value ?? null);
+    return parsed.success ? parsed.data : null;
+}
+function cleanInputRouteMappingRecord(mapping, externalIdField) {
+    const result = {};
+    for (const [target, source] of Object.entries(mapping)) {
+        const cleanTarget = target.trim();
+        const cleanSource = source.trim();
+        if (!cleanTarget || !cleanSource || cleanTarget === 'id')
+            continue;
+        result[cleanTarget] = cleanSource;
+    }
+    if (externalIdField.trim())
+        result.id = externalIdField.trim();
+    return result;
+}
+function buildInputRouteUpdate(laneType, mapping, filterRules, externalIdField, promptVariables) {
+    const normalizedExternalIdField = externalIdField.trim();
+    if (!normalizedExternalIdField)
+        return null;
+    if (!canaryReleaseFilterRulesSchema.safeParse(filterRules).success)
+        return null;
+    if (promptVariables.some((variable) => !mapping[variable.name]?.trim()))
+        return null;
+    if (laneType === 'production') {
+        return {
+            laneType,
+            variableMapping: cleanInputRouteMappingRecord(mapping, normalizedExternalIdField),
+            filterRules,
+            externalIdField: normalizedExternalIdField,
+        };
+    }
+    return {
+        laneType,
+        variableMapping: canaryInputRouteMappingFromRecord(mapping, promptVariables, normalizedExternalIdField),
+        filterRules,
+        externalIdField: normalizedExternalIdField,
+    };
+}
+function inputRouteSignature(input) {
+    return input ? JSON.stringify(input) : null;
+}
+function getInputRouteLane(line, labels, laneType) {
+    if (laneType === 'canary') {
+        const canary = line.canary;
+        if (!canary)
+            return null;
+        return {
+            laneType: 'canary',
+            title: labels.canary,
+            tone: 'canary',
+            canEdit: isAdjustableCanary(canary),
+            eventId: canary.id,
+            updatedAt: canary.updatedAt,
+            variableMapping: canary.variableMapping,
+            filterRules: canary.filterRules,
+            externalIdField: canary.externalIdField,
+            promptVersionSnapshot: line.canaryPromptVersionSnapshot,
+            inputConnectorSnapshot: line.inputConnectorSnapshot,
+        };
+    }
+    const event = line.production?.currentEvent ?? null;
+    if (!event)
+        return null;
+    return {
+        laneType: 'production',
+        title: labels.production,
+        tone: 'production',
+        canEdit: event.status === 'running',
+        eventId: event.id,
+        updatedAt: event.updatedAt,
+        variableMapping: event.variableMapping,
+        filterRules: event.filterRules,
+        externalIdField: event.externalIdField,
+        promptVersionSnapshot: event.promptVersionSnapshot,
+        inputConnectorSnapshot: line.inputConnectorSnapshot,
+    };
+}
+function formatFilterValue(value) {
+    if (value === undefined || value === null)
+        return '';
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return String(value);
+    return JSON.stringify(value);
+}
+function summarizeFilterRules(value, labels, depth = 0) {
+    if (!value)
+        return labels.filterEmpty;
+    if (value.type === 'atom') {
+        const op = labels.filterOp(value.op);
+        if (value.op === 'exists')
+            return `${value.field} ${op}`;
+        const displayValue = formatFilterValue(value.value);
+        return displayValue ? `${value.field} ${op} ${displayValue}` : `${value.field} ${op}`;
+    }
+    if (value.type === 'not') {
+        return `NOT (${summarizeFilterRules(value.child, labels, depth + 1)})`;
+    }
+    const joiner = value.type.toUpperCase();
+    const summary = value.children.map((child) => summarizeFilterRules(child, labels, depth + 1)).join(` ${joiner} `);
+    return depth > 0 && value.children.length > 1 ? `(${summary})` : summary;
+}
+function SimpleFilterRulesView({ value, labels, }) {
+    return (_jsx("div", { className: "rounded-md border bg-muted/35 px-3 py-2 font-mono text-[11.5px] leading-5 text-muted-foreground", children: summarizeFilterRules(value, labels) }));
+}
+function collectLaneInputRouteKeys(lane) {
+    if (!lane)
+        return [];
+    return [
+        lane.externalIdField ?? '',
+        ...Object.values(inputRouteMappingRecord(lane.variableMapping)),
+        ...collectFilterRuleFields(normalizeInputRouteFilterRules(lane.filterRules)),
+    ];
+}
+function getLineInputFieldOptions(line, labels) {
+    return mergeInputFieldOptions(extractInputFieldOptionsFromSnapshot(line.inputConnectorSnapshot), [
+        ...collectLaneInputRouteKeys(getInputRouteLane(line, labels, 'production')),
+        ...collectLaneInputRouteKeys(getInputRouteLane(line, labels, 'canary')),
+    ]);
+}
+function UpstreamInputFields({ line, labels, }) {
+    const fields = getLineInputFieldOptions(line, labels);
+    return (_jsxs("section", { className: "mt-4 rounded-lg border bg-card", children: [_jsx("div", { className: "border-b px-3 py-2 text-[12px] font-semibold", children: labels.inputFields }), fields.length === 0 ? (_jsx("div", { className: "px-3 py-3 text-[12px] text-muted-foreground", children: labels.inputFieldsEmpty })) : (_jsx("div", { className: "max-h-56 overflow-auto p-2", children: _jsx("div", { className: "space-y-1.5", children: fields.map((field) => (_jsxs("div", { className: "rounded-md border bg-background px-2 py-1.5", children: [_jsx("div", { className: "break-all font-mono text-[11.5px] font-semibold", children: field.key }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10.5px] text-muted-foreground", children: [_jsx("span", { children: field.type }), field.description ? _jsx("span", { className: "break-words", children: field.description }) : null] })] }, field.key))) }) }))] }));
+}
+function InputRouteLaneEditor({ lane, labels, pending, onUpdateInputRoute, }) {
+    const initialMapping = inputRouteMappingRecord(lane.variableMapping);
+    const initialExternalIdField = lane.externalIdField ?? initialMapping.id ?? '';
+    const initialFilterRules = normalizeInputRouteFilterRules(lane.filterRules);
+    const [mapping, setMapping] = useState(initialMapping);
+    const [externalIdField, setExternalIdField] = useState(initialExternalIdField);
+    const [filterRules, setFilterRules] = useState(initialFilterRules);
+    const [savedSignature, setSavedSignature] = useState(() => {
+        const promptVariables = extractPromptVariablesFromSnapshot(lane.promptVersionSnapshot, initialMapping);
+        return inputRouteSignature(buildInputRouteUpdate(lane.laneType, initialMapping, initialFilterRules, initialExternalIdField, promptVariables));
+    });
+    const [filterEditorOpen, setFilterEditorOpen] = useState(false);
+    const [error, setError] = useState(null);
+    const token = TONE_STYLES[lane.tone];
+    const promptVariables = useMemo(() => extractPromptVariablesFromSnapshot(lane.promptVersionSnapshot, mapping), [lane.promptVersionSnapshot, mapping]);
+    const fieldOptions = useMemo(() => mergeInputFieldOptions(extractInputFieldOptionsFromSnapshot(lane.inputConnectorSnapshot), [
+        externalIdField,
+        ...Object.values(mapping),
+        ...collectFilterRuleFields(filterRules),
+    ]), [externalIdField, filterRules, lane.inputConnectorSnapshot, mapping]);
+    const nextUpdate = buildInputRouteUpdate(lane.laneType, mapping, filterRules, externalIdField, promptVariables);
+    const nextSignature = inputRouteSignature(nextUpdate);
+    const hasDraft = nextSignature !== savedSignature;
+    const canEdit = lane.canEdit && Boolean(onUpdateInputRoute);
+    const showSave = canEdit && hasDraft;
+    const canSave = showSave && !pending;
+    function setMappingField(target, source) {
+        setMapping((current) => ({ ...current, [target]: source }));
+        setError(null);
+    }
+    function setMappingTarget(target, nextTarget) {
+        setMapping((current) => ({
+            ...current,
+            [target]: current[nextTarget] ?? '',
+            [nextTarget]: current[target] ?? '',
+        }));
+        setError(null);
+    }
+    async function saveInputRoute() {
+        if (!canEdit || pending || !onUpdateInputRoute)
+            return;
+        if (!nextUpdate || !nextSignature) {
+            setError(labels.inputRouteInvalid);
+            return;
+        }
+        if (nextSignature === savedSignature)
+            return;
+        setError(null);
+        try {
+            await onUpdateInputRoute(nextUpdate);
+            setSavedSignature(nextSignature);
+        }
+        catch (saveError) {
+            setError(getApiErrorMessage(saveError) ?? labels.inputRouteSaveFailed);
+        }
+    }
+    return (_jsxs("section", { className: "mt-4 rounded-lg border bg-card", style: { borderColor: token.bd }, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "size-2 rounded-full", style: { background: token.dot } }), _jsx("span", { className: "text-[12px] font-semibold", children: lane.title })] }), showSave ? (_jsxs(Button, { type: "button", size: "sm", onClick: saveInputRoute, disabled: !canSave, className: "h-7 px-2 text-[11.5px]", children: [_jsx(Save, { className: "size-3.5" }), pending ? labels.savePending : labels.save] })) : null] }), _jsxs("div", { className: "space-y-4 p-3", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-2 text-[11px] font-medium text-muted-foreground", children: labels.fieldMapping }), _jsx(FieldMappingTable, { compact: true, fields: fieldOptions, promptVariables: promptVariables, externalIdField: externalIdField, mapping: mapping, readOnly: !canEdit || pending, testIdPrefix: `release-${lane.laneType}-input-route`, onExternalIdFieldChange: (value) => {
+                                    setExternalIdField(value);
+                                    setError(null);
+                                }, onMappingChange: setMappingField, onMappingTargetChange: setMappingTarget })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: labels.filterRules }), canEdit && !pending ? (_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 px-2 text-[11.5px]", onClick: () => setFilterEditorOpen((current) => !current), children: filterEditorOpen ? labels.inputRouteHideFilter : labels.inputRouteEditFilter })) : null] }), canEdit && !pending && filterEditorOpen ? (_jsx(FilterRulesBuilder, { compact: true, value: filterRules, fields: fieldOptions, onChange: (next) => {
+                                    setFilterRules(next);
+                                    setError(null);
+                                } })) : (_jsx(SimpleFilterRulesView, { value: filterRules, labels: labels }))] }), error ? _jsx("p", { className: "text-[12px] text-destructive", children: error }) : null] })] }));
+}
+function IconTooltipButton({ label, icon: Icon, onClick, disabled, variant = 'outline', className, testId, }) {
+    return (_jsx(TooltipProvider, { delayDuration: 140, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "icon", variant: variant, className: cn('size-8', className), onClick: onClick, disabled: disabled, "aria-label": label, "data-testid": testId, children: _jsx(Icon, { className: "size-3.5" }) }) }), _jsx(TooltipContent, { side: "top", children: label })] }) }));
+}
+function CanaryLaneActions({ canary, labels, pending, onAddCanary, onStopCanary, onPromoteCanary, }) {
+    const [activeAction, setActiveAction] = useState(null);
+    const [error, setError] = useState(null);
+    const canPromote = canary?.status === 'running' && Boolean(onPromoteCanary);
+    const canStop = canary?.status === 'running' && Boolean(onStopCanary);
+    const canAddCanary = Boolean(onAddCanary);
+    const busy = pending || activeAction !== null;
+    const addCanaryLabel = canary ? labels.replaceCanary : labels.addCanary;
+    async function runAction(action, handler) {
+        if (!handler || !canary || busy)
+            return;
+        setError(null);
+        setActiveAction(action);
+        try {
+            await handler(canary);
+        }
+        catch (caught) {
+            setError(getApiErrorMessage(caught) ?? labels.canaryActionFailed);
+        }
+        finally {
+            setActiveAction(null);
+        }
+    }
+    if (!canPromote && !canStop && !canAddCanary)
+        return null;
+    return (_jsxs("div", { className: "flex min-w-0 flex-col items-end gap-1", "data-testid": "release-topology-canary-actions", children: [_jsxs("div", { className: "flex flex-wrap justify-end gap-1.5", children: [canPromote ? (_jsx(IconTooltipButton, { label: labels.promoteCanary, icon: Rocket, onClick: () => void runAction('promote', onPromoteCanary), disabled: busy, variant: "default", testId: "release-topology-promote-canary" })) : null, canAddCanary ? (_jsx(IconTooltipButton, { label: addCanaryLabel, icon: Plus, onClick: () => onAddCanary?.(), disabled: busy, variant: "outline", testId: "release-topology-add-canary" })) : null, canStop ? (_jsx(IconTooltipButton, { label: labels.stopCanary, icon: Square, onClick: () => void runAction('stop', onStopCanary), disabled: busy, variant: "outline", className: "text-destructive hover:text-destructive" })) : null] }), error ? _jsx("p", { className: "max-w-full truncate text-[11.5px] text-destructive", children: error }) : null] }));
+}
+function OutputRouteControl({ line, outputConnectors, outputConnectorsLoading, labels, pending, onUpdateOutputRoute, }) {
+    const [open, setOpen] = useState(false);
+    const upstreamFields = useMemo(() => extractInputFieldOptionsFromSnapshot(line.inputConnectorSnapshot), [line.inputConnectorSnapshot]);
+    const laneDrafts = [
+        line.production?.currentEvent
+            ? {
+                key: 'production',
+                title: labels.production,
+                tone: 'production',
+                canEdit: line.production.currentEvent.status === 'running',
+                connectorIds: line.production.currentEvent.outputConnectorIds,
+                outputMapping: line.productionOutputMapping,
+                outputSourceGroups: getOutputSourceGroups(line.production.currentEvent.promptVersionSnapshot, upstreamFields, labels),
+            }
+            : null,
+        line.canary
+            ? {
+                key: 'canary',
+                title: labels.canary,
+                tone: 'canary',
+                canEdit: isAdjustableCanary(line.canary),
+                connectorIds: line.canary.outputConnectorIds,
+                outputMapping: line.canaryOutputMapping,
+                outputSourceGroups: getOutputSourceGroups(line.canaryPromptVersionSnapshot, upstreamFields, labels),
+            }
+            : null,
+    ];
+    const lanes = laneDrafts.filter((lane) => lane !== null);
+    if (lanes.length === 0) {
+        return (_jsx("section", { className: "mt-4 rounded-lg border bg-card p-3 text-[12px] text-muted-foreground", children: labels.outputRouteNoLane }));
+    }
+    return (_jsxs("div", { className: "mt-4", children: [_jsxs(Button, { type: "button", className: "w-full justify-center", onClick: () => setOpen(true), children: [_jsx(Split, { className: "size-4" }), labels.outputRouteEdit] }), open ? (_jsx(OutputRouteDialog, { open: open, onOpenChange: setOpen, lanes: lanes, outputConnectors: outputConnectors, outputConnectorsLoading: outputConnectorsLoading, labels: labels, pending: pending, lineLabel: line.label, onUpdateOutputRoute: onUpdateOutputRoute })) : null] }));
+}
+function OutputRouteDialog({ open, onOpenChange, lanes, outputConnectors, outputConnectorsLoading, labels, pending, lineLabel, onUpdateOutputRoute, }) {
+    const [drafts, setDrafts] = useState(() => Object.fromEntries(lanes.map((lane) => [lane.key, normalizeConnectorOutputRoutes(lane.outputMapping, lane.connectorIds)])));
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const connectorById = useMemo(() => new Map(outputConnectors.map((connector) => [connector.id, connector])), [outputConnectors]);
+    const laneEntries = lanes.map((lane) => {
+        const routes = drafts[lane.key] ?? [];
+        const initialRoutes = normalizeConnectorOutputRoutes(lane.outputMapping, lane.connectorIds);
+        const cleanRoutes = cleanOutputRoutes(routes);
+        const hasDraft = serializeOutputRoutes(cleanRoutes) !== serializeOutputRoutes(initialRoutes);
+        return { lane, routes, cleanRoutes, hasDraft };
+    });
+    const busy = pending || saving;
+    const changedEntries = laneEntries.filter((entry) => entry.hasDraft && entry.lane.canEdit);
+    const hasReadonlyDraft = laneEntries.some((entry) => entry.hasDraft && !entry.lane.canEdit);
+    const canSave = Boolean(onUpdateOutputRoute) && !busy && changedEntries.length > 0 && !hasReadonlyDraft;
+    const productionConnectorCount = drafts.production?.length ?? 0;
+    const canaryConnectorCount = drafts.canary?.length ?? 0;
+    const mappingCount = laneEntries.reduce((total, entry) => total + entry.cleanRoutes.reduce((sum, route) => sum + route.outputMapping.length, 0), 0);
+    function updateLaneRoutes(laneType, updater) {
+        setDrafts((current) => ({ ...current, [laneType]: updater(current[laneType] ?? []) }));
+        setError(null);
+    }
+    async function saveOutputRoutes() {
+        const update = onUpdateOutputRoute;
+        if (!canSave || !update)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            for (const entry of changedEntries) {
+                await update({
+                    laneType: entry.lane.key,
+                    outputConnectorIds: entry.cleanRoutes.map((route) => route.connectorId),
+                    outputMapping: entry.cleanRoutes,
+                });
+            }
+            onOpenChange(false);
+        }
+        catch (caught) {
+            setError(getApiErrorMessage(caught) ?? labels.outputRouteSaveFailed);
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[88vh] max-w-[920px] gap-0 overflow-hidden rounded-[14px] p-0", children: [_jsxs(DialogHeader, { className: "border-b px-5 py-4 pr-12 text-left", children: [_jsx(DialogTitle, { className: "text-[16px]", children: labels.outputRouteDialogTitle }), _jsxs(DialogDescription, { className: "text-[12.5px]", children: [labels.outputRouteTitle, " \u00B7 ", _jsx("span", { className: "font-mono", children: lineLabel }), " \u00B7", ' ', labels.outputRouteDialogDescription] })] }), _jsx("div", { className: "max-h-[calc(88vh-136px)] overflow-y-auto", children: _jsx("div", { className: cn('grid grid-cols-1', lanes.length > 1 && 'lg:grid-cols-2'), children: laneEntries.map((entry, index) => (_jsx(OutputRouteLaneEditor, { lane: entry.lane, routes: entry.routes, canEdit: entry.lane.canEdit && Boolean(onUpdateOutputRoute), connectorById: connectorById, outputConnectors: outputConnectors, outputConnectorsLoading: outputConnectorsLoading, labels: labels, busy: busy, className: index > 0 ? 'lg:border-l' : undefined, onRoutesChange: (updater) => updateLaneRoutes(entry.lane.key, updater) }, entry.lane.key))) }) }), _jsxs("div", { className: "flex flex-col gap-3 border-t bg-muted/40 px-5 py-3 sm:flex-row sm:items-center", children: [_jsx("div", { className: "min-w-0 text-[12px] text-muted-foreground", children: labels.outputRouteFooterSummary(productionConnectorCount, canaryConnectorCount, mappingCount) }), error ? _jsx("div", { className: "text-[12px] text-destructive", children: error }) : null, _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), disabled: busy, children: labels.cancel }), _jsxs(Button, { type: "button", onClick: saveOutputRoutes, disabled: !canSave, children: [_jsx(Save, { className: "size-4" }), busy ? labels.savePending : labels.outputRouteSave] })] })] })] }) }));
+}
+function OutputRouteLaneEditor({ lane, routes, canEdit, connectorById, outputConnectors, outputConnectorsLoading, labels, busy, className, onRoutesChange, }) {
+    const token = TONE_STYLES[lane.tone];
+    const selectedConnectorIds = new Set(routes.map((route) => route.connectorId));
+    const addableConnectors = outputConnectors.filter((connector) => {
+        if (selectedConnectorIds.has(connector.id))
+            return false;
+        return true;
+    });
+    function addConnector(connectorId) {
+        onRoutesChange((current) => current.some((route) => route.connectorId === connectorId)
+            ? current
+            : [...current, { connectorId, outputMapping: [{ source: '', target: '' }] }]);
+    }
+    function removeConnector(connectorId) {
+        onRoutesChange((current) => current.filter((route) => route.connectorId !== connectorId));
+    }
+    function addMapping(connectorId) {
+        onRoutesChange((current) => current.map((route) => route.connectorId === connectorId
+            ? { ...route, outputMapping: [...route.outputMapping, { source: '', target: '' }] }
+            : route));
+    }
+    function setMappingField(connectorId, index, field, value) {
+        onRoutesChange((current) => current.map((route) => route.connectorId === connectorId
+            ? {
+                ...route,
+                outputMapping: route.outputMapping.map((item, itemIndex) => itemIndex === index ? { ...item, [field]: value } : item),
+            }
+            : route));
+    }
+    function removeMapping(connectorId, index) {
+        onRoutesChange((current) => current.map((route) => route.connectorId === connectorId
+            ? { ...route, outputMapping: route.outputMapping.filter((_item, itemIndex) => itemIndex !== index) }
+            : route));
+    }
+    return (_jsxs("section", { className: cn('min-w-0 px-5 py-4', className), children: [_jsxs("div", { className: "mb-2 flex items-baseline gap-2 border-b-2 pb-3", style: { borderColor: token.dot }, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: token.dot } }), _jsx("span", { className: "truncate text-[15px] font-semibold", children: lane.title }), _jsx("span", { className: "font-mono text-[11.5px] text-muted-foreground", children: lane.key })] }), _jsx("span", { className: "ml-auto whitespace-nowrap text-[11.5px] text-muted-foreground", children: labels.outputRouteConnectorCount(routes.length) })] }), !canEdit ? (_jsx("div", { className: "mb-2 text-[11.5px] text-muted-foreground", children: labels.outputRouteLaneReadonly })) : null, _jsx("div", { className: "divide-y divide-dashed", children: routes.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-8 text-center text-[12px] text-muted-foreground", children: labels.outputRouteNoSelectedConnector })) : (routes.map((route) => {
+                    const connector = connectorById.get(route.connectorId);
+                    const connectorName = connector?.name ?? route.connectorId;
+                    const connectorMeta = connector
+                        ? `${connector.type} · ${connector.configSummary || connector.healthStatus}`
+                        : route.connectorId;
+                    return (_jsxs("div", { className: "group py-3 first:pt-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-mono text-[13.5px] font-semibold", title: connectorName, children: connectorName }), _jsx("div", { className: "mt-0.5 truncate font-mono text-[11.5px] text-muted-foreground", title: connectorMeta, children: connectorMeta })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 opacity-0 transition-opacity group-hover:opacity-100", title: labels.outputRouteRemoveConnector, "aria-label": labels.outputRouteRemoveConnector, disabled: !canEdit || busy, onClick: () => removeConnector(route.connectorId), children: _jsx(X, { className: "size-3.5" }) })] }), _jsx("div", { className: "mt-2 space-y-0", children: route.outputMapping.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-2 text-[12px] text-muted-foreground", children: labels.outputRoutePassThrough })) : (route.outputMapping.map((item, index) => (_jsxs("div", { className: "grid grid-cols-[minmax(0,1.18fr)_16px_minmax(0,0.82fr)_24px] items-center gap-1 border-t border-dashed py-1 first:border-t-0", children: [_jsx(OutputSourcePicker, { value: item.source, sourceGroups: lane.outputSourceGroups, labels: labels, disabled: !canEdit || busy, onChange: (value) => setMappingField(route.connectorId, index, 'source', value) }), _jsx("span", { className: "text-center text-[12px] text-muted-foreground", children: "\u2192" }), _jsx("input", { value: item.target, onChange: (event) => setMappingField(route.connectorId, index, 'target', event.target.value), placeholder: labels.outputRouteTarget, disabled: !canEdit || busy, className: "h-8 min-w-0 border-0 border-b border-dashed bg-transparent px-1 font-mono text-[12.5px] outline-none transition-colors placeholder:font-sans placeholder:italic placeholder:text-muted-foreground hover:border-muted-foreground focus:border-primary focus:border-solid disabled:cursor-not-allowed disabled:opacity-60" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-6 opacity-0 transition-opacity hover:text-destructive group-hover:opacity-100", title: labels.removeMapping, "aria-label": labels.removeMapping, disabled: !canEdit || busy, onClick: () => removeMapping(route.connectorId, index), children: _jsx(X, { className: "size-3.5" }) })] }, index)))) }), _jsxs("button", { type: "button", className: "mt-1 inline-flex items-center gap-1 rounded-md px-1 py-1 text-[12px] text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60", disabled: !canEdit || busy, onClick: () => addMapping(route.connectorId), children: [_jsx(Plus, { className: "size-3" }), labels.addMapping] })] }, route.connectorId));
+                })) }), _jsx(OutputConnectorAddPopover, { addableConnectors: addableConnectors, disabled: !canEdit || busy, loading: outputConnectorsLoading, labels: labels, onAdd: addConnector })] }));
+}
+function OutputConnectorAddPopover({ addableConnectors, disabled, loading, labels, onAdd, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled || loading, className: "mt-3 flex h-10 w-full items-center justify-center gap-1.5 rounded-md border border-dashed bg-transparent text-[12.5px] font-medium text-muted-foreground transition-colors hover:border-ring hover:bg-muted/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx(Plus, { className: "size-3.5" }), loading ? labels.loading : labels.outputRouteAddConnector] }) }), _jsxs(PopoverContent, { align: "center", sideOffset: 6, className: "w-[300px] p-1", onWheelCapture: (event) => event.stopPropagation(), onTouchMoveCapture: (event) => event.stopPropagation(), children: [_jsx("div", { className: "px-2 py-1.5 text-[11px] font-semibold text-muted-foreground", children: labels.outputRouteConnectorPickerTitle }), addableConnectors.length === 0 ? (_jsx("div", { className: "px-2 py-4 text-center text-[12px] text-muted-foreground", children: labels.outputRouteNoMoreConnectors })) : (_jsx("div", { className: "max-h-[280px] overflow-auto overscroll-contain", onWheelCapture: (event) => event.stopPropagation(), onTouchMoveCapture: (event) => event.stopPropagation(), children: addableConnectors.map((connector) => (_jsx("button", { type: "button", className: "flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted", onClick: () => {
+                                onAdd(connector.id);
+                                setOpen(false);
+                            }, children: _jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-[12.5px]", children: connector.name }) }, connector.id))) }))] })] }));
+}
+function OutputSourcePicker({ value, sourceGroups, labels, disabled, onChange, }) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const groups = sourceGroupsForValue(value, sourceGroups, labels);
+    const visibleGroups = filterOutputSourceGroups(groups, query);
+    const groupKey = outputSourceGroupKeyForValue(value, groups);
+    return (_jsxs(Popover, { open: open, onOpenChange: (nextOpen) => {
+            setOpen(nextOpen);
+            if (!nextOpen)
+                setQuery('');
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled, className: cn('flex h-8 min-w-0 items-center gap-1.5 rounded-md border border-transparent px-1.5 font-mono text-[12.5px] transition-colors hover:bg-muted focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-60', !value && 'font-sans italic text-muted-foreground', groupKey === 'upstream' && 'text-[var(--status-running-fg)]'), children: [groupKey ? (_jsx("span", { className: cn('size-1.5 shrink-0 rounded-[2px]', outputSourceGroupDotClass(groupKey)) })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: value || labels.outputRouteSourcePlaceholder }), _jsx(ChevronDown, { className: cn('size-3 shrink-0 text-muted-foreground opacity-0', open && 'opacity-100') })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-[300px] p-0", onWheelCapture: (event) => event.stopPropagation(), onTouchMoveCapture: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-2 py-1.5", children: [_jsx(Search, { className: "size-3.5 text-muted-foreground" }), _jsx("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: labels.outputRouteSourceSearch, className: "h-7 min-w-0 flex-1 bg-transparent text-[12.5px] outline-none placeholder:text-muted-foreground" })] }), _jsx("div", { className: "max-h-[300px] overflow-auto overscroll-contain p-1", onWheelCapture: (event) => event.stopPropagation(), onTouchMoveCapture: (event) => event.stopPropagation(), children: visibleGroups.length === 0 ? (_jsx("div", { className: "px-2 py-4 text-center text-[12px] text-muted-foreground", children: labels.outputRouteSourceEmpty })) : (visibleGroups.map((group, groupIndex) => (_jsxs("div", { className: cn(groupIndex > 0 && 'border-t pt-1'), children: [_jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5 text-[11px] font-semibold text-muted-foreground", children: [_jsx("span", { className: cn('size-1.5 rounded-[2px]', outputSourceGroupDotClass(group.key)) }), _jsx("span", { children: group.label }), group.badge ? (_jsx("span", { className: "ml-auto rounded border border-[var(--status-running-bd)] bg-[var(--status-running-bg)] px-1.5 py-0.5 font-mono text-[9.5px] font-semibold text-[var(--status-running-fg)]", children: group.badge })) : null] }), group.options.map((option) => (_jsxs("button", { type: "button", className: cn('flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left font-mono text-[12.5px] transition-colors hover:bg-muted', option.value === value && 'bg-primary/5'), onClick: () => {
+                                        onChange(option.value);
+                                        setOpen(false);
+                                    }, children: [_jsx(Check, { className: cn('mt-0.5 size-3 shrink-0 text-primary opacity-0', option.value === value && 'opacity-100') }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.value })] }, option.value)))] }, group.key)))) })] })] }));
+}
+function sourceGroupsForValue(value, sourceGroups, labels) {
+    if (!value || sourceGroups.some((group) => group.options.some((option) => option.value === value))) {
+        return sourceGroups;
+    }
+    return [
+        {
+            key: 'legacy',
+            label: labels.outputRouteSourceLegacy,
+            options: [{ value, label: value, description: labels.outputRouteSourceLegacy }],
+        },
+        ...sourceGroups,
+    ];
+}
+function filterOutputSourceGroups(sourceGroups, query) {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized)
+        return sourceGroups;
+    return sourceGroups
+        .map((group) => ({
+        ...group,
+        options: group.options.filter((option) => [option.value, option.label, option.description].join(' ').toLowerCase().includes(normalized)),
+    }))
+        .filter((group) => group.options.length > 0);
+}
+function outputSourceGroupKeyForValue(value, sourceGroups) {
+    if (!value)
+        return null;
+    return sourceGroups.find((group) => group.options.some((option) => option.value === value))?.key ?? null;
+}
+function outputSourceGroupDotClass(groupKey) {
+    switch (groupKey) {
+        case 'upstream':
+            return 'bg-[var(--status-running-dot)]';
+        case 'model':
+            return 'bg-primary';
+        case 'meta':
+            return 'bg-[var(--status-canary-dot)]';
+        case 'legacy':
+            return 'bg-muted-foreground';
+    }
+}
 function TrafficRatioControl({ line, labels, onUpdateTrafficRatio, pending, }) {
     const canary = line.canary;
+    const isDualRun = canary?.trafficMode === 'dual_run';
     const maxTrafficPercent = 100;
     const currentPercent = canary ? Math.round(canary.trafficRatio * 100) : 0;
     const [trafficPercent, setTrafficPercent] = useState(canary ? trafficPercentFromRatio(canary.trafficRatio) : '');
@@ -523,13 +1218,16 @@ function TrafficRatioControl({ line, labels, onUpdateTrafficRatio, pending, }) {
         setTrafficPercent(parsed === null ? '' : String(100 - parsed));
         setTrafficError(null);
     }
-    return (_jsxs("section", { className: "mt-4 rounded-lg border bg-card", children: [_jsx("div", { className: "border-b px-3 py-2 text-[12px] font-semibold", children: labels.trafficBox }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "rounded-md border bg-muted/40 px-3 py-2", children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground", children: labels.productionTrafficLabel }), _jsxs("label", { className: "mt-1 flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, max: 100, value: productionPercent, onChange: (event) => setProductionPercentText(event.target.value), onKeyDown: (event) => {
+    return (_jsxs("section", { className: "mt-4 rounded-lg border bg-card", children: [_jsx("div", { className: "border-b px-3 py-2 text-[12px] font-semibold", children: labels.trafficBox }), _jsxs("div", { className: "space-y-3 p-3", children: [isDualRun ? (_jsxs("div", { className: "rounded-md border bg-muted/40 px-3 py-2", children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground", children: labels.canaryTrafficLabel }), _jsxs("label", { className: "mt-1 flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, max: 100, value: trafficPercent, onChange: (event) => setCanaryPercentText(event.target.value), onKeyDown: (event) => {
+                                            if (event.key === 'Enter')
+                                                void saveTrafficRatio();
+                                        }, disabled: !canEditTraffic || isSavingTraffic, "aria-label": labels.canaryTrafficLabel, className: "h-8 font-mono text-xs" }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: "%" })] })] })) : (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "rounded-md border bg-muted/40 px-3 py-2", children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground", children: labels.productionTrafficLabel }), _jsxs("label", { className: "mt-1 flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, max: 100, value: productionPercent, onChange: (event) => setProductionPercentText(event.target.value), onKeyDown: (event) => {
                                                     if (event.key === 'Enter')
                                                         void saveTrafficRatio();
                                                 }, disabled: !canEditTraffic || isSavingTraffic, "aria-label": labels.productionTrafficLabel, className: "h-8 font-mono text-xs" }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: "%" })] })] }), _jsxs("div", { className: "rounded-md border bg-muted/40 px-3 py-2", children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground", children: labels.canaryTrafficLabel }), _jsxs("label", { className: "mt-1 flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, max: 100, value: trafficPercent, onChange: (event) => setCanaryPercentText(event.target.value), onKeyDown: (event) => {
                                                     if (event.key === 'Enter')
                                                         void saveTrafficRatio();
-                                                }, disabled: !canEditTraffic || isSavingTraffic, "aria-label": labels.canaryTrafficLabel, className: "h-8 font-mono text-xs" }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: "%" })] })] })] }), canary ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "range", min: 0, max: maxTrafficPercent, step: 1, value: parsedTrafficPercent ?? currentPercent, "aria-label": labels.trafficPercentAriaLabel, onChange: (event) => setCanaryPercentText(event.target.value), disabled: !canEditTraffic || isSavingTraffic, className: "w-full accent-primary disabled:opacity-50" }), _jsxs("div", { className: "flex items-center justify-between font-mono text-[11px] text-muted-foreground", children: [_jsxs("span", { children: [labels.productionTrafficLabel, " 100%"] }), _jsxs("span", { children: [labels.canaryTrafficLabel, " 100%"] })] }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", size: "sm", onClick: saveTrafficRatio, disabled: !canSaveTraffic, children: [_jsx(Save, { className: "size-3.5" }), isSavingTraffic ? labels.savePending : labels.save] }) })] })) : (_jsx("div", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-2 text-[12px] text-muted-foreground", children: labels.noCanaryToAdjust })), trafficError ? _jsx("p", { className: "text-[12px] text-destructive", children: trafficError }) : null] })] }));
+                                                }, disabled: !canEditTraffic || isSavingTraffic, "aria-label": labels.canaryTrafficLabel, className: "h-8 font-mono text-xs" }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: "%" })] })] })] })), canary ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "range", min: 0, max: maxTrafficPercent, step: 1, value: parsedTrafficPercent ?? currentPercent, "aria-label": labels.trafficPercentAriaLabel, onChange: (event) => setCanaryPercentText(event.target.value), disabled: !canEditTraffic || isSavingTraffic, className: "w-full accent-primary disabled:opacity-50" }), _jsx("div", { className: "flex items-center justify-between font-mono text-[11px] text-muted-foreground", children: isDualRun ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "0%" }), _jsxs("span", { children: [labels.canaryTrafficLabel, " 100%"] })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { children: [labels.productionTrafficLabel, " 100%"] }), _jsxs("span", { children: [labels.canaryTrafficLabel, " 100%"] })] })) }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", size: "sm", onClick: saveTrafficRatio, disabled: !canSaveTraffic, children: [_jsx(Save, { className: "size-3.5" }), isSavingTraffic ? labels.savePending : labels.save] }) })] })) : (_jsx("div", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-2 text-[12px] text-muted-foreground", children: labels.noCanaryToAdjust })), trafficError ? _jsx("p", { className: "text-[12px] text-destructive", children: trafficError }) : null] })] }));
 }
 function numberText(value) {
     return typeof value === 'number' && Number.isFinite(value) ? String(value) : '';
@@ -542,6 +1240,7 @@ function runConfigDraftFromRecord(config, modelId) {
         tpmLimit: numberText(record.tpmLimit),
         concurrency: numberText(record.concurrency),
         temperature: numberText(record.temperature) || '0.3',
+        stopConditions: readCanaryStopConditions(record.stopConditions),
     };
 }
 function parsePositiveInteger(value) {
@@ -552,7 +1251,7 @@ function parseTemperature(value) {
     const parsed = Number(value);
     return Number.isFinite(parsed) && parsed >= 0 && parsed <= 2 ? parsed : null;
 }
-function buildRunConfigUpdate(laneType, draft) {
+function buildRunConfigUpdate(laneType, draft, recordMode, recordCategories) {
     const rpmLimit = parsePositiveInteger(draft.rpmLimit);
     const tpmLimit = parsePositiveInteger(draft.tpmLimit);
     const concurrency = parsePositiveInteger(draft.concurrency);
@@ -561,19 +1260,41 @@ function buildRunConfigUpdate(laneType, draft) {
     const temperature = parseTemperature(draft.temperature);
     if (temperature === null)
         return null;
+    const baseRunConfig = {
+        rpmLimit,
+        tpmLimit,
+        concurrency,
+        temperature,
+    };
+    if (laneType === 'canary') {
+        return {
+            laneType,
+            modelId: draft.modelId || undefined,
+            recordMode,
+            recordCategories,
+            runConfig: {
+                ...baseRunConfig,
+                ...(draft.stopConditions ? { stopConditions: draft.stopConditions } : {}),
+            },
+        };
+    }
     return {
         laneType,
         modelId: draft.modelId || undefined,
-        runConfig: {
-            rpmLimit,
-            tpmLimit,
-            concurrency,
-            temperature,
-        },
+        recordMode,
+        recordCategories,
+        runConfig: baseRunConfig,
     };
 }
 function runConfigSignature(input) {
-    return input ? JSON.stringify({ modelId: input.modelId ?? null, runConfig: input.runConfig }) : null;
+    return input
+        ? JSON.stringify({
+            modelId: input.modelId ?? null,
+            recordMode: input.recordMode ?? null,
+            recordCategories: input.recordCategories ?? null,
+            runConfig: input.runConfig,
+        })
+        : null;
 }
 function modelOptionFromProjectModel(model) {
     return {
@@ -613,16 +1334,17 @@ function formatModelLimitValue(value, labels) {
 function modelOptionLabel(option) {
     return [option.name, option.providerModelId].filter(Boolean).join(' · ');
 }
-function RuntimeConfigEditor({ laneType, config, currentModelId, currentModelName, models, modelsLoading, labels, canEdit, pending, onUpdateRunConfig, }) {
+function RuntimeConfigEditor({ laneType, config, currentModelId, currentModelName, recordMode, models, modelsLoading, labels, canEdit, pending, onUpdateRunConfig, hideModel = false, className, }) {
     const modelOptions = useMemo(() => buildRuntimeModelOptions(models, currentModelId, currentModelName), [currentModelId, currentModelName, models]);
     const [draft, setDraft] = useState(() => runConfigDraftFromRecord(config, currentModelId));
     const [error, setError] = useState(null);
-    const initialSignature = runConfigSignature(buildRunConfigUpdate(laneType, runConfigDraftFromRecord(config, currentModelId)));
+    const initialSignature = runConfigSignature(buildRunConfigUpdate(laneType, runConfigDraftFromRecord(config, currentModelId), recordMode));
     const [savedSignature, setSavedSignature] = useState(initialSignature);
-    const nextUpdate = buildRunConfigUpdate(laneType, draft);
+    const nextUpdate = buildRunConfigUpdate(laneType, draft, recordMode);
     const nextSignature = runConfigSignature(nextUpdate);
-    const isChanged = nextSignature !== null && nextSignature !== savedSignature;
-    const canSubmit = canEdit && Boolean(onUpdateRunConfig) && !pending && (isChanged || nextUpdate === null);
+    const hasDraftChange = nextSignature !== savedSignature;
+    const showSave = canEdit && Boolean(onUpdateRunConfig) && hasDraftChange;
+    const canSubmit = showSave && !pending;
     const selectedModel = modelOptions.find((model) => model.id === draft.modelId) ?? null;
     const rpmModelLimit = selectedModel ? labels.modelLimit(formatModelLimitValue(selectedModel.rpmLimit, labels)) : '—';
     const tpmModelLimit = selectedModel ? labels.modelLimit(formatModelLimitValue(selectedModel.tpmLimit, labels)) : '—';
@@ -648,14 +1370,125 @@ function RuntimeConfigEditor({ laneType, config, currentModelId, currentModelNam
             setError(getApiErrorMessage(saveError) ?? labels.runConfigUpdateFailed);
         }
     }
-    return (_jsxs("section", { className: "mt-4 rounded-lg border bg-card", children: [_jsx("div", { className: "border-b px-3 py-2 text-[12px] font-semibold", children: labels.runConfigTitle }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsxs("div", { className: "rounded-md border bg-muted/40 px-3 py-2", children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground", children: labels.model }), _jsxs(Select, { value: draft.modelId, onValueChange: (value) => setField('modelId', value), disabled: !canEdit || pending || modelOptions.length === 0, children: [_jsx(SelectTrigger, { className: "mt-1 h-8 bg-background text-xs", "aria-label": labels.model, children: _jsx(SelectValue, { placeholder: modelsLoading ? labels.loading : labels.runConfigModelUnavailable }) }), _jsx(SelectContent, { children: modelOptions.map((option) => (_jsx(SelectItem, { value: option.id, children: modelOptionLabel(option) }, option.id))) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(RuntimeNumberField, { label: labels.rpmLimit, hint: rpmModelLimit, value: draft.rpmLimit, min: 1, step: 1, disabled: !canEdit || pending, onChange: (value) => setField('rpmLimit', value), onCommit: saveRunConfig }), _jsx(RuntimeNumberField, { label: labels.tpmLimit, hint: tpmModelLimit, value: draft.tpmLimit, min: 1, step: 1, disabled: !canEdit || pending, onChange: (value) => setField('tpmLimit', value), onCommit: saveRunConfig }), _jsx(RuntimeNumberField, { label: labels.concurrency, value: draft.concurrency, min: 1, step: 1, disabled: !canEdit || pending, onChange: (value) => setField('concurrency', value), onCommit: saveRunConfig }), _jsx(RuntimeNumberField, { label: labels.temperature, value: draft.temperature, min: 0, max: 2, step: 0.1, disabled: !canEdit || pending, onChange: (value) => setField('temperature', value), onCommit: saveRunConfig })] }), error ? _jsx("p", { className: "text-[12px] text-destructive", children: error }) : null, _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", size: "sm", onClick: saveRunConfig, disabled: !canSubmit, children: [_jsx(Save, { className: "size-3.5" }), pending ? labels.savePending : labels.save] }) })] })] }));
+    return (_jsxs("section", { className: cn('rounded-lg border bg-card', className), children: [_jsxs("div", { className: "flex min-h-10 items-center justify-between gap-2 border-b px-3 py-2", children: [_jsx("div", { className: "text-[12px] font-semibold", children: labels.runConfigTitle }), showSave ? (_jsxs(Button, { type: "button", size: "sm", className: "h-7 px-2 text-[11.5px]", onClick: saveRunConfig, disabled: !canSubmit, children: [_jsx(Save, { className: "size-3.5" }), pending ? labels.savePending : labels.save] })) : null] }), _jsxs("div", { className: "space-y-3 p-3", children: [hideModel ? null : (_jsxs("div", { className: "rounded-md border bg-muted/40 px-3 py-2", children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground", children: labels.model }), _jsxs(Select, { value: draft.modelId, onValueChange: (value) => setField('modelId', value), disabled: !canEdit || pending || modelOptions.length === 0, children: [_jsx(SelectTrigger, { className: "mt-1 h-8 bg-background text-xs", "aria-label": labels.model, children: _jsx(SelectValue, { placeholder: modelsLoading ? labels.loading : labels.runConfigModelUnavailable }) }), _jsx(SelectContent, { children: modelOptions.map((option) => (_jsx(SelectItem, { value: option.id, children: modelOptionLabel(option) }, option.id))) })] })] })), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(RuntimeNumberField, { label: labels.tpmLimit, hint: tpmModelLimit, value: draft.tpmLimit, min: 1, step: 1, disabled: !canEdit || pending, onChange: (value) => setField('tpmLimit', value), onCommit: saveRunConfig }), _jsx(RuntimeNumberField, { label: labels.rpmLimit, hint: rpmModelLimit, value: draft.rpmLimit, min: 1, step: 1, disabled: !canEdit || pending, onChange: (value) => setField('rpmLimit', value), onCommit: saveRunConfig }), _jsx(RuntimeNumberField, { label: labels.concurrency, value: draft.concurrency, min: 1, step: 1, disabled: !canEdit || pending, onChange: (value) => setField('concurrency', value), onCommit: saveRunConfig }), _jsx(RuntimeNumberField, { label: labels.temperature, value: draft.temperature, min: 0, max: 2, step: 0.1, disabled: !canEdit || pending, onChange: (value) => setField('temperature', value), onCommit: saveRunConfig })] }), error ? _jsx("p", { className: "text-[12px] text-destructive", children: error }) : null] })] }));
 }
 function RuntimeNumberField({ label, hint, value, min, max, step, disabled, onChange, onCommit, }) {
-    return (_jsxs("label", { className: "rounded-md border bg-muted/40 px-3 py-2", children: [_jsxs("span", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: label }), hint ? _jsx("span", { className: "truncate text-right text-[10.5px] text-muted-foreground", children: hint }) : null] }), _jsx(Input, { type: "number", min: min, max: max, step: step, value: value, onChange: (event) => onChange(event.target.value), onBlur: onCommit, onKeyDown: (event) => {
+    return (_jsxs("label", { className: "rounded-md border bg-muted/40 px-3 py-2", children: [_jsxs("span", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: label }), hint ? _jsx("span", { className: "truncate text-right text-[10.5px] text-muted-foreground", children: hint }) : null] }), _jsx(Input, { type: "number", min: min, max: max, step: step, value: value, onChange: (event) => onChange(event.target.value), onKeyDown: (event) => {
                     if (event.key === 'Enter')
                         onCommit();
                 }, disabled: disabled, "aria-label": label, className: "mt-1 h-8 font-mono text-xs" })] }));
 }
+function resourceDetailHref(resource, id, versionId) {
+    if (!id)
+        return null;
+    const encodedId = encodeURIComponent(id);
+    if (resource === 'model')
+        return `/models/${encodedId}/edit`;
+    const query = versionId ? `?version=${encodeURIComponent(versionId)}` : '';
+    return `/prompts/${encodedId}${query}`;
+}
+function LinkedInspectorValue({ href, value }) {
+    const display = toDisplayValue(value);
+    if (!href || !value) {
+        return (_jsx("span", { className: "block truncate", title: display, children: display }));
+    }
+    return (_jsx(Link, { href: href, className: "block truncate text-primary underline-offset-2 hover:underline", title: display, children: display }));
+}
+function editableRecordMode(mode) {
+    return mode === 'correct_only' ? 'selected_categories' : mode;
+}
+function normalizeRecordCategories(categories, options) {
+    const allowed = new Set(options);
+    const seen = new Set();
+    const normalized = [];
+    for (const category of categories) {
+        const trimmed = category.trim();
+        if (!trimmed || seen.has(trimmed))
+            continue;
+        if (allowed.size > 0 && !allowed.has(trimmed))
+            continue;
+        seen.add(trimmed);
+        normalized.push(trimmed);
+    }
+    return normalized;
+}
+function recordSettingsSignature(mode, categories) {
+    return JSON.stringify({
+        mode: editableRecordMode(mode),
+        categories: editableRecordMode(mode) === 'selected_categories' ? [...categories].sort() : [],
+    });
+}
+function recordCategoriesDraftFromState(mode, categories, options) {
+    if (options.length === 0)
+        return [];
+    const normalized = normalizeRecordCategories(categories, options);
+    return editableRecordMode(mode) === 'selected_categories' && normalized.length > 0 ? normalized : options;
+}
+function recordModeFromDraftCategories(categories, options) {
+    if (options.length === 0 || categories.length === options.length)
+        return 'all';
+    return 'selected_categories';
+}
+function recordCategoryOptionsFromSnapshot(snapshot, savedCategories) {
+    const outputSchema = snapshot['outputSchema'] ?? null;
+    const derived = deriveClassificationOptionsFromPromptOutputSchema(outputSchema);
+    return Array.from(new Set([...derived, ...savedCategories].map((category) => category.trim()).filter(Boolean)));
+}
+function RecordCategorySelector({ value, options, disabled, labels, onChange, }) {
+    const allSelected = options.length > 0 && options.every((option) => value.includes(option));
+    if (options.length === 0) {
+        return (_jsx("div", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-2 text-[12px] text-muted-foreground", children: labels.recordCategoriesEmpty }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex min-h-7 items-center justify-between gap-2", children: [_jsx("span", { className: "text-[11.5px] text-muted-foreground", children: labels.recordCategoriesSelected(value.length) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 px-2 text-[11.5px]", disabled: disabled, onClick: () => onChange(allSelected ? [] : options), children: allSelected ? labels.recordCategoriesClear : labels.recordCategoriesSelectAll })] }), _jsx("div", { className: "flex flex-wrap gap-1.5 rounded-md border bg-muted/30 p-2", children: options.map((option) => {
+                    const selected = value.includes(option);
+                    return (_jsxs("button", { type: "button", disabled: disabled, "aria-pressed": selected, onClick: () => onChange(selected ? value.filter((item) => item !== option) : [...value, option]), className: cn('inline-flex h-7 min-w-0 items-center gap-1 rounded-full border px-2.5 text-[11.5px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60', selected
+                            ? 'border-primary bg-primary text-primary-foreground'
+                            : 'border-border bg-background text-muted-foreground hover:bg-muted'), children: [selected ? _jsx(Check, { className: "size-3", strokeWidth: 3 }) : null, _jsx("span", { className: "max-w-[140px] truncate", children: option })] }, option));
+                }) })] }));
+}
+function RecordModeMetadataCard({ laneType, config, modelId, recordMode, recordCategories, promptVersionSnapshot, createdAt, updatedAt, labels, formatDateTimeOrDash, canEdit, pending, onUpdateRunConfig, }) {
+    const recordCategoryOptions = useMemo(() => recordCategoryOptionsFromSnapshot(promptVersionSnapshot, recordCategories), [promptVersionSnapshot, recordCategories]);
+    const initialCategories = recordCategoriesDraftFromState(recordMode, recordCategories, recordCategoryOptions);
+    const [draftRecordCategories, setDraftRecordCategories] = useState(initialCategories);
+    const initialMode = recordModeFromDraftCategories(initialCategories, recordCategoryOptions);
+    const initialRecordCategories = initialMode === 'selected_categories' ? initialCategories : [];
+    const [savedSignature, setSavedSignature] = useState(recordSettingsSignature(initialMode, initialRecordCategories));
+    const [error, setError] = useState(null);
+    const normalizedDraftCategories = normalizeRecordCategories(draftRecordCategories, recordCategoryOptions);
+    const draftRecordMode = recordModeFromDraftCategories(normalizedDraftCategories, recordCategoryOptions);
+    const draftRecordCategoriesForSave = draftRecordMode === 'selected_categories' ? normalizedDraftCategories : [];
+    const nextUpdate = buildRunConfigUpdate(laneType, runConfigDraftFromRecord(config, modelId), draftRecordMode, draftRecordCategoriesForSave);
+    const nextSignature = recordSettingsSignature(draftRecordMode, draftRecordCategoriesForSave);
+    const hasRecordModeDraft = nextSignature !== savedSignature;
+    const showSave = canEdit && Boolean(onUpdateRunConfig) && hasRecordModeDraft;
+    const canSubmit = showSave && !pending;
+    async function saveRecordMode() {
+        if (!canEdit || !onUpdateRunConfig || pending || !hasRecordModeDraft)
+            return;
+        if (!nextUpdate) {
+            setError(labels.runConfigInvalid);
+            return;
+        }
+        setError(null);
+        try {
+            await onUpdateRunConfig(nextUpdate);
+            setSavedSignature(nextSignature);
+        }
+        catch (saveError) {
+            setError(getApiErrorMessage(saveError) ?? labels.runConfigUpdateFailed);
+        }
+    }
+    return (_jsxs("section", { className: "rounded-lg border bg-card", children: [_jsxs("div", { className: "flex min-h-10 items-center justify-between gap-2 border-b px-3 py-2", children: [_jsx("div", { className: "text-[12px] font-semibold", children: labels.recordModeTitle }), showSave ? (_jsxs(Button, { type: "button", size: "sm", className: "h-7 px-2 text-[11.5px]", onClick: saveRecordMode, disabled: !canSubmit, children: [_jsx(Save, { className: "size-3.5" }), pending ? labels.savePending : labels.save] })) : null] }), _jsxs("div", { className: "space-y-2 p-3", children: [_jsxs("div", { className: "grid grid-cols-[112px_minmax(0,1fr)] gap-2 text-[12px]", children: [_jsx("span", { className: "pt-1.5 text-muted-foreground", children: labels.recordCategories }), _jsx(RecordCategorySelector, { value: normalizedDraftCategories, options: recordCategoryOptions, disabled: !canEdit || pending, labels: labels, onChange: (next) => {
+                                    setDraftRecordCategories(next);
+                                    setError(null);
+                                } })] }), _jsx(InspectorRowView, { row: { label: labels.createdAt, value: formatDateTimeOrDash(createdAt) } }), _jsx(InspectorRowView, { row: { label: labels.updatedAt, value: formatDateTimeOrDash(updatedAt) } }), error ? _jsx("p", { className: "text-[12px] text-destructive", children: error }) : null] })] }));
+}
+function formatPromptNameWithVersion(promptName, versionLabel) {
+    return [promptName, versionLabel].filter((part) => Boolean(part)).join(' - ');
+}
+function ReleaseLaneDetailCards({ tone, labels, identityRows, runtimeEditor, metadataCard, routeEditor, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-4 space-y-3", children: [_jsx(InspectorRowsCard, { rows: identityRows, tone: tone, title: labels.laneIdentityTitle }), runtimeEditor, metadataCard] }), routeEditor] }));
+}
 function getOutputConnector(line, nodeId) {
     if (!nodeId.startsWith('output-'))
         return null;
@@ -670,7 +1503,7 @@ function getOutputScope(line, connectorId, labels) {
     return ([inProduction ? labels.productionScope : null, inCanary ? labels.canaryScope : null].filter(Boolean).join(' + ') ||
         null);
 }
-function buildInspectorDetail({ line, selectedNodeId, labels, formatDateTimeOrDash, onUpdateTrafficRatio, trafficRatioPending, onUpdateRunConfig, runConfigPending, models, modelsLoading, onAddCanary, }) {
+function buildInspectorDetail({ line, selectedNodeId, labels, formatDateTimeOrDash, onUpdateTrafficRatio, trafficRatioPending, onUpdateRunConfig, runConfigPending, onUpdateOutputRoute, outputRoutePending, onUpdateInputRoute, inputRoutePending, models, modelsLoading, outputConnectors, outputConnectorsLoading, onAddCanary, onStopCanary, onPromoteCanary, canaryActionPending, }) {
     if (selectedNodeId === 'upstream') {
         return {
             icon: 'upstream',
@@ -684,6 +1517,7 @@ function buildInspectorDetail({ line, selectedNodeId, labels, formatDateTimeOrDa
                 { label: labels.direction, value: labels.inputDirection, mono: false },
                 { label: labels.prompt, value: line.promptName },
             ],
+            content: _jsx(UpstreamInputFields, { line: line, labels: labels }),
         };
     }
     if (selectedNodeId === 'input-route') {
@@ -693,94 +1527,79 @@ function buildInspectorDetail({ line, selectedNodeId, labels, formatDateTimeOrDa
             tone: 'neutral',
             rows: [],
             hideSummary: true,
-            content: (_jsx(TrafficRatioControl, { line: line, labels: labels, onUpdateTrafficRatio: onUpdateTrafficRatio, pending: trafficRatioPending }, `${line.canary?.id ?? 'no-canary'}:${line.canary?.trafficRatio ?? 0}`)),
-            blocks: [
-                {
-                    title: labels.fieldMapping,
-                    body: getVariableMappingBody(line, labels.fieldMappingEmpty),
-                },
-                {
-                    title: labels.filterRules,
-                    body: getFilterRulesBody(line, labels),
-                },
-            ],
+            content: (_jsx(_Fragment, { children: _jsx(TrafficRatioControl, { line: line, labels: labels, onUpdateTrafficRatio: onUpdateTrafficRatio, pending: trafficRatioPending }, `${line.canary?.id ?? 'no-canary'}:${line.canary?.trafficRatio ?? 0}`) })),
         };
     }
     if (selectedNodeId === 'output-route') {
         return {
             icon: 'router',
             label: labels.outputRoute,
-            title: labels.outputRouteTitle,
-            subtitle: labels.outputMapping,
             tone: 'neutral',
-            rows: [
-                {
-                    label: labels.outputScope,
-                    value: line.outputConnectors.map((connector) => connector.name).join(', ') || null,
-                },
-                {
-                    label: labels.productionScope,
-                    value: line.production?.outputConnectors?.length ? String(line.production.outputConnectors.length) : '0',
-                },
-                {
-                    label: labels.canaryScope,
-                    value: line.canary?.outputConnectors.length ? String(line.canary.outputConnectors.length) : '0',
-                },
-            ],
-            blocks: [
-                {
-                    title: labels.outputMapping,
-                    body: getOutputMappingBody(line, labels),
-                },
-            ],
+            rows: [],
+            hideSummary: true,
+            content: (_jsxs(_Fragment, { children: [_jsx(OutputRouteSummaryCards, { line: line, outputConnectors: outputConnectors, labels: labels }), _jsx(OutputRouteControl, { line: line, outputConnectors: outputConnectors, outputConnectorsLoading: outputConnectorsLoading, labels: labels, pending: outputRoutePending, onUpdateOutputRoute: onUpdateOutputRoute }, `${line.production?.currentEvent?.id ?? 'no-production'}:${line.canary?.id ?? 'no-canary'}`)] })),
         };
     }
     if (selectedNodeId === 'production') {
         const event = line.production?.currentEvent ?? null;
+        const inputRouteLane = getInputRouteLane(line, labels, 'production');
+        const productionCanEditConfig = event?.status === 'running';
+        const routeEditor = inputRouteLane ? (_jsx(InputRouteLaneEditor, { lane: inputRouteLane, labels: labels, pending: inputRoutePending, onUpdateInputRoute: onUpdateInputRoute }, `input-route:${inputRouteLane.laneType}:${inputRouteLane.eventId}:${inputRouteLane.updatedAt ?? ''}`)) : undefined;
         return {
             icon: 'production',
             label: labels.production,
             title: line.productionVersionLabel ?? labels.noProduction,
             subtitle: line.productionModelName ?? labels.noModel,
             tone: event ? 'production' : 'muted',
-            rows: [
-                { label: labels.prompt, value: line.promptName },
-                { label: labels.promptVersion, value: line.productionVersionLabel },
-                { label: labels.model, value: line.productionModelName },
-                { label: labels.eventId, value: event?.id },
-                { label: labels.status, value: event?.status ?? line.production?.aggregateStatus },
-                { label: labels.externalId, value: event?.externalIdField },
-                { label: labels.recordMode, value: event?.recordMode },
-                { label: labels.startedAt, value: formatDateTimeOrDash(event?.startedAt) },
-                { label: labels.updatedAt, value: formatDateTimeOrDash(event?.updatedAt) },
-            ],
-            runtimeEditor: event ? (_jsx(RuntimeConfigEditor, { laneType: "production", config: event.runConfig, currentModelId: event.modelId, currentModelName: line.productionModelName, models: models, modelsLoading: modelsLoading, labels: labels, canEdit: event.status === 'running', pending: runConfigPending, onUpdateRunConfig: onUpdateRunConfig }, `production:${event.id}:${event.updatedAt}`)) : undefined,
+            rows: [],
+            hideSummary: true,
+            content: event ? (_jsx(ReleaseLaneDetailCards, { tone: "production", labels: labels, identityRows: [
+                    {
+                        label: labels.model,
+                        valueNode: (_jsx(LinkedInspectorValue, { href: resourceDetailHref('model', event.modelId), value: line.productionModelName })),
+                        mono: false,
+                    },
+                    {
+                        label: labels.prompt,
+                        valueNode: (_jsx(LinkedInspectorValue, { href: resourceDetailHref('prompt', event.promptId ?? line.promptId, event.promptVersionId), value: formatPromptNameWithVersion(line.promptName, line.productionVersionLabel) })),
+                        mono: false,
+                    },
+                ], runtimeEditor: _jsx(RuntimeConfigEditor, { laneType: "production", config: event.runConfig, currentModelId: event.modelId, currentModelName: line.productionModelName, recordMode: event.recordMode, models: models, modelsLoading: modelsLoading, labels: labels, canEdit: productionCanEditConfig, pending: runConfigPending, onUpdateRunConfig: onUpdateRunConfig, hideModel: true }, `production:${event.id}:${event.updatedAt}`), metadataCard: _jsx(RecordModeMetadataCard, { laneType: "production", config: event.runConfig, modelId: event.modelId, recordMode: event.recordMode, recordCategories: event.recordCategories, promptVersionSnapshot: event.promptVersionSnapshot, createdAt: event.createdAt, updatedAt: event.updatedAt, labels: labels, formatDateTimeOrDash: formatDateTimeOrDash, canEdit: productionCanEditConfig, pending: runConfigPending, onUpdateRunConfig: onUpdateRunConfig }, `production-meta:${event.id}:${event.recordMode}:${event.recordCategories.join('|')}:${event.updatedAt}`), routeEditor: routeEditor })) : (_jsx(InspectorRowsCard, { className: "mt-4", rows: [{ label: labels.status, value: labels.noProduction }] })),
         };
     }
     if (selectedNodeId === 'canary') {
         const canary = line.canary;
-        const canAddCanary = !canary && line.production?.currentEvent?.status === 'running' && Boolean(onAddCanary);
+        const canCreateOrReplaceCanary = line.production?.currentEvent?.status === 'running' && Boolean(onAddCanary);
+        const canShowAddCanarySlot = !canary && canCreateOrReplaceCanary;
+        const canaryCanEditConfig = isAdjustableCanary(canary);
+        const inputRouteLane = getInputRouteLane(line, labels, 'canary');
+        const routeEditor = inputRouteLane ? (_jsx(InputRouteLaneEditor, { lane: inputRouteLane, labels: labels, pending: inputRoutePending, onUpdateInputRoute: onUpdateInputRoute }, `input-route:${inputRouteLane.laneType}:${inputRouteLane.eventId}:${inputRouteLane.updatedAt ?? ''}`)) : undefined;
         return {
-            icon: canAddCanary ? 'addCanary' : 'canary',
+            icon: canShowAddCanarySlot ? 'addCanary' : canaryTopologyIcon(canary),
             label: labels.canary,
-            title: canAddCanary ? labels.addCanary : (line.canaryVersionLabel ?? labels.noCanary),
+            title: canShowAddCanarySlot ? labels.addCanary : (line.canaryVersionLabel ?? labels.noCanary),
             subtitle: line.canaryModelName ?? labels.readyForCandidate,
             tone: canary ? 'canary' : 'muted',
-            rows: [
-                { label: labels.prompt, value: line.promptName },
-                { label: labels.promptVersion, value: line.canaryVersionLabel },
-                { label: labels.model, value: line.canaryModelName },
-                { label: labels.canaryId, value: canary?.id },
-                { label: labels.status, value: canary?.status },
-                { label: labels.trafficRatio, value: canary ? formatPercent(canary.trafficRatio, 0) : labels.noTraffic },
-                { label: labels.trafficMode, value: canary ? labels.canaryMode(canary.trafficMode) : null },
-                { label: labels.externalId, value: canary?.externalIdField },
-                { label: labels.recordMode, value: canary?.recordMode },
-                { label: labels.startedAt, value: formatDateTimeOrDash(canary?.startedAt) },
-                { label: labels.updatedAt, value: formatDateTimeOrDash(canary?.updatedAt) },
-            ],
-            runtimeEditor: canary ? (_jsx(RuntimeConfigEditor, { laneType: "canary", config: canary.runConfig, currentModelId: canary.modelId, currentModelName: canary.modelName, models: models, modelsLoading: modelsLoading, labels: labels, canEdit: isAdjustableCanary(canary), pending: runConfigPending, onUpdateRunConfig: onUpdateRunConfig }, `canary:${canary.id}:${canary.updatedAt}`)) : undefined,
-            action: canAddCanary ? (_jsxs(Button, { type: "button", onClick: onAddCanary, children: [_jsx(Plus, { className: "size-4" }), labels.addCanary] })) : undefined,
+            rows: [],
+            hideSummary: true,
+            content: canary ? (_jsx(ReleaseLaneDetailCards, { tone: "canary", labels: labels, identityRows: [
+                    {
+                        label: labels.model,
+                        valueNode: (_jsx(LinkedInspectorValue, { href: resourceDetailHref('model', canary.modelId), value: line.canaryModelName })),
+                        mono: false,
+                    },
+                    {
+                        label: labels.prompt,
+                        valueNode: (_jsx(LinkedInspectorValue, { href: resourceDetailHref('prompt', canary.promptId ?? line.promptId, canary.promptVersionId), value: formatPromptNameWithVersion(line.promptName, line.canaryVersionLabel) })),
+                        mono: false,
+                    },
+                    {
+                        label: labels.termination,
+                        value: formatCanaryStopConditions(canary.runConfig, labels),
+                        mono: false,
+                    },
+                ], runtimeEditor: _jsx(RuntimeConfigEditor, { laneType: "canary", config: canary.runConfig, currentModelId: canary.modelId, currentModelName: canary.modelName, recordMode: canary.recordMode, models: models, modelsLoading: modelsLoading, labels: labels, canEdit: canaryCanEditConfig, pending: runConfigPending, onUpdateRunConfig: onUpdateRunConfig, hideModel: true }, `canary:${canary.id}:${canary.updatedAt}`), metadataCard: _jsx(RecordModeMetadataCard, { laneType: "canary", config: canary.runConfig, modelId: canary.modelId, recordMode: canary.recordMode, recordCategories: canary.recordCategories, promptVersionSnapshot: readRecord(line.canaryPromptVersionSnapshot) ?? EMPTY_RECORD, createdAt: canary.createdAt, updatedAt: canary.updatedAt, labels: labels, formatDateTimeOrDash: formatDateTimeOrDash, canEdit: canaryCanEditConfig, pending: runConfigPending, onUpdateRunConfig: onUpdateRunConfig }, `canary-meta:${canary.id}:${canary.recordMode}:${canary.recordCategories.join('|')}:${canary.updatedAt}`), routeEditor: routeEditor })) : (_jsx(InspectorRowsCard, { className: "mt-4", rows: [{ label: labels.status, value: labels.noCanary }] })),
+            headerAction: canary || canCreateOrReplaceCanary ? (_jsx(CanaryLaneActions, { canary: canary, labels: labels, pending: canaryActionPending || trafficRatioPending, onAddCanary: canCreateOrReplaceCanary ? onAddCanary : undefined, onStopCanary: onStopCanary, onPromoteCanary: onPromoteCanary })) : undefined,
         };
     }
     const connector = getOutputConnector(line, selectedNodeId);
@@ -800,14 +1619,18 @@ function buildInspectorDetail({ line, selectedNodeId, labels, formatDateTimeOrDa
     };
 }
 function InspectorRowView({ row }) {
-    return (_jsxs("div", { className: "grid grid-cols-[112px_minmax(0,1fr)] gap-2 text-[12px]", children: [_jsx("span", { className: "text-muted-foreground", children: row.label }), _jsx("span", { className: cn('min-w-0 truncate', row.mono !== false && 'font-mono'), title: toDisplayValue(row.value), children: toDisplayValue(row.value) })] }));
+    return (_jsxs("div", { className: "grid grid-cols-[112px_minmax(0,1fr)] gap-2 text-[12px]", children: [_jsx("span", { className: "text-muted-foreground", children: row.label }), row.valueNode ? (_jsx("span", { className: cn('min-w-0', row.mono !== false && 'font-mono'), children: row.valueNode })) : (_jsx("span", { className: cn('min-w-0 truncate', row.mono !== false && 'font-mono'), title: toDisplayValue(row.value), children: toDisplayValue(row.value) }))] }));
+}
+function InspectorRowsCard({ rows, tone, title, action, className, }) {
+    const token = tone ? TONE_STYLES[tone] : null;
+    return (_jsxs("div", { className: cn('rounded-lg border bg-card', className), style: token ? { borderColor: token.bd } : undefined, children: [title || action ? (_jsxs("div", { className: "flex min-h-10 items-center justify-between gap-2 border-b px-3 py-2", children: [title ? _jsx("div", { className: "text-[12px] font-semibold", children: title }) : _jsx("span", {}), action] })) : null, _jsx("div", { className: "space-y-2 p-3", children: rows.map((row, index) => (_jsx(InspectorRowView, { row: row }, `${row.label}:${index}`))) })] }));
 }
 function TopologyInspector({ detail, labels, }) {
     const token = TONE_STYLES[detail.tone];
     const Icon = NODE_ICONS[detail.icon];
-    return (_jsxs("aside", { className: "flex min-h-[360px] flex-col bg-background/60 p-4", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [_jsx("h3", { className: "text-[14px] font-semibold", children: labels.inspector }), _jsx("span", { className: "text-[11.5px] text-muted-foreground", children: labels.clickHint })] }), !detail.hideSummary ? (_jsx("div", { className: "rounded-lg border bg-card p-3", style: { borderColor: token.bd }, children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md border", style: { background: token.bg, borderColor: token.bd, color: token.dot }, children: _jsx(Icon, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[11.5px] font-medium text-muted-foreground", children: detail.label }), detail.title ? (_jsx("div", { className: "mt-1 truncate font-mono text-[13px] font-semibold", title: detail.title, children: detail.title })) : null, detail.subtitle ? (_jsx("div", { className: "mt-1 truncate text-[12px] text-muted-foreground", title: detail.subtitle, children: detail.subtitle })) : null] })] }) })) : null, detail.content, detail.rows.length ? (_jsx("div", { className: "mt-4 space-y-2 rounded-lg border bg-card p-3", children: detail.rows.map((row) => (_jsx(InspectorRowView, { row: row }, `${detail.label}:${row.label}`))) })) : null, detail.runtimeEditor, detail.blocks?.length ? (_jsx("div", { className: "mt-4 space-y-3", children: detail.blocks.map((block) => (_jsxs("section", { className: "rounded-lg border bg-card", children: [_jsx("div", { className: "border-b px-3 py-2 text-[12px] font-semibold", children: block.title }), _jsx("pre", { className: "max-h-36 overflow-auto whitespace-pre-wrap break-words p-3 font-mono text-[11.5px] leading-5 text-muted-foreground", children: block.body })] }, `${detail.label}:${block.title}`))) })) : null, detail.action ? _jsx("div", { className: "mt-4 flex justify-end", children: detail.action }) : null] }));
+    return (_jsxs("aside", { className: "flex h-[500px] min-h-[360px] max-h-[calc(100vh-180px)] flex-col overflow-hidden bg-background/60 p-4", children: [_jsxs("div", { className: "mb-3 flex min-h-7 shrink-0 items-start justify-between gap-3", children: [_jsx("h3", { className: "shrink-0 text-[14px] font-semibold", children: labels.inspector }), detail.headerAction] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto pr-1", children: [!detail.hideSummary ? (_jsx("div", { className: "rounded-lg border bg-card p-3", style: { borderColor: token.bd }, children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md border", style: { background: token.bg, borderColor: token.bd, color: token.dot }, children: _jsx(Icon, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[11.5px] font-medium text-muted-foreground", children: detail.label }), detail.title ? (_jsx("div", { className: "mt-1 truncate font-mono text-[13px] font-semibold", title: detail.title, children: detail.title })) : null, detail.subtitle ? (_jsx("div", { className: "mt-1 truncate text-[12px] text-muted-foreground", title: detail.subtitle, children: detail.subtitle })) : null] })] }) })) : null, detail.rows.length ? _jsx(InspectorRowsCard, { rows: detail.rows, className: "mt-4" }) : null, detail.content, detail.runtimeEditor, detail.blocks?.length ? (_jsx("div", { className: "mt-4 space-y-3", children: detail.blocks.map((block) => (_jsxs("section", { className: "rounded-lg border bg-card", children: [_jsx("div", { className: "border-b px-3 py-2 text-[12px] font-semibold", children: block.title }), _jsx("pre", { className: "max-h-36 overflow-auto whitespace-pre-wrap break-words p-3 font-mono text-[11.5px] leading-5 text-muted-foreground", children: block.body })] }, `${detail.label}:${block.title}`))) })) : null, detail.action ? _jsx("div", { className: "mt-4 flex justify-end", children: detail.action }) : null] })] }));
 }
-export function ReleaseTopologyCanvas({ line, models = [], modelsLoading = false, onUpdateTrafficRatio, onUpdateRunConfig, onAddCanary, trafficRatioPending = false, runConfigPending = false, }) {
+export function ReleaseTopologyCanvas({ line, models = [], modelsLoading = false, outputConnectors = [], outputConnectorsLoading = false, onUpdateTrafficRatio, onUpdateRunConfig, onUpdateOutputRoute, onUpdateInputRoute, onAddCanary, onStopCanary, onPromoteCanary, trafficRatioPending = false, runConfigPending = false, outputRoutePending = false, inputRoutePending = false, canaryActionPending = false, }) {
     const labels = useTopologyLabels(line);
     const { formatDateTime } = useDateTimeFormatter();
     const formatDateTimeOrDash = useMemo(() => (value) => (value ? formatDateTime(value, { fallback: '—' }) : '—'), [formatDateTime]);
@@ -829,23 +1652,41 @@ export function ReleaseTopologyCanvas({ line, models = [], modelsLoading = false
         trafficRatioPending,
         onUpdateRunConfig,
         runConfigPending,
+        onUpdateOutputRoute,
+        outputRoutePending,
+        onUpdateInputRoute,
+        inputRoutePending,
         models,
         modelsLoading,
+        outputConnectors,
+        outputConnectorsLoading,
         onAddCanary,
+        onStopCanary,
+        onPromoteCanary,
+        canaryActionPending,
     }), [
+        canaryActionPending,
         labels,
         formatDateTimeOrDash,
         line,
         onAddCanary,
+        onPromoteCanary,
+        onStopCanary,
         onUpdateRunConfig,
         onUpdateTrafficRatio,
         models,
         modelsLoading,
         runConfigPending,
+        onUpdateOutputRoute,
+        onUpdateInputRoute,
+        outputConnectors,
+        outputConnectorsLoading,
+        outputRoutePending,
+        inputRoutePending,
         selectedNodeId,
         trafficRatioPending,
     ]);
-    return (_jsxs("div", { className: "release-topology-canvas rounded-lg border bg-card", "data-testid": "release-topology-canvas", children: [_jsx("div", { className: "border-b px-4 py-3", children: _jsx("h2", { className: "text-[14px] font-semibold", children: labels.routeMeta }) }), _jsxs("div", { className: "grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_380px]", children: [_jsx("div", { className: "h-[500px] min-h-[380px] w-full border-b xl:border-b-0 xl:border-r", children: _jsxs(ReactFlow, { nodes: nodes, edges: topology.edges, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, onNodeClick: (_, node) => {
+    return (_jsxs("div", { className: "release-topology-canvas rounded-lg border bg-card", "data-testid": "release-topology-canvas", children: [_jsx("div", { className: "border-b px-4 py-3", children: _jsx("h2", { className: "text-[14px] font-semibold", children: labels.routeMeta }) }), _jsxs("div", { className: "grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_380px]", children: [_jsx("div", { className: "h-[500px] min-h-[380px] w-full border-b xl:border-b-0 xl:border-r", children: _jsxs(ReactFlow, { nodes: nodes, edges: topology.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, onNodeClick: (_, node) => {
                                 if (node.data.action === 'addCanary' && onAddCanary) {
                                     onAddCanary();
                                     return;