@railtownai/railtracks-visualizer 0.0.57 → 0.0.59

package/dist/cjs/index.js

@@ -113599,7 +113599,7 @@ const RunContent = ({ run, isDarkMode, showTimeline })=>{
         height: "100%"
     })));
 };
-const SessionDetails = ({ session, open, onClose })=>{
+const SessionDetails = ({ session, open, onClose, initialNodeId, initialRunId, loading = false })=>{
     const { isDarkMode, theme } = useTheme$1();
     const [isFullScreen, setIsFullScreen] = React.useState(false);
     const [selectedNodeKey, setSelectedNodeKey] = React.useState(null);
@@ -113652,8 +113652,7 @@ const SessionDetails = ({ session, open, onClose })=>{
     }, [
         open
     ]);
-    // Default to first root node when session loads (node without a parent, matching tree structure).
-    // Combined with session_id reset to avoid effect ordering overwriting the selection.
+    // Default to first root node when session loads, or use initialNodeId/initialRunId when provided.
     const hasAutoSelectedRef = React.useRef(false);
     React.useEffect(()=>{
         if (!open) {
@@ -113662,6 +113661,19 @@ const SessionDetails = ({ session, open, onClose })=>{
         }
         if (!session?.runs?.length) return;
         if (hasAutoSelectedRef.current && selectedNodeInfo !== null) return;
+        // Prefer initial node when provided (e.g. from evaluation link)
+        if (initialNodeId) {
+            const run = initialRunId ? session.runs.find((r)=>r.run_id === initialRunId) : session.runs.find((r)=>r.nodes?.some((n)=>n.identifier === initialNodeId));
+            if (run?.run_id && getNodeFromRun(initialNodeId, run)) {
+                handleSelectNode({
+                    nodeId: initialNodeId,
+                    runId: run.run_id
+                });
+                hasAutoSelectedRef.current = true;
+                return;
+            }
+        }
+        // Fallback: first root node
         for (const run of session.runs){
             const firstRoot = getFirstRootNodeFromRun(run);
             if (firstRoot && run.run_id) {
@@ -113678,7 +113690,9 @@ const SessionDetails = ({ session, open, onClose })=>{
     }, [
         open,
         session,
-        selectedNodeInfo
+        selectedNodeInfo,
+        initialNodeId,
+        initialRunId
     ]);
     // Reset hasAutoSelectedRef when session changes so auto-select runs for the new session
     React.useEffect(()=>{
@@ -113691,7 +113705,13 @@ const SessionDetails = ({ session, open, onClose })=>{
     // Get the active run for full screen display (use selected run or first run)
     const activeRun = session?.runs.find((r)=>r.run_id === selectedNodeInfo?.runId) || session?.runs?.[0];
     const extraButtonsIconSize = 24;
-    return /*#__PURE__*/ React.createElement(Drawer$2, {
+    return /*#__PURE__*/ React.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React.createElement(Drawer$2, {
         title: /*#__PURE__*/ React.createElement(React.Fragment, null, session?.name || "Unnamed Session", " -", " ", session?.start_time ? moment(session.start_time * 1000).fromNow() : "N/A"),
         placement: "right",
         size: isFullScreen ? "100%" : "70%",
@@ -113765,7 +113785,18 @@ const SessionDetails = ({ session, open, onClose })=>{
                 flexDirection: "column"
             }
         }
-    }, !session ? /*#__PURE__*/ React.createElement("div", {
+    }, loading ? /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            color: isDarkMode ? "#8c8c8c" : "#595959"
+        }
+    }, /*#__PURE__*/ React.createElement(Spin, {
+        size: "large",
+        tip: "Loading session..."
+    })) : !session ? /*#__PURE__*/ React.createElement("div", {
         style: {
             display: "flex",
             alignItems: "center",
@@ -113823,7 +113854,7 @@ const SessionDetails = ({ session, open, onClose })=>{
         selectedNode: selectedNodeInfo,
         session: session,
         isDarkMode: isDarkMode
-    }))));
+    })))));
 };
 
 /**
@@ -114024,14 +114055,20 @@ function dtoMetricToMetric(def) {
             };
         }
     }
-    // Build runs from agents.agent_node_ids
-    const agentIds = evalDto.agents.flatMap((a)=>a.agent_node_ids);
-    const runs = agentIds.map((nodeId)=>({
-            session_id: "",
-            run_id: nodeId,
+    // Build runs from agents.agent_node_ids (support legacy string[] and new { session_id, agent_node_id }[])
+    const agentNodeEntries = evalDto.agents.flatMap((a)=>{
+        const ids = a.agent_node_ids ?? [];
+        return ids.map((entry)=>typeof entry === "string" ? {
+                session_id: "",
+                agent_node_id: entry
+            } : entry);
+    });
+    const runs = agentNodeEntries.map(({ session_id, agent_node_id })=>({
+            session_id,
+            run_id: agent_node_id,
             results: {}
         }));
-    // Agent name(s) for display - comma-separated when multiple; include agent_node_ids for LLM tree
+    // Agent name(s) for display - comma-separated when multiple; pass through agent_node_ids for LLM tree (both formats)
     const agents = evalDto.agents.map((a)=>({
             agent_name: a.agent_name,
             agent_node_ids: a.agent_node_ids
@@ -114231,7 +114268,13 @@ const EvaluationsCompareView = ({ evaluations, evaluationId1, evaluationId2, onE
     ];
     const evaluation1Label = evaluation1 ? `${evaluation1.name || "Unnamed Evaluation"} (${evaluation1.agent_name})` : "Select evaluation 1";
     const evaluation2Label = evaluation2 ? `${evaluation2.name || "Unnamed Evaluation"} (${evaluation2.agent_name})` : "Select evaluation 2";
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, backHref && /*#__PURE__*/ React.createElement("a", {
+    return /*#__PURE__*/ React.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, backHref && /*#__PURE__*/ React.createElement("a", {
         href: backHref,
         style: {
             display: "inline-flex",
@@ -114426,7 +114469,13 @@ const EvaluationsCompareDrawer = ({ open, onClose, evaluationId1, evaluationId2,
             staticMethods.error("Failed to copy share link");
         }
     };
-    return /*#__PURE__*/ React.createElement(Drawer$2, {
+    return /*#__PURE__*/ React.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React.createElement(Drawer$2, {
         title: "Compare Evaluations",
         placement: "right",
         size: "60%",
@@ -114468,7 +114517,7 @@ const EvaluationsCompareDrawer = ({ open, onClose, evaluationId1, evaluationId2,
         onEvaluationId1Change: onEvaluationId1Change,
         onEvaluationId2Change: onEvaluationId2Change,
         showEvaluationComparisonDropdowns: false
-    }));
+    })));
 };
 
 const defaultGetEvaluatorResultsHref = (evaluationId, evaluatorId)=>`#/evaluations/${evaluationId}/results/${evaluatorId}`;
@@ -114494,7 +114543,13 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
     const normalizedEvaluation = React.useMemo(()=>evaluation && isEvaluationDto(evaluation) ? transformEvaluation(evaluation) : evaluation, [
         evaluation
     ]);
-    return /*#__PURE__*/ React.createElement(Drawer$2, {
+    return /*#__PURE__*/ React.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React.createElement(Drawer$2, {
         title: normalizedEvaluation ? /*#__PURE__*/ React.createElement("div", {
             style: {
                 display: "flex",
@@ -114699,11 +114754,17 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
                 getPopupContainer: ()=>document.body
             }, tag) : tag;
         })));
-    })))));
+    }))))));
 };
 
 const GITHUB_URL = "https://github.com/RailtownAI/railtracks/";
-const EvaluationsErrorCard = ({ error, onRetry })=>/*#__PURE__*/ React.createElement(Alert, {
+const EvaluationsErrorCard = ({ error, onRetry })=>/*#__PURE__*/ React.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React.createElement(Alert, {
         type: "error",
         title: "Error loading evaluations",
         description: /*#__PURE__*/ React.createElement("div", {
@@ -114739,7 +114800,7 @@ const EvaluationsErrorCard = ({ error, onRetry })=>/*#__PURE__*/ React.createEle
             })
         }, "Retry") : undefined,
         showIcon: true
-    });
+    }));
 
 const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefresh, onRowClick, onCompare, compareIdsFromUrl, onCompareUrlChange, showFilters = true, showCompare = true, emptyMessage, title, pagination: serverPagination, onFiltersChange, onFetchEvaluationsByIds, errorRender })=>{
     const { theme } = useTheme$1();
@@ -114991,7 +115052,13 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         target: "_blank",
         rel: "noopener noreferrer"
     }, "view our documentation on how to create evaluations"), "."));
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
         style: {
             display: "flex",
             justifyContent: "space-between",
@@ -117059,12 +117126,17 @@ function isLLMNode(n) {
 function isLLMAggregateNode(n) {
     return isLLMInferenceAggregate(n);
 }
-/** Map agent_data_id to agent_name */ function buildAgentIdToNameMap(agents) {
+/** Normalize agent_node_ids to { nodeId, sessionId? }[] */ function normalizeAgentNodeEntries(agents) {
     const map = new Map();
     if (!agents) return map;
     for (const a of agents){
-        for (const nid of a.agent_node_ids ?? []){
-            map.set(nid, a.agent_name);
+        for (const entry of a.agent_node_ids ?? []){
+            const nodeId = typeof entry === "string" ? entry : entry.agent_node_id;
+            const sessionId = typeof entry === "string" ? undefined : entry.session_id;
+            map.set(nodeId, {
+                agentName: a.agent_name,
+                sessionId
+            });
         }
     }
     return map;
@@ -117076,7 +117148,7 @@ function isLLMAggregateNode(n) {
  */ function buildLLMInferenceTreeFromAggregateResults(agg) {
     const { roots, nodes, agents } = agg;
     const nodeMap = nodes;
-    const agentIdToName = buildAgentIdToNameMap(agents);
+    const agentNodeInfo = normalizeAgentNodeEntries(agents);
     // Resolve root IDs to aggregate nodes
     const rootAggregates = [];
     for (const id of roots){
@@ -117109,14 +117181,17 @@ function isLLMAggregateNode(n) {
     }
     const sortedCalls = Array.from(llmCallIndices).sort((a, b)=>a - b);
     const sortedMetrics = Array.from(metricNames).sort();
-    // Group agent_node_ids by agent
-    const agentToNodeIds = new Map();
-    for (const [nodeId, agentName] of agentIdToName){
-        if (!agentToNodeIds.has(agentName)) agentToNodeIds.set(agentName, []);
-        agentToNodeIds.get(agentName).push(nodeId);
+    // Group agent_node_ids by agent: { nodeId, sessionId? }[]
+    const agentToNodeEntries = new Map();
+    for (const [nodeId, info] of agentNodeInfo){
+        if (!agentToNodeEntries.has(info.agentName)) agentToNodeEntries.set(info.agentName, []);
+        agentToNodeEntries.get(info.agentName).push({
+            nodeId,
+            sessionId: info.sessionId
+        });
     }
     // If no agents provided, infer from data: collect unique agent_data_ids into "Agent (root)"
-    if (agentToNodeIds.size === 0) {
+    if (agentToNodeEntries.size === 0) {
         const seen = new Set();
         for (const aggNode of rootAggregates){
             for (const childId of aggNode.children ?? []){
@@ -117128,17 +117203,21 @@ function isLLMAggregateNode(n) {
             }
         }
         if (seen.size > 0) {
-            agentToNodeIds.set("Agent (root)", Array.from(seen));
+            agentToNodeEntries.set("Agent (root)", Array.from(seen).map((nodeId)=>({
+                    nodeId,
+                    sessionId: undefined
+                })));
         }
     }
     const rows = [];
-    for (const [agentName, nodeIds] of agentToNodeIds){
+    for (const [agentName, nodeEntries] of agentToNodeEntries){
+        const nodeIds = nodeEntries.map((e)=>e.nodeId);
         const agentKey = `agent-${agentName.replace(/\s+/g, "-")}`;
         const llmCallChildren = [];
         for (const callIdx of sortedCalls){
             const callKey = `${agentKey}-call-${callIdx}`;
             const nodeChildren = [];
-            nodeIds.forEach((nodeId, idx)=>{
+            nodeEntries.forEach(({ nodeId, sessionId })=>{
                 const metrics = {};
                 for (const m of sortedMetrics){
                     const k = `${nodeId}|${callIdx}|${m}`;
@@ -117154,6 +117233,7 @@ function isLLMAggregateNode(n) {
                         metrics,
                         value: metrics[primaryMetric],
                         agentNodeId: nodeId,
+                        sessionId,
                         children: undefined
                     });
                 }
@@ -117232,7 +117312,19 @@ const LATENCY_RESULT_PREFIXES = [
     "Latency/",
     "Runtime/"
 ];
-function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults) {
+/** Build map from agent_node_id -> session_id from agents (supports both formats) */ function buildAgentIdToSessionMap(agents) {
+    const map = new Map();
+    if (!agents) return map;
+    for (const a of agents){
+        for (const entry of a.agent_node_ids ?? []){
+            const nodeId = typeof entry === "string" ? entry : entry.agent_node_id;
+            const sessionId = typeof entry === "string" ? undefined : entry.session_id;
+            if (sessionId) map.set(nodeId, sessionId);
+        }
+    }
+    return map;
+}
+function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults, agentIdToSessionId) {
     const toolNamesFromAgg = Array.from(new Set([
         ...latencyByTool.keys(),
         ...failureRateByTool.keys(),
@@ -117295,6 +117387,7 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
             const cnt = uniqueLatencies.length;
             let failed = 0;
             const failList = failureByToolAgentIndex.get(`${toolName}|${aid}`) ?? [];
+            const sessionId = agentIdToSessionId.get(aid);
             const leaves = uniqueLatencies.map((l, idx)=>{
                 const failVal = failureByKey.get(l.key);
                 const failValByIndex = failList[idx];
@@ -117302,12 +117395,15 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
                 const isFailed = resolvedFail !== undefined && resolvedFail >= 0.5;
                 if (isFailed) failed++;
                 const leafName = l.toolNodeId ?? `invocation-${idx + 1}`;
+                const nodeId = l.toolNodeId ?? undefined;
                 return {
                     key: `${toolName}-${aid}-${idx}`,
                     name: leafName,
                     runtimeMs: Math.round(l.value * 1000),
                     failureRate: isFailed ? "Failed" : "Success",
                     level: 3,
+                    sessionId: sessionId ?? undefined,
+                    nodeId,
                     children: undefined
                 };
             });
@@ -117319,6 +117415,8 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
                 runtimeMs: Math.round(totalRuntimeMs),
                 failureRate: agentFailurePct,
                 level: 2,
+                sessionId: sessionId ?? undefined,
+                nodeId: aid,
                 children: leaves.length > 0 ? leaves : undefined
             });
         }
@@ -117363,12 +117461,13 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
     }
     const latencyResults = toolResults.filter((r)=>LATENCY_RESULT_PREFIXES.some((prefix)=>r.result_name?.startsWith(prefix)));
     const failureResults = toolResults.filter((r)=>r.result_name?.startsWith("FailureRate/"));
-    return buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults);
+    const agentIdToSessionId = buildAgentIdToSessionMap(agg.agents);
+    return buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults, agentIdToSessionId);
 }
 /**
  * Builds a tree from raw ToolUseEvaluator results (legacy flat format).
  * Structure: tool (level 1) → agent (level 2) → invocation (level 3).
- */ function buildToolUseTreeFromRawResults(rawResults) {
+ */ function buildToolUseTreeFromRawResults(rawResults, agents) {
     const toolResults = rawResults.filter((r)=>isToolResult(r));
     const toolAggregates = rawResults.filter((r)=>isToolAggregate(r));
     const latencyByTool = new Map();
@@ -117390,7 +117489,8 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
     }
     const latencyResults = toolResults.filter((r)=>r.result_name.startsWith("Latency/") || r.result_name.startsWith("Runtime/"));
     const failureResults = toolResults.filter((r)=>r.result_name.startsWith("FailureRate/"));
-    return buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults);
+    const agentIdToSessionId = buildAgentIdToSessionMap(agents);
+    return buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults, agentIdToSessionId);
 }
 
 function detectAggregateType(nodes) {
@@ -117457,7 +117557,7 @@ const DEFAULT_TITLES = {
     LLMInference: "LLM Inference Evaluator - Aggregate View",
     Judge: "Judge Evaluator - Aggregate View"
 };
-const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, title, evaluatorName })=>{
+const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, title, evaluatorName, onAgentNodeClick })=>{
     const { theme } = useTheme$1();
     const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
     const { aggregateType, dataSource, llmIsTree, llmExpandableKeys } = React.useMemo(()=>{
@@ -117466,7 +117566,10 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
             if (type === "ToolUse") {
                 return {
                     aggregateType: type,
-                    dataSource: buildToolUseTreeFromAggregate(aggregateResults),
+                    dataSource: buildToolUseTreeFromAggregate({
+                        ...aggregateResults,
+                        agents
+                    }),
                     llmIsTree: false,
                     llmExpandableKeys: []
                 };
@@ -117508,7 +117611,7 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
         if (toolResults.length > 0) {
             return {
                 aggregateType: "ToolUse",
-                dataSource: buildToolUseTreeFromRawResults(toolResults),
+                dataSource: buildToolUseTreeFromRawResults(toolResults, agents),
                 llmIsTree: false,
                 llmExpandableKeys: []
             };
@@ -117616,17 +117719,37 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                     }), "Name"),
                     dataIndex: "name",
                     key: "name",
-                    render: (name, row)=>/*#__PURE__*/ React.createElement("span", {
+                    render: (name, row)=>{
+                        const isClickable = row.level === 3 && row.agentNodeId && onAgentNodeClick;
+                        return /*#__PURE__*/ React.createElement("span", {
                             style: {
                                 display: "inline-flex",
                                 alignItems: "center",
                                 gap: 8,
                                 fontFamily: "monospace",
-                                fontSize: 13
-                            }
+                                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
                         }, /*#__PURE__*/ React.createElement(LLMTagForLevel, {
                             level: row.level
-                        }), name)
+                        }), name);
+                    }
                 },
                 ...METRIC_COLUMNS.map(({ key, title, Icon })=>({
                         title: /*#__PURE__*/ React.createElement("span", {
@@ -117956,17 +118079,37 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
             }), "Name"),
             dataIndex: "name",
             key: "name",
-            render: (name, row)=>/*#__PURE__*/ React.createElement("span", {
+            render: (name, row)=>{
+                const isClickable = (row.level === 2 || row.level === 3) && row.nodeId && onAgentNodeClick;
+                return /*#__PURE__*/ React.createElement("span", {
                     style: {
                         display: "inline-flex",
                         alignItems: "center",
                         gap: 8,
                         fontFamily: "monospace",
-                        fontSize: 13
-                    }
+                        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
                 }, /*#__PURE__*/ React.createElement(TagForLevel, {
                     level: row.level
-                }), name)
+                }), name);
+            }
         },
         {
             title: /*#__PURE__*/ React.createElement("span", {
@@ -118276,11 +118419,14 @@ function isCategoricalMetric(def) {
 /** Derive agent display name from DTO. */ function deriveAgentName(evaluation) {
     return evaluation.agents?.map((a)=>a.agent_name).join(", ") ?? "-";
 }
-/** Derive runs count from DTO (agent_node_ids). */ function deriveRunsCount(evaluation) {
-    return evaluation.agents?.flatMap((a)=>a.agent_node_ids ?? []).length ?? 0;
+/** Derive runs count from DTO (agent_node_ids). Supports both string[] and { session_id, agent_node_id }[]. */ function deriveRunsCount(evaluation) {
+    return evaluation.agents?.reduce((sum, a)=>{
+        const ids = a.agent_node_ids ?? [];
+        return sum + ids.length;
+    }, 0) ?? 0;
 }
 
-const EvaluatorResult = ({ evaluation, evaluatorId, backHref })=>{
+const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick })=>{
     const { theme } = useTheme$1();
     const labelColor = theme.colors.mutedForeground;
     const derived = evaluation ? deriveEvaluatorResultData(evaluation, evaluatorId) : null;
@@ -118299,7 +118445,13 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref })=>{
     const { completed_at } = evaluation;
     const agentName = deriveAgentName(evaluation);
     const runsCount = deriveRunsCount(evaluation);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
         style: {
             width: "100%",
             minWidth: 0
@@ -118416,8 +118568,9 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref })=>{
         rawResults: rawResults.filter((r)=>isToolResult(r) || isToolAggregate(r)),
         aggregateResults: aggregateResults,
         agents: evaluation.agents,
-        evaluatorName: evaluatorName
-    })));
+        evaluatorName: evaluatorName,
+        onAgentNodeClick: onAgentNodeClick
+    }))));
 };
 
 function __insertCSS(code) {

package/dist/esm/index.js

@@ -113579,7 +113579,7 @@ const RunContent = ({ run, isDarkMode, showTimeline })=>{
         height: "100%"
     })));
 };
-const SessionDetails = ({ session, open, onClose })=>{
+const SessionDetails = ({ session, open, onClose, initialNodeId, initialRunId, loading = false })=>{
     const { isDarkMode, theme } = useTheme$1();
     const [isFullScreen, setIsFullScreen] = useState(false);
     const [selectedNodeKey, setSelectedNodeKey] = useState(null);
@@ -113632,8 +113632,7 @@ const SessionDetails = ({ session, open, onClose })=>{
     }, [
         open
     ]);
-    // Default to first root node when session loads (node without a parent, matching tree structure).
-    // Combined with session_id reset to avoid effect ordering overwriting the selection.
+    // Default to first root node when session loads, or use initialNodeId/initialRunId when provided.
     const hasAutoSelectedRef = React__default.useRef(false);
     React__default.useEffect(()=>{
         if (!open) {
@@ -113642,6 +113641,19 @@ const SessionDetails = ({ session, open, onClose })=>{
         }
         if (!session?.runs?.length) return;
         if (hasAutoSelectedRef.current && selectedNodeInfo !== null) return;
+        // Prefer initial node when provided (e.g. from evaluation link)
+        if (initialNodeId) {
+            const run = initialRunId ? session.runs.find((r)=>r.run_id === initialRunId) : session.runs.find((r)=>r.nodes?.some((n)=>n.identifier === initialNodeId));
+            if (run?.run_id && getNodeFromRun(initialNodeId, run)) {
+                handleSelectNode({
+                    nodeId: initialNodeId,
+                    runId: run.run_id
+                });
+                hasAutoSelectedRef.current = true;
+                return;
+            }
+        }
+        // Fallback: first root node
         for (const run of session.runs){
             const firstRoot = getFirstRootNodeFromRun(run);
             if (firstRoot && run.run_id) {
@@ -113658,7 +113670,9 @@ const SessionDetails = ({ session, open, onClose })=>{
     }, [
         open,
         session,
-        selectedNodeInfo
+        selectedNodeInfo,
+        initialNodeId,
+        initialRunId
     ]);
     // Reset hasAutoSelectedRef when session changes so auto-select runs for the new session
     React__default.useEffect(()=>{
@@ -113671,7 +113685,13 @@ const SessionDetails = ({ session, open, onClose })=>{
     // Get the active run for full screen display (use selected run or first run)
     const activeRun = session?.runs.find((r)=>r.run_id === selectedNodeInfo?.runId) || session?.runs?.[0];
     const extraButtonsIconSize = 24;
-    return /*#__PURE__*/ React__default.createElement(Drawer$2, {
+    return /*#__PURE__*/ React__default.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React__default.createElement(Drawer$2, {
         title: /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, session?.name || "Unnamed Session", " -", " ", session?.start_time ? moment(session.start_time * 1000).fromNow() : "N/A"),
         placement: "right",
         size: isFullScreen ? "100%" : "70%",
@@ -113745,7 +113765,18 @@ const SessionDetails = ({ session, open, onClose })=>{
                 flexDirection: "column"
             }
         }
-    }, !session ? /*#__PURE__*/ React__default.createElement("div", {
+    }, loading ? /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            color: isDarkMode ? "#8c8c8c" : "#595959"
+        }
+    }, /*#__PURE__*/ React__default.createElement(Spin, {
+        size: "large",
+        tip: "Loading session..."
+    })) : !session ? /*#__PURE__*/ React__default.createElement("div", {
         style: {
             display: "flex",
             alignItems: "center",
@@ -113803,7 +113834,7 @@ const SessionDetails = ({ session, open, onClose })=>{
         selectedNode: selectedNodeInfo,
         session: session,
         isDarkMode: isDarkMode
-    }))));
+    })))));
 };
 
 /**
@@ -114004,14 +114035,20 @@ function dtoMetricToMetric(def) {
             };
         }
     }
-    // Build runs from agents.agent_node_ids
-    const agentIds = evalDto.agents.flatMap((a)=>a.agent_node_ids);
-    const runs = agentIds.map((nodeId)=>({
-            session_id: "",
-            run_id: nodeId,
+    // Build runs from agents.agent_node_ids (support legacy string[] and new { session_id, agent_node_id }[])
+    const agentNodeEntries = evalDto.agents.flatMap((a)=>{
+        const ids = a.agent_node_ids ?? [];
+        return ids.map((entry)=>typeof entry === "string" ? {
+                session_id: "",
+                agent_node_id: entry
+            } : entry);
+    });
+    const runs = agentNodeEntries.map(({ session_id, agent_node_id })=>({
+            session_id,
+            run_id: agent_node_id,
             results: {}
         }));
-    // Agent name(s) for display - comma-separated when multiple; include agent_node_ids for LLM tree
+    // Agent name(s) for display - comma-separated when multiple; pass through agent_node_ids for LLM tree (both formats)
     const agents = evalDto.agents.map((a)=>({
             agent_name: a.agent_name,
             agent_node_ids: a.agent_node_ids
@@ -114211,7 +114248,13 @@ const EvaluationsCompareView = ({ evaluations, evaluationId1, evaluationId2, onE
     ];
     const evaluation1Label = evaluation1 ? `${evaluation1.name || "Unnamed Evaluation"} (${evaluation1.agent_name})` : "Select evaluation 1";
     const evaluation2Label = evaluation2 ? `${evaluation2.name || "Unnamed Evaluation"} (${evaluation2.agent_name})` : "Select evaluation 2";
-    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, backHref && /*#__PURE__*/ React__default.createElement("a", {
+    return /*#__PURE__*/ React__default.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, backHref && /*#__PURE__*/ React__default.createElement("a", {
         href: backHref,
         style: {
             display: "inline-flex",
@@ -114406,7 +114449,13 @@ const EvaluationsCompareDrawer = ({ open, onClose, evaluationId1, evaluationId2,
             staticMethods.error("Failed to copy share link");
         }
     };
-    return /*#__PURE__*/ React__default.createElement(Drawer$2, {
+    return /*#__PURE__*/ React__default.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React__default.createElement(Drawer$2, {
         title: "Compare Evaluations",
         placement: "right",
         size: "60%",
@@ -114448,7 +114497,7 @@ const EvaluationsCompareDrawer = ({ open, onClose, evaluationId1, evaluationId2,
         onEvaluationId1Change: onEvaluationId1Change,
         onEvaluationId2Change: onEvaluationId2Change,
         showEvaluationComparisonDropdowns: false
-    }));
+    })));
 };
 
 const defaultGetEvaluatorResultsHref = (evaluationId, evaluatorId)=>`#/evaluations/${evaluationId}/results/${evaluatorId}`;
@@ -114474,7 +114523,13 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
     const normalizedEvaluation = React__default.useMemo(()=>evaluation && isEvaluationDto(evaluation) ? transformEvaluation(evaluation) : evaluation, [
         evaluation
     ]);
-    return /*#__PURE__*/ React__default.createElement(Drawer$2, {
+    return /*#__PURE__*/ React__default.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React__default.createElement(Drawer$2, {
         title: normalizedEvaluation ? /*#__PURE__*/ React__default.createElement("div", {
             style: {
                 display: "flex",
@@ -114679,11 +114734,17 @@ const EvaluationDetailsDrawer = ({ evaluation, open, onClose, getEvaluatorResult
                 getPopupContainer: ()=>document.body
             }, tag) : tag;
         })));
-    })))));
+    }))))));
 };
 
 const GITHUB_URL = "https://github.com/RailtownAI/railtracks/";
-const EvaluationsErrorCard = ({ error, onRetry })=>/*#__PURE__*/ React__default.createElement(Alert, {
+const EvaluationsErrorCard = ({ error, onRetry })=>/*#__PURE__*/ React__default.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React__default.createElement(Alert, {
         type: "error",
         title: "Error loading evaluations",
         description: /*#__PURE__*/ React__default.createElement("div", {
@@ -114719,7 +114780,7 @@ const EvaluationsErrorCard = ({ error, onRetry })=>/*#__PURE__*/ React__default.
             })
         }, "Retry") : undefined,
         showIcon: true
-    });
+    }));
 
 const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefresh, onRowClick, onCompare, compareIdsFromUrl, onCompareUrlChange, showFilters = true, showCompare = true, emptyMessage, title, pagination: serverPagination, onFiltersChange, onFetchEvaluationsByIds, errorRender })=>{
     const { theme } = useTheme$1();
@@ -114971,7 +115032,13 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
         target: "_blank",
         rel: "noopener noreferrer"
     }, "view our documentation on how to create evaluations"), "."));
-    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", {
+    return /*#__PURE__*/ React__default.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
         style: {
             display: "flex",
             justifyContent: "space-between",
@@ -117039,12 +117106,17 @@ function isLLMNode(n) {
 function isLLMAggregateNode(n) {
     return isLLMInferenceAggregate(n);
 }
-/** Map agent_data_id to agent_name */ function buildAgentIdToNameMap(agents) {
+/** Normalize agent_node_ids to { nodeId, sessionId? }[] */ function normalizeAgentNodeEntries(agents) {
     const map = new Map();
     if (!agents) return map;
     for (const a of agents){
-        for (const nid of a.agent_node_ids ?? []){
-            map.set(nid, a.agent_name);
+        for (const entry of a.agent_node_ids ?? []){
+            const nodeId = typeof entry === "string" ? entry : entry.agent_node_id;
+            const sessionId = typeof entry === "string" ? undefined : entry.session_id;
+            map.set(nodeId, {
+                agentName: a.agent_name,
+                sessionId
+            });
         }
     }
     return map;
@@ -117056,7 +117128,7 @@ function isLLMAggregateNode(n) {
  */ function buildLLMInferenceTreeFromAggregateResults(agg) {
     const { roots, nodes, agents } = agg;
     const nodeMap = nodes;
-    const agentIdToName = buildAgentIdToNameMap(agents);
+    const agentNodeInfo = normalizeAgentNodeEntries(agents);
     // Resolve root IDs to aggregate nodes
     const rootAggregates = [];
     for (const id of roots){
@@ -117089,14 +117161,17 @@ function isLLMAggregateNode(n) {
     }
     const sortedCalls = Array.from(llmCallIndices).sort((a, b)=>a - b);
     const sortedMetrics = Array.from(metricNames).sort();
-    // Group agent_node_ids by agent
-    const agentToNodeIds = new Map();
-    for (const [nodeId, agentName] of agentIdToName){
-        if (!agentToNodeIds.has(agentName)) agentToNodeIds.set(agentName, []);
-        agentToNodeIds.get(agentName).push(nodeId);
+    // Group agent_node_ids by agent: { nodeId, sessionId? }[]
+    const agentToNodeEntries = new Map();
+    for (const [nodeId, info] of agentNodeInfo){
+        if (!agentToNodeEntries.has(info.agentName)) agentToNodeEntries.set(info.agentName, []);
+        agentToNodeEntries.get(info.agentName).push({
+            nodeId,
+            sessionId: info.sessionId
+        });
     }
     // If no agents provided, infer from data: collect unique agent_data_ids into "Agent (root)"
-    if (agentToNodeIds.size === 0) {
+    if (agentToNodeEntries.size === 0) {
         const seen = new Set();
         for (const aggNode of rootAggregates){
             for (const childId of aggNode.children ?? []){
@@ -117108,17 +117183,21 @@ function isLLMAggregateNode(n) {
             }
         }
         if (seen.size > 0) {
-            agentToNodeIds.set("Agent (root)", Array.from(seen));
+            agentToNodeEntries.set("Agent (root)", Array.from(seen).map((nodeId)=>({
+                    nodeId,
+                    sessionId: undefined
+                })));
         }
     }
     const rows = [];
-    for (const [agentName, nodeIds] of agentToNodeIds){
+    for (const [agentName, nodeEntries] of agentToNodeEntries){
+        const nodeIds = nodeEntries.map((e)=>e.nodeId);
         const agentKey = `agent-${agentName.replace(/\s+/g, "-")}`;
         const llmCallChildren = [];
         for (const callIdx of sortedCalls){
             const callKey = `${agentKey}-call-${callIdx}`;
             const nodeChildren = [];
-            nodeIds.forEach((nodeId, idx)=>{
+            nodeEntries.forEach(({ nodeId, sessionId })=>{
                 const metrics = {};
                 for (const m of sortedMetrics){
                     const k = `${nodeId}|${callIdx}|${m}`;
@@ -117134,6 +117213,7 @@ function isLLMAggregateNode(n) {
                         metrics,
                         value: metrics[primaryMetric],
                         agentNodeId: nodeId,
+                        sessionId,
                         children: undefined
                     });
                 }
@@ -117212,7 +117292,19 @@ const LATENCY_RESULT_PREFIXES = [
     "Latency/",
     "Runtime/"
 ];
-function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults) {
+/** Build map from agent_node_id -> session_id from agents (supports both formats) */ function buildAgentIdToSessionMap(agents) {
+    const map = new Map();
+    if (!agents) return map;
+    for (const a of agents){
+        for (const entry of a.agent_node_ids ?? []){
+            const nodeId = typeof entry === "string" ? entry : entry.agent_node_id;
+            const sessionId = typeof entry === "string" ? undefined : entry.session_id;
+            if (sessionId) map.set(nodeId, sessionId);
+        }
+    }
+    return map;
+}
+function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults, agentIdToSessionId) {
     const toolNamesFromAgg = Array.from(new Set([
         ...latencyByTool.keys(),
         ...failureRateByTool.keys(),
@@ -117275,6 +117367,7 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
             const cnt = uniqueLatencies.length;
             let failed = 0;
             const failList = failureByToolAgentIndex.get(`${toolName}|${aid}`) ?? [];
+            const sessionId = agentIdToSessionId.get(aid);
             const leaves = uniqueLatencies.map((l, idx)=>{
                 const failVal = failureByKey.get(l.key);
                 const failValByIndex = failList[idx];
@@ -117282,12 +117375,15 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
                 const isFailed = resolvedFail !== undefined && resolvedFail >= 0.5;
                 if (isFailed) failed++;
                 const leafName = l.toolNodeId ?? `invocation-${idx + 1}`;
+                const nodeId = l.toolNodeId ?? undefined;
                 return {
                     key: `${toolName}-${aid}-${idx}`,
                     name: leafName,
                     runtimeMs: Math.round(l.value * 1000),
                     failureRate: isFailed ? "Failed" : "Success",
                     level: 3,
+                    sessionId: sessionId ?? undefined,
+                    nodeId,
                     children: undefined
                 };
             });
@@ -117299,6 +117395,8 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
                 runtimeMs: Math.round(totalRuntimeMs),
                 failureRate: agentFailurePct,
                 level: 2,
+                sessionId: sessionId ?? undefined,
+                nodeId: aid,
                 children: leaves.length > 0 ? leaves : undefined
             });
         }
@@ -117343,12 +117441,13 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
     }
     const latencyResults = toolResults.filter((r)=>LATENCY_RESULT_PREFIXES.some((prefix)=>r.result_name?.startsWith(prefix)));
     const failureResults = toolResults.filter((r)=>r.result_name?.startsWith("FailureRate/"));
-    return buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults);
+    const agentIdToSessionId = buildAgentIdToSessionMap(agg.agents);
+    return buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults, agentIdToSessionId);
 }
 /**
  * Builds a tree from raw ToolUseEvaluator results (legacy flat format).
  * Structure: tool (level 1) → agent (level 2) → invocation (level 3).
- */ function buildToolUseTreeFromRawResults(rawResults) {
+ */ function buildToolUseTreeFromRawResults(rawResults, agents) {
     const toolResults = rawResults.filter((r)=>isToolResult(r));
     const toolAggregates = rawResults.filter((r)=>isToolAggregate(r));
     const latencyByTool = new Map();
@@ -117370,7 +117469,8 @@ function buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCount
     }
     const latencyResults = toolResults.filter((r)=>r.result_name.startsWith("Latency/") || r.result_name.startsWith("Runtime/"));
     const failureResults = toolResults.filter((r)=>r.result_name.startsWith("FailureRate/"));
-    return buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults);
+    const agentIdToSessionId = buildAgentIdToSessionMap(agents);
+    return buildTreeFromProcessedData(latencyByTool, failureRateByTool, usageCountByTool, latencyResults, failureResults, agentIdToSessionId);
 }
 
 function detectAggregateType(nodes) {
@@ -117437,7 +117537,7 @@ const DEFAULT_TITLES = {
     LLMInference: "LLM Inference Evaluator - Aggregate View",
     Judge: "Judge Evaluator - Aggregate View"
 };
-const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, title, evaluatorName })=>{
+const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, title, evaluatorName, onAgentNodeClick })=>{
     const { theme } = useTheme$1();
     const [expandedRowKeys, setExpandedRowKeys] = useState([]);
     const { aggregateType, dataSource, llmIsTree, llmExpandableKeys } = useMemo(()=>{
@@ -117446,7 +117546,10 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
             if (type === "ToolUse") {
                 return {
                     aggregateType: type,
-                    dataSource: buildToolUseTreeFromAggregate(aggregateResults),
+                    dataSource: buildToolUseTreeFromAggregate({
+                        ...aggregateResults,
+                        agents
+                    }),
                     llmIsTree: false,
                     llmExpandableKeys: []
                 };
@@ -117488,7 +117591,7 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
         if (toolResults.length > 0) {
             return {
                 aggregateType: "ToolUse",
-                dataSource: buildToolUseTreeFromRawResults(toolResults),
+                dataSource: buildToolUseTreeFromRawResults(toolResults, agents),
                 llmIsTree: false,
                 llmExpandableKeys: []
             };
@@ -117596,17 +117699,37 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
                     }), "Name"),
                     dataIndex: "name",
                     key: "name",
-                    render: (name, row)=>/*#__PURE__*/ React__default.createElement("span", {
+                    render: (name, row)=>{
+                        const isClickable = row.level === 3 && row.agentNodeId && onAgentNodeClick;
+                        return /*#__PURE__*/ React__default.createElement("span", {
                             style: {
                                 display: "inline-flex",
                                 alignItems: "center",
                                 gap: 8,
                                 fontFamily: "monospace",
-                                fontSize: 13
-                            }
+                                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
                         }, /*#__PURE__*/ React__default.createElement(LLMTagForLevel, {
                             level: row.level
-                        }), name)
+                        }), name);
+                    }
                 },
                 ...METRIC_COLUMNS.map(({ key, title, Icon })=>({
                         title: /*#__PURE__*/ React__default.createElement("span", {
@@ -117936,17 +118059,37 @@ const AggregateResultsTable = ({ rawResults = [], aggregateResults, agents, titl
             }), "Name"),
             dataIndex: "name",
             key: "name",
-            render: (name, row)=>/*#__PURE__*/ React__default.createElement("span", {
+            render: (name, row)=>{
+                const isClickable = (row.level === 2 || row.level === 3) && row.nodeId && onAgentNodeClick;
+                return /*#__PURE__*/ React__default.createElement("span", {
                     style: {
                         display: "inline-flex",
                         alignItems: "center",
                         gap: 8,
                         fontFamily: "monospace",
-                        fontSize: 13
-                    }
+                        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
                 }, /*#__PURE__*/ React__default.createElement(TagForLevel, {
                     level: row.level
-                }), name)
+                }), name);
+            }
         },
         {
             title: /*#__PURE__*/ React__default.createElement("span", {
@@ -118256,11 +118399,14 @@ function isCategoricalMetric(def) {
 /** Derive agent display name from DTO. */ function deriveAgentName(evaluation) {
     return evaluation.agents?.map((a)=>a.agent_name).join(", ") ?? "-";
 }
-/** Derive runs count from DTO (agent_node_ids). */ function deriveRunsCount(evaluation) {
-    return evaluation.agents?.flatMap((a)=>a.agent_node_ids ?? []).length ?? 0;
+/** Derive runs count from DTO (agent_node_ids). Supports both string[] and { session_id, agent_node_id }[]. */ function deriveRunsCount(evaluation) {
+    return evaluation.agents?.reduce((sum, a)=>{
+        const ids = a.agent_node_ids ?? [];
+        return sum + ids.length;
+    }, 0) ?? 0;
 }
 
-const EvaluatorResult = ({ evaluation, evaluatorId, backHref })=>{
+const EvaluatorResult = ({ evaluation, evaluatorId, backHref, onAgentNodeClick })=>{
     const { theme } = useTheme$1();
     const labelColor = theme.colors.mutedForeground;
     const derived = evaluation ? deriveEvaluatorResultData(evaluation, evaluatorId) : null;
@@ -118279,7 +118425,13 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref })=>{
     const { completed_at } = evaluation;
     const agentName = deriveAgentName(evaluation);
     const runsCount = deriveRunsCount(evaluation);
-    return /*#__PURE__*/ React__default.createElement("div", {
+    return /*#__PURE__*/ React__default.createElement(ConfigProvider, {
+        theme: {
+            token: {
+                fontFamily: "inherit"
+            }
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
         style: {
             width: "100%",
             minWidth: 0
@@ -118396,8 +118548,9 @@ const EvaluatorResult = ({ evaluation, evaluatorId, backHref })=>{
         rawResults: rawResults.filter((r)=>isToolResult(r) || isToolAggregate(r)),
         aggregateResults: aggregateResults,
         agents: evaluation.agents,
-        evaluatorName: evaluatorName
-    })));
+        evaluatorName: evaluatorName,
+        onAgentNodeClick: onAgentNodeClick
+    }))));
 };
 
 function __insertCSS(code) {

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

@@ -13,11 +13,16 @@ export interface AggregateResultsTableProps {
     /** Agents (with agent_node_ids) for LLM inference tree Agent (root) labels. */
     agents?: {
         agent_name: string;
-        agent_node_ids?: string[];
+        agent_node_ids?: string[] | {
+            session_id: string;
+            agent_node_id: string;
+        }[];
     }[];
     /** Title shown above the table. */
     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. */
+    onAgentNodeClick?: (sessionId: string | undefined, nodeId: string) => void;
 }
 export declare const AggregateResultsTable: React.FC<AggregateResultsTableProps>;

package/dist/types/agenthub/pages/evaluations.types.d.ts

@@ -56,7 +56,10 @@ export interface Evaluation {
     /** Agents in the evaluation (name and node IDs for LLM inference tree) */
     agents: {
         agent_name: string;
-        agent_node_ids?: string[];
+        agent_node_ids?: string[] | {
+            session_id: string;
+            agent_node_id: string;
+        }[];
     }[];
     /** Number of agents in the evaluation */
     agents_count: number;

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

@@ -2,10 +2,15 @@ import React from "react";
 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.
+     */
+    onAgentNodeClick?: (sessionId: string | undefined, nodeId: string) => void;
 }
 /**
  * Page that resolves evaluationId and evaluatorId from the route,
  * fetches evaluation data, and renders EvaluatorResult.
- * backHref should be passed from the outer/host app for portability.
+ * backHref and onAgentNodeClick should be passed from the outer/host app for portability.
  */
 export declare const EvaluatorResultPage: React.FC<EvaluatorResultPageProps>;

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

@@ -11,5 +11,10 @@ export interface EvaluatorResultProps {
     evaluatorId: string;
     /** 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).
+     */
+    onAgentNodeClick?: (sessionId: string | undefined, nodeId: string) => void;
 }
 export declare const EvaluatorResult: React.FC<EvaluatorResultProps>;

package/dist/types/agenthub/pages/session-details.d.ts

@@ -5,6 +5,12 @@ interface SessionDetailsProps {
     session: SessionListItem | null;
     open: boolean;
     onClose: () => void;
+    /** Optional initial node to select when opening (e.g. from evaluation link). */
+    initialNodeId?: string;
+    /** Optional run containing the node. When omitted, the run is found by searching session.runs. */
+    initialRunId?: string;
+    /** When true, show loading state instead of "No session data available". */
+    loading?: boolean;
 }
 export declare const InputsOutputsComponent: React.FC<{
     run: AgentRun;

package/dist/types/agenthub/utils/evaluatorResultFromDto.d.ts

@@ -33,5 +33,5 @@ export interface EvaluatorResultDerived {
 export declare function deriveEvaluatorResultData(evaluation: Evaluation, evaluatorId: string): EvaluatorResultDerived | null;
 /** Derive agent display name from DTO. */
 export declare function deriveAgentName(evaluation: Evaluation): string;
-/** Derive runs count from DTO (agent_node_ids). */
+/** Derive runs count from DTO (agent_node_ids). Supports both string[] and { session_id, agent_node_id }[]. */
 export declare function deriveRunsCount(evaluation: Evaluation): number;

package/dist/types/agenthub/utils/llmInferenceAggregateTree.d.ts

@@ -2,13 +2,17 @@
  * Transforms LLMInferenceEvaluator aggregate_results (roots + nodes) into a tree
  * structure for table rendering. Builds hierarchy: Agent (root) -> llm call -> agent node id.
  */
+type AgentNodeIdEntry = string | {
+    session_id: string;
+    agent_node_id: string;
+};
 export type LLMAggregateResultsInput = {
     roots: string[];
     nodes: Record<string, unknown>;
-    /** Optional agents for Agent (root) labels; agent_node_ids map agent_data_id to agent */
+    /** Optional agents for Agent (root) labels; agent_node_ids can be string[] or { session_id, agent_node_id }[] */
     agents?: {
         agent_name: string;
-        agent_node_ids?: string[];
+        agent_node_ids?: AgentNodeIdEntry[];
     }[];
 };
 export interface LLMInferenceTreeRow {
@@ -26,6 +30,8 @@ export interface LLMInferenceTreeRow {
     value?: number;
     /** Leaf agent node id */
     agentNodeId?: string;
+    /** Session id for linking to session-details (when agent_node_ids use new format) */
+    sessionId?: string;
     children?: LLMInferenceTreeRow[];
 }
 /**
@@ -34,3 +40,4 @@ export interface LLMInferenceTreeRow {
  * Each row has metric values (InputTokens, OutputTokens, TotalCost, Latency) as columns.
  */
 export declare function buildLLMInferenceTreeFromAggregateResults(agg: LLMAggregateResultsInput): LLMInferenceTreeRow[];
+export {};

package/dist/types/agenthub/utils/toolUseAggregateTree.d.ts

@@ -3,9 +3,18 @@
  * into a tree structure for table rendering. Builds hierarchy: tool → agent → invocation.
  */
 import type { EvaluationResultItem } from "../../dto/Evaluation";
+type AgentNodeIdEntry = string | {
+    session_id: string;
+    agent_node_id: string;
+};
 export type ToolUseAggregateResultsInput = {
     roots: string[];
     nodes: Record<string, unknown>;
+    /** Optional agents for session deep-linking; agent_node_ids can be string[] or { session_id, agent_node_id }[] */
+    agents?: {
+        agent_name: string;
+        agent_node_ids?: AgentNodeIdEntry[];
+    }[];
 };
 export interface ToolUseTreeRow {
     key: string;
@@ -14,6 +23,10 @@ export interface ToolUseTreeRow {
     runtimeMs?: number;
     failureRate?: string | "Success" | "Failed";
     level: 1 | 2 | 3;
+    /** Session id for deep-linking to session drawer (level 2–3) */
+    sessionId?: string;
+    /** Node id to select in SessionTree (agent_node_id for level 2, tool_node_id for level 3) */
+    nodeId?: string;
     children?: ToolUseTreeRow[];
 }
 /**
@@ -25,4 +38,8 @@ export declare function buildToolUseTreeFromAggregate(agg: ToolUseAggregateResul
  * Builds a tree from raw ToolUseEvaluator results (legacy flat format).
  * Structure: tool (level 1) → agent (level 2) → invocation (level 3).
  */
-export declare function buildToolUseTreeFromRawResults(rawResults: EvaluationResultItem[]): ToolUseTreeRow[];
+export declare function buildToolUseTreeFromRawResults(rawResults: EvaluationResultItem[], agents?: {
+    agent_name: string;
+    agent_node_ids?: AgentNodeIdEntry[];
+}[]): ToolUseTreeRow[];
+export {};

package/dist/types/dto/Evaluation.d.ts

@@ -141,10 +141,16 @@ export type EvaluationEvaluatorResult = {
     /** Aggregate tree (roots + nodes with ToolAggregate, LLMInferenceAggregate, CategoricalAggregate) */
     aggregate_results?: EvaluationAggregateResults;
 };
+/** New format: agent node with session context */
+export type EvaluationAgentNodeEntry = {
+    session_id: string;
+    agent_node_id: string;
+};
 /** Agent entry in the evaluation (each has name and associated node IDs) */
 export type EvaluationAgent = {
     agent_name: string;
-    agent_node_ids: string[];
+    /** Legacy: flat list of node IDs. New: list of { session_id, agent_node_id } */
+    agent_node_ids: string[] | EvaluationAgentNodeEntry[];
 };
 /** Root evaluation document */
 export type Evaluation = {

package/package.json

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