@railtownai/railtracks-visualizer 0.0.50 → 0.0.51

package/dist/cjs/index.js

@@ -12902,7 +12902,25 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$i = [
+const __iconNode$m = [
+    [
+        "path",
+        {
+            d: "m12 19-7-7 7-7",
+            key: "1l729n"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M19 12H5",
+            key: "x3x0zl"
+        }
+    ]
+];
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$m);
+
+const __iconNode$l = [
     [
         "path",
         {
@@ -12918,9 +12936,9 @@ const __iconNode$i = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$i);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$l);
 
-const __iconNode$h = [
+const __iconNode$k = [
     [
         "path",
         {
@@ -12968,9 +12986,9 @@ const __iconNode$h = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$h);
+const Bot = createLucideIcon("bot", __iconNode$k);
 
-const __iconNode$g = [
+const __iconNode$j = [
     [
         "path",
         {
@@ -13004,9 +13022,9 @@ const __iconNode$g = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$g);
+const Calendar = createLucideIcon("calendar", __iconNode$j);
 
-const __iconNode$f = [
+const __iconNode$i = [
     [
         "path",
         {
@@ -13063,9 +13081,9 @@ const __iconNode$f = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$f);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$i);
 
-const __iconNode$e = [
+const __iconNode$h = [
     [
         "path",
         {
@@ -13074,9 +13092,9 @@ const __iconNode$e = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$e);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$h);
 
-const __iconNode$d = [
+const __iconNode$g = [
     [
         "path",
         {
@@ -13085,7 +13103,61 @@ const __iconNode$d = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
+
+const __iconNode$f = [
+    [
+        "path",
+        {
+            d: "m7 6 5 5 5-5",
+            key: "1lc07p"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m7 13 5 5 5-5",
+            key: "1d48rs"
+        }
+    ]
+];
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$f);
+
+const __iconNode$e = [
+    [
+        "path",
+        {
+            d: "m17 11-5-5-5 5",
+            key: "e8nh98"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m17 18-5-5-5 5",
+            key: "2avn1x"
+        }
+    ]
+];
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$e);
+
+const __iconNode$d = [
+    [
+        "path",
+        {
+            d: "M21.801 10A10 10 0 1 1 17 3.335",
+            key: "yps3ct"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m9 11 3 3L22 4",
+            key: "1pflzl"
+        }
+    ]
+];
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$d);
 
 const __iconNode$c = [
     [
@@ -114375,6 +114447,490 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
     }));
 };
 
+function buildTreeFromRawResults(rawResults) {
+    const toolResults = rawResults.filter((r)=>isToolResult(r));
+    const toolAggregates = rawResults.filter((r)=>isToolAggregate(r));
+    const latencyByTool = new Map();
+    const failureRateByTool = new Map();
+    const usageCountByTool = new Map();
+    for (const agg of toolAggregates){
+        const name = agg.metric.name;
+        const tool = agg.tool_name;
+        if (name === "Latency") {
+            latencyByTool.set(tool, {
+                mean: agg.mean,
+                count: agg.values.length
+            });
+        } else if (name === "FailureRate") {
+            failureRateByTool.set(tool, agg.mean * 100);
+        } else if (name === "UsageCount") {
+            usageCountByTool.set(tool, agg.values.reduce((a, b)=>a + b, 0));
+        }
+    }
+    const latencyResults = toolResults.filter((r)=>r.result_name.startsWith("Latency/"));
+    const failureResults = toolResults.filter((r)=>r.result_name.startsWith("FailureRate/"));
+    const toolNamesFromAgg = Array.from(new Set([
+        ...latencyByTool.keys(),
+        ...failureRateByTool.keys(),
+        ...usageCountByTool.keys()
+    ]));
+    const toolNamesFromResults = Array.from(new Set(latencyResults.map((r)=>r.tool_name)));
+    const allToolNames = Array.from(new Set([
+        ...toolNamesFromAgg,
+        ...toolNamesFromResults
+    ])).sort();
+    // Exclude sub-agent tools (e.g. WebSearchAgent) - they invoke agents, not primitives
+    const toolNames = allToolNames.filter((name)=>!name.endsWith("Agent"));
+    if (toolNames.length === 0) {
+        return [];
+    }
+    const agentKey = (agentDataId)=>agentDataId?.[0] ?? "unknown";
+    const failureByKey = new Map();
+    for (const r of failureResults){
+        const k = r.tool_node_id ? `${r.tool_name}|${agentKey(r.agent_data_id)}|${r.tool_node_id}` : `${r.tool_name}|${agentKey(r.agent_data_id)}|${r.result_name}`;
+        failureByKey.set(k, r.value);
+    }
+    const failureByToolAgentIndex = new Map();
+    for (const r of failureResults){
+        const k = `${r.tool_name}|${agentKey(r.agent_data_id)}`;
+        if (!failureByToolAgentIndex.has(k)) failureByToolAgentIndex.set(k, []);
+        failureByToolAgentIndex.get(k).push(r.value);
+    }
+    const rows = [];
+    for(let ti = 0; ti < toolNames.length; ti++){
+        const toolName = toolNames[ti];
+        const latency = latencyByTool.get(toolName);
+        const failurePct = failureRateByTool.get(toolName);
+        const invocations = usageCountByTool.get(toolName) ?? latency?.count ?? 0;
+        const runtimeMs = latency ? Math.round(latency.mean * 1000) : undefined;
+        const failureRateStr = failurePct !== undefined ? `${failurePct.toFixed(1)}%` : undefined;
+        const agentGroups = new Map();
+        for (const r of latencyResults){
+            if (r.tool_name !== toolName) continue;
+            const aid = agentKey(r.agent_data_id);
+            const rowKey = r.tool_node_id ? `${toolName}|${aid}|${r.tool_node_id}` : `${toolName}|${aid}|${r.result_name}`;
+            if (!agentGroups.has(aid)) {
+                agentGroups.set(aid, {
+                    agentId: aid,
+                    latencies: []
+                });
+            }
+            agentGroups.get(aid).latencies.push({
+                value: r.value,
+                key: rowKey,
+                toolNodeId: r.tool_node_id
+            });
+        }
+        const children = [];
+        for (const [aid, group] of agentGroups){
+            const totalRuntimeMs = group.latencies.reduce((s, l)=>s + l.value * 1000, 0);
+            const cnt = group.latencies.length;
+            let failed = 0;
+            const failList = failureByToolAgentIndex.get(`${toolName}|${aid}`) ?? [];
+            const leaves = group.latencies.map((l, idx)=>{
+                const failVal = failureByKey.get(l.key);
+                const failValByIndex = failList[idx];
+                const resolvedFail = failVal ?? (failValByIndex !== undefined ? failValByIndex : undefined);
+                const isFailed = resolvedFail !== undefined && resolvedFail >= 0.5;
+                if (isFailed) failed++;
+                const leafName = l.toolNodeId ?? `invocation-${idx + 1}`;
+                return {
+                    key: `${toolName}-${aid}-${idx}`,
+                    name: leafName,
+                    runtimeMs: Math.round(l.value * 1000),
+                    failureRate: isFailed ? "Failed" : "Success",
+                    level: 3,
+                    children: undefined
+                };
+            });
+            const agentFailurePct = cnt > 0 ? (failed / cnt * 100).toFixed(1) + "%" : undefined;
+            children.push({
+                key: `${toolName}-${aid}`,
+                name: aid,
+                invocations: cnt,
+                runtimeMs: Math.round(totalRuntimeMs),
+                failureRate: agentFailurePct,
+                level: 2,
+                children: leaves.length > 0 ? leaves : undefined
+            });
+        }
+        rows.push({
+            key: toolName,
+            name: toolName,
+            invocations,
+            runtimeMs,
+            failureRate: failureRateStr,
+            level: 1,
+            children: children.length > 0 ? children : undefined
+        });
+    }
+    return rows;
+}
+function getAllExpandableKeys(rows) {
+    const keys = [];
+    for (const row of rows){
+        if (row.children?.length) {
+            keys.push(row.key);
+            keys.push(...getAllExpandableKeys(row.children));
+        }
+    }
+    return keys;
+}
+const ToolUseEvaluatorMetricsTable = ({ rawResults, title = "Tool Use Evaluator - Aggregate View" })=>{
+    const { theme } = useTheme$1();
+    const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
+    const dataSource = React.useMemo(()=>buildTreeFromRawResults(rawResults), [
+        rawResults
+    ]);
+    const expandableKeys = React.useMemo(()=>getAllExpandableKeys(dataSource), [
+        dataSource
+    ]);
+    const allExpanded = expandableKeys.length > 0 && expandedRowKeys.length === expandableKeys.length;
+    const handleToggleExpandAll = React.useCallback(()=>{
+        setExpandedRowKeys(allExpanded ? [] : expandableKeys);
+    }, [
+        allExpanded,
+        expandableKeys
+    ]);
+    const toolIconColor = theme.colors.tagTooluse?.color ?? theme.colors.primary;
+    const agentIconColor = theme.colors.tagLlminference?.color ?? "#6b21a8";
+    const IconForLevel = ({ level })=>level === 2 ? /*#__PURE__*/ React.createElement(Bot, {
+            size: 14,
+            style: {
+                marginRight: 8,
+                verticalAlign: "middle",
+                flexShrink: 0,
+                color: agentIconColor
+            }
+        }) : /*#__PURE__*/ React.createElement(Wrench, {
+            size: 14,
+            style: {
+                marginRight: 8,
+                verticalAlign: "middle",
+                flexShrink: 0,
+                color: toolIconColor
+            }
+        });
+    const columns = [
+        {
+            title: "NAME",
+            dataIndex: "name",
+            key: "name",
+            render: (name, row)=>/*#__PURE__*/ React.createElement("span", {
+                    style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        fontFamily: "monospace",
+                        fontSize: 13
+                    }
+                }, /*#__PURE__*/ React.createElement(IconForLevel, {
+                    level: row.level
+                }), name)
+        },
+        {
+            title: "INVOCATIONS",
+            dataIndex: "invocations",
+            key: "invocations",
+            align: "right",
+            width: 120,
+            render: (v, row)=>row.level === 3 ? null : v ?? "-"
+        },
+        {
+            title: "RUNTIME (MS)",
+            dataIndex: "runtimeMs",
+            key: "runtimeMs",
+            align: "right",
+            width: 120,
+            render: (v)=>v !== undefined ? `${v}ms` : "-"
+        },
+        {
+            title: "FAILURE RATE",
+            dataIndex: "failureRate",
+            key: "failureRate",
+            align: "right",
+            width: 130,
+            render: (v, row)=>{
+                if (v === undefined) return "-";
+                if (v === "Failed") {
+                    return /*#__PURE__*/ React.createElement("span", {
+                        style: {
+                            color: theme.colors.destructive,
+                            fontWeight: 500
+                        }
+                    }, "Failed");
+                }
+                if (v === "Success") {
+                    return /*#__PURE__*/ React.createElement(Tag, {
+                        style: {
+                            margin: 0,
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                            background: theme.colors.success,
+                            borderColor: theme.colors.success,
+                            color: theme.colors.successForeground
+                        }
+                    }, /*#__PURE__*/ React.createElement(CircleCheckBig, {
+                        size: 14
+                    }), "Success");
+                }
+                return /*#__PURE__*/ React.createElement("span", null, v);
+            }
+        }
+    ];
+    const handleRowClick = React.useCallback((record)=>(e)=>{
+            if (!record.children?.length) return;
+            if (e.target.closest(".ant-table-row-expand-icon")) return;
+            setExpandedRowKeys((prev)=>prev.includes(record.key) ? prev.filter((k)=>k !== record.key) : [
+                    ...prev,
+                    record.key
+                ]);
+        }, []);
+    if (dataSource.length === 0) {
+        return /*#__PURE__*/ React.createElement("div", {
+            style: {
+                padding: 24,
+                textAlign: "center",
+                color: theme.colors.mutedForeground,
+                fontSize: 14
+            }
+        }, "No tool use metrics available");
+    }
+    return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: 16
+        }
+    }, /*#__PURE__*/ React.createElement("h3", {
+        style: {
+            margin: 0,
+            fontSize: 16,
+            fontWeight: 600
+        }
+    }, title), /*#__PURE__*/ React.createElement(Tooltip, {
+        title: expandableKeys.length === 0 ? "No expandable rows" : allExpanded ? "Collapse all" : "Expand all"
+    }, /*#__PURE__*/ React.createElement(Button$1, {
+        type: "text",
+        size: "small",
+        icon: allExpanded ? /*#__PURE__*/ React.createElement(ChevronsUp, {
+            size: 16
+        }) : /*#__PURE__*/ React.createElement(ChevronsDown, {
+            size: 16
+        }),
+        onClick: handleToggleExpandAll,
+        disabled: expandableKeys.length === 0,
+        style: {
+            display: "flex",
+            alignItems: "center"
+        },
+        "data-testid": "expand-collapse-all"
+    }))), /*#__PURE__*/ React.createElement(ForwardTable, {
+        dataSource: dataSource,
+        columns: columns,
+        rowKey: "key",
+        pagination: false,
+        size: "small",
+        expandable: {
+            expandedRowKeys,
+            onExpandedRowsChange: (keys)=>setExpandedRowKeys([
+                    ...keys
+                ]),
+            rowExpandable: (record)=>!!record.children && record.children.length > 0
+        },
+        onRow: (record)=>({
+                onClick: (e)=>handleRowClick(record)(e),
+                style: {
+                    cursor: record.children?.length ? "pointer" : undefined
+                }
+            }),
+        style: {
+            background: theme.colors.card,
+            border: `1px solid ${theme.colors.border}`
+        }
+    }));
+};
+
+/**
+ * Full-page component that renders a single evaluator's result.
+ * Exportable and reusable: pass Evaluation and evaluatorId from any React app.
+ */ const EvaluatorResult = ({ evaluation, evaluatorId, backHref })=>{
+    const { theme } = useTheme$1();
+    const labelColor = theme.colors.mutedForeground;
+    const evaluator = evaluation?.evaluators.find((e)=>e.evaluator_id === evaluatorId);
+    const results = evaluation?.results[evaluatorId] ?? {};
+    if (!evaluation || !evaluator) {
+        return /*#__PURE__*/ React.createElement("div", {
+            style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minHeight: "400px",
+                color: labelColor
+            }
+        }, /*#__PURE__*/ React.createElement("p", null, "No evaluator result data available"));
+    }
+    const { agent_name, completed_at, runs } = evaluation;
+    const runsCount = runs?.length ?? 0;
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            padding: "24px",
+            width: "100%",
+            minWidth: 0
+        }
+    }, backHref && /*#__PURE__*/ React.createElement("a", {
+        href: backHref,
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            marginBottom: 24,
+            color: theme.colors.primary,
+            textDecoration: "none",
+            fontSize: 14
+        }
+    }, /*#__PURE__*/ React.createElement(ArrowLeft, {
+        size: 16
+    }), "Back to Evaluations"), /*#__PURE__*/ React.createElement(Card, {
+        style: {
+            marginBottom: 24,
+            background: theme.colors.secondary,
+            border: `1px solid ${theme.colors.border}`
+        }
+    }, /*#__PURE__*/ React.createElement(Row$1, {
+        gutter: [
+            32,
+            16
+        ]
+    }, /*#__PURE__*/ React.createElement(Col, {
+        xs: 24,
+        sm: 12,
+        md: 8,
+        lg: 6
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: labelColor,
+            textTransform: "uppercase",
+            marginBottom: 4
+        }
+    }, "Name"), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            fontWeight: 600,
+            fontSize: 15
+        }
+    }, agent_name || "-")), /*#__PURE__*/ React.createElement(Col, {
+        xs: 24,
+        sm: 12,
+        md: 8,
+        lg: 5
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: labelColor,
+            textTransform: "uppercase",
+            marginBottom: 4
+        }
+    }, "Completed At"), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            fontWeight: 600,
+            fontSize: 15
+        }
+    }, completed_at ? moment(completed_at).format("M/D/YYYY, h:mm:ss A") : "-")), /*#__PURE__*/ React.createElement(Col, {
+        xs: 24,
+        sm: 12,
+        md: 8,
+        lg: 3
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: labelColor,
+            textTransform: "uppercase",
+            marginBottom: 4
+        }
+    }, "Runs"), /*#__PURE__*/ React.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minWidth: 28,
+            height: 28,
+            padding: "0 8px",
+            borderRadius: 14,
+            background: theme.colors.primary,
+            color: theme.colors.primaryForeground,
+            fontWeight: 600,
+            fontSize: 14
+        }
+    }, runsCount)), /*#__PURE__*/ React.createElement(Col, {
+        xs: 24,
+        sm: 12,
+        md: 8,
+        lg: 4
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: labelColor,
+            textTransform: "uppercase",
+            marginBottom: 4
+        }
+    }, "Evaluator"), /*#__PURE__*/ React.createElement("div", {
+        style: {
+            fontWeight: 600,
+            fontSize: 15
+        }
+    }, evaluator.name)))), /*#__PURE__*/ React.createElement(Row$1, {
+        gutter: [
+            24,
+            24
+        ]
+    }, evaluator.metrics.map((metric)=>{
+        const value = results[metric.name];
+        const displayLabel = metric.name.replace(/\s+/g, " ");
+        const displayDescription = metric.description ?? "";
+        const displayValue = formatMetricValue(evaluator, metric.name, value);
+        return /*#__PURE__*/ React.createElement(Col, {
+            key: metric.name,
+            xs: 24,
+            sm: 24,
+            md: 24,
+            lg: 6
+        }, /*#__PURE__*/ React.createElement(Card, {
+            style: {
+                height: "100%",
+                background: theme.colors.card,
+                border: `1px solid ${theme.colors.border}`,
+                boxShadow: theme.shadows.sm
+            }
+        }, /*#__PURE__*/ React.createElement("div", {
+            style: {
+                fontSize: 11,
+                color: labelColor,
+                textTransform: "uppercase",
+                marginBottom: 8
+            }
+        }, displayLabel), /*#__PURE__*/ React.createElement("div", {
+            style: {
+                fontSize: 32,
+                fontWeight: 700,
+                marginBottom: 4
+            }
+        }, displayValue), displayDescription && /*#__PURE__*/ React.createElement("div", {
+            style: {
+                fontSize: 13,
+                color: labelColor
+            }
+        }, displayDescription)));
+    })), evaluator.name.includes("ToolUse") && /*#__PURE__*/ React.createElement("div", {
+        style: {
+            marginTop: 32
+        }
+    }, /*#__PURE__*/ React.createElement(ToolUseEvaluatorMetricsTable, {
+        rawResults: (evaluation.rawEvaluatorResults?.[evaluatorId] ?? []).filter((r)=>isToolResult(r) || isToolAggregate(r))
+    })));
+};
+
 function __insertCSS(code) {
     if (typeof document == 'undefined') return;
     let head = document.head || document.getElementsByTagName('head')[0];
@@ -116362,7 +116918,9 @@ exports.AnthropicIcon = AnthropicIcon;
 exports.Badge = Badge;
 exports.Drawer = Drawer;
 exports.Edge = Edge;
+exports.EvaluationDetailsDrawer = EvaluationDetailsDrawer;
 exports.EvaluationsTable = EvaluationsTable;
+exports.EvaluatorResult = EvaluatorResult;
 exports.GlobalStyles = GlobalStyles;
 exports.GoogleIcon = GoogleIcon;
 exports.JsonTreeViewer = JsonTreeViewer;

package/dist/esm/index.js

@@ -12882,7 +12882,25 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$i = [
+const __iconNode$m = [
+    [
+        "path",
+        {
+            d: "m12 19-7-7 7-7",
+            key: "1l729n"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M19 12H5",
+            key: "x3x0zl"
+        }
+    ]
+];
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$m);
+
+const __iconNode$l = [
     [
         "path",
         {
@@ -12898,9 +12916,9 @@ const __iconNode$i = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$i);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$l);
 
-const __iconNode$h = [
+const __iconNode$k = [
     [
         "path",
         {
@@ -12948,9 +12966,9 @@ const __iconNode$h = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$h);
+const Bot = createLucideIcon("bot", __iconNode$k);
 
-const __iconNode$g = [
+const __iconNode$j = [
     [
         "path",
         {
@@ -12984,9 +13002,9 @@ const __iconNode$g = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$g);
+const Calendar = createLucideIcon("calendar", __iconNode$j);
 
-const __iconNode$f = [
+const __iconNode$i = [
     [
         "path",
         {
@@ -13043,9 +13061,9 @@ const __iconNode$f = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$f);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$i);
 
-const __iconNode$e = [
+const __iconNode$h = [
     [
         "path",
         {
@@ -13054,9 +13072,9 @@ const __iconNode$e = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$e);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$h);
 
-const __iconNode$d = [
+const __iconNode$g = [
     [
         "path",
         {
@@ -13065,7 +13083,61 @@ const __iconNode$d = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
+
+const __iconNode$f = [
+    [
+        "path",
+        {
+            d: "m7 6 5 5 5-5",
+            key: "1lc07p"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m7 13 5 5 5-5",
+            key: "1d48rs"
+        }
+    ]
+];
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$f);
+
+const __iconNode$e = [
+    [
+        "path",
+        {
+            d: "m17 11-5-5-5 5",
+            key: "e8nh98"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m17 18-5-5-5 5",
+            key: "2avn1x"
+        }
+    ]
+];
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$e);
+
+const __iconNode$d = [
+    [
+        "path",
+        {
+            d: "M21.801 10A10 10 0 1 1 17 3.335",
+            key: "yps3ct"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m9 11 3 3L22 4",
+            key: "1pflzl"
+        }
+    ]
+];
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$d);
 
 const __iconNode$c = [
     [
@@ -114355,6 +114427,490 @@ const EvaluationsTable = ({ evaluations, loading = false, error = null, onRefres
     }));
 };
 
+function buildTreeFromRawResults(rawResults) {
+    const toolResults = rawResults.filter((r)=>isToolResult(r));
+    const toolAggregates = rawResults.filter((r)=>isToolAggregate(r));
+    const latencyByTool = new Map();
+    const failureRateByTool = new Map();
+    const usageCountByTool = new Map();
+    for (const agg of toolAggregates){
+        const name = agg.metric.name;
+        const tool = agg.tool_name;
+        if (name === "Latency") {
+            latencyByTool.set(tool, {
+                mean: agg.mean,
+                count: agg.values.length
+            });
+        } else if (name === "FailureRate") {
+            failureRateByTool.set(tool, agg.mean * 100);
+        } else if (name === "UsageCount") {
+            usageCountByTool.set(tool, agg.values.reduce((a, b)=>a + b, 0));
+        }
+    }
+    const latencyResults = toolResults.filter((r)=>r.result_name.startsWith("Latency/"));
+    const failureResults = toolResults.filter((r)=>r.result_name.startsWith("FailureRate/"));
+    const toolNamesFromAgg = Array.from(new Set([
+        ...latencyByTool.keys(),
+        ...failureRateByTool.keys(),
+        ...usageCountByTool.keys()
+    ]));
+    const toolNamesFromResults = Array.from(new Set(latencyResults.map((r)=>r.tool_name)));
+    const allToolNames = Array.from(new Set([
+        ...toolNamesFromAgg,
+        ...toolNamesFromResults
+    ])).sort();
+    // Exclude sub-agent tools (e.g. WebSearchAgent) - they invoke agents, not primitives
+    const toolNames = allToolNames.filter((name)=>!name.endsWith("Agent"));
+    if (toolNames.length === 0) {
+        return [];
+    }
+    const agentKey = (agentDataId)=>agentDataId?.[0] ?? "unknown";
+    const failureByKey = new Map();
+    for (const r of failureResults){
+        const k = r.tool_node_id ? `${r.tool_name}|${agentKey(r.agent_data_id)}|${r.tool_node_id}` : `${r.tool_name}|${agentKey(r.agent_data_id)}|${r.result_name}`;
+        failureByKey.set(k, r.value);
+    }
+    const failureByToolAgentIndex = new Map();
+    for (const r of failureResults){
+        const k = `${r.tool_name}|${agentKey(r.agent_data_id)}`;
+        if (!failureByToolAgentIndex.has(k)) failureByToolAgentIndex.set(k, []);
+        failureByToolAgentIndex.get(k).push(r.value);
+    }
+    const rows = [];
+    for(let ti = 0; ti < toolNames.length; ti++){
+        const toolName = toolNames[ti];
+        const latency = latencyByTool.get(toolName);
+        const failurePct = failureRateByTool.get(toolName);
+        const invocations = usageCountByTool.get(toolName) ?? latency?.count ?? 0;
+        const runtimeMs = latency ? Math.round(latency.mean * 1000) : undefined;
+        const failureRateStr = failurePct !== undefined ? `${failurePct.toFixed(1)}%` : undefined;
+        const agentGroups = new Map();
+        for (const r of latencyResults){
+            if (r.tool_name !== toolName) continue;
+            const aid = agentKey(r.agent_data_id);
+            const rowKey = r.tool_node_id ? `${toolName}|${aid}|${r.tool_node_id}` : `${toolName}|${aid}|${r.result_name}`;
+            if (!agentGroups.has(aid)) {
+                agentGroups.set(aid, {
+                    agentId: aid,
+                    latencies: []
+                });
+            }
+            agentGroups.get(aid).latencies.push({
+                value: r.value,
+                key: rowKey,
+                toolNodeId: r.tool_node_id
+            });
+        }
+        const children = [];
+        for (const [aid, group] of agentGroups){
+            const totalRuntimeMs = group.latencies.reduce((s, l)=>s + l.value * 1000, 0);
+            const cnt = group.latencies.length;
+            let failed = 0;
+            const failList = failureByToolAgentIndex.get(`${toolName}|${aid}`) ?? [];
+            const leaves = group.latencies.map((l, idx)=>{
+                const failVal = failureByKey.get(l.key);
+                const failValByIndex = failList[idx];
+                const resolvedFail = failVal ?? (failValByIndex !== undefined ? failValByIndex : undefined);
+                const isFailed = resolvedFail !== undefined && resolvedFail >= 0.5;
+                if (isFailed) failed++;
+                const leafName = l.toolNodeId ?? `invocation-${idx + 1}`;
+                return {
+                    key: `${toolName}-${aid}-${idx}`,
+                    name: leafName,
+                    runtimeMs: Math.round(l.value * 1000),
+                    failureRate: isFailed ? "Failed" : "Success",
+                    level: 3,
+                    children: undefined
+                };
+            });
+            const agentFailurePct = cnt > 0 ? (failed / cnt * 100).toFixed(1) + "%" : undefined;
+            children.push({
+                key: `${toolName}-${aid}`,
+                name: aid,
+                invocations: cnt,
+                runtimeMs: Math.round(totalRuntimeMs),
+                failureRate: agentFailurePct,
+                level: 2,
+                children: leaves.length > 0 ? leaves : undefined
+            });
+        }
+        rows.push({
+            key: toolName,
+            name: toolName,
+            invocations,
+            runtimeMs,
+            failureRate: failureRateStr,
+            level: 1,
+            children: children.length > 0 ? children : undefined
+        });
+    }
+    return rows;
+}
+function getAllExpandableKeys(rows) {
+    const keys = [];
+    for (const row of rows){
+        if (row.children?.length) {
+            keys.push(row.key);
+            keys.push(...getAllExpandableKeys(row.children));
+        }
+    }
+    return keys;
+}
+const ToolUseEvaluatorMetricsTable = ({ rawResults, title = "Tool Use Evaluator - Aggregate View" })=>{
+    const { theme } = useTheme$1();
+    const [expandedRowKeys, setExpandedRowKeys] = useState([]);
+    const dataSource = useMemo(()=>buildTreeFromRawResults(rawResults), [
+        rawResults
+    ]);
+    const expandableKeys = useMemo(()=>getAllExpandableKeys(dataSource), [
+        dataSource
+    ]);
+    const allExpanded = expandableKeys.length > 0 && expandedRowKeys.length === expandableKeys.length;
+    const handleToggleExpandAll = useCallback(()=>{
+        setExpandedRowKeys(allExpanded ? [] : expandableKeys);
+    }, [
+        allExpanded,
+        expandableKeys
+    ]);
+    const toolIconColor = theme.colors.tagTooluse?.color ?? theme.colors.primary;
+    const agentIconColor = theme.colors.tagLlminference?.color ?? "#6b21a8";
+    const IconForLevel = ({ level })=>level === 2 ? /*#__PURE__*/ React__default.createElement(Bot, {
+            size: 14,
+            style: {
+                marginRight: 8,
+                verticalAlign: "middle",
+                flexShrink: 0,
+                color: agentIconColor
+            }
+        }) : /*#__PURE__*/ React__default.createElement(Wrench, {
+            size: 14,
+            style: {
+                marginRight: 8,
+                verticalAlign: "middle",
+                flexShrink: 0,
+                color: toolIconColor
+            }
+        });
+    const columns = [
+        {
+            title: "NAME",
+            dataIndex: "name",
+            key: "name",
+            render: (name, row)=>/*#__PURE__*/ React__default.createElement("span", {
+                    style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        fontFamily: "monospace",
+                        fontSize: 13
+                    }
+                }, /*#__PURE__*/ React__default.createElement(IconForLevel, {
+                    level: row.level
+                }), name)
+        },
+        {
+            title: "INVOCATIONS",
+            dataIndex: "invocations",
+            key: "invocations",
+            align: "right",
+            width: 120,
+            render: (v, row)=>row.level === 3 ? null : v ?? "-"
+        },
+        {
+            title: "RUNTIME (MS)",
+            dataIndex: "runtimeMs",
+            key: "runtimeMs",
+            align: "right",
+            width: 120,
+            render: (v)=>v !== undefined ? `${v}ms` : "-"
+        },
+        {
+            title: "FAILURE RATE",
+            dataIndex: "failureRate",
+            key: "failureRate",
+            align: "right",
+            width: 130,
+            render: (v, row)=>{
+                if (v === undefined) return "-";
+                if (v === "Failed") {
+                    return /*#__PURE__*/ React__default.createElement("span", {
+                        style: {
+                            color: theme.colors.destructive,
+                            fontWeight: 500
+                        }
+                    }, "Failed");
+                }
+                if (v === "Success") {
+                    return /*#__PURE__*/ React__default.createElement(Tag, {
+                        style: {
+                            margin: 0,
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                            background: theme.colors.success,
+                            borderColor: theme.colors.success,
+                            color: theme.colors.successForeground
+                        }
+                    }, /*#__PURE__*/ React__default.createElement(CircleCheckBig, {
+                        size: 14
+                    }), "Success");
+                }
+                return /*#__PURE__*/ React__default.createElement("span", null, v);
+            }
+        }
+    ];
+    const handleRowClick = useCallback((record)=>(e)=>{
+            if (!record.children?.length) return;
+            if (e.target.closest(".ant-table-row-expand-icon")) return;
+            setExpandedRowKeys((prev)=>prev.includes(record.key) ? prev.filter((k)=>k !== record.key) : [
+                    ...prev,
+                    record.key
+                ]);
+        }, []);
+    if (dataSource.length === 0) {
+        return /*#__PURE__*/ React__default.createElement("div", {
+            style: {
+                padding: 24,
+                textAlign: "center",
+                color: theme.colors.mutedForeground,
+                fontSize: 14
+            }
+        }, "No tool use metrics available");
+    }
+    return /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: 16
+        }
+    }, /*#__PURE__*/ React__default.createElement("h3", {
+        style: {
+            margin: 0,
+            fontSize: 16,
+            fontWeight: 600
+        }
+    }, title), /*#__PURE__*/ React__default.createElement(Tooltip, {
+        title: expandableKeys.length === 0 ? "No expandable rows" : allExpanded ? "Collapse all" : "Expand all"
+    }, /*#__PURE__*/ React__default.createElement(Button$1, {
+        type: "text",
+        size: "small",
+        icon: allExpanded ? /*#__PURE__*/ React__default.createElement(ChevronsUp, {
+            size: 16
+        }) : /*#__PURE__*/ React__default.createElement(ChevronsDown, {
+            size: 16
+        }),
+        onClick: handleToggleExpandAll,
+        disabled: expandableKeys.length === 0,
+        style: {
+            display: "flex",
+            alignItems: "center"
+        },
+        "data-testid": "expand-collapse-all"
+    }))), /*#__PURE__*/ React__default.createElement(ForwardTable, {
+        dataSource: dataSource,
+        columns: columns,
+        rowKey: "key",
+        pagination: false,
+        size: "small",
+        expandable: {
+            expandedRowKeys,
+            onExpandedRowsChange: (keys)=>setExpandedRowKeys([
+                    ...keys
+                ]),
+            rowExpandable: (record)=>!!record.children && record.children.length > 0
+        },
+        onRow: (record)=>({
+                onClick: (e)=>handleRowClick(record)(e),
+                style: {
+                    cursor: record.children?.length ? "pointer" : undefined
+                }
+            }),
+        style: {
+            background: theme.colors.card,
+            border: `1px solid ${theme.colors.border}`
+        }
+    }));
+};
+
+/**
+ * Full-page component that renders a single evaluator's result.
+ * Exportable and reusable: pass Evaluation and evaluatorId from any React app.
+ */ const EvaluatorResult = ({ evaluation, evaluatorId, backHref })=>{
+    const { theme } = useTheme$1();
+    const labelColor = theme.colors.mutedForeground;
+    const evaluator = evaluation?.evaluators.find((e)=>e.evaluator_id === evaluatorId);
+    const results = evaluation?.results[evaluatorId] ?? {};
+    if (!evaluation || !evaluator) {
+        return /*#__PURE__*/ React__default.createElement("div", {
+            style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minHeight: "400px",
+                color: labelColor
+            }
+        }, /*#__PURE__*/ React__default.createElement("p", null, "No evaluator result data available"));
+    }
+    const { agent_name, completed_at, runs } = evaluation;
+    const runsCount = runs?.length ?? 0;
+    return /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            padding: "24px",
+            width: "100%",
+            minWidth: 0
+        }
+    }, backHref && /*#__PURE__*/ React__default.createElement("a", {
+        href: backHref,
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            marginBottom: 24,
+            color: theme.colors.primary,
+            textDecoration: "none",
+            fontSize: 14
+        }
+    }, /*#__PURE__*/ React__default.createElement(ArrowLeft, {
+        size: 16
+    }), "Back to Evaluations"), /*#__PURE__*/ React__default.createElement(Card, {
+        style: {
+            marginBottom: 24,
+            background: theme.colors.secondary,
+            border: `1px solid ${theme.colors.border}`
+        }
+    }, /*#__PURE__*/ React__default.createElement(Row$1, {
+        gutter: [
+            32,
+            16
+        ]
+    }, /*#__PURE__*/ React__default.createElement(Col, {
+        xs: 24,
+        sm: 12,
+        md: 8,
+        lg: 6
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: labelColor,
+            textTransform: "uppercase",
+            marginBottom: 4
+        }
+    }, "Name"), /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            fontWeight: 600,
+            fontSize: 15
+        }
+    }, agent_name || "-")), /*#__PURE__*/ React__default.createElement(Col, {
+        xs: 24,
+        sm: 12,
+        md: 8,
+        lg: 5
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: labelColor,
+            textTransform: "uppercase",
+            marginBottom: 4
+        }
+    }, "Completed At"), /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            fontWeight: 600,
+            fontSize: 15
+        }
+    }, completed_at ? moment(completed_at).format("M/D/YYYY, h:mm:ss A") : "-")), /*#__PURE__*/ React__default.createElement(Col, {
+        xs: 24,
+        sm: 12,
+        md: 8,
+        lg: 3
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: labelColor,
+            textTransform: "uppercase",
+            marginBottom: 4
+        }
+    }, "Runs"), /*#__PURE__*/ React__default.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minWidth: 28,
+            height: 28,
+            padding: "0 8px",
+            borderRadius: 14,
+            background: theme.colors.primary,
+            color: theme.colors.primaryForeground,
+            fontWeight: 600,
+            fontSize: 14
+        }
+    }, runsCount)), /*#__PURE__*/ React__default.createElement(Col, {
+        xs: 24,
+        sm: 12,
+        md: 8,
+        lg: 4
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            fontSize: 11,
+            color: labelColor,
+            textTransform: "uppercase",
+            marginBottom: 4
+        }
+    }, "Evaluator"), /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            fontWeight: 600,
+            fontSize: 15
+        }
+    }, evaluator.name)))), /*#__PURE__*/ React__default.createElement(Row$1, {
+        gutter: [
+            24,
+            24
+        ]
+    }, evaluator.metrics.map((metric)=>{
+        const value = results[metric.name];
+        const displayLabel = metric.name.replace(/\s+/g, " ");
+        const displayDescription = metric.description ?? "";
+        const displayValue = formatMetricValue(evaluator, metric.name, value);
+        return /*#__PURE__*/ React__default.createElement(Col, {
+            key: metric.name,
+            xs: 24,
+            sm: 24,
+            md: 24,
+            lg: 6
+        }, /*#__PURE__*/ React__default.createElement(Card, {
+            style: {
+                height: "100%",
+                background: theme.colors.card,
+                border: `1px solid ${theme.colors.border}`,
+                boxShadow: theme.shadows.sm
+            }
+        }, /*#__PURE__*/ React__default.createElement("div", {
+            style: {
+                fontSize: 11,
+                color: labelColor,
+                textTransform: "uppercase",
+                marginBottom: 8
+            }
+        }, displayLabel), /*#__PURE__*/ React__default.createElement("div", {
+            style: {
+                fontSize: 32,
+                fontWeight: 700,
+                marginBottom: 4
+            }
+        }, displayValue), displayDescription && /*#__PURE__*/ React__default.createElement("div", {
+            style: {
+                fontSize: 13,
+                color: labelColor
+            }
+        }, displayDescription)));
+    })), evaluator.name.includes("ToolUse") && /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            marginTop: 32
+        }
+    }, /*#__PURE__*/ React__default.createElement(ToolUseEvaluatorMetricsTable, {
+        rawResults: (evaluation.rawEvaluatorResults?.[evaluatorId] ?? []).filter((r)=>isToolResult(r) || isToolAggregate(r))
+    })));
+};
+
 function __insertCSS(code) {
     if (typeof document == 'undefined') return;
     let head = document.head || document.getElementsByTagName('head')[0];
@@ -116337,4 +116893,4 @@ const GlobalStyles = ()=>{
         return getSafeColor(props.theme, path, fallback);
     };
 
-export { AgenticFlowVisualizer, AnthropicIcon, Badge, Drawer, Edge, EvaluationsTable, GlobalStyles, GoogleIcon, JsonTreeViewer, Node$1 as Node, OpenAIIcon, SafeThemeProvider, SessionDetails, Sheet, ThemeProvider, Timeline, Visualizer, calculateAutoLayout, cn, conditionalStyle, createSafeTheme, darkTheme, defaultTheme$1 as defaultTheme, detectContentType, formatCurrency, formatDateShort, formatDuration, formatLatency, formatMetricValue, formatNumberWithCommas, formatToolCalls, getColor, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, getStatusColor, isEvaluationDto, lightTheme, safeStyled, safeThemeColor, safeThemeSpacing, safeThemeValue, toTitleCase, transformEvaluation, truncateText, useComponentTheme, useSafeTheme, useTheme$1 as useTheme, useThemeValue };
+export { AgenticFlowVisualizer, AnthropicIcon, Badge, Drawer, Edge, EvaluationDetailsDrawer, EvaluationsTable, EvaluatorResult, GlobalStyles, GoogleIcon, JsonTreeViewer, Node$1 as Node, OpenAIIcon, SafeThemeProvider, SessionDetails, Sheet, ThemeProvider, Timeline, Visualizer, calculateAutoLayout, cn, conditionalStyle, createSafeTheme, darkTheme, defaultTheme$1 as defaultTheme, detectContentType, formatCurrency, formatDateShort, formatDuration, formatLatency, formatMetricValue, formatNumberWithCommas, formatToolCalls, getColor, getSafeColor, getSafeSpacing, getSafeThemeValue, getSpacing, getStatusColor, isEvaluationDto, lightTheme, safeStyled, safeThemeColor, safeThemeSpacing, safeThemeValue, toTitleCase, transformEvaluation, truncateText, useComponentTheme, useSafeTheme, useTheme$1 as useTheme, useThemeValue };

package/dist/types/index.d.ts

@@ -2,6 +2,8 @@ export { default as AgenticFlowVisualizer } from "./components/AgenticFlowVisual
 export { default as Visualizer } from "./components/Visualizer";
 export { SessionDetails } from "./agenthub/pages/session-details";
 export { EvaluationsTable } from "./agenthub/components/EvaluationsTable";
+export { EvaluationDetailsDrawer } from "./agenthub/pages/evaluation-details-drawer";
+export { EvaluatorResult } from "./agenthub/pages/evaluator-result";
 export { transformEvaluation, isEvaluationDto } from "./agenthub/utils/transformEvaluation";
 export type { Evaluation } from "./agenthub/pages/evaluations.types";
 export type { Evaluation as EvaluationDto } from "./dto/Evaluation";

package/package.json

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