agentic-ui-libs 1.2.0-beta.20 → 1.2.0-beta.22

package/dist/ui-libs.umd.js

@@ -4331,7 +4331,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     onClick,
     isFirst = false
   }) => {
-    const { title, value, change, info, highlighted } = data;
+    const { title, value, change, info, highlighted, failedCount } = data;
     const formatValue2 = (val) => {
       if (typeof val === "number") {
         return val.toLocaleString();
@@ -4385,6 +4385,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-baseline gap-3", "data-test-id": `dashboard_metric_card_value_container_${data.metricType || data.title.toLowerCase().replace(/\s+/g, "_")}`, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-2xl font-semibold text-gray-900", "data-test-id": `dashboard_metric_card_value_${data.metricType || data.title.toLowerCase().replace(/\s+/g, "_")}`, children: formatValue2(value) }),
+            (failedCount ?? 0) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs font-medium text-red-500", "data-test-id": `dashboard_metric_card_failed_${data.metricType}`, children: [
+              "(",
+              failedCount,
+              " failed)"
+            ] }),
             change && /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
@@ -21395,7 +21400,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if ("object" != _typeof$i(i2)) return i2;
       throw new TypeError("@@toPrimitive must return a primitive value.");
     }
-    return ("string" === r2 ? String : Number)(t);
+    return String(t);
   }
   var Bar = /* @__PURE__ */ function(_PureComponent) {
     function Bar2() {
@@ -28702,7 +28707,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return null;
     }
     const filteredPayload = payload.filter(
-      (entry) => entry.name && entry.name !== "" && entry.name !== entry.dataKey
+      (entry) => entry.name && entry.name !== "" && entry.name !== entry.dataKey && entry.value != null && !(typeof entry.value === "number" && Number.isNaN(entry.value)) && !(entry.dataKey === "failedModelRuns" && Number(entry.value) === 0)
     );
     if (filteredPayload.length === 0) {
       return null;
@@ -28802,6 +28807,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             agentRuns: 0,
             toolRuns: 0,
             modelRuns: 0,
+            failedModelRuns: null,
             codeTools: 0,
             workflowTools: 0,
             knowledgeTools: 0,
@@ -28904,6 +28910,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       label: config2.title,
       strokeWidth: 2
     }];
+    const lineSeries = chartLines.filter((c2) => (c2.seriesType ?? "line") === "line");
+    const barSeries = chartLines.filter((c2) => c2.seriesType === "bar");
     if (isLoading) {
       console.log("AnalyticsChart: Loading state active");
       return /* @__PURE__ */ jsxRuntimeExports.jsx(ChartSkeleton, { className, chartType: config2.type, height });
@@ -29010,7 +29018,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             bottom: 20
           },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: chartLines.map((lineConfig, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: `gradient-${lineConfig.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: lineSeries.map((lineConfig, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: `gradient-${lineConfig.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "5%", stopColor: lineConfig.color, stopOpacity: 0.08 }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "95%", stopColor: lineConfig.color, stopOpacity: 0.01 })
             ] }, `gradient-${index}`)) }),
@@ -29062,7 +29070,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 allowEscapeViewBox: { x: false, y: false }
               }
             ),
-            chartLines.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            lineSeries.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               Area,
               {
                 type: "monotone",
@@ -29070,12 +29078,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 stroke: "none",
                 fill: `url(#gradient-${lineConfig.dataKey})`,
                 fillOpacity: 1,
+                connectNulls: false,
                 isAnimationActive: false,
                 name: ""
               },
               `area-${lineConfig.dataKey}`
             )),
-            chartLines.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            lineSeries.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               Line,
               {
                 type: "monotone",
@@ -29083,6 +29092,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 stroke: lineConfig.color,
                 strokeWidth: 2.5,
                 strokeDasharray: lineConfig.strokeDasharray,
+                connectNulls: false,
                 dot: false,
                 activeDot: {
                   r: 5,
@@ -29093,6 +29103,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 name: lineConfig.label
               },
               lineConfig.dataKey
+            )),
+            barSeries.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Bar,
+              {
+                dataKey: lineConfig.dataKey,
+                fill: lineConfig.color,
+                fillOpacity: 0.9,
+                name: lineConfig.label,
+                maxBarSize: 14,
+                radius: [3, 3, 0, 0],
+                isAnimationActive: false
+              },
+              `bar-${lineConfig.dataKey}`
             ))
           ]
         }
@@ -29114,8 +29137,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", "data-test-id": "dashboard_analytics_chart_legend", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", "data-test-id": "dashboard_analytics_chart_legend_items", children: chartLines.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-test-id": `dashboard_analytics_chart_legend_item_${lineConfig.dataKey}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", "data-test-id": "dashboard_analytics_chart_legend", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", "data-test-id": "dashboard_analytics_chart_legend_items", children: chartLines.filter((lineConfig) => !lineConfig.hideInLegend).map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-test-id": `dashboard_analytics_chart_legend_item_${lineConfig.dataKey}`, children: [
+          lineConfig.seriesType === "bar" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "w-2 h-2 rounded-[2px]",
+              style: { backgroundColor: lineConfig.color },
+              "data-test-id": `dashboard_analytics_chart_legend_color_${lineConfig.dataKey}`
+            }
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               className: "w-[8px] h-[8px] rounded-full",
@@ -29672,6 +29702,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return "bg-green-100 text-green-800 border-green-200";
     if (["knowledge", "KNOWLEDGE", "knowledge tool"].includes(type) || ["knowledge", "knowledge tool"].includes(normalized))
       return "bg-purple-100 text-purple-800 border-purple-200";
+    if (["PRE_PROCESSOR", "POST_PROCESSOR", "INPUT_PROCESSOR", "input_processor", "pre_processor", "post_processor", "processor"].includes(type) || ["pre_processor", "post_processor", "processor", "input_processor"].includes(normalized))
+      return "bg-yellow-100 text-yellow-800 border-yellow-200";
     return "bg-gray-100 text-gray-800 border-gray-200";
   }
   function getToolTypeName(type) {
@@ -29680,6 +29712,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     if (["toollibrary", "workflow tool"].includes(normalized)) return "Workflow Tool";
     if (["mcp", "mcptool"].includes(normalized)) return "MCP Tool";
     if (["knowledge", "knowledge tool", "knowledge"].includes(normalized) || type === "KNOWLEDGE") return "Knowledge";
+    if (["pre_processor", "post_processor", "processor", "input_processor"].includes(normalized) || type === "PRE_PROCESSOR" || type === "POST_PROCESSOR" || type === "INPUT_PROCESSOR" || type === "input_processor")
+      return "Processor";
     if (type === "inlineTool") return "Code Tool";
     if (type === "toolLibrary") return "Workflow Tool";
     if (type === "KNOWLEDGE") return "Knowledge";
@@ -29906,7 +29940,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 model.provider && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 truncate", "data-test-id": `dashboard_model_list_view_row_provider_${index}`, children: getProviderDisplayName(model.provider) })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-test-id": `dashboard_model_list_view_row_runs_${index}`, children: formatValue2(model.runs || 0) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center font-medium text-xs text-gray-700 flex items-center justify-center gap-1", "data-test-id": `dashboard_model_list_view_row_runs_${index}`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatValue2(model.runs || 0) }),
+              (model.failedRuns ?? 0) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-red-500 text-[10px] font-medium", "data-test-id": `dashboard_model_list_view_row_failed_${index}`, children: [
+                "(",
+                model.failedRuns,
+                " failed)"
+              ] })
+            ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-test-id": `dashboard_model_list_view_row_tokens_${index}`, children: formatValue2(model.tokens || model.totalTokens || 0) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-test-id": `dashboard_model_list_view_row_response_time_${index}`, children: model.responseTime || (model.avgResponseTime ? `${model.avgResponseTime}ms` : "N/A") })
           ]
@@ -30586,6 +30627,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         {
           title: "Model Runs",
           value: data.data.modelRuns,
+          failedCount: data.data.failedModelRuns || 0,
           metricType: "modelRuns",
           icon: "cpu",
           info: "Number of times the AI agents called various language models to generate responses",
@@ -30662,8 +30704,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             basePoint.toolRuns = point2.count || 0;
             break;
           case "modelRuns":
+          case "modelruns": {
+            const failed = point2.failedModelRuns;
             basePoint.modelRuns = point2.count || 0;
+            basePoint.failedModelRuns = typeof failed === "number" && failed >= 0 ? failed : 0;
             break;
+          }
           default:
             basePoint.users = point2.count || 0;
             basePoint.sessions = point2.count || 0;
@@ -30672,6 +30718,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             basePoint.agentRuns = point2.count || 0;
             basePoint.toolRuns = point2.count || 0;
             basePoint.modelRuns = point2.count || 0;
+            {
+              const failed = point2.failedModelRuns;
+              basePoint.failedModelRuns = typeof failed === "number" && failed >= 0 ? failed : 0;
+            }
         }
         console.log(`Transformed point ${index} for metric ${metricType}:`, basePoint);
         return basePoint;
@@ -30756,22 +30806,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         id: `model-${index + 1}`,
         name: item.connectionName ? `${item.modelName} - ${item.connectionName}` : item.modelName || `Model ${index + 1}`,
         modelName: item.modelName,
-        // Keep original modelName field
         provider: item.provider,
-        // Include provider information
         runs: item.count || 0,
+        failedRuns: item.failedRuns || 0,
         responseTime: item.avgResponseTime ? item.avgResponseTime < 1e3 ? `${Math.round(item.avgResponseTime)}ms` : `${(item.avgResponseTime / 1e3).toFixed(2)}s` : "0ms",
         avgResponseTime: item.avgResponseTime,
-        // Keep original avgResponseTime
         tokens: item.tokens || item.totalTokens || Math.floor((item.count || 0) * 300),
-        // Use actual token data when available
         totalTokens: item.totalTokens || item.tokens,
-        // Include totalTokens field
         successRate: item.successRate ? `${Math.round(item.successRate)}%` : "98%",
-        // Default success rate for models
         lastRun: item.lastRun || new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1e3).toLocaleDateString(),
         icon: item.icon
-        // Preserve original icon data if available
       }));
     }
     // Extract control options from listView data for agents
@@ -30825,9 +30869,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             if (["toollibrary", "workflow tool"].includes(normalized)) return "Workflow Tool";
             if (["mcp", "mcptool"].includes(normalized)) return "MCP Tool";
             if (["knowledge", "knowledge tool"].includes(normalized) || toolType === "KNOWLEDGE") return "Knowledge";
+            if (["pre_processor", "post_processor", "processor", "input_processor"].includes(normalized)) return "Processor";
             if (toolType === "inlineTool") return "Code Tool";
             if (toolType === "toolLibrary") return "Workflow Tool";
             if (toolType === "MCP" || toolType === "mcpTool") return "MCP Tool";
+            if (toolType === "PRE_PROCESSOR" || toolType === "POST_PROCESSOR" || toolType === "INPUT_PROCESSOR" || toolType === "input_processor") return "Processor";
             return "Code Tool";
           };
           options.push({
@@ -30954,6 +31000,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (aggregated.has(key)) {
           const existing = aggregated.get(key);
           existing.count = (existing.count || 0) + (item.count || 0);
+          existing.failedRuns = (existing.failedRuns || 0) + (item.failedRuns || 0);
           existing.avgResponseTime = existing.avgResponseTime && item.avgResponseTime ? (existing.avgResponseTime + item.avgResponseTime) / 2 : existing.avgResponseTime || item.avgResponseTime;
           existing.tokens = (existing.tokens || 0) + (item.tokens || 0);
         } else {
@@ -30965,11 +31012,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     // Batch fetch enhanced data for all metrics with table and control data
     async fetchEnhancedMetricsData(fromTimestamp, toTimestamp, timeDimension, filters = []) {
       try {
-        const [agentsData, toolsData, modelsData] = await Promise.all([
+        const results = await Promise.allSettled([
           this.fetchTimeSeriesDataWithTableData("agent-runs", "runs", fromTimestamp, toTimestamp, timeDimension, filters),
           this.fetchTimeSeriesDataWithTableData("tool-runs", "runs", fromTimestamp, toTimestamp, timeDimension, filters),
           this.fetchTimeSeriesDataWithTableData("model-runs", "runs", fromTimestamp, toTimestamp, timeDimension, filters)
         ]);
+        if (results[0].status === "rejected") {
+          console.error("Error fetching agent runs enhanced data:", results[0].reason);
+        }
+        if (results[1].status === "rejected") {
+          console.error("Error fetching tool runs enhanced data:", results[1].reason);
+        }
+        if (results[2].status === "rejected") {
+          console.error("Error fetching model runs enhanced data:", results[2].reason);
+        }
+        const emptyData = { chartData: [], tableData: [], controlOptions: [] };
+        const agentsData = results[0].status === "fulfilled" ? results[0].value : emptyData;
+        const toolsData = results[1].status === "fulfilled" ? results[1].value : emptyData;
+        const modelsData = results[2].status === "fulfilled" ? results[2].value : emptyData;
         return {
           agents: agentsData,
           tools: toolsData,
@@ -30986,13 +31046,30 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const getChangeType = (changePercent) => {
         return changePercent > 0 ? "increase" : "decrease";
       };
-      const [agentsData, toolsData, modelsData, toolRunsTimeSeriesData] = await Promise.all([
+      const results = await Promise.allSettled([
         this.fetchTimeSeriesDataWithTableData("agent-runs", "runs", fromTimestamp, toTimestamp, timeDimension, filters),
         this.fetchTimeSeriesDataWithTableData("tool-runs", "runs", fromTimestamp, toTimestamp, timeDimension, filters),
         this.fetchTimeSeriesDataWithTableData("model-runs", "runs", fromTimestamp, toTimestamp, timeDimension, filters),
         this.fetchTimeSeriesData("tool-runs", "runs", fromTimestamp, toTimestamp, timeDimension, filters)
       ]);
-      const enhancedToolRunsChartData = this.transformTimeSeriesDataForToolRuns(toolRunsTimeSeriesData);
+      if (results[0].status === "rejected") {
+        console.error("Error fetching agent runs data:", results[0].reason);
+      }
+      if (results[1].status === "rejected") {
+        console.error("Error fetching tool runs data:", results[1].reason);
+      }
+      if (results[2].status === "rejected") {
+        console.error("Error fetching model runs data:", results[2].reason);
+      }
+      if (results[3].status === "rejected") {
+        console.error("Error fetching tool runs time series data:", results[3].reason);
+      }
+      const emptyEnhancedData = { chartData: [], tableData: [], controlOptions: [] };
+      const agentsData = results[0].status === "fulfilled" ? results[0].value : emptyEnhancedData;
+      const toolsData = results[1].status === "fulfilled" ? results[1].value : emptyEnhancedData;
+      const modelsData = results[2].status === "fulfilled" ? results[2].value : emptyEnhancedData;
+      const toolRunsTimeSeriesData = results[3].status === "fulfilled" ? results[3].value : void 0;
+      const enhancedToolRunsChartData = toolRunsTimeSeriesData ? this.transformTimeSeriesDataForToolRuns(toolRunsTimeSeriesData) : [];
       return [
         {
           title: "Agent Runs",
@@ -31006,68 +31083,70 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             value: Math.abs(trends.agentRuns.changePercent),
             type: getChangeType(trends.agentRuns.changePercent)
           } : void 0,
-          view: {
-            type: "chart",
-            chart: {
-              type: "line",
-              title: "Agent Runs",
-              data: agentsData.chartData,
-              dataKey: "agentRuns",
-              color: "#0BA5EC",
-              yAxisLabel: "Number of Agent Runs",
-              height: 300,
-              showGrid: true,
-              curve: "monotone",
-              tooltip: { show: true, style: "dark" },
-              dateRange: {
-                start: fromTimestamp.split("T")[0],
-                end: toTimestamp.split("T")[0]
-              }
-            },
-            table: {
-              title: "Agent Runs",
-              data: agentsData.tableData,
-              columns: [
-                {
-                  key: "name",
-                  title: "Name",
-                  width: 200,
-                  align: "left"
-                },
-                {
-                  key: "runs",
-                  title: "Runs",
-                  width: 100,
-                  align: "right",
-                  formatter: (value) => `${Math.floor(value / 1e3)}k`
-                },
-                {
-                  key: "responseTime",
-                  title: "Response Time",
-                  width: 120,
-                  align: "right"
-                },
-                {
-                  key: "tokens",
-                  title: "Tokens",
-                  width: 100,
-                  align: "right",
-                  formatter: (value) => `${Math.floor(value / 1e3)}k`
+          ...agentsData && {
+            view: {
+              type: "chart",
+              chart: {
+                type: "line",
+                title: "Agent Runs",
+                data: agentsData.chartData,
+                dataKey: "agentRuns",
+                color: "#0BA5EC",
+                yAxisLabel: "Number of Agent Runs",
+                height: 300,
+                showGrid: true,
+                curve: "monotone",
+                tooltip: { show: true, style: "dark" },
+                dateRange: {
+                  start: fromTimestamp.split("T")[0],
+                  end: toTimestamp.split("T")[0]
                 }
-              ]
-            }
-          },
-          controls: {
-            dropdown: {
-              label: "All Agents",
-              options: agentsData.controlOptions,
-              defaultValue: ["all"],
-              multiSelect: true,
-              searchable: true
+              },
+              table: {
+                title: "Agent Runs",
+                data: agentsData.tableData,
+                columns: [
+                  {
+                    key: "name",
+                    title: "Name",
+                    width: 200,
+                    align: "left"
+                  },
+                  {
+                    key: "runs",
+                    title: "Runs",
+                    width: 100,
+                    align: "right",
+                    formatter: (value) => `${Math.floor(value / 1e3)}k`
+                  },
+                  {
+                    key: "responseTime",
+                    title: "Response Time",
+                    width: 120,
+                    align: "right"
+                  },
+                  {
+                    key: "tokens",
+                    title: "Tokens",
+                    width: 100,
+                    align: "right",
+                    formatter: (value) => `${Math.floor(value / 1e3)}k`
+                  }
+                ]
+              }
             },
-            toggle: {
-              chartView: true,
-              tableView: true
+            controls: {
+              dropdown: {
+                label: "All Agents",
+                options: agentsData.controlOptions,
+                defaultValue: ["all"],
+                multiSelect: true,
+                searchable: true
+              },
+              toggle: {
+                chartView: true,
+                tableView: true
+              }
             }
           }
         },
@@ -31082,99 +31161,107 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             value: Math.abs(trends.toolRuns.changePercent.total),
             type: getChangeType(trends.toolRuns.changePercent.total)
           } : void 0,
-          view: {
-            type: "chart",
-            chart: {
-              type: "line",
-              title: "Tool Runs",
-              data: enhancedToolRunsChartData,
-              yAxisLabel: "Number of Tool Runs",
-              lines: [
-                {
-                  dataKey: "toolRuns",
-                  color: "#667085",
-                  label: "Tool Runs"
-                },
-                {
-                  dataKey: "codeTools",
-                  color: "#F38744",
-                  label: "Code Tools"
-                },
-                {
-                  dataKey: "workflowTools",
-                  color: "#2970FF",
-                  label: "Workflow Tools"
-                },
-                {
-                  dataKey: "knowledgeTools",
-                  color: "#7A5AF8",
-                  label: "Knowledge"
-                },
-                {
-                  dataKey: "mcpTools",
-                  color: "#47CD89",
-                  label: "MCP Tools"
+          ...toolsData && {
+            view: {
+              type: "chart",
+              chart: {
+                type: "line",
+                title: "Tool Runs",
+                data: enhancedToolRunsChartData,
+                yAxisLabel: "Number of Tool Runs",
+                lines: [
+                  {
+                    dataKey: "toolRuns",
+                    color: "#667085",
+                    label: "Tool Runs"
+                  },
+                  {
+                    dataKey: "codeTools",
+                    color: "#F38744",
+                    label: "Code Tools"
+                  },
+                  {
+                    dataKey: "workflowTools",
+                    color: "#2970FF",
+                    label: "Workflow Tools"
+                  },
+                  {
+                    dataKey: "knowledgeTools",
+                    color: "#7A5AF8",
+                    label: "Knowledge"
+                  },
+                  {
+                    dataKey: "mcpTools",
+                    color: "#47CD89",
+                    label: "MCP Tools"
+                  },
+                  {
+                    dataKey: "processors",
+                    color: "#EAB308",
+                    label: "Processors"
+                  }
+                ],
+                height: 300,
+                showGrid: true,
+                showLegend: true,
+                curve: "monotone",
+                tooltip: { show: true, style: "dark" },
+                dateRange: {
+                  start: fromTimestamp.split("T")[0],
+                  end: toTimestamp.split("T")[0]
                 }
-              ],
-              height: 300,
-              showGrid: true,
-              showLegend: true,
-              curve: "monotone",
-              tooltip: { show: true, style: "dark" },
-              dateRange: {
-                start: fromTimestamp.split("T")[0],
-                end: toTimestamp.split("T")[0]
+              },
+              table: {
+                title: "Tool Runs",
+                data: toolsData.tableData,
+                columns: [
+                  {
+                    key: "name",
+                    title: "Name",
+                    width: 200,
+                    align: "left"
+                  },
+                  {
+                    key: "type",
+                    title: "Type",
+                    width: 150,
+                    align: "left"
+                  },
+                  {
+                    key: "runs",
+                    title: "Runs",
+                    width: 100,
+                    align: "right",
+                    formatter: (value) => `${Math.floor(value / 1e3)}k`
+                  },
+                  {
+                    key: "responseTime",
+                    title: "Response Time",
+                    width: 120,
+                    align: "right"
+                  }
+                ]
               }
             },
-            table: {
-              title: "Tool Runs",
-              data: toolsData.tableData,
-              columns: [
-                {
-                  key: "name",
-                  title: "Name",
-                  width: 200,
-                  align: "left"
-                },
-                {
-                  key: "type",
-                  title: "Type",
-                  width: 150,
-                  align: "left"
-                },
-                {
-                  key: "runs",
-                  title: "Runs",
-                  width: 100,
-                  align: "right",
-                  formatter: (value) => `${Math.floor(value / 1e3)}k`
-                },
-                {
-                  key: "responseTime",
-                  title: "Response Time",
-                  width: 120,
-                  align: "right"
-                }
-              ]
-            }
-          },
-          controls: {
-            dropdown: {
-              label: "All Tools",
-              options: toolsData.controlOptions,
-              defaultValue: ["all"],
-              multiSelect: true,
-              searchable: true
-            },
-            toggle: {
-              chartView: true,
-              tableView: true
+            controls: {
+              dropdown: {
+                label: "All Tools",
+                options: toolsData.controlOptions,
+                defaultValue: ["all"],
+                multiSelect: true,
+                searchable: true
+              },
+              toggle: {
+                chartView: true,
+                tableView: true
+              }
             }
           }
         },
         {
           title: "Model Runs",
           value: data.data.modelRuns,
+          failedCount: data.data.failedModelRuns || 0,
           metricType: "modelRuns",
           icon: "cpu",
           highlighted: false,
@@ -31183,68 +31270,79 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             value: Math.abs(trends.modelRuns.changePercent),
             type: getChangeType(trends.modelRuns.changePercent)
           } : void 0,
-          view: {
-            type: "chart",
-            chart: {
-              type: "line",
-              title: "Model Runs",
-              data: modelsData.chartData,
-              dataKey: "modelRuns",
-              color: "#47CD89",
-              yAxisLabel: "Number of Model Runs",
-              height: 300,
-              showGrid: true,
-              curve: "monotone",
-              tooltip: { show: true, style: "dark" },
-              dateRange: {
-                start: fromTimestamp.split("T")[0],
-                end: toTimestamp.split("T")[0]
-              }
-            },
-            table: {
-              title: "Model Runs",
-              data: modelsData.tableData,
-              columns: [
-                {
-                  key: "name",
-                  title: "Model Name",
-                  width: 200,
-                  align: "left"
-                },
-                {
-                  key: "runs",
-                  title: "Runs",
-                  width: 100,
-                  align: "right",
-                  formatter: (value) => `${Math.floor(value / 1e3)}k`
-                },
-                {
-                  key: "tokens",
-                  title: "Tokens",
-                  width: 120,
-                  align: "right",
-                  formatter: (value) => `${Math.floor(value / 1e3)}k`
-                },
-                {
-                  key: "responseTime",
-                  title: "Response Time",
-                  width: 120,
-                  align: "right"
+          ...modelsData && {
+            view: {
+              type: "chart",
+              chart: {
+                type: "line",
+                title: "Model Runs",
+                data: modelsData.chartData,
+                yAxisLabel: "Number of Model Runs",
+                lines: [
+                  { dataKey: "modelRuns", color: "#47CD89", label: "Model Runs" },
+                  {
+                    dataKey: "failedModelRuns",
+                    color: "#ef4444",
+                    label: "Failed",
+                    seriesType: "bar",
+                    hideInLegend: true
+                  }
+                ],
+                height: 300,
+                showGrid: true,
+                showLegend: true,
+                curve: "monotone",
+                tooltip: { show: true, style: "dark" },
+                dateRange: {
+                  start: fromTimestamp.split("T")[0],
+                  end: toTimestamp.split("T")[0]
                 }
-              ]
-            }
-          },
-          controls: {
-            dropdown: {
-              label: "All Models",
-              options: modelsData.controlOptions,
-              defaultValue: ["all"],
-              multiSelect: true,
-              searchable: true
+              },
+              table: {
+                title: "Model Runs",
+                data: modelsData.tableData,
+                columns: [
+                  {
+                    key: "name",
+                    title: "Model Name",
+                    width: 200,
+                    align: "left"
+                  },
+                  {
+                    key: "runs",
+                    title: "Runs",
+                    width: 100,
+                    align: "right",
+                    formatter: (value) => `${Math.floor(value / 1e3)}k`
+                  },
+                  {
+                    key: "tokens",
+                    title: "Tokens",
+                    width: 120,
+                    align: "right",
+                    formatter: (value) => `${Math.floor(value / 1e3)}k`
+                  },
+                  {
+                    key: "responseTime",
+                    title: "Response Time",
+                    width: 120,
+                    align: "right"
+                  }
+                ]
+              }
             },
-            toggle: {
-              chartView: true,
-              tableView: true
+            controls: {
+              dropdown: {
+                label: "All Models",
+                options: modelsData.controlOptions,
+                defaultValue: ["all"],
+                multiSelect: true,
+                searchable: true
+              },
+              toggle: {
+                chartView: true,
+                tableView: true
+              }
             }
           }
         }
@@ -31256,12 +31354,34 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const getChangeType = (changePercent) => {
         return changePercent > 0 ? "increase" : "decrease";
       };
-      const [usersData, sessionsData, messagesData, tokensData] = await Promise.all([
+      const results = await Promise.allSettled([
         this.fetchTimeSeriesData("users", "usage-analytics", fromTimestamp, toTimestamp, timeDimension, filters),
         this.fetchTimeSeriesData("sessions", "usage-analytics", fromTimestamp, toTimestamp, timeDimension, filters),
         this.fetchTimeSeriesData("messages", "usage-analytics", fromTimestamp, toTimestamp, timeDimension, filters),
         this.fetchTimeSeriesData("tokens", "usage-analytics", fromTimestamp, toTimestamp, timeDimension, filters)
       ]);
+      if (results[0].status === "rejected") {
+        console.error("Error fetching users data:", results[0].reason);
+      }
+      if (results[1].status === "rejected") {
+        console.error("Error fetching sessions data:", results[1].reason);
+      }
+      if (results[2].status === "rejected") {
+        console.error("Error fetching messages data:", results[2].reason);
+      }
+      if (results[3].status === "rejected") {
+        console.error("Error fetching tokens data:", results[3].reason);
+      }
+      const emptyTimeSeries = {
+        type: "time-series",
+        category: "usage-analytics",
+        metric: "",
+        data: []
+      };
+      const usersData = results[0].status === "fulfilled" ? results[0].value : { ...emptyTimeSeries, metric: "users" };
+      const sessionsData = results[1].status === "fulfilled" ? results[1].value : { ...emptyTimeSeries, metric: "sessions" };
+      const messagesData = results[2].status === "fulfilled" ? results[2].value : { ...emptyTimeSeries, metric: "messages" };
+      const tokensData = results[3].status === "fulfilled" ? results[3].value : { ...emptyTimeSeries, metric: "tokens" };
       return [
         {
           title: "Users",
@@ -31275,22 +31395,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             value: Math.abs(trends.users.changePercent),
             type: getChangeType(trends.users.changePercent)
           } : void 0,
-          view: {
-            type: "chart",
-            chart: {
-              type: "line",
-              title: "Total Users",
-              data: this.transformTimeSeriesDataForMetric(usersData, "users"),
-              dataKey: "users",
-              color: "#4E5BA6",
-              yAxisLabel: "Number of Users",
-              height: 300,
-              showGrid: true,
-              curve: "monotone",
-              tooltip: { show: true, style: "dark" },
-              dateRange: {
-                start: fromTimestamp.split("T")[0],
-                end: toTimestamp.split("T")[0]
+          ...usersData && {
+            view: {
+              type: "chart",
+              chart: {
+                type: "line",
+                title: "Total Users",
+                data: this.transformTimeSeriesDataForMetric(usersData, "users"),
+                dataKey: "users",
+                color: "#4E5BA6",
+                yAxisLabel: "Number of Users",
+                height: 300,
+                showGrid: true,
+                curve: "monotone",
+                tooltip: { show: true, style: "dark" },
+                dateRange: {
+                  start: fromTimestamp.split("T")[0],
+                  end: toTimestamp.split("T")[0]
+                }
               }
             }
           }
@@ -31306,22 +31428,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             value: Math.abs(trends.sessions.changePercent),
             type: getChangeType(trends.sessions.changePercent)
           } : void 0,
-          view: {
-            type: "chart",
-            chart: {
-              type: "line",
-              title: "Total Sessions",
-              data: this.transformTimeSeriesDataForMetric(sessionsData, "sessions"),
-              dataKey: "sessions",
-              color: "#0BA5EC",
-              yAxisLabel: "Number of Sessions",
-              height: 300,
-              showGrid: true,
-              curve: "monotone",
-              tooltip: { show: true, style: "dark" },
-              dateRange: {
-                start: fromTimestamp.split("T")[0],
-                end: toTimestamp.split("T")[0]
+          ...sessionsData && {
+            view: {
+              type: "chart",
+              chart: {
+                type: "line",
+                title: "Total Sessions",
+                data: this.transformTimeSeriesDataForMetric(sessionsData, "sessions"),
+                dataKey: "sessions",
+                color: "#0BA5EC",
+                yAxisLabel: "Number of Sessions",
+                height: 300,
+                showGrid: true,
+                curve: "monotone",
+                tooltip: { show: true, style: "dark" },
+                dateRange: {
+                  start: fromTimestamp.split("T")[0],
+                  end: toTimestamp.split("T")[0]
+                }
               }
             }
           }
@@ -31337,22 +31461,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             value: Math.abs(trends.messages.changePercent.total),
             type: getChangeType(trends.messages.changePercent.total)
           } : void 0,
-          view: {
-            type: "chart",
-            chart: {
-              type: "line",
-              title: "Total Messages",
-              data: this.transformTimeSeriesDataForMetric(messagesData, "messages"),
-              dataKey: "messages",
-              color: "#E478FA",
-              yAxisLabel: "Number of Messages",
-              height: 300,
-              showGrid: true,
-              curve: "monotone",
-              tooltip: { show: true, style: "dark" },
-              dateRange: {
-                start: fromTimestamp.split("T")[0],
-                end: toTimestamp.split("T")[0]
+          ...messagesData && {
+            view: {
+              type: "chart",
+              chart: {
+                type: "line",
+                title: "Total Messages",
+                data: this.transformTimeSeriesDataForMetric(messagesData, "messages"),
+                dataKey: "messages",
+                color: "#E478FA",
+                yAxisLabel: "Number of Messages",
+                height: 300,
+                showGrid: true,
+                curve: "monotone",
+                tooltip: { show: true, style: "dark" },
+                dateRange: {
+                  start: fromTimestamp.split("T")[0],
+                  end: toTimestamp.split("T")[0]
+                }
               }
             }
           }
@@ -31368,38 +31494,40 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             value: Math.abs(trends.tokens.changePercent.total),
             type: getChangeType(trends.tokens.changePercent.total)
           } : void 0,
-          view: {
-            type: "chart",
-            chart: {
-              type: "line",
-              title: "Token Usage Breakdown",
-              data: this.transformTimeSeriesDataForMetric(tokensData, "tokens"),
-              yAxisLabel: "Number of Tokens",
-              lines: [
-                {
-                  dataKey: "totalTokens",
-                  color: "#FF692E",
-                  label: "Total Tokens"
-                },
-                {
-                  dataKey: "inputTokens",
-                  color: "#5925DC",
-                  label: "Input Tokens"
-                },
-                {
-                  dataKey: "outputTokens",
-                  color: "#E478FA",
-                  label: "Output Tokens"
+          ...tokensData && {
+            view: {
+              type: "chart",
+              chart: {
+                type: "line",
+                title: "Token Usage Breakdown",
+                data: this.transformTimeSeriesDataForMetric(tokensData, "tokens"),
+                yAxisLabel: "Number of Tokens",
+                lines: [
+                  {
+                    dataKey: "totalTokens",
+                    color: "#FF692E",
+                    label: "Total Tokens"
+                  },
+                  {
+                    dataKey: "inputTokens",
+                    color: "#5925DC",
+                    label: "Input Tokens"
+                  },
+                  {
+                    dataKey: "outputTokens",
+                    color: "#E478FA",
+                    label: "Output Tokens"
+                  }
+                ],
+                height: 300,
+                showGrid: true,
+                showLegend: true,
+                curve: "monotone",
+                tooltip: { show: true, style: "dark" },
+                dateRange: {
+                  start: fromTimestamp.split("T")[0],
+                  end: toTimestamp.split("T")[0]
                 }
-              ],
-              height: 300,
-              showGrid: true,
-              showLegend: true,
-              curve: "monotone",
-              tooltip: { show: true, style: "dark" },
-              dateRange: {
-                start: fromTimestamp.split("T")[0],
-                end: toTimestamp.split("T")[0]
               }
             }
           }
@@ -31427,35 +31555,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         let workflowTools = 0;
         let knowledgeTools = 0;
         let mcpTools = 0;
+        let processors = 0;
         if (point2.listView && Array.isArray(point2.listView)) {
           point2.listView.forEach((item) => {
             const count = item.count || 0;
-            const toolType = (item.toolType || item.tool_type || "").toLowerCase();
-            const toolName = (item.toolName || item.tool_name || "").toLowerCase();
-            console.log(`Processing listView item:`, { toolType, toolName, count });
+            const toolType = item.toolType || item.tool_type || "";
             const normalizedToolType = toolType.toLowerCase();
-            if (["inlinetool", "inlineTool", "tool", "code", "codetool", "event", "EVENT"].includes(toolType) || ["inlinetool", "tool", "code", "codetool", "event"].includes(normalizedToolType)) {
+            if (["inlinetool", "tool", "code", "codetool", "event"].includes(normalizedToolType)) {
               codeTools += count;
-            } else if (["toollibrary", "toolLibrary", "workflow", "tool"].includes(toolType) || ["toollibrary", "workflow", "tool"].includes(normalizedToolType)) {
+            } else if (["toollibrary", "workflow"].includes(normalizedToolType)) {
               workflowTools += count;
-            } else if (["knowledge", "KNOWLEDGE", "knowledgetool"].includes(toolType) || ["knowledge", "knowledgetool"].includes(normalizedToolType)) {
+            } else if (["knowledge", "knowledgetool"].includes(normalizedToolType) || toolType === "KNOWLEDGE") {
               knowledgeTools += count;
-            } else if (["mcp", "MCP", "mcptool", "mcpTool"].includes(toolType) || ["mcp", "mcptool"].includes(normalizedToolType)) {
+            } else if (["mcp", "mcptool"].includes(normalizedToolType)) {
               mcpTools += count;
+            } else if (["pre_processor", "post_processor", "processor", "input_processor"].includes(normalizedToolType) || toolType === "INPUT_PROCESSOR" || toolType === "input_processor") {
+              processors += count;
             } else {
-              console.log(`Unknown tool type '${toolType}' for tool '${toolName}', defaulting to code tools`);
               codeTools += count;
             }
           });
-          console.log(`Calculated breakdown for point ${index}:`, {
-            codeTools,
-            workflowTools,
-            knowledgeTools,
-            mcpTools,
-            total: codeTools + workflowTools + knowledgeTools + mcpTools,
-            expectedTotal: totalToolRuns
-          });
-          const calculatedTotal = codeTools + workflowTools + knowledgeTools + mcpTools;
+          const calculatedTotal = codeTools + workflowTools + knowledgeTools + mcpTools + processors;
           if (Math.abs(calculatedTotal - totalToolRuns) > 1) {
             console.warn(`Breakdown total (${calculatedTotal}) doesn't match expected total (${totalToolRuns}) for point ${index}`);
             const difference = totalToolRuns - calculatedTotal;
@@ -31463,7 +31583,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             console.log(`Adjusted codeTools by ${difference} to balance total`);
           }
         } else {
-          console.log(`No listView data for point ${index}, assigning all ${totalToolRuns} to codeTools`);
           codeTools = totalToolRuns;
         }
         const basePoint = {
@@ -31474,11 +31593,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           toolRuns: totalToolRuns,
           value: totalToolRuns,
           count: totalToolRuns,
-          // Tool breakdown data for multi-line chart (using actual data)
           codeTools,
           workflowTools,
           knowledgeTools,
           mcpTools,
+          processors,
           // Token data
           input_tokens: point2.input_tokens || 0,
           output_tokens: point2.output_tokens || 0,
@@ -31516,14 +31635,33 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     // Enhanced batch fetch method that returns complete MetricData with embedded view and controls
     async fetchAllCardsDataWithEnhancedViews(fromTimestamp, toTimestamp, timeDimension, filters = []) {
       try {
-        const [usageAnalyticsCards, runsCards] = await Promise.all([
+        const cardsResults = await Promise.allSettled([
           this.fetchUsageAnalyticsCards(fromTimestamp, toTimestamp, timeDimension, filters),
           this.fetchRunsCards(fromTimestamp, toTimestamp, timeDimension, filters)
         ]);
-        const [enhancedUsageAnalytics, enhancedRuns] = await Promise.all([
-          this.transformUsageAnalyticsCardsWithEnhancedData(usageAnalyticsCards, fromTimestamp, toTimestamp, timeDimension, filters),
-          this.transformRunsCardsWithEnhancedData(runsCards, fromTimestamp, toTimestamp, timeDimension, filters)
+        if (cardsResults[0].status === "rejected") {
+          console.error("Error fetching usage analytics cards:", cardsResults[0].reason);
+        }
+        if (cardsResults[1].status === "rejected") {
+          console.error("Error fetching runs cards:", cardsResults[1].reason);
+        }
+        if (cardsResults[0].status === "rejected" && cardsResults[1].status === "rejected") {
+          throw new Error("Both usage analytics and runs cards failed to load");
+        }
+        const usageAnalyticsCards = cardsResults[0].status === "fulfilled" ? cardsResults[0].value : void 0;
+        const runsCards = cardsResults[1].status === "fulfilled" ? cardsResults[1].value : void 0;
+        const enhancementResults = await Promise.allSettled([
+          usageAnalyticsCards ? this.transformUsageAnalyticsCardsWithEnhancedData(usageAnalyticsCards, fromTimestamp, toTimestamp, timeDimension, filters) : Promise.resolve([]),
+          runsCards ? this.transformRunsCardsWithEnhancedData(runsCards, fromTimestamp, toTimestamp, timeDimension, filters) : Promise.resolve([])
         ]);
+        if (enhancementResults[0].status === "rejected") {
+          console.error("Error transforming usage analytics cards:", enhancementResults[0].reason);
+        }
+        if (enhancementResults[1].status === "rejected") {
+          console.error("Error transforming runs cards:", enhancementResults[1].reason);
+        }
+        const enhancedUsageAnalytics = enhancementResults[0].status === "fulfilled" ? enhancementResults[0].value : [];
+        const enhancedRuns = enhancementResults[1].status === "fulfilled" ? enhancementResults[1].value : [];
         return {
           usageAnalytics: enhancedUsageAnalytics,
           runs: enhancedRuns
@@ -31536,13 +31674,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     // Batch fetch time series data for default selected metrics
     async fetchDefaultTimeSeriesData(fromTimestamp, toTimestamp, timeDimension, filters = []) {
       try {
-        const [sessionsData, agentRunsData] = await Promise.all([
+        const results = await Promise.allSettled([
           this.fetchTimeSeriesData("sessions", "usage-analytics", fromTimestamp, toTimestamp, timeDimension, filters),
           this.fetchTimeSeriesData("agent-runs", "runs", fromTimestamp, toTimestamp, timeDimension, filters)
         ]);
+        if (results[0].status === "rejected") {
+          console.error("Error fetching sessions data:", results[0].reason);
+        }
+        if (results[1].status === "rejected") {
+          console.error("Error fetching agent runs data:", results[1].reason);
+        }
+        const sessionsData = results[0].status === "fulfilled" ? results[0].value : void 0;
+        const agentRunsData = results[1].status === "fulfilled" ? results[1].value : void 0;
         return {
-          sessions: this.transformTimeSeriesData(sessionsData),
-          agentRuns: this.transformTimeSeriesData(agentRunsData)
+          sessions: sessionsData ? this.transformTimeSeriesData(sessionsData) : [],
+          agentRuns: agentRunsData ? this.transformTimeSeriesData(agentRunsData) : []
         };
       } catch (error) {
         console.error("Error fetching default time series data:", error);
@@ -32269,6 +32415,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] })
     ] });
   };
+  function modelListViewRowLabel(listItem) {
+    if (!listItem.modelName) return "";
+    return listItem.connectionName ? `${listItem.modelName} - ${listItem.connectionName}` : listItem.modelName;
+  }
   const DashboardSection = ({
     section,
     className,
@@ -32366,16 +32516,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         });
         return baseData.map((item) => {
           let filteredValue = 0;
+          let matchingItems = [];
           if (item["listView"] && Array.isArray(item["listView"])) {
-            const matchingItems = item["listView"].filter((listItem) => {
+            matchingItems = item["listView"].filter((listItem) => {
               if (metricType === "agentRuns" && listItem.agentName) {
                 return listItem.agentName === selectedLabel || listItem.agentName.toLowerCase() === (selectedLabel == null ? void 0 : selectedLabel.toLowerCase());
               }
               if (metricType === "toolRuns" && listItem.toolName) {
                 return listItem.toolName === selectedLabel || listItem.toolName.toLowerCase() === (selectedLabel == null ? void 0 : selectedLabel.toLowerCase());
               }
-              if (metricType === "modelRuns" && listItem.modelName) {
-                return listItem.modelName === selectedLabel || listItem.modelName.toLowerCase() === (selectedLabel == null ? void 0 : selectedLabel.toLowerCase());
+              if (metricType === "modelRuns" && listItem.modelName && selectedLabel) {
+                return modelListViewRowLabel(listItem) === selectedLabel;
               }
               return false;
             });
@@ -32385,10 +32536,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             );
           }
           console.log("📊 Filtered value for", selectedLabel, ":", filteredValue);
+          const failedModelRunsSum = metricType === "modelRuns" ? matchingItems.reduce(
+            (sum2, listItem) => sum2 + (Number(listItem.failedRuns) || 0),
+            0
+          ) : 0;
           const result = {
             ...item,
             [metricType]: filteredValue
           };
+          if (metricType === "modelRuns") {
+            result.failedModelRuns = failedModelRunsSum;
+          }
           return result;
         });
       }
@@ -32400,8 +32558,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const selectedLabels = selectedOptions.map((opt) => opt.label);
         return baseData.map((item) => {
           let aggregatedValue = 0;
+          let matchingItems = [];
           if (item["listView"] && Array.isArray(item["listView"])) {
-            const matchingItems = item["listView"].filter((listItem) => {
+            matchingItems = item["listView"].filter((listItem) => {
               if (metricType === "agentRuns" && listItem.agentName) {
                 return selectedLabels.some(
                   (label) => listItem.agentName === label || listItem.agentName.toLowerCase() === (label == null ? void 0 : label.toLowerCase())
@@ -32413,9 +32572,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 );
               }
               if (metricType === "modelRuns" && listItem.modelName) {
-                return selectedLabels.some(
-                  (label) => listItem.modelName === label || listItem.modelName.toLowerCase() === (label == null ? void 0 : label.toLowerCase())
-                );
+                const rowLabel = modelListViewRowLabel(listItem);
+                return selectedLabels.some((label) => rowLabel === label);
               }
               return false;
             });
@@ -32424,10 +32582,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               0
             );
           }
-          return {
+          const failedModelRunsMulti = metricType === "modelRuns" ? matchingItems.reduce(
+            (sum2, listItem) => sum2 + (Number(listItem.failedRuns) || 0),
+            0
+          ) : 0;
+          const multiResult = {
             ...item,
             [metricType]: aggregatedValue
           };
+          if (metricType === "modelRuns") {
+            multiResult.failedModelRuns = failedModelRunsMulti;
+          }
+          return multiResult;
         });
       }
       return baseData;
@@ -32659,35 +32825,30 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             data: filteredData,
             yAxisLabel: "Number of Tool Runs",
             lines: [
-              {
-                dataKey: "toolRuns",
-                color: "#06b6d4",
-                // Blue for Tool Runs
-                label: "Tool Runs"
-              },
               {
                 dataKey: "codeTools",
                 color: "#f97316",
-                // Orange for Code Tools
                 label: "Code Tools"
               },
               {
                 dataKey: "workflowTools",
                 color: "#10b981",
-                // Green for Workflow Tools
                 label: "Workflow Tools"
               },
               {
                 dataKey: "knowledgeTools",
                 color: "#8b5cf6",
-                // Purple for Knowledge
                 label: "Knowledge"
               },
               {
                 dataKey: "mcpTools",
                 color: "#ef4444",
-                // Red for MCP Tools
                 label: "MCP Tools"
+              },
+              {
+                dataKey: "processors",
+                color: "#eab308",
+                label: "Processors"
               }
             ],
             height: 300,
@@ -32707,12 +32868,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               type: "line",
               title: getChartTitle("Model Runs"),
               data: getFilteredData(baseData, "modelRuns"),
-              dataKey: "modelRuns",
-              color: "#10b981",
-              // Green as shown in Figma
               yAxisLabel: "Number of Model Runs",
+              lines: [
+                { dataKey: "modelRuns", color: "#10b981", label: "Model Runs" },
+                {
+                  dataKey: "failedModelRuns",
+                  color: "#ef4444",
+                  label: "Failed",
+                  seriesType: "bar",
+                  hideInLegend: true
+                }
+              ],
               height: 300,
               showGrid: true,
+              showLegend: true,
               curve: "monotone",
               tooltip: { show: true, style: "dark" },
               dateRange: {
@@ -32725,12 +32894,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             type: "line",
             title: getChartTitle("Model Runs"),
             data: filteredData,
-            dataKey: "modelRuns",
-            color: "#10b981",
-            // Green as shown in Figma
             yAxisLabel: "Number of Model Runs",
+            lines: [
+              { dataKey: "modelRuns", color: "#10b981", label: "Model Runs" },
+              {
+                dataKey: "failedModelRuns",
+                color: "#ef4444",
+                label: "Failed",
+                seriesType: "bar",
+                hideInLegend: true
+              }
+            ],
             height: 300,
             showGrid: true,
+            showLegend: true,
             curve: "monotone",
             tooltip: { show: true, style: "dark" },
             dateRange: {
@@ -34982,8 +35159,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (appConfig) {
         try {
           apiServiceRef.current = new DashboardApiService(appConfig);
-          loadEnvironments();
-          loadInitialData();
+          const initDashboard = async () => {
+            await loadEnvironments();
+            await loadInitialData();
+          };
+          initDashboard();
         } catch (err) {
           console.error("Failed to initialize API service:", err);
         }
@@ -106366,6 +106546,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         );
         traceDetails = traceResponses.map((trace) => this.transformToTraceDetailData(trace));
       }
+      const resolvedSessionReference = typeof sessionResponse.sessionReference === "string" && sessionResponse.sessionReference.trim() !== "" ? sessionResponse.sessionReference.trim() : void 0;
       return {
         id: sessionResponse.id,
         projectId: sessionResponse.projectId,
@@ -106373,7 +106554,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         bookmarked: false,
         public: false,
         traces: traceDetails,
-        scores: []
+        scores: [],
+        sessionReference: resolvedSessionReference
       };
     }
     /**
@@ -106450,10 +106632,12 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         projectId: this.projectId
       });
       const traceIds = (sessionResponse.traces || []).map((t) => t.id);
+      const resolvedSessionReference = typeof sessionResponse.sessionReference === "string" && sessionResponse.sessionReference.trim() !== "" ? sessionResponse.sessionReference.trim() : void 0;
       onSessionMeta({
         id: sessionResponse.id,
         traceCount: traceIds.length,
-        traceIds
+        traceIds,
+        sessionReference: resolvedSessionReference
       });
       if (traceIds.length === 0) {
         return {
@@ -106463,7 +106647,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           bookmarked: false,
           public: false,
           traces: [],
-          scores: []
+          scores: [],
+          sessionReference: resolvedSessionReference
         };
       }
       const firstTraceId = traceIds[0];
@@ -106510,7 +106695,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         bookmarked: false,
         public: false,
         traces: allTraces,
-        scores: []
+        scores: [],
+        sessionReference: resolvedSessionReference
       };
     }
     // ============================================================================
@@ -106604,6 +106790,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         totalCost: trace.totalCost || trace.calculatedTotalCost,
         totalTokens: trace.totalTokens,
         environment: trace.environment,
+        source: typeof trace.source === "string" && trace.source.length > 0 ? trace.source : void 0,
         observations: (trace.observations || []).map(
           (obs) => this.transformObservation(obs)
         ),
@@ -109331,6 +109518,526 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       )
     ] });
   }
+  const MicIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "shrink-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        d: "M8 2C7.60218 2 7.22064 2.15804 6.93934 2.43934C6.65804 2.72064 6.5 3.10218 6.5 3.5V6.5C6.5 6.89782 6.65804 7.27936 6.93934 7.56066C7.22064 7.84196 7.60218 8 8 8C8.39782 8 8.77936 7.84196 9.06066 7.56066C9.34196 7.27936 9.5 6.89782 9.5 6.5V3.5C9.5 3.10218 9.34196 2.72064 9.06066 2.43934C8.77936 2.15804 8.39782 2 8 2Z",
+        fill: "#155EEF"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        d: "M5.5 6V6.5C5.5 7.16304 5.76339 7.79893 6.23223 8.26777C6.70107 8.73661 7.33696 9 8 9C8.66304 9 9.29893 8.73661 9.76777 8.26777C10.2366 7.79893 10.5 7.16304 10.5 6.5V6",
+        stroke: "#155EEF",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        d: "M8 9V11",
+        stroke: "#155EEF",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        d: "M6.5 11H9.5",
+        stroke: "#155EEF",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+  function VoiceEventLogsBanner({ onViewEventLogs }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded-[8px] bg-[#FFFFFF] border border-[#D0D5DD] px-[12px] py-[8px] mb-[8px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MicIcon, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-[11px] leading-[14px] text-[#98A2B3] uppercase tracking-[0.04em]", children: "Voice-to-Voice Event Logs" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: onViewEventLogs,
+          className: "text-[12px] font-medium text-[#155EEF] hover:text-[#344054] hover:underline transition-colors cursor-pointer bg-transparent border-none p-0",
+          "data-test-id": "view-event-logs-btn",
+          children: "View Event Logs"
+        }
+      )
+    ] });
+  }
+  function AlignLeftIcon({ className }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        className,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M10.6667 6.66667H2M13.3333 4H2M13.3333 9.33333H2M10.6667 12H2",
+            stroke: "currentColor",
+            strokeWidth: "1.3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  }
+  function JsonViewIcon({ className }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        className,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M14 6.16602H8M14 2.66602H2M14 9.83268H8M14 13.3327H2M2.85333 5.70602L5.43111 7.63935C5.62411 7.78409 5.7206 7.85647 5.75511 7.94519C5.78533 8.02291 5.78533 8.10913 5.75511 8.18684C5.7206 8.27556 5.62411 8.34794 5.43111 8.49268L2.85333 10.426C2.57868 10.632 2.44135 10.735 2.3264 10.7326C2.22637 10.7305 2.13256 10.6836 2.07088 10.6048C2 10.5143 2 10.3427 2 9.99935V6.13268C2 5.78937 2 5.61771 2.07088 5.52718C2.13256 5.4484 2.22637 5.4015 2.3264 5.39942C2.44135 5.39703 2.57868 5.50003 2.85333 5.70602Z",
+            stroke: "currentColor",
+            strokeWidth: "1.3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  }
+  function pickString(obj, keys2) {
+    for (const key of keys2) {
+      const value = obj[key];
+      if (typeof value === "string" && value.length > 0) return value;
+      if (typeof value === "number") return String(value);
+    }
+    return void 0;
+  }
+  function coerceDirection(raw) {
+    if (raw === "incoming" || raw === "server" || raw === "response") return "in";
+    return "out";
+  }
+  function normalizeEvent(raw, fallbackId, docTimestamp) {
+    if (!raw || typeof raw !== "object") {
+      return {
+        id: fallbackId,
+        timestamp: docTimestamp,
+        name: "event",
+        direction: "out",
+        payload: raw
+      };
+    }
+    const obj = raw;
+    const id = pickString(obj, ["event_id", "eventId", "_id", "id"]) ?? fallbackId;
+    const name = pickString(obj, ["type", "eventType", "event", "name"]) ?? "event";
+    const direction = coerceDirection(obj.direction);
+    return {
+      id,
+      timestamp: docTimestamp,
+      name,
+      direction,
+      payload: raw
+    };
+  }
+  function flattenEvents(data) {
+    if (data === null || data === void 0) return [];
+    const out = [];
+    const visitDoc = (doc2, docIdx) => {
+      if (!doc2 || typeof doc2 !== "object") return;
+      const docObj = doc2;
+      const docTimestamp = pickString(docObj, ["createdOn", "sT", "createdAt"]);
+      const events = docObj.events;
+      if (Array.isArray(events)) {
+        events.forEach((ev, evIdx) => {
+          out.push(normalizeEvent(ev, `${docIdx}-${evIdx}`, docTimestamp));
+        });
+      } else {
+        out.push(normalizeEvent(doc2, String(docIdx), docTimestamp));
+      }
+    };
+    if (Array.isArray(data)) {
+      data.forEach((doc2, docIdx) => visitDoc(doc2, docIdx));
+      return out;
+    }
+    if (typeof data === "object") {
+      const obj = data;
+      if (Array.isArray(obj.events)) {
+        visitDoc(obj, 0);
+        return out;
+      }
+      if (Array.isArray(obj.data)) {
+        return flattenEvents(obj.data);
+      }
+    }
+    return [];
+  }
+  function formatEventTime(iso) {
+    if (!iso) return "--:--:--:---";
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return "--:--:--:---";
+    const hh = String(d.getHours()).padStart(2, "0");
+    const mm = String(d.getMinutes()).padStart(2, "0");
+    const ss = String(d.getSeconds()).padStart(2, "0");
+    const ms = String(d.getMilliseconds()).padStart(3, "0");
+    return `${hh}:${mm}:${ss}:${ms}`;
+  }
+  function stringifyPayload(payload) {
+    if (payload === null || payload === void 0) return "";
+    if (typeof payload === "string") {
+      try {
+        return JSON.stringify(JSON.parse(payload), null, 2);
+      } catch {
+        return payload;
+      }
+    }
+    try {
+      return JSON.stringify(payload, null, 2);
+    } catch {
+      return String(payload);
+    }
+  }
+  function compactPayload(payload) {
+    if (payload === null || payload === void 0) return "";
+    if (typeof payload === "string") {
+      try {
+        return JSON.stringify(JSON.parse(payload));
+      } catch {
+        return payload;
+      }
+    }
+    try {
+      return JSON.stringify(payload);
+    } catch {
+      return String(payload);
+    }
+  }
+  function PayloadPanel({ payload, compactText }) {
+    const [viewMode, setViewMode] = React.useState("json");
+    const [fullscreen, setFullscreen] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const displayText = viewMode === "json" ? payload : compactText;
+    const handleCopy = React.useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(displayText);
+        setCopied(true);
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+      } catch {
+      } finally {
+        setCopied(false);
+      }
+    }, [displayText]);
+    const toolbar = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[42px] px-[10px] border-b border-[#D0D5DD] flex items-center justify-between flex-shrink-0 bg-white", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode("json"),
+            className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "json" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
+            title: "Pretty JSON",
+            "aria-label": "Pretty JSON view",
+            "aria-pressed": viewMode === "json",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewIcon, { className: "w-[16px] h-[16px]" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode("text"),
+            className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "text" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
+            title: "Compact text",
+            "aria-label": "Compact text view",
+            "aria-pressed": viewMode === "text",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeftIcon, { className: "w-[16px] h-[16px]" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setFullscreen((v) => !v),
+            className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
+            title: fullscreen ? "Exit fullscreen" : "Fullscreen",
+            "aria-label": fullscreen ? "Exit fullscreen" : "Fullscreen",
+            children: fullscreen ? /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize2, { className: "w-[16px] h-[16px]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { className: "w-[16px] h-[16px]" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => void handleCopy(),
+            className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
+            title: "Copy to clipboard",
+            "aria-label": "Copy payload",
+            "data-test-id": "event-logs-row-copy",
+            children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[16px] h-[16px] text-[#12B76A]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-[16px] h-[16px]" })
+          }
+        )
+      ] })
+    ] });
+    if (fullscreen) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[20000] flex flex-col bg-[#F9FAFB]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[48px] px-[16px] border-b border-[#E4E7EC] flex items-center justify-between flex-shrink-0 bg-white", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setViewMode("json"),
+                className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "json" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
+                title: "Pretty JSON",
+                "aria-label": "Pretty JSON view",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewIcon, { className: "w-[16px] h-[16px]" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setViewMode("text"),
+                className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "text" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
+                title: "Compact text",
+                "aria-label": "Compact text view",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeftIcon, { className: "w-[16px] h-[16px]" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => void handleCopy(),
+                className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
+                title: "Copy to clipboard",
+                "aria-label": "Copy payload",
+                children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[16px] h-[16px] text-[#12B76A]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-[16px] h-[16px]" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setFullscreen(false),
+                className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
+                title: "Exit fullscreen",
+                "aria-label": "Exit fullscreen",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize2, { className: "w-[16px] h-[16px]" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "flex-1 overflow-auto m-0 p-[20px] text-[13px] leading-[20px] font-mono text-[#344054] whitespace-pre-wrap break-all", children: displayText })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-[10px] border border-[#D0D5DD] overflow-hidden mt-[12px]", children: [
+      toolbar,
+      /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "m-0 bg-[#F9FAFB] text-[#344054] p-[12px] text-[12px] leading-[18px] font-mono whitespace-pre-wrap break-all overflow-auto max-h-[360px]", children: displayText })
+    ] });
+  }
+  function EventRow({ event, isExpanded, onToggle }) {
+    const jsonText = React.useMemo(() => stringifyPayload(event.payload), [event.payload]);
+    const compactText = React.useMemo(() => compactPayload(event.payload), [event.payload]);
+    const hasPayload = jsonText.length > 0;
+    const isInput = event.direction === "in";
+    const DirectionIcon = isInput ? ArrowUp : ArrowDown;
+    const directionLabel = isInput ? "Input" : "Output";
+    const circleClasses = isInput ? "border-[#079455] text-[#079455]" : "border-[#D92D20] text-[#D92D20]";
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex items-start gap-[12px]", "data-test-id": "event-logs-row", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex-shrink-0 flex flex-col items-center w-[16px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `relative z-10 w-[16px] h-[16px] rounded-full bg-white border flex items-center justify-center ${circleClasses}`,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(DirectionIcon, { className: "w-[8px] h-[8px]", strokeWidth: 2.5 })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 pb-[24px]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-[16px]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[12px] leading-[16px] text-[#667085]", children: directionLabel }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[14px] leading-[20px] font-medium text-[#344054] mt-[2px] break-all", children: event.name }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onToggle,
+                className: "text-[13px] leading-[18px] text-[#155EEF] hover:underline mt-[4px] font-medium",
+                "data-test-id": "event-logs-view-details",
+                children: isExpanded ? "Hide details" : "View details"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0 text-[12px] leading-[18px] text-[#344054] font-mono tabular-nums whitespace-nowrap pt-[2px]", children: formatEventTime(event.timestamp) })
+        ] }),
+        isExpanded && (hasPayload ? /* @__PURE__ */ jsxRuntimeExports.jsx(PayloadPanel, { payload: jsonText, compactText }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-[12px] text-[12px] text-[#667085] italic", children: "No payload recorded for this event." }))
+      ] })
+    ] });
+  }
+  function EventLogsSlideout({
+    isOpen,
+    onClose,
+    sessionId,
+    fetchEventLogs
+  }) {
+    const [rawData, setRawData] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [expandedIds, setExpandedIds] = React.useState(() => /* @__PURE__ */ new Set());
+    React.useEffect(() => {
+      if (!isOpen || !sessionId || !fetchEventLogs) return;
+      let cancelled = false;
+      setLoading(true);
+      setError(null);
+      setRawData(null);
+      (async () => {
+        try {
+          const data = await fetchEventLogs(sessionId);
+          if (cancelled) return;
+          setRawData(data);
+        } catch (err) {
+          if (cancelled) return;
+          setError(err instanceof Error ? err.message : "Failed to fetch event logs");
+        } finally {
+          if (!cancelled) setLoading(false);
+        }
+      })();
+      return () => {
+        cancelled = true;
+      };
+    }, [isOpen, sessionId, fetchEventLogs]);
+    const events = React.useMemo(() => flattenEvents(rawData), [rawData]);
+    React.useEffect(() => {
+      if (!isOpen) return;
+      const handleKey = (e) => {
+        if (e.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handleKey);
+      return () => document.removeEventListener("keydown", handleKey);
+    }, [isOpen, onClose]);
+    React.useEffect(() => {
+      if (!isOpen) {
+        setExpandedIds(/* @__PURE__ */ new Set());
+        setRawData(null);
+        setError(null);
+      }
+    }, [isOpen]);
+    const toggleRow = React.useCallback((id) => {
+      setExpandedIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    }, []);
+    const expandAll = React.useCallback(() => {
+      setExpandedIds(new Set(events.map((e) => e.id)));
+    }, [events]);
+    const collapseAll = React.useCallback(() => {
+      setExpandedIds(/* @__PURE__ */ new Set());
+    }, []);
+    if (!isOpen) return null;
+    const showToolbar = !loading && !error && events.length > 0;
+    const allExpanded = showToolbar && expandedIds.size === events.length;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[10000]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "absolute inset-0 bg-black/40",
+          onClick: onClose,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "absolute top-0 right-0 bottom-0 bg-white shadow-2xl flex flex-col",
+          style: { width: "720px", maxWidth: "100vw" },
+          role: "dialog",
+          "aria-label": "Event Logs",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between h-[56px] px-[20px] border-b border-[#E4E7EC] flex-shrink-0", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[16px] font-semibold text-[#101828]", children: "Event Logs" }),
+                !loading && !error && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] font-medium text-[#667085] bg-[#F2F4F7] rounded-[10px] px-[8px] py-[2px]", children: events.length })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+                showToolbar && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: allExpanded ? collapseAll : expandAll,
+                    className: "text-[13px] font-medium text-[#155EEF] hover:underline px-[8px] py-[6px] rounded-[6px] transition-colors",
+                    "data-test-id": "event-logs-toggle-all",
+                    children: allExpanded ? "Collapse all" : "Expand all"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    className: "p-[8px] rounded-[6px] hover:bg-[#F2F4F7] transition-colors",
+                    title: "Close Event Logs",
+                    "aria-label": "Close Event Logs",
+                    "data-test-id": "event-logs-close-btn",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-[#344054]" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-[8px] text-[13px] text-[#667085]", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-[20px] h-[20px] animate-spin text-[#155EEF]" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Loading event logs…" })
+            ] }) : error ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-[8px] text-[13px] text-[#B42318] px-[24px] text-center", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Couldn't load event logs" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] text-[#667085]", children: error })
+            ] }) : events.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full flex items-center justify-center text-[13px] text-[#667085]", children: "No events recorded for this session yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative px-[24px] pt-[28px] pb-[8px]", children: [
+              events.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "absolute w-px bg-[#D0D5DD]",
+                  style: { left: "32px", top: "36px", bottom: "28px" },
+                  "aria-hidden": "true"
+                }
+              ),
+              events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                EventRow,
+                {
+                  event,
+                  isExpanded: expandedIds.has(event.id),
+                  onToggle: () => toggleRow(event.id)
+                },
+                event.id
+              ))
+            ] }) })
+          ]
+        }
+      )
+    ] }) });
+  }
+  function hasNonEmptySessionReference(ref) {
+    return typeof ref === "string" && ref.trim().length > 0;
+  }
   function DetailPage({
     mode: initialMode,
     sessionId: initialSessionId,
@@ -109343,7 +110050,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     batchSize = DEFAULT_BATCH_SIZE,
     initialTraceCount,
     initialSessionData,
-    runHeaderInputMode = "display"
+    runHeaderInputMode = "display",
+    onViewEventLogs,
+    fetchEventLogs
   }) {
     const [currentMode, setCurrentMode] = React.useState(initialMode);
     const [currentSessionId, setCurrentSessionId] = React.useState(initialSessionId);
@@ -109353,6 +110062,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     const traceId = currentTraceId;
     const [selectedNode, setSelectedNode] = React.useState(null);
     const [copiedId, setCopiedId] = React.useState(false);
+    const [isEventLogsOpen, setIsEventLogsOpen] = React.useState(false);
     const minObservationLevel = "DEFAULT";
     const [hasAutoSelected, setHasAutoSelected] = React.useState(false);
     const hasInitialData = mode === "session" && initialSessionData;
@@ -109398,7 +110108,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                   bookmarked: false,
                   public: false,
                   traces: [],
-                  scores: []
+                  scores: [],
+                  sessionReference: meta.sessionReference
                 });
                 setLoadingState("success");
               },
@@ -109582,6 +110293,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         } : null
       };
     }, [mode, sessionData, traceData, sessionId, traceId, initialSessionData]);
+    const sessionReferenceForEventLogs = React.useMemo(() => {
+      return (initialSessionData == null ? void 0 : initialSessionData.sessionReference) ?? (sessionData == null ? void 0 : sessionData.sessionReference);
+    }, [initialSessionData == null ? void 0 : initialSessionData.sessionReference, sessionData == null ? void 0 : sessionData.sessionReference]);
+    const showEventLogsBanner = mode === "session" && hasNonEmptySessionReference(sessionReferenceForEventLogs);
     const traces = React.useMemo(() => {
       if (mode === "session" && sessionData) {
         const sorted = [...sessionData.traces].sort((a2, b) => {
@@ -109630,6 +110345,16 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       mode,
       traceData
     ]);
+    const handleViewEventLogs = React.useCallback(() => {
+      setIsEventLogsOpen(true);
+      if (onViewEventLogs && sessionId) {
+        const firstTraceId = traces.length > 0 ? traces[0].id : void 0;
+        onViewEventLogs(sessionId, firstTraceId);
+      }
+    }, [onViewEventLogs, sessionId, traces]);
+    const handleCloseEventLogs = React.useCallback(() => {
+      setIsEventLogsOpen(false);
+    }, []);
     const handleNodeSelect = React.useCallback((node) => {
       setSelectedNode(node);
     }, []);
@@ -109846,6 +110571,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[480px] min-w-[400px] max-w-[600px] border-r border-[#E4E7EC] flex flex-col bg-[#F9FAFB] overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 p-[16px]", children: [
+          showEventLogsBanner && /* @__PURE__ */ jsxRuntimeExports.jsx(VoiceEventLogsBanner, { onViewEventLogs: handleViewEventLogs }),
           traces.length === 0 && loadingState === "success" && progressiveState.traceCount === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[32px] text-center text-[13px] text-[#667085]", children: "No traces available" }),
           traces.map((trace, index) => {
             var _a, _b, _c, _d;
@@ -109895,7 +110621,16 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             generationSummaryInputOverride
           }
         )
-      ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EventLogsSlideout,
+        {
+          isOpen: isEventLogsOpen,
+          onClose: handleCloseEventLogs,
+          sessionId: sessionId ?? null,
+          fetchEventLogs
+        }
+      )
     ] });
   }
   const trace1Observations = [
@@ -110309,7 +111044,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", title: envId || "-", children: displayName });
   }
   function SessionsListContent(props) {
-    const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId } = props;
+    const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId, onViewEventLogs, fetchEventLogs } = props;
     const { environments, resolveEnvironmentName } = useEnvironment();
     const [selectedSessionId, setSelectedSessionId] = React.useState(() => initialSessionId ?? null);
     const [selectedSessionData, setSelectedSessionData] = React.useState(null);
@@ -110870,7 +111605,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         totalCost: session.totalCost,
         totalTokens: session.totalTokens,
         sessionDuration: session.sessionDuration,
-        createdAt: session.createdAt
+        createdAt: session.createdAt,
+        sessionReference: session.sessionReference
       });
       setIsModalOpen(true);
       if (onSessionClick) {
@@ -110980,7 +111716,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           sessionId: selectedSessionId,
           apiConfig,
           onClose: handleModalClose,
-          initialSessionData: selectedSessionData || void 0
+          initialSessionData: selectedSessionData || void 0,
+          onViewEventLogs,
+          fetchEventLogs
         }
       ) })
     ] });
@@ -112856,6 +113594,57 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     return { totalTokens, totalCost, totalDuration };
   }
   class TreeBuilder {
+    static isPreProcessorNode(node) {
+      const normalizedName = (node.name || "").replace(/[^a-z0-9]/gi, "").toLowerCase();
+      return node.type === "tool" && normalizedName === "preprocessor";
+    }
+    static normalizeNodeName(name) {
+      return (name || "").replace(/[^a-z0-9]/gi, "").toLowerCase();
+    }
+    static normalizeLinkedEventType(node) {
+      var _a;
+      const linkedEventType = (_a = node.metadata) == null ? void 0 : _a.linkedEventType;
+      if (typeof linkedEventType !== "string" || linkedEventType.trim().length === 0) {
+        return null;
+      }
+      return linkedEventType.replace(/[^a-z0-9]/gi, "").toLowerCase();
+    }
+    static normalizeParentId(parentId) {
+      if (typeof parentId !== "string") {
+        return parentId ?? null;
+      }
+      const trimmedParentId = parentId.trim();
+      if (trimmedParentId.length === 0 || trimmedParentId.toLowerCase() === "null" || trimmedParentId.toLowerCase() === "undefined") {
+        return null;
+      }
+      return trimmedParentId;
+    }
+    static isTargetSystemEventNode(node) {
+      const normalizedName = this.normalizeNodeName(node.name || "");
+      if (this.TARGET_EVENT_NAMES.has(normalizedName)) return true;
+      return typeof node.type === "string" && node.type.toLowerCase() === "event";
+    }
+    static compareNodesForDisplay(a2, b) {
+      const aIsPreProcessor = this.isPreProcessorNode(a2);
+      const bIsPreProcessor = this.isPreProcessorNode(b);
+      const aIsTargetEvent = this.isTargetSystemEventNode(a2);
+      const bIsTargetEvent = this.isTargetSystemEventNode(b);
+      const aLinkedEventType = this.normalizeLinkedEventType(a2);
+      const bLinkedEventType = this.normalizeLinkedEventType(b);
+      const aTargetName = this.normalizeNodeName(a2.name || "");
+      const bTargetName = this.normalizeNodeName(b.name || "");
+      if (aIsPreProcessor && bIsTargetEvent && aLinkedEventType !== null && aLinkedEventType === bTargetName) {
+        return -1;
+      }
+      if (aIsTargetEvent && bIsPreProcessor && bLinkedEventType !== null && bLinkedEventType === aTargetName) {
+        return 1;
+      }
+      const timestampDiff = new Date(a2.startTime).getTime() - new Date(b.startTime).getTime();
+      if (timestampDiff !== 0) {
+        return timestampDiff;
+      }
+      return (a2.name || "").localeCompare(b.name || "");
+    }
     /**
      * Process execution events and build a hierarchical tree structure
      * Session > Run > Node Tree
@@ -112914,6 +113703,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         const node = this.createTreeNodeFromEvents(startedEvent, completedEvent, runId);
         nodes.push(node);
       }
+      this.alignEventPreProcessorNodes(nodes);
       const rootNodes = this.buildNodeHierarchy(nodes);
       const runEvents = events.filter((e) => e.runId === runId);
       const startTime = Math.min(...runEvents.map((e) => new Date(e.data.timestamp).getTime()));
@@ -112996,8 +113786,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       nodes.forEach((node) => nodeMap.set(node.id, node));
       const rootNodes = [];
       nodes.forEach((node) => {
-        if (node.parentId && nodeMap.has(node.parentId)) {
-          const parent = nodeMap.get(node.parentId);
+        const normalizedParentId = this.normalizeParentId(node.parentId);
+        node.parentId = normalizedParentId;
+        if (normalizedParentId && nodeMap.has(normalizedParentId)) {
+          const parent = nodeMap.get(normalizedParentId);
           parent.children.push(node);
           node.level = parent.level + 1;
         } else {
@@ -113005,12 +113797,98 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           node.level = 0;
         }
       });
-      rootNodes.sort(
-        (a2, b) => new Date(a2.startTime).getTime() - new Date(b.startTime).getTime()
-      );
+      rootNodes.sort((a2, b) => this.compareNodesForDisplay(a2, b));
       rootNodes.forEach((root2) => this.sortChildren(root2));
+      this.relocateRootEventPreProcessors(rootNodes);
       return rootNodes;
     }
+    static alignEventPreProcessorNodes(nodes) {
+      const targetEvents = nodes.filter((node) => this.isTargetSystemEventNode(node)).sort((a2, b) => new Date(a2.startTime).getTime() - new Date(b.startTime).getTime());
+      if (targetEvents.length === 0) {
+        return;
+      }
+      const orphanPreProcessors = nodes.filter((node) => this.isPreProcessorNode(node) && this.normalizeParentId(node.parentId) === null).sort((a2, b) => new Date(a2.startTime).getTime() - new Date(b.startTime).getTime());
+      for (const preProcessorNode of orphanPreProcessors) {
+        const linkedEventType = this.normalizeLinkedEventType(preProcessorNode);
+        if (linkedEventType === null) {
+          continue;
+        }
+        const candidateEvents = targetEvents.filter(
+          (eventNode) => this.normalizeNodeName(eventNode.name || "") === linkedEventType
+        );
+        if (candidateEvents.length === 0) {
+          continue;
+        }
+        const preProcessorTime = new Date(preProcessorNode.startTime).getTime();
+        let selectedTargetEvent = candidateEvents[0];
+        let minDistance = Number.POSITIVE_INFINITY;
+        for (const targetEvent of candidateEvents) {
+          const distance = Math.abs(new Date(targetEvent.startTime).getTime() - preProcessorTime);
+          if (distance < minDistance) {
+            selectedTargetEvent = targetEvent;
+            minDistance = distance;
+          }
+        }
+        preProcessorNode.parentId = this.normalizeParentId(selectedTargetEvent.parentId);
+      }
+    }
+    static relocateRootEventPreProcessors(rootNodes) {
+      var _a;
+      const preprocessorsAtRoot = rootNodes.filter((node) => this.isPreProcessorNode(node));
+      if (preprocessorsAtRoot.length === 0) {
+        return;
+      }
+      const collectTargetNodes = (nodesToSearch, parentNode2, collector) => {
+        nodesToSearch.forEach((node, index) => {
+          if (this.isTargetSystemEventNode(node)) {
+            collector.push({ node, siblings: nodesToSearch, index, parentNode: parentNode2 });
+          }
+          if (node.children.length > 0) {
+            collectTargetNodes(node.children, node, collector);
+          }
+        });
+      };
+      const targetNodes = [];
+      collectTargetNodes(rootNodes, null, targetNodes);
+      if (targetNodes.length === 0) {
+        return;
+      }
+      const rootSet = new Set(rootNodes);
+      for (const preProcessorNode of preprocessorsAtRoot) {
+        if (!rootSet.has(preProcessorNode)) {
+          continue;
+        }
+        const linkedEventType = this.normalizeLinkedEventType(preProcessorNode);
+        if (linkedEventType === null) {
+          continue;
+        }
+        const candidateTargets = targetNodes.filter(
+          (target) => this.normalizeNodeName(target.node.name || "") === linkedEventType
+        );
+        if (candidateTargets.length === 0) {
+          continue;
+        }
+        const preProcessorTime = new Date(preProcessorNode.startTime).getTime();
+        let selectedTarget = candidateTargets[0];
+        let selectedDistance = Number.POSITIVE_INFINITY;
+        for (const candidate of candidateTargets) {
+          const candidateTime = new Date(candidate.node.startTime).getTime();
+          const distance = Math.abs(candidateTime - preProcessorTime);
+          if (distance < selectedDistance) {
+            selectedTarget = candidate;
+            selectedDistance = distance;
+          }
+        }
+        const rootIndex = rootNodes.indexOf(preProcessorNode);
+        if (rootIndex >= 0) {
+          rootNodes.splice(rootIndex, 1);
+          rootSet.delete(preProcessorNode);
+        }
+        preProcessorNode.parentId = ((_a = selectedTarget.parentNode) == null ? void 0 : _a.id) ?? null;
+        selectedTarget.siblings.splice(selectedTarget.index, 0, preProcessorNode);
+        selectedTarget.siblings.sort((a2, b) => this.compareNodesForDisplay(a2, b));
+      }
+    }
     /**
      * Extract LLM usage metadata from output and event metadata (configurable path)
      */
@@ -113102,9 +113980,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
      */
     static sortChildren(node) {
       if (!node) return;
-      node.children.sort(
-        (a2, b) => new Date(a2.startTime).getTime() - new Date(b.startTime).getTime()
-      );
+      node.children.sort((a2, b) => this.compareNodesForDisplay(a2, b));
       node.children.forEach((child) => this.sortChildren(child));
     }
     /**
@@ -113358,6 +114234,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       );
     }
   }
+  __publicField(TreeBuilder, "TARGET_EVENT_NAMES", /* @__PURE__ */ new Set([
+    "endofconversation",
+    "agenthandoff"
+  ]));
   const CodeEditor = ({
     value,
     onChange,