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

package/dist/index.js

@@ -4291,7 +4291,7 @@ const MetricCard = ({
   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();
@@ -4345,6 +4345,11 @@ const MetricCard = ({
         ] }),
         /* @__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",
             {
@@ -21355,7 +21360,7 @@ function _toPrimitive$g(t2, r2) {
     if ("object" != _typeof$i(i2)) return i2;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return ("string" === r2 ? String : Number)(t2);
+  return String(t2);
 }
 var Bar = /* @__PURE__ */ function(_PureComponent) {
   function Bar2() {
@@ -28662,7 +28667,7 @@ const CustomTooltip = ({
     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;
@@ -28762,6 +28767,7 @@ const AnalyticsChart = ({
           agentRuns: 0,
           toolRuns: 0,
           modelRuns: 0,
+          failedModelRuns: null,
           codeTools: 0,
           workflowTools: 0,
           knowledgeTools: 0,
@@ -28864,6 +28870,8 @@ const AnalyticsChart = ({
     label: config2.title,
     strokeWidth: 2
   }];
+  const lineSeries = chartLines.filter((c3) => (c3.seriesType ?? "line") === "line");
+  const barSeries = chartLines.filter((c3) => c3.seriesType === "bar");
   if (isLoading) {
     console.log("AnalyticsChart: Loading state active");
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ChartSkeleton, { className, chartType: config2.type, height });
@@ -28970,7 +28978,7 @@ const AnalyticsChart = ({
           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}`)) }),
@@ -29022,7 +29030,7 @@ const AnalyticsChart = ({
               allowEscapeViewBox: { x: false, y: false }
             }
           ),
-          chartLines.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          lineSeries.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             Area,
             {
               type: "monotone",
@@ -29030,12 +29038,13 @@ const AnalyticsChart = ({
               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",
@@ -29043,6 +29052,7 @@ const AnalyticsChart = ({
               stroke: lineConfig.color,
               strokeWidth: 2.5,
               strokeDasharray: lineConfig.strokeDasharray,
+              connectNulls: false,
               dot: false,
               activeDot: {
                 r: 5,
@@ -29053,6 +29063,19 @@ const AnalyticsChart = ({
               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}`
           ))
         ]
       }
@@ -29074,8 +29097,15 @@ const AnalyticsChart = ({
           })
         ] })
       ] }) }),
-      /* @__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",
@@ -29632,6 +29662,8 @@ function getToolTypeStyle(type) {
     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) {
@@ -29640,6 +29672,8 @@ function getToolTypeName(type) {
   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";
@@ -29866,7 +29900,14 @@ const ModelListView = ({
               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") })
         ]
@@ -30546,6 +30587,7 @@ class DashboardApiService {
       {
         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",
@@ -30622,8 +30664,12 @@ class DashboardApiService {
           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;
@@ -30632,6 +30678,10 @@ class DashboardApiService {
           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;
@@ -30716,22 +30766,16 @@ class DashboardApiService {
       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
@@ -30785,9 +30829,11 @@ class DashboardApiService {
           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({
@@ -30914,6 +30960,7 @@ class DashboardApiService {
       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 {
@@ -30925,11 +30972,24 @@ class DashboardApiService {
   // 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,
@@ -30946,13 +31006,30 @@ class DashboardApiService {
     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",
@@ -30966,68 +31043,70 @@ class DashboardApiService {
           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
+            }
           }
         }
       },
@@ -31042,99 +31121,107 @@ class DashboardApiService {
           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,
@@ -31143,68 +31230,79 @@ class DashboardApiService {
           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
+            }
           }
         }
       }
@@ -31216,12 +31314,34 @@ class DashboardApiService {
     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",
@@ -31235,22 +31355,24 @@ class DashboardApiService {
           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]
+              }
             }
           }
         }
@@ -31266,22 +31388,24 @@ class DashboardApiService {
           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]
+              }
             }
           }
         }
@@ -31297,22 +31421,24 @@ class DashboardApiService {
           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]
+              }
             }
           }
         }
@@ -31328,38 +31454,40 @@ class DashboardApiService {
           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]
             }
           }
         }
@@ -31387,35 +31515,27 @@ class DashboardApiService {
       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;
@@ -31423,7 +31543,6 @@ class DashboardApiService {
           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 = {
@@ -31434,11 +31553,11 @@ class DashboardApiService {
         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,
@@ -31476,14 +31595,33 @@ class DashboardApiService {
   // 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
@@ -31496,13 +31634,21 @@ class DashboardApiService {
   // 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);
@@ -32229,6 +32375,10 @@ const SectionControls = ({
     ] })
   ] });
 };
+function modelListViewRowLabel(listItem) {
+  if (!listItem.modelName) return "";
+  return listItem.connectionName ? `${listItem.modelName} - ${listItem.connectionName}` : listItem.modelName;
+}
 const DashboardSection = ({
   section,
   className,
@@ -32326,16 +32476,17 @@ const DashboardSection = ({
       });
       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;
           });
@@ -32345,10 +32496,17 @@ const DashboardSection = ({
           );
         }
         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;
       });
     }
@@ -32360,8 +32518,9 @@ const DashboardSection = ({
       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())
@@ -32373,9 +32532,8 @@ const DashboardSection = ({
               );
             }
             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;
           });
@@ -32384,10 +32542,18 @@ const DashboardSection = ({
             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;
@@ -32619,35 +32785,30 @@ const DashboardSection = ({
           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,
@@ -32667,12 +32828,20 @@ const DashboardSection = ({
             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: {
@@ -32685,12 +32854,20 @@ const DashboardSection = ({
           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: {
@@ -34942,8 +35119,11 @@ const Dashboard = ({
     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);
       }