@railtownai/railtracks-visualizer 0.0.68 → 0.0.70

package/dist/cjs/index.js

@@ -12939,7 +12939,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$z = [
+const __iconNode$C = [
     [
         "path",
         {
@@ -12955,9 +12955,9 @@ const __iconNode$z = [
         }
     ]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$z);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$C);
 
-const __iconNode$y = [
+const __iconNode$B = [
     [
         "path",
         {
@@ -12973,9 +12973,9 @@ const __iconNode$y = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$y);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$B);
 
-const __iconNode$x = [
+const __iconNode$A = [
     [
         "path",
         {
@@ -13023,9 +13023,9 @@ const __iconNode$x = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$x);
+const Bot = createLucideIcon("bot", __iconNode$A);
 
-const __iconNode$w = [
+const __iconNode$z = [
     [
         "path",
         {
@@ -13059,9 +13059,9 @@ const __iconNode$w = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$w);
+const Calendar = createLucideIcon("calendar", __iconNode$z);
 
-const __iconNode$v = [
+const __iconNode$y = [
     [
         "path",
         {
@@ -13118,9 +13118,9 @@ const __iconNode$v = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$v);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$y);
 
-const __iconNode$u = [
+const __iconNode$x = [
     [
         "path",
         {
@@ -13129,9 +13129,9 @@ const __iconNode$u = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$u);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$x);
 
-const __iconNode$t = [
+const __iconNode$w = [
     [
         "path",
         {
@@ -13140,9 +13140,9 @@ const __iconNode$t = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$t);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$w);
 
-const __iconNode$s = [
+const __iconNode$v = [
     [
         "path",
         {
@@ -13158,9 +13158,9 @@ const __iconNode$s = [
         }
     ]
 ];
-const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$s);
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$v);
 
-const __iconNode$r = [
+const __iconNode$u = [
     [
         "path",
         {
@@ -13176,9 +13176,9 @@ const __iconNode$r = [
         }
     ]
 ];
-const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$r);
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$u);
 
-const __iconNode$q = [
+const __iconNode$t = [
     [
         "circle",
         {
@@ -13209,9 +13209,9 @@ const __iconNode$q = [
         }
     ]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$q);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$t);
 
-const __iconNode$p = [
+const __iconNode$s = [
     [
         "path",
         {
@@ -13227,9 +13227,9 @@ const __iconNode$p = [
         }
     ]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$p);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$s);
 
-const __iconNode$o = [
+const __iconNode$r = [
     [
         "circle",
         {
@@ -13254,9 +13254,9 @@ const __iconNode$o = [
         }
     ]
 ];
-const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$o);
+const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$r);
 
-const __iconNode$n = [
+const __iconNode$q = [
     [
         "circle",
         {
@@ -13274,9 +13274,9 @@ const __iconNode$n = [
         }
     ]
 ];
-const Clock = createLucideIcon("clock", __iconNode$n);
+const Clock = createLucideIcon("clock", __iconNode$q);
 
-const __iconNode$m = [
+const __iconNode$p = [
     [
         "rect",
         {
@@ -13297,9 +13297,9 @@ const __iconNode$m = [
         }
     ]
 ];
-const Copy = createLucideIcon("copy", __iconNode$m);
+const Copy = createLucideIcon("copy", __iconNode$p);
 
-const __iconNode$l = [
+const __iconNode$o = [
     [
         "path",
         {
@@ -13407,9 +13407,9 @@ const __iconNode$l = [
         }
     ]
 ];
-const Cpu = createLucideIcon("cpu", __iconNode$l);
+const Cpu = createLucideIcon("cpu", __iconNode$o);
 
-const __iconNode$k = [
+const __iconNode$n = [
     [
         "line",
         {
@@ -13428,9 +13428,9 @@ const __iconNode$k = [
         }
     ]
 ];
-const DollarSign = createLucideIcon("dollar-sign", __iconNode$k);
+const DollarSign = createLucideIcon("dollar-sign", __iconNode$n);
 
-const __iconNode$j = [
+const __iconNode$m = [
     [
         "path",
         {
@@ -13460,9 +13460,9 @@ const __iconNode$j = [
         }
     ]
 ];
-const FileInput = createLucideIcon("file-input", __iconNode$j);
+const FileInput = createLucideIcon("file-input", __iconNode$m);
 
-const __iconNode$i = [
+const __iconNode$l = [
     [
         "path",
         {
@@ -13492,9 +13492,9 @@ const __iconNode$i = [
         }
     ]
 ];
-const FileOutput = createLucideIcon("file-output", __iconNode$i);
+const FileOutput = createLucideIcon("file-output", __iconNode$l);
 
-const __iconNode$h = [
+const __iconNode$k = [
     [
         "path",
         {
@@ -13552,9 +13552,27 @@ const __iconNode$h = [
         }
     ]
 ];
-const FoldVertical = createLucideIcon("fold-vertical", __iconNode$h);
+const FoldVertical = createLucideIcon("fold-vertical", __iconNode$k);
 
-const __iconNode$g = [
+const __iconNode$j = [
+    [
+        "path",
+        {
+            d: "m12 14 4-4",
+            key: "9kzdfg"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M3.34 19a10 10 0 1 1 17.32 0",
+            key: "19p75a"
+        }
+    ]
+];
+const Gauge = createLucideIcon("gauge", __iconNode$j);
+
+const __iconNode$i = [
     [
         "line",
         {
@@ -13596,9 +13614,9 @@ const __iconNode$g = [
         }
     ]
 ];
-const Hash = createLucideIcon("hash", __iconNode$g);
+const Hash = createLucideIcon("hash", __iconNode$i);
 
-const __iconNode$f = [
+const __iconNode$h = [
     [
         "circle",
         {
@@ -13623,9 +13641,9 @@ const __iconNode$f = [
         }
     ]
 ];
-const Info = createLucideIcon("info", __iconNode$f);
+const Info = createLucideIcon("info", __iconNode$h);
 
-const __iconNode$e = [
+const __iconNode$g = [
     [
         "path",
         {
@@ -13662,9 +13680,9 @@ const __iconNode$e = [
         }
     ]
 ];
-const ListChecks = createLucideIcon("list-checks", __iconNode$e);
+const ListChecks = createLucideIcon("list-checks", __iconNode$g);
 
-const __iconNode$d = [
+const __iconNode$f = [
     [
         "path",
         {
@@ -13694,9 +13712,9 @@ const __iconNode$d = [
         }
     ]
 ];
-const MessageSquareText = createLucideIcon("message-square-text", __iconNode$d);
+const MessageSquareText = createLucideIcon("message-square-text", __iconNode$f);
 
-const __iconNode$c = [
+const __iconNode$e = [
     [
         "path",
         {
@@ -13712,9 +13730,9 @@ const __iconNode$c = [
         }
     ]
 ];
-const MessagesSquare = createLucideIcon("messages-square", __iconNode$c);
+const MessagesSquare = createLucideIcon("messages-square", __iconNode$e);
 
-const __iconNode$b = [
+const __iconNode$d = [
     [
         "rect",
         {
@@ -13734,9 +13752,38 @@ const __iconNode$b = [
         }
     ]
 ];
-const PanelLeft = createLucideIcon("panel-left", __iconNode$b);
+const PanelLeft = createLucideIcon("panel-left", __iconNode$d);
 
-const __iconNode$a = [
+const __iconNode$c = [
+    [
+        "rect",
+        {
+            width: "18",
+            height: "18",
+            x: "3",
+            y: "3",
+            rx: "2",
+            key: "afitv7"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M15 3v18",
+            key: "14nvp0"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m10 15-3-3 3-3",
+            key: "1pgupc"
+        }
+    ]
+];
+const PanelRightOpen = createLucideIcon("panel-right-open", __iconNode$c);
+
+const __iconNode$b = [
     [
         "path",
         {
@@ -13766,9 +13813,9 @@ const __iconNode$a = [
         }
     ]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$a);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$b);
 
-const __iconNode$9 = [
+const __iconNode$a = [
     [
         "path",
         {
@@ -13805,9 +13852,9 @@ const __iconNode$9 = [
         }
     ]
 ];
-const Scale = createLucideIcon("scale", __iconNode$9);
+const Scale = createLucideIcon("scale", __iconNode$a);
 
-const __iconNode$8 = [
+const __iconNode$9 = [
     [
         "path",
         {
@@ -13841,9 +13888,9 @@ const __iconNode$8 = [
         }
     ]
 ];
-const Settings2 = createLucideIcon("settings-2", __iconNode$8);
+const Settings2 = createLucideIcon("settings-2", __iconNode$9);
 
-const __iconNode$7 = [
+const __iconNode$8 = [
     [
         "path",
         {
@@ -13866,9 +13913,9 @@ const __iconNode$7 = [
         }
     ]
 ];
-const Share = createLucideIcon("share", __iconNode$7);
+const Share = createLucideIcon("share", __iconNode$8);
 
-const __iconNode$6 = [
+const __iconNode$7 = [
     [
         "path",
         {
@@ -13877,7 +13924,35 @@ const __iconNode$6 = [
         }
     ]
 ];
-const Shield = createLucideIcon("shield", __iconNode$6);
+const Shield = createLucideIcon("shield", __iconNode$7);
+
+const __iconNode$6 = [
+    [
+        "path",
+        {
+            d: "M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z",
+            key: "16rjxf"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193",
+            key: "178nd4"
+        }
+    ],
+    [
+        "circle",
+        {
+            cx: "10.5",
+            cy: "6.5",
+            r: ".5",
+            fill: "currentColor",
+            key: "12ikhr"
+        }
+    ]
+];
+const Tags = createLucideIcon("tags", __iconNode$6);
 
 const __iconNode$5 = [
     [
@@ -112596,7 +112671,32 @@ const GuardrailsPopover = ({ guardrails, title = "Guardrails", placement = "righ
     })));
 };
 
-const getNodeLatency = (node)=>node.details?.internals?.latency?.total_time ?? 0;
+/** Collect start/end instants (unix seconds) for wall-clock span of a single node. */ const getNodeStampTimes = (node)=>{
+    const start = node.stamp?.time;
+    if (start == null) return [];
+    const times = [
+        start
+    ];
+    const latency = node.details?.internals?.latency?.total_time;
+    if (latency != null && latency > 0) times.push(start + latency);
+    return times;
+};
+const wallClockSpanSeconds = (times)=>{
+    if (times.length === 0) return 0;
+    const min = Math.min(...times);
+    const max = Math.max(...times);
+    return Math.max(0, max - min);
+};
+const collectSubtreeStampTimes = (nodeId, childrenMap, nodeMap)=>{
+    const node = nodeMap.get(nodeId);
+    if (!node) return [];
+    const times = getNodeStampTimes(node);
+    for (const childId of childrenMap.get(nodeId) ?? []){
+        times.push(...collectSubtreeStampTimes(childId, childrenMap, nodeMap));
+    }
+    return times;
+};
+/** Wall-clock elapsed time across a node and all descendants (unix stamp times). */ const getSubtreeWallClockSeconds = (nodeId, childrenMap, nodeMap)=>wallClockSpanSeconds(collectSubtreeStampTimes(nodeId, childrenMap, nodeMap));
 const SessionTreeNodeTitle = ({ displayName, subtreeLatency, guardrails })=>{
     return /*#__PURE__*/ React.createElement("span", {
         style: {
@@ -112724,8 +112824,7 @@ const buildNodeTree = (run)=>{
         const nodeKey = `node::${run.run_id}::${node.identifier}`;
         const childIds = childrenMap.get(node.identifier) || [];
         const children = childIds.map((id)=>nodeMap.get(id)).filter((n)=>n != null).sort((a, b)=>(a.stamp?.step ?? 0) - (b.stamp?.step ?? 0)).map(buildTreeNode);
-        const childLatency = children.reduce((s, c)=>s + (c.subtreeLatency ?? 0), 0);
-        const subtreeLatency = getNodeLatency(node) + childLatency;
+        const subtreeLatency = getSubtreeWallClockSeconds(node.identifier, childrenMap, nodeMap);
         const guardrails = node.details?.internals?.guard_details ?? [];
         const isTool = node.node_type === "Tool";
         const failed = isNodeFailureFromIncomingEdge(run, node.identifier);
@@ -113347,7 +113446,7 @@ const SessionDetails = ({ session, open, onClose, initialNodeId, initialRunId, l
 
 /**
  * DTOs for evaluation data from .railtracks/data/evaluations/*.json
- */ /** Numeric metric definition (LLMMetric or ToolMetric) */ /** Type guard for LLM result */ function isLLMResult(item) {
+ */ /** Numeric metric definition (LLMMetric, ToolMetric, or Numerical for custom evaluators) */ /** Type guard for LLM result */ function isLLMResult(item) {
     return item.type === "LLM";
 }
 /** Type guard for Tool result */ function isToolResult(item) {
@@ -113365,8 +113464,12 @@ const SessionDetails = ({ session, open, onClose, initialNodeId, initialRunId, l
 /** Type guard for CategoricalAggregate */ function isAggregateCategorical(item) {
     return item.type === "CategoricalAggregate";
 }
-/** Type guard for aggregated stats (numeric - LLMInferenceAggregate or ToolAggregate) */ function isAggregatedStats(item) {
-    return item.type === "LLMInferenceAggregate" || item.type === "ToolAggregate";
+/** Type guard for NumericalAggregate (custom evaluator numeric aggregate) */ function isNumericalAggregate(item) {
+    return item.type === "NumericalAggregate";
+}
+/** Type guard for aggregated stats (numeric - LLMInferenceAggregate, ToolAggregate, or NumericalAggregate) */ function isAggregatedStats(item) {
+    const type = item.type;
+    return type === "LLMInferenceAggregate" || type === "ToolAggregate" || type === "NumericalAggregate";
 }
 
 function isCategoricalMetric$1(def) {
@@ -113382,7 +113485,8 @@ function isCategoricalMetric$1(def) {
     const aggregateTypes = [
         "ToolAggregate",
         "LLMInferenceAggregate",
-        "CategoricalAggregate"
+        "CategoricalAggregate",
+        "NumericalAggregate"
     ];
     const aggregateItems = Object.values(nodes).filter((n)=>n?.type && aggregateTypes.includes(n.type));
     return [
@@ -117048,7 +117152,7 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
 
 const JUDGE_RESULT_PREFIX = "JudgeResult/";
 const JUDGE_REASONING_PREFIX = "JudgeReasoning/";
-/** Map agent node id -> session id from the agents array (new format only). */ function buildSessionByNodeId(agents) {
+/** Map agent node id -> session id from the agents array (new format only). */ function buildSessionByNodeId$1(agents) {
     const map = new Map();
     for (const agent of agents ?? []){
         for (const entry of agent.agent_node_ids ?? []){
@@ -117072,10 +117176,10 @@ const JUDGE_REASONING_PREFIX = "JudgeReasoning/";
     }
     return map;
 }
-function metricNameOf(agg) {
+function metricNameOf$1(agg) {
     return agg.metric?.name ?? agg.name?.replace(/^Aggregate\//, "") ?? "Unknown";
 }
-/** Collect the JudgeResult leaf nodes (label + node id) grouped by label. */ function groupNodesByLabel(agg, nodes, rawResults, metricName, sessionByNodeId, reasoningByKey) {
+/** Collect the leaf nodes (label + node id) grouped by label. */ function groupNodesByLabel(agg, nodes, rawResults, metricName, sessionByNodeId, reasoningByKey) {
     const byLabel = new Map();
     const seen = new Set();
     const push = (label, nodeId)=>{
@@ -117113,15 +117217,15 @@ function metricNameOf(agg) {
     }
     return byLabel;
 }
-/** Build the Judge view model: one entry per categorical metric. */ function buildJudgeMetricsFromAggregate(input) {
+/** Build the categorical view model: one entry per categorical metric. */ function buildCategoricalMetricsFromAggregate(input) {
     const { roots, nodes, agents, rawResults = [] } = input;
-    const sessionByNodeId = buildSessionByNodeId(agents);
+    const sessionByNodeId = buildSessionByNodeId$1(agents);
     const reasoningByKey = buildReasoningByKey(rawResults);
     // Prefer roots; fall back to scanning all nodes for categorical aggregates.
     const rootAggregates = roots.map((id)=>nodes[id]).filter((n)=>isAggregateCategorical(n));
     const aggregates = rootAggregates.length > 0 ? rootAggregates : Object.values(nodes).filter((n)=>isAggregateCategorical(n));
     return aggregates.map((agg, index)=>{
-        const metricName = metricNameOf(agg);
+        const metricName = metricNameOf$1(agg);
         const counts = agg.counts ?? {};
         const categories = agg.categories ?? agg.metric?.categories ?? Object.keys(counts);
         const byLabel = groupNodesByLabel(agg, nodes, rawResults, metricName, sessionByNodeId, reasoningByKey);
@@ -117153,13 +117257,139 @@ function metricNameOf(agg) {
     });
 }
 
-const SHORT_ID_LENGTH = 8;
-const shortenId = (id)=>id.length > SHORT_ID_LENGTH ? id.slice(0, SHORT_ID_LENGTH) : id;
-const NodeRow = ({ node, metricName, onAgentNodeClick })=>{
+/** Map agent node id -> session id from the agents array (new format only). */ function buildSessionByNodeId(agents) {
+    const map = new Map();
+    for (const agent of agents ?? []){
+        for (const entry of agent.agent_node_ids ?? []){
+            if (entry && typeof entry === "object" && "agent_node_id" in entry) {
+                map.set(entry.agent_node_id, entry.session_id);
+            }
+        }
+    }
+    return map;
+}
+function metricNameOf(agg) {
+    return agg.metric?.name ?? agg.name?.replace(/^Aggregate\//, "") ?? "Unknown";
+}
+/** Collect the per-run leaf values (value + node id) for a numerical aggregate. */ function collectNodes(agg, nodes, rawResults, metricName, sessionByNodeId) {
+    const refs = [];
+    const seen = new Set();
+    const push = (nodeId, value)=>{
+        if (!Number.isFinite(value) || seen.has(nodeId)) return;
+        seen.add(nodeId);
+        refs.push({
+            nodeId,
+            sessionId: sessionByNodeId.get(nodeId),
+            value
+        });
+    };
+    // Preferred: walk the aggregate's children leaf nodes.
+    for (const childId of agg.children ?? []){
+        const child = nodes[childId];
+        if (child && isBaseResult(child)) {
+            const nodeId = child.agent_data_id?.[0];
+            if (nodeId) push(nodeId, Number(child.value));
+        }
+    }
+    // Fallback: derive from raw Base results named after the metric when no children resolve.
+    if (refs.length === 0) {
+        for (const item of rawResults){
+            if (isBaseResult(item) && item.result_name === metricName) {
+                const nodeId = item.agent_data_id?.[0];
+                if (nodeId) push(nodeId, Number(item.value));
+            }
+        }
+    }
+    return refs;
+}
+/** Build the custom (numerical) evaluator view model: one entry per numerical metric. */ function buildNumericalMetricsFromAggregate(input) {
+    const { roots, nodes, agents, rawResults = [] } = input;
+    const sessionByNodeId = buildSessionByNodeId(agents);
+    // Prefer roots; fall back to scanning all nodes for numerical aggregates.
+    const rootAggregates = roots.map((id)=>nodes[id]).filter((n)=>isNumericalAggregate(n));
+    const aggregates = rootAggregates.length > 0 ? rootAggregates : Object.values(nodes).filter((n)=>isNumericalAggregate(n));
+    return aggregates.map((agg, index)=>{
+        const metricName = metricNameOf(agg);
+        const nodeRefs = collectNodes(agg, nodes, rawResults, metricName, sessionByNodeId);
+        return {
+            key: agg.identifier ?? `${metricName}-${index}`,
+            metricName,
+            description: agg.metric?.description ?? undefined,
+            mean: agg.mean,
+            minimum: agg.minimum,
+            maximum: agg.maximum,
+            median: agg.median,
+            std: agg.std,
+            count: agg.values?.length ?? nodeRefs.length,
+            nodes: nodeRefs
+        };
+    });
+}
+
+const NodeActions = ({ sessionId, nodeId, onAgentNodeClick, onOpenVisualizer })=>{
+    const { theme } = useTheme$1();
+    const baseStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 5,
+        padding: "3px 9px",
+        borderRadius: 6,
+        fontSize: 12,
+        fontWeight: 500,
+        cursor: "pointer",
+        background: "transparent",
+        color: theme.colors.primary,
+        border: `1px solid ${theme.colors.primary}`,
+        whiteSpace: "nowrap",
+        lineHeight: 1.4
+    };
+    if (!onAgentNodeClick && !onOpenVisualizer) {
+        // No handlers: fall back to surfacing the (shortened) id so context isn't lost.
+        return /*#__PURE__*/ React.createElement(Tooltip, {
+            title: nodeId
+        }, /*#__PURE__*/ React.createElement("span", {
+            style: {
+                fontFamily: "monospace",
+                fontSize: 12,
+                color: theme.colors.mutedForeground
+            }
+        }, nodeId.length > 8 ? nodeId.slice(0, 8) : nodeId));
+    }
+    return /*#__PURE__*/ React.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8
+        },
+        onClick: (e)=>e.stopPropagation()
+    }, onAgentNodeClick && /*#__PURE__*/ React.createElement(Tooltip, {
+        title: `Open Flow Details · ${nodeId}`
+    }, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        style: baseStyle,
+        onClick: ()=>onAgentNodeClick(sessionId, nodeId)
+    }, /*#__PURE__*/ React.createElement(PanelRightOpen, {
+        size: 13,
+        style: {
+            flexShrink: 0
+        }
+    }), "Flow Details")), onOpenVisualizer && /*#__PURE__*/ React.createElement(Tooltip, {
+        title: `Open in Visualizer · ${nodeId}`
+    }, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        style: baseStyle,
+        onClick: ()=>onOpenVisualizer(sessionId, nodeId)
+    }, /*#__PURE__*/ React.createElement(ChartNetwork, {
+        size: 13,
+        style: {
+            flexShrink: 0
+        }
+    }), "Visualizer")));
+};
+
+const NodeRow$1 = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const [showReasoning, setShowReasoning] = React.useState(false);
-    const clickable = !!onAgentNodeClick;
-    const open = ()=>onAgentNodeClick?.(node.sessionId, node.nodeId);
     return /*#__PURE__*/ React.createElement("div", {
         style: {
             display: "flex",
@@ -117173,38 +117403,27 @@ const NodeRow = ({ node, metricName, onAgentNodeClick })=>{
             gap: 10,
             flexWrap: "wrap"
         }
-    }, /*#__PURE__*/ React.createElement(Tooltip, {
-        title: clickable ? `Inspect run · ${node.nodeId}` : node.nodeId
-    }, /*#__PURE__*/ React.createElement("span", {
-        role: clickable ? "button" : undefined,
-        tabIndex: clickable ? 0 : undefined,
-        onClick: clickable ? open : undefined,
-        onKeyDown: clickable ? (e)=>{
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                open();
-            }
-        } : undefined,
+    }, /*#__PURE__*/ React.createElement(Tag, {
         style: {
+            margin: 0,
             display: "inline-flex",
             alignItems: "center",
             gap: 6,
-            padding: "3px 10px",
-            borderRadius: 6,
-            fontFamily: "monospace",
-            fontSize: 12,
-            fontWeight: 500,
-            background: theme.colors.tagLlminference?.bg ?? theme.colors.muted,
-            color: theme.colors.tagLlminference?.color ?? theme.colors.foreground,
-            border: `1px solid ${theme.colors.tagLlminference?.border ?? theme.colors.border}`,
-            cursor: clickable ? "pointer" : "default"
+            background: theme.colors.tagToolLevel2?.bg ?? theme.colors.primary,
+            color: theme.colors.tagToolLevel2?.color ?? theme.colors.primaryForeground,
+            border: "none"
         }
     }, /*#__PURE__*/ React.createElement(Bot, {
-        size: 13,
+        size: 12,
         style: {
             flexShrink: 0
         }
-    }), shortenId(node.nodeId))), node.reasoning && /*#__PURE__*/ React.createElement("button", {
+    }), "Agent Node"), /*#__PURE__*/ React.createElement(NodeActions, {
+        sessionId: node.sessionId,
+        nodeId: node.nodeId,
+        onAgentNodeClick: onAgentNodeClick,
+        onOpenVisualizer: onOpenVisualizer
+    }), node.reasoning && /*#__PURE__*/ React.createElement("button", {
         type: "button",
         onClick: ()=>setShowReasoning((s)=>!s),
         style: {
@@ -117238,7 +117457,7 @@ const NodeRow = ({ node, metricName, onAgentNodeClick })=>{
             marginBottom: 6,
             color: theme.colors.mutedForeground
         }
-    }, "Judge reasoning · ", metricName), node.reasoning));
+    }, "Reasoning · ", metricName), node.reasoning));
 };
 const LabelPanelHeader = ({ label })=>{
     const { theme } = useTheme$1();
@@ -117271,7 +117490,7 @@ const LabelPanelHeader = ({ label })=>{
         }
     }, label.count, " ", label.count === 1 ? "node" : "nodes"));
 };
-const MetricCard = ({ metric, onAgentNodeClick })=>{
+const MetricCard$1 = ({ metric, icon: Icon, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const items = metric.labels.map((label)=>({
             key: label.labelName,
@@ -117291,11 +117510,12 @@ const MetricCard = ({ metric, onAgentNodeClick })=>{
                     flexDirection: "column",
                     gap: 12
                 }
-            }, label.nodes.map((node)=>/*#__PURE__*/ React.createElement(NodeRow, {
+            }, label.nodes.map((node)=>/*#__PURE__*/ React.createElement(NodeRow$1, {
                     key: node.nodeId,
                     node: node,
                     metricName: metric.metricName,
-                    onAgentNodeClick: onAgentNodeClick
+                    onAgentNodeClick: onAgentNodeClick,
+                    onOpenVisualizer: onOpenVisualizer
                 })))
         }));
     return /*#__PURE__*/ React.createElement("div", {
@@ -117318,7 +117538,7 @@ const MetricCard = ({ metric, onAgentNodeClick })=>{
             gap: 12,
             flexWrap: "wrap"
         }
-    }, /*#__PURE__*/ React.createElement(Scale, {
+    }, /*#__PURE__*/ React.createElement(Icon, {
         size: 16,
         style: {
             color: theme.colors.primary,
@@ -117359,13 +117579,13 @@ const MetricCard = ({ metric, onAgentNodeClick })=>{
             marginLeft: "auto",
             flexShrink: 0
         }
-    }, /*#__PURE__*/ React.createElement(Meta, {
+    }, /*#__PURE__*/ React.createElement(Meta$1, {
         label: "Most common",
         value: metric.mostCommon
-    }), /*#__PURE__*/ React.createElement(Meta, {
+    }), /*#__PURE__*/ React.createElement(Meta$1, {
         label: "Least common",
         value: metric.leastCommon
-    }), /*#__PURE__*/ React.createElement(Meta, {
+    }), /*#__PURE__*/ React.createElement(Meta$1, {
         label: "Evaluations",
         value: String(metric.total)
     }))), metric.description && /*#__PURE__*/ React.createElement("div", {
@@ -117382,6 +117602,76 @@ const MetricCard = ({ metric, onAgentNodeClick })=>{
         }
     }));
 };
+const Meta$1 = ({ label, value })=>{
+    const { theme } = useTheme$1();
+    return /*#__PURE__*/ React.createElement("span", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-end",
+            gap: 1
+        }
+    }, /*#__PURE__*/ React.createElement("span", {
+        style: {
+            fontSize: 10,
+            textTransform: "uppercase",
+            letterSpacing: 0.4,
+            color: theme.colors.mutedForeground
+        }
+    }, label), /*#__PURE__*/ React.createElement("span", {
+        style: {
+            fontSize: 13,
+            fontWeight: 500
+        }
+    }, value ?? "—"));
+};
+const CategoricalAggregateView = ({ metrics, title = "Categorical Evaluator - Aggregate View", icon = Tags, emptyLabel = "No categorical metrics available", onAgentNodeClick, onOpenVisualizer })=>{
+    const { theme } = useTheme$1();
+    if (!metrics.length) {
+        return /*#__PURE__*/ React.createElement("div", {
+            style: {
+                padding: 24,
+                textAlign: "center",
+                color: theme.colors.mutedForeground,
+                fontSize: 14
+            }
+        }, emptyLabel);
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            width: "100%",
+            minWidth: 0
+        }
+    }, /*#__PURE__*/ React.createElement("h3", {
+        style: {
+            margin: "0 0 16px",
+            fontSize: 16,
+            fontWeight: 600
+        }
+    }, title), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12
+        }
+    }, metrics.map((metric)=>/*#__PURE__*/ React.createElement(MetricCard$1, {
+            key: metric.key,
+            metric: metric,
+            icon: icon,
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
+        }))));
+};
+
+/**
+ * Format a numerical value for display. Custom metric names are arbitrary, so we
+ * use a light heuristic: latency-like metrics render as durations, integers get
+ * thousands separators, everything else gets two decimals.
+ */ function formatStat(value, metricName) {
+    if (value === undefined || !Number.isFinite(value)) return "—";
+    if (/seconds$/i.test(metricName) || /latency/i.test(metricName)) return formatLatency(value);
+    return Number.isInteger(value) ? formatNumberWithCommas(value) : value.toFixed(2);
+}
 const Meta = ({ label, value })=>{
     const { theme } = useTheme$1();
     return /*#__PURE__*/ React.createElement("span", {
@@ -117405,7 +117695,149 @@ const Meta = ({ label, value })=>{
         }
     }, value ?? "—"));
 };
-const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
+const NodeRow = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
+    const { theme } = useTheme$1();
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            flexWrap: "wrap"
+        }
+    }, /*#__PURE__*/ React.createElement(Tag, {
+        style: {
+            margin: 0,
+            fontFamily: "monospace",
+            fontWeight: 600,
+            background: theme.colors.tagLlminference?.bg ?? theme.colors.muted,
+            color: theme.colors.tagLlminference?.color ?? theme.colors.foreground,
+            border: `1px solid ${theme.colors.tagLlminference?.border ?? theme.colors.border}`
+        }
+    }, formatStat(node.value, metricName)), /*#__PURE__*/ React.createElement(Tag, {
+        style: {
+            margin: 0,
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            background: theme.colors.tagToolLevel2?.bg ?? theme.colors.primary,
+            color: theme.colors.tagToolLevel2?.color ?? theme.colors.primaryForeground,
+            border: "none"
+        }
+    }, /*#__PURE__*/ React.createElement(Bot, {
+        size: 12,
+        style: {
+            flexShrink: 0
+        }
+    }), "Agent Node"), /*#__PURE__*/ React.createElement(NodeActions, {
+        sessionId: node.sessionId,
+        nodeId: node.nodeId,
+        onAgentNodeClick: onAgentNodeClick,
+        onOpenVisualizer: onOpenVisualizer
+    }));
+};
+const MetricCard = ({ metric, onAgentNodeClick, onOpenVisualizer })=>{
+    const { theme } = useTheme$1();
+    const items = metric.nodes.length > 0 ? [
+        {
+            key: "per-run",
+            label: /*#__PURE__*/ React.createElement("span", {
+                style: {
+                    fontSize: 13,
+                    fontWeight: 600
+                }
+            }, "Per-run values", " ", /*#__PURE__*/ React.createElement("span", {
+                style: {
+                    color: theme.colors.mutedForeground,
+                    fontWeight: 400
+                }
+            }, "(", metric.nodes.length, ")")),
+            children: /*#__PURE__*/ React.createElement("div", {
+                style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 12
+                }
+            }, metric.nodes.map((node)=>/*#__PURE__*/ React.createElement(NodeRow, {
+                    key: node.nodeId,
+                    node: node,
+                    metricName: metric.metricName,
+                    onAgentNodeClick: onAgentNodeClick,
+                    onOpenVisualizer: onOpenVisualizer
+                })))
+        }
+    ] : [];
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            background: theme.colors.card,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: 8,
+            overflow: "hidden"
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            padding: "14px 18px",
+            borderBottom: metric.nodes.length > 0 ? `1px solid ${theme.colors.border}` : "none",
+            background: theme.colors.secondary
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            flexWrap: "wrap"
+        }
+    }, /*#__PURE__*/ React.createElement(Gauge, {
+        size: 16,
+        style: {
+            color: theme.colors.primary,
+            flexShrink: 0
+        }
+    }), /*#__PURE__*/ React.createElement("span", {
+        style: {
+            fontSize: 15,
+            fontWeight: 600
+        }
+    }, metric.metricName), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: "flex",
+            gap: 20,
+            marginLeft: "auto",
+            flexShrink: 0,
+            flexWrap: "wrap"
+        }
+    }, /*#__PURE__*/ React.createElement(Meta, {
+        label: "Mean",
+        value: formatStat(metric.mean, metric.metricName)
+    }), /*#__PURE__*/ React.createElement(Meta, {
+        label: "Min",
+        value: formatStat(metric.minimum, metric.metricName)
+    }), /*#__PURE__*/ React.createElement(Meta, {
+        label: "Max",
+        value: formatStat(metric.maximum, metric.metricName)
+    }), /*#__PURE__*/ React.createElement(Meta, {
+        label: "Median",
+        value: formatStat(metric.median, metric.metricName)
+    }), /*#__PURE__*/ React.createElement(Meta, {
+        label: "Std",
+        value: formatStat(metric.std, metric.metricName)
+    }), /*#__PURE__*/ React.createElement(Meta, {
+        label: "Runs",
+        value: String(metric.count)
+    }))), metric.description && /*#__PURE__*/ React.createElement("div", {
+        style: {
+            marginTop: 6,
+            fontSize: 12,
+            color: theme.colors.mutedForeground
+        }
+    }, metric.description)), metric.nodes.length > 0 && /*#__PURE__*/ React.createElement(Collapse, {
+        items: items,
+        bordered: false,
+        style: {
+            background: theme.colors.card
+        }
+    }));
+};
+const NumericalAggregateView = ({ metrics, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     if (!metrics.length) {
         return /*#__PURE__*/ React.createElement("div", {
@@ -117415,7 +117847,7 @@ const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
                 color: theme.colors.mutedForeground,
                 fontSize: 14
             }
-        }, "No judge metrics available");
+        }, "No numerical metrics available");
     }
     return /*#__PURE__*/ React.createElement("div", {
         style: {
@@ -117428,7 +117860,7 @@ const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
             fontSize: 16,
             fontWeight: 600
         }
-    }, "Judge Evaluator - Aggregate View"), /*#__PURE__*/ React.createElement("div", {
+    }, "Custom Evaluator - Aggregate View"), /*#__PURE__*/ React.createElement("div", {
         style: {
             display: "flex",
             flexDirection: "column",
@@ -117437,7 +117869,8 @@ const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
     }, metrics.map((metric)=>/*#__PURE__*/ React.createElement(MetricCard, {
             key: metric.key,
             metric: metric,
-            onAgentNodeClick: onAgentNodeClick
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
         }))));
 };
 
@@ -117445,7 +117878,10 @@ function detectAggregateType(nodes) {
     const values = Object.values(nodes);
     if (values.some((n)=>n?.type === "ToolAggregate")) return "ToolUse";
     if (values.some((n)=>n?.type === "LLMInferenceAggregate")) return "LLMInference";
-    if (values.some((n)=>n?.type === "CategoricalAggregate")) return "Judge";
+    // Categorical covers the built-in JudgeEvaluator and any custom evaluator with categorical metrics.
+    if (values.some((n)=>n?.type === "CategoricalAggregate")) return "Categorical";
+    // Custom numerical evaluators (anything that isn't ToolUse/LLMInference/categorical) emit NumericalAggregate.
+    if (values.some((n)=>n?.type === "NumericalAggregate")) return "Numerical";
     return null;
 }
 function buildLLMInferenceFlatRows(nodes) {
@@ -117487,9 +117923,10 @@ function formatAggregateValue(value, metricName) {
 const DEFAULT_TITLES = {
     ToolUse: "Tool Use Evaluator - Aggregate View",
     LLMInference: "LLM Inference Evaluator - Aggregate View",
-    Judge: "Judge Evaluator - Aggregate View"
+    Categorical: "Categorical Evaluator - Aggregate View",
+    Numerical: "Custom Evaluator - Aggregate View"
 };
-const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, title, evaluatorName, onAgentNodeClick })=>{
+const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, title, evaluatorName, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
     const { aggregateType, dataSource, llmIsTree, llmExpandableKeys } = React.useMemo(()=>{
@@ -117529,10 +117966,23 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                     llmExpandableKeys
                 };
             }
-            if (type === "Judge") {
+            if (type === "Categorical") {
+                return {
+                    aggregateType: type,
+                    dataSource: buildCategoricalMetricsFromAggregate({
+                        roots: aggregateResults.roots,
+                        nodes: aggregateResults.nodes,
+                        agents,
+                        rawResults
+                    }),
+                    llmIsTree: false,
+                    llmExpandableKeys: []
+                };
+            }
+            if (type === "Numerical") {
                 return {
                     aggregateType: type,
-                    dataSource: buildJudgeMetricsFromAggregate({
+                    dataSource: buildNumericalMetricsFromAggregate({
                         roots: aggregateResults.roots,
                         nodes: aggregateResults.nodes,
                         agents,
@@ -117657,7 +118107,7 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                     dataIndex: "name",
                     key: "name",
                     render: (name, row)=>{
-                        const isClickable = row.level === 3 && row.agentNodeId && onAgentNodeClick;
+                        const showActions = row.level === 3 && row.agentNodeId && (onAgentNodeClick || onOpenVisualizer);
                         return /*#__PURE__*/ React.createElement("span", {
                             style: {
                                 display: "inline-flex",
@@ -117665,27 +118115,16 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                                 gap: 8,
                                 fontFamily: "monospace",
                                 fontSize: 13,
-                                ...isClickable && {
-                                    cursor: "pointer",
-                                    color: theme.colors.primary
-                                }
-                            },
-                            onClick: isClickable ? (e)=>{
-                                e.stopPropagation();
-                                onAgentNodeClick(row.sessionId, row.agentNodeId);
-                            } : undefined,
-                            onKeyDown: isClickable ? (e)=>{
-                                if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    onAgentNodeClick(row.sessionId, row.agentNodeId);
-                                }
-                            } : undefined,
-                            role: isClickable ? "button" : undefined,
-                            tabIndex: isClickable ? 0 : undefined
+                                flexWrap: "wrap"
+                            }
                         }, /*#__PURE__*/ React.createElement(LLMTagForLevel, {
                             level: row.level
-                        }), name);
+                        }), showActions ? /*#__PURE__*/ React.createElement(NodeActions, {
+                            sessionId: row.sessionId,
+                            nodeId: row.agentNodeId,
+                            onAgentNodeClick: onAgentNodeClick,
+                            onOpenVisualizer: onOpenVisualizer
+                        }) : name);
                     }
                 },
                 ...METRIC_COLUMNS.map(({ key, title, Icon })=>({
@@ -117869,10 +118308,24 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
             }
         }));
     }
-    if (aggregateType === "Judge") {
-        return /*#__PURE__*/ React.createElement(JudgeAggregateView, {
+    if (aggregateType === "Categorical") {
+        // JudgeEvaluator keeps its branding; any other (custom) categorical evaluator
+        // renders through the same view with neutral categorical branding.
+        const isJudge = (evaluatorName ?? "").includes("Judge");
+        return /*#__PURE__*/ React.createElement(CategoricalAggregateView, {
+            metrics: dataSource,
+            title: title ?? (isJudge ? "Judge Evaluator - Aggregate View" : "Custom Evaluator - Aggregate View"),
+            icon: isJudge ? Scale : Tags,
+            emptyLabel: isJudge ? "No judge metrics available" : "No categorical metrics available",
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
+        });
+    }
+    if (aggregateType === "Numerical") {
+        return /*#__PURE__*/ React.createElement(NumericalAggregateView, {
             metrics: dataSource,
-            onAgentNodeClick: onAgentNodeClick
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
         });
     }
     // ToolUse (tree table)
@@ -117941,7 +118394,7 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
             dataIndex: "name",
             key: "name",
             render: (name, row)=>{
-                const isClickable = (row.level === 2 || row.level === 3) && row.nodeId && onAgentNodeClick;
+                const showActions = (row.level === 2 || row.level === 3) && row.nodeId && (onAgentNodeClick || onOpenVisualizer);
                 return /*#__PURE__*/ React.createElement("span", {
                     style: {
                         display: "inline-flex",
@@ -117949,27 +118402,16 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                         gap: 8,
                         fontFamily: "monospace",
                         fontSize: 13,
-                        ...isClickable && {
-                            cursor: "pointer",
-                            color: theme.colors.primary
-                        }
-                    },
-                    onClick: isClickable ? (e)=>{
-                        e.stopPropagation();
-                        onAgentNodeClick(row.sessionId, row.nodeId);
-                    } : undefined,
-                    onKeyDown: isClickable ? (e)=>{
-                        if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            onAgentNodeClick(row.sessionId, row.nodeId);
-                        }
-                    } : undefined,
-                    role: isClickable ? "button" : undefined,
-                    tabIndex: isClickable ? 0 : undefined
+                        flexWrap: "wrap"
+                    }
                 }, /*#__PURE__*/ React.createElement(TagForLevel, {
                     level: row.level
-                }), name);
+                }), showActions ? /*#__PURE__*/ React.createElement(NodeActions, {
+                    sessionId: row.sessionId,
+                    nodeId: row.nodeId,
+                    onAgentNodeClick: onAgentNodeClick,
+                    onOpenVisualizer: onOpenVisualizer
+                }) : name);
             }
         },
         {
@@ -118147,7 +118589,8 @@ function isCategoricalMetric(def) {
     const aggregateTypes = [
         "ToolAggregate",
         "LLMInferenceAggregate",
-        "CategoricalAggregate"
+        "CategoricalAggregate",
+        "NumericalAggregate"
     ];
     const aggregateItems = Object.values(nodes).filter((n)=>n?.type && aggregateTypes.includes(n.type));
     return [
@@ -118287,7 +118730,7 @@ function isCategoricalMetric(def) {
     }, 0) ?? 0;
 }
 
-const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick })=>{
+const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const labelColor = theme.colors.mutedForeground;
     const derived = evaluation ? deriveEvaluatorResultData(evaluation, evaluatorId) : null;
@@ -118430,7 +118873,8 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick }
         aggregateResults: aggregateResults,
         agents: evaluation.agents,
         evaluatorName: evaluatorName,
-        onAgentNodeClick: onAgentNodeClick
+        onAgentNodeClick: onAgentNodeClick,
+        onOpenVisualizer: onOpenVisualizer
     }))));
 };