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

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);
         }