@railtownai/railtracks-visualizer 0.0.68 → 0.0.69

package/dist/cjs/index.js

@@ -12939,7 +12939,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$z = [
+const __iconNode$A = [
     [
         "path",
         {
@@ -12955,9 +12955,9 @@ const __iconNode$z = [
         }
     ]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$z);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$A);
 
-const __iconNode$y = [
+const __iconNode$z = [
     [
         "path",
         {
@@ -12973,9 +12973,9 @@ const __iconNode$y = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$y);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$z);
 
-const __iconNode$x = [
+const __iconNode$y = [
     [
         "path",
         {
@@ -13023,9 +13023,9 @@ const __iconNode$x = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$x);
+const Bot = createLucideIcon("bot", __iconNode$y);
 
-const __iconNode$w = [
+const __iconNode$x = [
     [
         "path",
         {
@@ -13059,9 +13059,9 @@ const __iconNode$w = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$w);
+const Calendar = createLucideIcon("calendar", __iconNode$x);
 
-const __iconNode$v = [
+const __iconNode$w = [
     [
         "path",
         {
@@ -13118,9 +13118,9 @@ const __iconNode$v = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$v);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$w);
 
-const __iconNode$u = [
+const __iconNode$v = [
     [
         "path",
         {
@@ -13129,9 +13129,9 @@ const __iconNode$u = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$u);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$v);
 
-const __iconNode$t = [
+const __iconNode$u = [
     [
         "path",
         {
@@ -13140,9 +13140,9 @@ const __iconNode$t = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$t);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$u);
 
-const __iconNode$s = [
+const __iconNode$t = [
     [
         "path",
         {
@@ -13158,9 +13158,9 @@ const __iconNode$s = [
         }
     ]
 ];
-const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$s);
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$t);
 
-const __iconNode$r = [
+const __iconNode$s = [
     [
         "path",
         {
@@ -13176,9 +13176,9 @@ const __iconNode$r = [
         }
     ]
 ];
-const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$r);
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$s);
 
-const __iconNode$q = [
+const __iconNode$r = [
     [
         "circle",
         {
@@ -13209,9 +13209,9 @@ const __iconNode$q = [
         }
     ]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$q);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$r);
 
-const __iconNode$p = [
+const __iconNode$q = [
     [
         "path",
         {
@@ -13227,9 +13227,9 @@ const __iconNode$p = [
         }
     ]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$p);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$q);
 
-const __iconNode$o = [
+const __iconNode$p = [
     [
         "circle",
         {
@@ -13254,9 +13254,9 @@ const __iconNode$o = [
         }
     ]
 ];
-const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$o);
+const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$p);
 
-const __iconNode$n = [
+const __iconNode$o = [
     [
         "circle",
         {
@@ -13274,9 +13274,9 @@ const __iconNode$n = [
         }
     ]
 ];
-const Clock = createLucideIcon("clock", __iconNode$n);
+const Clock = createLucideIcon("clock", __iconNode$o);
 
-const __iconNode$m = [
+const __iconNode$n = [
     [
         "rect",
         {
@@ -13297,9 +13297,9 @@ const __iconNode$m = [
         }
     ]
 ];
-const Copy = createLucideIcon("copy", __iconNode$m);
+const Copy = createLucideIcon("copy", __iconNode$n);
 
-const __iconNode$l = [
+const __iconNode$m = [
     [
         "path",
         {
@@ -13407,9 +13407,9 @@ const __iconNode$l = [
         }
     ]
 ];
-const Cpu = createLucideIcon("cpu", __iconNode$l);
+const Cpu = createLucideIcon("cpu", __iconNode$m);
 
-const __iconNode$k = [
+const __iconNode$l = [
     [
         "line",
         {
@@ -13428,9 +13428,9 @@ const __iconNode$k = [
         }
     ]
 ];
-const DollarSign = createLucideIcon("dollar-sign", __iconNode$k);
+const DollarSign = createLucideIcon("dollar-sign", __iconNode$l);
 
-const __iconNode$j = [
+const __iconNode$k = [
     [
         "path",
         {
@@ -13460,9 +13460,9 @@ const __iconNode$j = [
         }
     ]
 ];
-const FileInput = createLucideIcon("file-input", __iconNode$j);
+const FileInput = createLucideIcon("file-input", __iconNode$k);
 
-const __iconNode$i = [
+const __iconNode$j = [
     [
         "path",
         {
@@ -13492,9 +13492,9 @@ const __iconNode$i = [
         }
     ]
 ];
-const FileOutput = createLucideIcon("file-output", __iconNode$i);
+const FileOutput = createLucideIcon("file-output", __iconNode$j);
 
-const __iconNode$h = [
+const __iconNode$i = [
     [
         "path",
         {
@@ -13552,9 +13552,9 @@ const __iconNode$h = [
         }
     ]
 ];
-const FoldVertical = createLucideIcon("fold-vertical", __iconNode$h);
+const FoldVertical = createLucideIcon("fold-vertical", __iconNode$i);
 
-const __iconNode$g = [
+const __iconNode$h = [
     [
         "line",
         {
@@ -13596,9 +13596,9 @@ const __iconNode$g = [
         }
     ]
 ];
-const Hash = createLucideIcon("hash", __iconNode$g);
+const Hash = createLucideIcon("hash", __iconNode$h);
 
-const __iconNode$f = [
+const __iconNode$g = [
     [
         "circle",
         {
@@ -13623,9 +13623,9 @@ const __iconNode$f = [
         }
     ]
 ];
-const Info = createLucideIcon("info", __iconNode$f);
+const Info = createLucideIcon("info", __iconNode$g);
 
-const __iconNode$e = [
+const __iconNode$f = [
     [
         "path",
         {
@@ -13662,9 +13662,9 @@ const __iconNode$e = [
         }
     ]
 ];
-const ListChecks = createLucideIcon("list-checks", __iconNode$e);
+const ListChecks = createLucideIcon("list-checks", __iconNode$f);
 
-const __iconNode$d = [
+const __iconNode$e = [
     [
         "path",
         {
@@ -13694,9 +13694,9 @@ const __iconNode$d = [
         }
     ]
 ];
-const MessageSquareText = createLucideIcon("message-square-text", __iconNode$d);
+const MessageSquareText = createLucideIcon("message-square-text", __iconNode$e);
 
-const __iconNode$c = [
+const __iconNode$d = [
     [
         "path",
         {
@@ -13712,9 +13712,9 @@ const __iconNode$c = [
         }
     ]
 ];
-const MessagesSquare = createLucideIcon("messages-square", __iconNode$c);
+const MessagesSquare = createLucideIcon("messages-square", __iconNode$d);
 
-const __iconNode$b = [
+const __iconNode$c = [
     [
         "rect",
         {
@@ -13734,7 +13734,36 @@ const __iconNode$b = [
         }
     ]
 ];
-const PanelLeft = createLucideIcon("panel-left", __iconNode$b);
+const PanelLeft = createLucideIcon("panel-left", __iconNode$c);
+
+const __iconNode$b = [
+    [
+        "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$b);
 
 const __iconNode$a = [
     [
@@ -117153,13 +117182,70 @@ 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 })=>{
+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 = ({ 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 +117259,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: {
@@ -117271,7 +117346,7 @@ const LabelPanelHeader = ({ label })=>{
         }
     }, label.count, " ", label.count === 1 ? "node" : "nodes"));
 };
-const MetricCard = ({ metric, onAgentNodeClick })=>{
+const MetricCard = ({ metric, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const items = metric.labels.map((label)=>({
             key: label.labelName,
@@ -117295,7 +117370,8 @@ const MetricCard = ({ metric, onAgentNodeClick })=>{
                     key: node.nodeId,
                     node: node,
                     metricName: metric.metricName,
-                    onAgentNodeClick: onAgentNodeClick
+                    onAgentNodeClick: onAgentNodeClick,
+                    onOpenVisualizer: onOpenVisualizer
                 })))
         }));
     return /*#__PURE__*/ React.createElement("div", {
@@ -117405,7 +117481,7 @@ const Meta = ({ label, value })=>{
         }
     }, value ?? "—"));
 };
-const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
+const JudgeAggregateView = ({ metrics, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     if (!metrics.length) {
         return /*#__PURE__*/ React.createElement("div", {
@@ -117437,7 +117513,8 @@ const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
     }, metrics.map((metric)=>/*#__PURE__*/ React.createElement(MetricCard, {
             key: metric.key,
             metric: metric,
-            onAgentNodeClick: onAgentNodeClick
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
         }))));
 };
 
@@ -117489,7 +117566,7 @@ const DEFAULT_TITLES = {
     LLMInference: "LLM Inference Evaluator - Aggregate View",
     Judge: "Judge 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(()=>{
@@ -117657,7 +117734,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 +117742,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 })=>({
@@ -117872,7 +117938,8 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
     if (aggregateType === "Judge") {
         return /*#__PURE__*/ React.createElement(JudgeAggregateView, {
             metrics: dataSource,
-            onAgentNodeClick: onAgentNodeClick
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
         });
     }
     // ToolUse (tree table)
@@ -117941,7 +118008,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 +118016,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);
             }
         },
         {
@@ -118287,7 +118343,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 +118486,8 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick }
         aggregateResults: aggregateResults,
         agents: evaluation.agents,
         evaluatorName: evaluatorName,
-        onAgentNodeClick: onAgentNodeClick
+        onAgentNodeClick: onAgentNodeClick,
+        onOpenVisualizer: onOpenVisualizer
     }))));
 };
 

package/dist/esm/index.js

@@ -12919,7 +12919,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$z = [
+const __iconNode$A = [
     [
         "path",
         {
@@ -12935,9 +12935,9 @@ const __iconNode$z = [
         }
     ]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$z);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$A);
 
-const __iconNode$y = [
+const __iconNode$z = [
     [
         "path",
         {
@@ -12953,9 +12953,9 @@ const __iconNode$y = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$y);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$z);
 
-const __iconNode$x = [
+const __iconNode$y = [
     [
         "path",
         {
@@ -13003,9 +13003,9 @@ const __iconNode$x = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$x);
+const Bot = createLucideIcon("bot", __iconNode$y);
 
-const __iconNode$w = [
+const __iconNode$x = [
     [
         "path",
         {
@@ -13039,9 +13039,9 @@ const __iconNode$w = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$w);
+const Calendar = createLucideIcon("calendar", __iconNode$x);
 
-const __iconNode$v = [
+const __iconNode$w = [
     [
         "path",
         {
@@ -13098,9 +13098,9 @@ const __iconNode$v = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$v);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$w);
 
-const __iconNode$u = [
+const __iconNode$v = [
     [
         "path",
         {
@@ -13109,9 +13109,9 @@ const __iconNode$u = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$u);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$v);
 
-const __iconNode$t = [
+const __iconNode$u = [
     [
         "path",
         {
@@ -13120,9 +13120,9 @@ const __iconNode$t = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$t);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$u);
 
-const __iconNode$s = [
+const __iconNode$t = [
     [
         "path",
         {
@@ -13138,9 +13138,9 @@ const __iconNode$s = [
         }
     ]
 ];
-const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$s);
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$t);
 
-const __iconNode$r = [
+const __iconNode$s = [
     [
         "path",
         {
@@ -13156,9 +13156,9 @@ const __iconNode$r = [
         }
     ]
 ];
-const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$r);
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$s);
 
-const __iconNode$q = [
+const __iconNode$r = [
     [
         "circle",
         {
@@ -13189,9 +13189,9 @@ const __iconNode$q = [
         }
     ]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$q);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$r);
 
-const __iconNode$p = [
+const __iconNode$q = [
     [
         "path",
         {
@@ -13207,9 +13207,9 @@ const __iconNode$p = [
         }
     ]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$p);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$q);
 
-const __iconNode$o = [
+const __iconNode$p = [
     [
         "circle",
         {
@@ -13234,9 +13234,9 @@ const __iconNode$o = [
         }
     ]
 ];
-const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$o);
+const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$p);
 
-const __iconNode$n = [
+const __iconNode$o = [
     [
         "circle",
         {
@@ -13254,9 +13254,9 @@ const __iconNode$n = [
         }
     ]
 ];
-const Clock = createLucideIcon("clock", __iconNode$n);
+const Clock = createLucideIcon("clock", __iconNode$o);
 
-const __iconNode$m = [
+const __iconNode$n = [
     [
         "rect",
         {
@@ -13277,9 +13277,9 @@ const __iconNode$m = [
         }
     ]
 ];
-const Copy = createLucideIcon("copy", __iconNode$m);
+const Copy = createLucideIcon("copy", __iconNode$n);
 
-const __iconNode$l = [
+const __iconNode$m = [
     [
         "path",
         {
@@ -13387,9 +13387,9 @@ const __iconNode$l = [
         }
     ]
 ];
-const Cpu = createLucideIcon("cpu", __iconNode$l);
+const Cpu = createLucideIcon("cpu", __iconNode$m);
 
-const __iconNode$k = [
+const __iconNode$l = [
     [
         "line",
         {
@@ -13408,9 +13408,9 @@ const __iconNode$k = [
         }
     ]
 ];
-const DollarSign = createLucideIcon("dollar-sign", __iconNode$k);
+const DollarSign = createLucideIcon("dollar-sign", __iconNode$l);
 
-const __iconNode$j = [
+const __iconNode$k = [
     [
         "path",
         {
@@ -13440,9 +13440,9 @@ const __iconNode$j = [
         }
     ]
 ];
-const FileInput = createLucideIcon("file-input", __iconNode$j);
+const FileInput = createLucideIcon("file-input", __iconNode$k);
 
-const __iconNode$i = [
+const __iconNode$j = [
     [
         "path",
         {
@@ -13472,9 +13472,9 @@ const __iconNode$i = [
         }
     ]
 ];
-const FileOutput = createLucideIcon("file-output", __iconNode$i);
+const FileOutput = createLucideIcon("file-output", __iconNode$j);
 
-const __iconNode$h = [
+const __iconNode$i = [
     [
         "path",
         {
@@ -13532,9 +13532,9 @@ const __iconNode$h = [
         }
     ]
 ];
-const FoldVertical = createLucideIcon("fold-vertical", __iconNode$h);
+const FoldVertical = createLucideIcon("fold-vertical", __iconNode$i);
 
-const __iconNode$g = [
+const __iconNode$h = [
     [
         "line",
         {
@@ -13576,9 +13576,9 @@ const __iconNode$g = [
         }
     ]
 ];
-const Hash = createLucideIcon("hash", __iconNode$g);
+const Hash = createLucideIcon("hash", __iconNode$h);
 
-const __iconNode$f = [
+const __iconNode$g = [
     [
         "circle",
         {
@@ -13603,9 +13603,9 @@ const __iconNode$f = [
         }
     ]
 ];
-const Info = createLucideIcon("info", __iconNode$f);
+const Info = createLucideIcon("info", __iconNode$g);
 
-const __iconNode$e = [
+const __iconNode$f = [
     [
         "path",
         {
@@ -13642,9 +13642,9 @@ const __iconNode$e = [
         }
     ]
 ];
-const ListChecks = createLucideIcon("list-checks", __iconNode$e);
+const ListChecks = createLucideIcon("list-checks", __iconNode$f);
 
-const __iconNode$d = [
+const __iconNode$e = [
     [
         "path",
         {
@@ -13674,9 +13674,9 @@ const __iconNode$d = [
         }
     ]
 ];
-const MessageSquareText = createLucideIcon("message-square-text", __iconNode$d);
+const MessageSquareText = createLucideIcon("message-square-text", __iconNode$e);
 
-const __iconNode$c = [
+const __iconNode$d = [
     [
         "path",
         {
@@ -13692,9 +13692,9 @@ const __iconNode$c = [
         }
     ]
 ];
-const MessagesSquare = createLucideIcon("messages-square", __iconNode$c);
+const MessagesSquare = createLucideIcon("messages-square", __iconNode$d);
 
-const __iconNode$b = [
+const __iconNode$c = [
     [
         "rect",
         {
@@ -13714,7 +13714,36 @@ const __iconNode$b = [
         }
     ]
 ];
-const PanelLeft = createLucideIcon("panel-left", __iconNode$b);
+const PanelLeft = createLucideIcon("panel-left", __iconNode$c);
+
+const __iconNode$b = [
+    [
+        "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$b);
 
 const __iconNode$a = [
     [
@@ -117133,13 +117162,70 @@ 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 })=>{
+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__default.createElement(Tooltip, {
+            title: nodeId
+        }, /*#__PURE__*/ React__default.createElement("span", {
+            style: {
+                fontFamily: "monospace",
+                fontSize: 12,
+                color: theme.colors.mutedForeground
+            }
+        }, nodeId.length > 8 ? nodeId.slice(0, 8) : nodeId));
+    }
+    return /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8
+        },
+        onClick: (e)=>e.stopPropagation()
+    }, onAgentNodeClick && /*#__PURE__*/ React__default.createElement(Tooltip, {
+        title: `Open Flow Details · ${nodeId}`
+    }, /*#__PURE__*/ React__default.createElement("button", {
+        type: "button",
+        style: baseStyle,
+        onClick: ()=>onAgentNodeClick(sessionId, nodeId)
+    }, /*#__PURE__*/ React__default.createElement(PanelRightOpen, {
+        size: 13,
+        style: {
+            flexShrink: 0
+        }
+    }), "Flow Details")), onOpenVisualizer && /*#__PURE__*/ React__default.createElement(Tooltip, {
+        title: `Open in Visualizer · ${nodeId}`
+    }, /*#__PURE__*/ React__default.createElement("button", {
+        type: "button",
+        style: baseStyle,
+        onClick: ()=>onOpenVisualizer(sessionId, nodeId)
+    }, /*#__PURE__*/ React__default.createElement(ChartNetwork, {
+        size: 13,
+        style: {
+            flexShrink: 0
+        }
+    }), "Visualizer")));
+};
+
+const NodeRow = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const [showReasoning, setShowReasoning] = useState(false);
-    const clickable = !!onAgentNodeClick;
-    const open = ()=>onAgentNodeClick?.(node.sessionId, node.nodeId);
     return /*#__PURE__*/ React__default.createElement("div", {
         style: {
             display: "flex",
@@ -117153,38 +117239,27 @@ const NodeRow = ({ node, metricName, onAgentNodeClick })=>{
             gap: 10,
             flexWrap: "wrap"
         }
-    }, /*#__PURE__*/ React__default.createElement(Tooltip, {
-        title: clickable ? `Inspect run · ${node.nodeId}` : node.nodeId
-    }, /*#__PURE__*/ React__default.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__default.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__default.createElement(Bot, {
-        size: 13,
+        size: 12,
         style: {
             flexShrink: 0
         }
-    }), shortenId(node.nodeId))), node.reasoning && /*#__PURE__*/ React__default.createElement("button", {
+    }), "Agent Node"), /*#__PURE__*/ React__default.createElement(NodeActions, {
+        sessionId: node.sessionId,
+        nodeId: node.nodeId,
+        onAgentNodeClick: onAgentNodeClick,
+        onOpenVisualizer: onOpenVisualizer
+    }), node.reasoning && /*#__PURE__*/ React__default.createElement("button", {
         type: "button",
         onClick: ()=>setShowReasoning((s)=>!s),
         style: {
@@ -117251,7 +117326,7 @@ const LabelPanelHeader = ({ label })=>{
         }
     }, label.count, " ", label.count === 1 ? "node" : "nodes"));
 };
-const MetricCard = ({ metric, onAgentNodeClick })=>{
+const MetricCard = ({ metric, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     const items = metric.labels.map((label)=>({
             key: label.labelName,
@@ -117275,7 +117350,8 @@ const MetricCard = ({ metric, onAgentNodeClick })=>{
                     key: node.nodeId,
                     node: node,
                     metricName: metric.metricName,
-                    onAgentNodeClick: onAgentNodeClick
+                    onAgentNodeClick: onAgentNodeClick,
+                    onOpenVisualizer: onOpenVisualizer
                 })))
         }));
     return /*#__PURE__*/ React__default.createElement("div", {
@@ -117385,7 +117461,7 @@ const Meta = ({ label, value })=>{
         }
     }, value ?? "—"));
 };
-const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
+const JudgeAggregateView = ({ metrics, onAgentNodeClick, onOpenVisualizer })=>{
     const { theme } = useTheme$1();
     if (!metrics.length) {
         return /*#__PURE__*/ React__default.createElement("div", {
@@ -117417,7 +117493,8 @@ const JudgeAggregateView = ({ metrics, onAgentNodeClick })=>{
     }, metrics.map((metric)=>/*#__PURE__*/ React__default.createElement(MetricCard, {
             key: metric.key,
             metric: metric,
-            onAgentNodeClick: onAgentNodeClick
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
         }))));
 };
 
@@ -117469,7 +117546,7 @@ const DEFAULT_TITLES = {
     LLMInference: "LLM Inference Evaluator - Aggregate View",
     Judge: "Judge 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] = useState([]);
     const { aggregateType, dataSource, llmIsTree, llmExpandableKeys } = useMemo(()=>{
@@ -117637,7 +117714,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__default.createElement("span", {
                             style: {
                                 display: "inline-flex",
@@ -117645,27 +117722,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__default.createElement(LLMTagForLevel, {
                             level: row.level
-                        }), name);
+                        }), showActions ? /*#__PURE__*/ React__default.createElement(NodeActions, {
+                            sessionId: row.sessionId,
+                            nodeId: row.agentNodeId,
+                            onAgentNodeClick: onAgentNodeClick,
+                            onOpenVisualizer: onOpenVisualizer
+                        }) : name);
                     }
                 },
                 ...METRIC_COLUMNS.map(({ key, title, Icon })=>({
@@ -117852,7 +117918,8 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
     if (aggregateType === "Judge") {
         return /*#__PURE__*/ React__default.createElement(JudgeAggregateView, {
             metrics: dataSource,
-            onAgentNodeClick: onAgentNodeClick
+            onAgentNodeClick: onAgentNodeClick,
+            onOpenVisualizer: onOpenVisualizer
         });
     }
     // ToolUse (tree table)
@@ -117921,7 +117988,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__default.createElement("span", {
                     style: {
                         display: "inline-flex",
@@ -117929,27 +117996,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__default.createElement(TagForLevel, {
                     level: row.level
-                }), name);
+                }), showActions ? /*#__PURE__*/ React__default.createElement(NodeActions, {
+                    sessionId: row.sessionId,
+                    nodeId: row.nodeId,
+                    onAgentNodeClick: onAgentNodeClick,
+                    onOpenVisualizer: onOpenVisualizer
+                }) : name);
             }
         },
         {
@@ -118267,7 +118323,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;
@@ -118410,7 +118466,8 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick }
         aggregateResults: aggregateResults,
         agents: evaluation.agents,
         evaluatorName: evaluatorName,
-        onAgentNodeClick: onAgentNodeClick
+        onAgentNodeClick: onAgentNodeClick,
+        onOpenVisualizer: onOpenVisualizer
     }))));
 };
 

package/dist/types/agenthub/components/AggregateResultsTable.d.ts

@@ -22,7 +22,9 @@ export interface AggregateResultsTableProps {
     title?: string;
     /** Optional evaluator name hint (e.g. "ToolUseEvaluator") for default title. */
     evaluatorName?: string;
-    /** Called when an Agent/Tool Node row is clicked. sessionId may be undefined when evaluation uses legacy agent_node_ids format. */
+    /** Called when an Agent/Tool node's "Session Details" action is used. sessionId may be undefined when evaluation uses legacy agent_node_ids format. */
     onAgentNodeClick?: (sessionId: string | undefined, nodeId: string) => void;
+    /** Called when an Agent/Tool node's "Visualizer" action is used. sessionId may be undefined when evaluation uses legacy agent_node_ids format. */
+    onOpenVisualizer?: (sessionId: string | undefined, nodeId: string) => void;
 }
 export declare const AggregateResultsTable: React.FC<AggregateResultsTableProps>;

package/dist/types/agenthub/components/JudgeAggregateView.d.ts

@@ -1,14 +1,16 @@
 /**
  * Judge (LLM-as-judge) evaluator view: one card per categorical metric, with
  * collapsible accordions per category label listing the agent nodes that received
- * that label. Each node shows a short id (click to open the run in the Session
- * Details drawer) and an inline toggle to reveal the judge's reasoning when present.
+ * that label. Each node exposes Session Details / Visualizer call-to-actions
+ * (see NodeActions) and an inline toggle to reveal the judge's reasoning when present.
  */
 import React from "react";
 import type { JudgeMetric } from "../utils/judgeAggregateTree";
 export interface JudgeAggregateViewProps {
     metrics: JudgeMetric[];
-    /** Opens the run for a judged node. sessionId may be undefined for legacy evaluations. */
+    /** Opens the run for a judged node in the Session Details drawer. sessionId may be undefined for legacy evaluations. */
     onAgentNodeClick?: (sessionId: string | undefined, nodeId: string) => void;
+    /** Opens the run for a judged node in the full Visualizer. */
+    onOpenVisualizer?: (sessionId: string | undefined, nodeId: string) => void;
 }
 export declare const JudgeAggregateView: React.FC<JudgeAggregateViewProps>;

package/dist/types/agenthub/components/NodeActions.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Call-to-action buttons for an evaluated agent node. Instead of surfacing a raw
+ * node id, this offers two clear actions: open the run in the Flow Details
+ * drawer, or open it in the full Visualizer. Shared by the Judge, ToolUse and
+ * LLMInference evaluator views so the affordance is consistent everywhere.
+ *
+ * Each button only renders when its handler is provided, so library consumers
+ * that pass just `onAgentNodeClick` still get a working "Flow Details" action.
+ */
+import React from "react";
+export interface NodeActionsProps {
+    /** Session containing the node. May be undefined for legacy evaluations. */
+    sessionId?: string;
+    /** Identifier of the evaluated agent node. */
+    nodeId: string;
+    /** Opens the run for this node in the Session Details drawer. */
+    onAgentNodeClick?: (sessionId: string | undefined, nodeId: string) => void;
+    /** Opens the run for this node in the full Visualizer. */
+    onOpenVisualizer?: (sessionId: string | undefined, nodeId: string) => void;
+}
+export declare const NodeActions: React.FC<NodeActionsProps>;

package/dist/types/agenthub/pages/evaluator-result-page.d.ts

@@ -3,10 +3,15 @@ export interface EvaluatorResultPageProps {
     /** Optional href for back link. Pass from the host app (e.g. "#/evaluations" for HashRouter). */
     backHref?: string;
     /**
-     * Optional handler for Agent/Tool node clicks. sessionId may be undefined when evaluation uses
-     * legacy agent_node_ids format. Default opens a SessionDetails drawer on this page.
+     * Optional handler for a node's "Session Details" action. sessionId may be undefined when evaluation
+     * uses legacy agent_node_ids format. Default opens a SessionDetails drawer on this page.
      */
     onAgentNodeClick?: (sessionId: string | undefined, nodeId: string) => void;
+    /**
+     * Optional handler for a node's "Visualizer" action. sessionId may be undefined when evaluation
+     * uses legacy agent_node_ids format. Default navigates to the full Sessions visualizer route.
+     */
+    onOpenVisualizer?: (sessionId: string | undefined, nodeId: string) => void;
 }
 /**
  * Page that resolves evaluationId and evaluatorId from the route,

package/dist/types/agenthub/pages/evaluator-result.d.ts

@@ -12,9 +12,14 @@ export interface EvaluatorResultProps {
     /** Optional href for back link. When provided, a "Back to Evaluations" control is shown. */
     backHref?: string;
     /**
-     * Optional handler for Agent/Tool node clicks. sessionId may be undefined when evaluation
-     * uses legacy agent_node_ids format. When not provided, nodes use default (drawer).
+     * Optional handler for a node's "Session Details" action. sessionId may be undefined when
+     * evaluation uses legacy agent_node_ids format. When omitted, the action is not shown.
      */
     onAgentNodeClick?: (sessionId: string | undefined, nodeId: string) => void;
+    /**
+     * Optional handler for a node's "Visualizer" action. sessionId may be undefined when
+     * evaluation uses legacy agent_node_ids format. When omitted, the action is not shown.
+     */
+    onOpenVisualizer?: (sessionId: string | undefined, nodeId: string) => void;
 }
 export declare const EvaluatorResult: React.FC<EvaluatorResultProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for Railtracks agentic flows",