npm - agentic-ui-libs - Versions diffs - 1.1.0-beta.2 → 1.1.0-beta.4 - Mend

agentic-ui-libs 1.1.0-beta.2 → 1.1.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/assets/agentic-ui-libs.css +11 -3
package/dist/features/dashboard/Dashboard.d.ts.map +1 -1
package/dist/features/tracing/components/TracesList.d.ts.map +1 -1
package/dist/features/tracing/components/detail/DetailPage.d.ts.map +1 -1
package/dist/features/tracing/components/detail/ObservationNode.d.ts.map +1 -1
package/dist/features/tracing/components/detail/TraceTree.d.ts.map +1 -1
package/dist/features/tracing/index.d.ts +1 -1
package/dist/features/tracing/index.d.ts.map +1 -1
package/dist/features/tracing/services/TracingApiService.d.ts +4 -0
package/dist/features/tracing/services/TracingApiService.d.ts.map +1 -1
package/dist/features/tracing/types.d.ts +14 -0
package/dist/features/tracing/types.d.ts.map +1 -1
package/dist/index.js +401 -369
package/dist/shared/ui/daterangepicker.d.ts.map +1 -1
package/dist/ui-libs.umd.js +401 -369
package/package.json +1 -1

package/dist/ui-libs.umd.js CHANGED Viewed

@@ -4349,10 +4349,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           className
         ),
         onClick: handleClick2,
-        "data-id": `dashboard_metric_card_${data.metricType || data.title.toLowerCase().replace(/\s+/g, "_")}`,
+        "data-test-id": `dashboard_metric_card_${data.metricType || data.title.toLowerCase().replace(/\s+/g, "_")}`,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-[6px]", "data-id": `dashboard_metric_card_header_${data.metricType || data.title.toLowerCase().replace(/\s+/g, "_")}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-700", "data-id": `dashboard_metric_card_title_${data.metricType || data.title.toLowerCase().replace(/\s+/g, "_")}`, children: title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-[6px]", "data-test-id": `dashboard_metric_card_header_${data.metricType || data.title.toLowerCase().replace(/\s+/g, "_")}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-700", "data-test-id": `dashboard_metric_card_title_${data.metricType || data.title.toLowerCase().replace(/\s+/g, "_")}`, children: title }),
             info && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "h-[16px] w-[16px] text-gray-400 cursor-help" }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(
@@ -4370,8 +4370,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-baseline gap-3", "data-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-id": `dashboard_metric_card_value_${data.metricType || data.title.toLowerCase().replace(/\s+/g, "_")}`, children: formatValue2(value) }),
+          /* @__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) }),
             change && /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
@@ -28984,8 +28984,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     console.log("Chart lines configuration:", chartLines);
     console.log("Sample filled data points:", sortedData.slice(0, 3));
     console.log("=== END ANALYTICS CHART DEBUG ===");
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-id": "dashboard_analytics_chart_root", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative bg-gray-50/30", "data-id": "dashboard_analytics_chart_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { width: "100%", height, "data-id": "dashboard_analytics_chart_responsive_container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-test-id": "dashboard_analytics_chart_root", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative bg-gray-50/30", "data-test-id": "dashboard_analytics_chart_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { width: "100%", height, "data-test-id": "dashboard_analytics_chart_responsive_container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         ComposedChart,
         {
           data: sortedData,
@@ -29084,10 +29084,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ]
         }
       ) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 flex items-center justify-between", "data-id": "dashboard_analytics_chart_footer", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-id": "dashboard_analytics_chart_date_range", children: dateRange && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 flex items-center gap-[4px]", "data-id": "dashboard_analytics_chart_date_range_text", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 flex items-center justify-between", "data-test-id": "dashboard_analytics_chart_footer", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test-id": "dashboard_analytics_chart_date_range", children: dateRange && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 flex items-center gap-[4px]", "data-test-id": "dashboard_analytics_chart_date_range_text", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "Showing data from" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-700", "data-id": "dashboard_analytics_chart_date_range_value", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-700", "data-test-id": "dashboard_analytics_chart_date_range_value", children: [
             new Date(dateRange.start).toLocaleDateString("en-US", {
               day: "numeric",
               month: "short",
@@ -29101,16 +29101,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", "data-id": "dashboard_analytics_chart_legend", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", "data-id": "dashboard_analytics_chart_legend_items", children: chartLines.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": `dashboard_analytics_chart_legend_item_${lineConfig.dataKey}`, children: [
+        /* @__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(
             "div",
             {
               className: "w-[8px] h-[8px] rounded-full",
               style: { backgroundColor: lineConfig.color },
-              "data-id": `dashboard_analytics_chart_legend_color_${lineConfig.dataKey}`
+              "data-test-id": `dashboard_analytics_chart_legend_color_${lineConfig.dataKey}`
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", "data-id": `dashboard_analytics_chart_legend_label_${lineConfig.dataKey}`, children: lineConfig.label })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", "data-test-id": `dashboard_analytics_chart_legend_label_${lineConfig.dataKey}`, children: lineConfig.label })
         ] }, lineConfig.dataKey)) }) })
       ] })
     ] });
@@ -29197,10 +29197,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-[12px] h-[12px] opacity-30 -mt-1" })
       ] });
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-id": "dashboard_analytics_table_root", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", "data-id": "dashboard_analytics_table_header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-md font-medium text-gray-700", "data-id": "dashboard_analytics_table_title", children: title }),
-        filtering.enabled && filtering.searchable && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", "data-id": "dashboard_analytics_table_search", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-test-id": "dashboard_analytics_table_root", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", "data-test-id": "dashboard_analytics_table_header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-md font-medium text-gray-700", "data-test-id": "dashboard_analytics_table_title", children: title }),
+        filtering.enabled && filtering.searchable && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", "data-test-id": "dashboard_analytics_table_search", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-[12px] top-1/2 transform -translate-y-1/2 w-[16px] h-[16px] text-gray-400" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
@@ -29210,13 +29210,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               value: searchTerm,
               onChange: (e) => handleSearch(e.target.value),
               className: "pl-[36px] pr-[12px] py-[8px] border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
-              "data-id": "dashboard_analytics_table_search_input"
+              "data-test-id": "dashboard_analytics_table_search_input"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border border-gray-200 rounded-lg", "data-id": "dashboard_analytics_table_wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full", "data-id": "dashboard_analytics_table", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { className: "bg-gray-50", "data-id": "dashboard_analytics_table_head", children: /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { "data-id": "dashboard_analytics_table_head_row", children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border border-gray-200 rounded-lg", "data-test-id": "dashboard_analytics_table_wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full", "data-test-id": "dashboard_analytics_table", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { className: "bg-gray-50", "data-test-id": "dashboard_analytics_table_head", children: /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { "data-test-id": "dashboard_analytics_table_head_row", children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "th",
           {
             className: cn(
@@ -29227,19 +29227,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             ),
             style: { width: column.width },
             onClick: () => handleSort(column),
-            "data-id": `dashboard_analytics_table_header_${column.key}`,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": `dashboard_analytics_table_header_content_${column.key}`, children: [
+            "data-test-id": `dashboard_analytics_table_header_${column.key}`,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-test-id": `dashboard_analytics_table_header_content_${column.key}`, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: column.title }),
               getSortIcon(column)
             ] })
           },
           column.key
         )) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: "bg-white divide-y divide-gray-200", "data-id": "dashboard_analytics_table_body", children: paginatedData.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: "bg-white divide-y divide-gray-200", "data-test-id": "dashboard_analytics_table_body", children: paginatedData.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "tr",
           {
             className: "hover:bg-gray-50 transition-colors",
-            "data-id": `dashboard_analytics_table_row_${rowIndex}`,
+            "data-test-id": `dashboard_analytics_table_row_${rowIndex}`,
             children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               "td",
               {
@@ -29248,7 +29248,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   column.align === "center" && "text-center",
                   column.align === "right" && "text-right"
                 ),
-                "data-id": `dashboard_analytics_table_cell_${rowIndex}_${column.key}`,
+                "data-test-id": `dashboard_analytics_table_cell_${rowIndex}_${column.key}`,
                 children: formatCellValue(row[column.key], column, row)
               },
               column.key
@@ -29257,8 +29257,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           rowIndex
         )) })
       ] }) }),
-      pagination.enabled && totalPages > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mt-4", "data-id": "dashboard_analytics_table_pagination", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500", "data-id": "dashboard_analytics_table_pagination_info", children: [
+      pagination.enabled && totalPages > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mt-4", "data-test-id": "dashboard_analytics_table_pagination", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500", "data-test-id": "dashboard_analytics_table_pagination_info", children: [
           "Showing ",
           (currentPage - 1) * pagination.pageSize + 1,
           " to",
@@ -29269,14 +29269,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           processedData.length,
           " results"
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": "dashboard_analytics_table_pagination_controls", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-test-id": "dashboard_analytics_table_pagination_controls", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
               onClick: () => setCurrentPage((prev) => Math.max(1, prev - 1)),
               disabled: currentPage === 1,
               className: "px-[12px] py-[4px] text-xs border border-gray-200 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
-              "data-id": "dashboard_analytics_table_pagination_btn_previous",
+              "data-test-id": "dashboard_analytics_table_pagination_btn_previous",
               children: "Previous"
             }
           ),
@@ -29294,7 +29294,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   "px-[12px] py-[4px] text-xs border rounded",
                   currentPage === pageNum ? "bg-blue-500 text-white border-blue-500" : "border-gray-200 hover:bg-gray-50"
                 ),
-                "data-id": `dashboard_analytics_table_pagination_btn_page_${pageNum}`,
+                "data-test-id": `dashboard_analytics_table_pagination_btn_page_${pageNum}`,
                 children: pageNum
               },
               pageNum
@@ -29306,13 +29306,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               onClick: () => setCurrentPage((prev) => Math.min(totalPages, prev + 1)),
               disabled: currentPage === totalPages,
               className: "px-[12px] py-[4px] text-xs border border-gray-200 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
-              "data-id": "dashboard_analytics_table_pagination_btn_next",
+              "data-test-id": "dashboard_analytics_table_pagination_btn_next",
               children: "Next"
             }
           )
         ] })
       ] }),
-      paginatedData.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center py-[32px] text-gray-500", "data-id": "dashboard_analytics_table_empty_state", children: searchTerm ? "No results found for your search." : "No data available." })
+      paginatedData.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center py-[32px] text-gray-500", "data-test-id": "dashboard_analytics_table_empty_state", children: searchTerm ? "No results found for your search." : "No data available." })
     ] });
   };
   const ASSETS_DOMAIN = "https://staging-agent-platform.kore.ai";
@@ -29606,21 +29606,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return value.toString();
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-id": "dashboard_agent_list_view_root", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 items-center gap-4 px-[16px] py-[12px] bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-600", "data-id": "dashboard_agent_list_view_header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", "data-id": "dashboard_agent_list_view_header_name", children: "Name" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-id": "dashboard_agent_list_view_header_runs", children: "Runs" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-id": "dashboard_agent_list_view_header_response_time", children: "Response Time" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-id": "dashboard_agent_list_view_header_tokens", children: "Tokens" })
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-test-id": "dashboard_agent_list_view_root", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 items-center gap-4 px-[16px] py-[12px] bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-600", "data-test-id": "dashboard_agent_list_view_header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", "data-test-id": "dashboard_agent_list_view_header_name", children: "Name" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-test-id": "dashboard_agent_list_view_header_runs", children: "Runs" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-test-id": "dashboard_agent_list_view_header_response_time", children: "Response Time" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-test-id": "dashboard_agent_list_view_header_tokens", children: "Tokens" })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", "data-id": "dashboard_agent_list_view_body", children: data.slice(0, visibleCount).map((agent2, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", "data-test-id": "dashboard_agent_list_view_body", children: data.slice(0, visibleCount).map((agent2, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
           className: "grid grid-cols-4 items-center gap-4 px-[16px] py-[12px] cursor-pointer transition-colors duration-150 border-b border-gray-200",
-          "data-id": `dashboard_agent_list_view_row_${index}`,
+          "data-test-id": `dashboard_agent_list_view_row_${index}`,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", "data-id": `dashboard_agent_list_view_row_name_${index}`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-id": `dashboard_agent_list_view_row_avatar_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", "data-test-id": `dashboard_agent_list_view_row_name_${index}`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-test-id": `dashboard_agent_list_view_row_avatar_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 IconPreview,
                 {
                   icon: agent2.icon,
@@ -29629,21 +29629,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   name: agent2.name || "Unknown Agent"
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1 w-full", "data-id": `dashboard_agent_list_view_row_name_text_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-gray-700 truncate", children: agent2.name || "Unknown Agent" }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1 w-full", "data-test-id": `dashboard_agent_list_view_row_name_text_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-gray-700 truncate", children: agent2.name || "Unknown Agent" }) })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-id": `dashboard_agent_list_view_row_runs_${index}`, children: agent2.runs ? formatValue2(agent2.runs) : "-" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-id": `dashboard_agent_list_view_row_response_time_${index}`, children: agent2.responseTime || "-" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-id": `dashboard_agent_list_view_row_tokens_${index}`, children: agent2.tokens ? formatValue2(agent2.tokens) : "-" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-test-id": `dashboard_agent_list_view_row_runs_${index}`, children: agent2.runs ? formatValue2(agent2.runs) : "-" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-test-id": `dashboard_agent_list_view_row_response_time_${index}`, children: agent2.responseTime || "-" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-test-id": `dashboard_agent_list_view_row_tokens_${index}`, children: agent2.tokens ? formatValue2(agent2.tokens) : "-" })
           ]
         },
         agent2.id || index
       )) }),
-      visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-id": "dashboard_agent_list_view_load_more_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-test-id": "dashboard_agent_list_view_load_more_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: loadMore,
           className: "px-[16px] py-[8px] text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-150",
-          "data-id": "dashboard_agent_list_view_load_more_btn",
+          "data-test-id": "dashboard_agent_list_view_load_more_btn",
           children: "Load 10 more"
         }
       ) })
@@ -29687,21 +29687,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return value.toString();
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-id": "dashboard_tool_list_view_root", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 items-center gap-4 px-[16px] py-[12px] bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-600", "data-id": "dashboard_tool_list_view_header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", "data-id": "dashboard_tool_list_view_header_name", children: "Name" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-id": "dashboard_tool_list_view_header_type", children: "Type" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-id": "dashboard_tool_list_view_header_runs", children: "Runs" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-id": "dashboard_tool_list_view_header_response_time", children: "Response Time" })
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-test-id": "dashboard_tool_list_view_root", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 items-center gap-4 px-[16px] py-[12px] bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-600", "data-test-id": "dashboard_tool_list_view_header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", "data-test-id": "dashboard_tool_list_view_header_name", children: "Name" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-test-id": "dashboard_tool_list_view_header_type", children: "Type" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-test-id": "dashboard_tool_list_view_header_runs", children: "Runs" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-test-id": "dashboard_tool_list_view_header_response_time", children: "Response Time" })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", "data-id": "dashboard_tool_list_view_body", children: data.slice(0, visibleCount).map((tool, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", "data-test-id": "dashboard_tool_list_view_body", children: data.slice(0, visibleCount).map((tool, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
           className: "grid grid-cols-4 items-center gap-4 px-[16px] py-[12px] cursor-pointer transition-colors duration-150 border-b border-gray-200",
-          "data-id": `dashboard_tool_list_view_row_${index}`,
+          "data-test-id": `dashboard_tool_list_view_row_${index}`,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", "data-id": `dashboard_tool_list_view_row_name_${index}`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-id": `dashboard_tool_list_view_row_icon_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", "data-test-id": `dashboard_tool_list_view_row_name_${index}`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-test-id": `dashboard_tool_list_view_row_icon_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 IconPreview,
                 {
                   icon: tool.icon,
@@ -29711,24 +29711,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   toolType: tool["toolType"] || tool["type"]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1 w-full", "data-id": `dashboard_tool_list_view_row_name_text_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-gray-700 truncate", children: tool.name || "Unknown Tool" }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1 w-full", "data-test-id": `dashboard_tool_list_view_row_name_text_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-gray-700 truncate", children: tool.name || "Unknown Tool" }) })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center", "data-id": `dashboard_tool_list_view_row_type_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center", "data-test-id": `dashboard_tool_list_view_row_type_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn(
               "inline-flex items-center px-[10px] py-[4px] rounded-full text-xs font-medium border",
               getToolTypeStyle(tool["toolType"] || tool["type"] || "Default")
-            ), "data-id": `dashboard_tool_list_view_row_type_badge_${index}`, children: getToolTypeName(tool["toolType"] || tool["type"] || "Default") }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-id": `dashboard_tool_list_view_row_runs_${index}`, children: tool.runs ? formatValue2(tool.runs) : "-" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-id": `dashboard_tool_list_view_row_response_time_${index}`, children: tool.responseTime || "-" })
+            ), "data-test-id": `dashboard_tool_list_view_row_type_badge_${index}`, children: getToolTypeName(tool["toolType"] || tool["type"] || "Default") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-test-id": `dashboard_tool_list_view_row_runs_${index}`, children: tool.runs ? formatValue2(tool.runs) : "-" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-test-id": `dashboard_tool_list_view_row_response_time_${index}`, children: tool.responseTime || "-" })
           ]
         },
         tool.id || index
       )) }),
-      visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-id": "dashboard_tool_list_view_load_more_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-test-id": "dashboard_tool_list_view_load_more_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: loadMore,
           className: "px-[16px] py-[8px] text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-150",
-          "data-id": "dashboard_tool_list_view_load_more_btn",
+          "data-test-id": "dashboard_tool_list_view_load_more_btn",
           children: "Load 10 more"
         }
       ) })
@@ -29868,44 +29868,44 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return value.toString();
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-id": "dashboard_model_list_view_root", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 items-center gap-4 px-[16px] py-[12px] bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-600", "data-id": "dashboard_model_list_view_header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", "data-id": "dashboard_model_list_view_header_name", children: "Model Name" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-id": "dashboard_model_list_view_header_runs", children: "Runs" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-id": "dashboard_model_list_view_header_tokens", children: "Tokens" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-id": "dashboard_model_list_view_header_response_time", children: "Response Time" })
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), "data-test-id": "dashboard_model_list_view_root", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 items-center gap-4 px-[16px] py-[12px] bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-600", "data-test-id": "dashboard_model_list_view_header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", "data-test-id": "dashboard_model_list_view_header_name", children: "Model Name" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-test-id": "dashboard_model_list_view_header_runs", children: "Runs" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-test-id": "dashboard_model_list_view_header_tokens", children: "Tokens" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", "data-test-id": "dashboard_model_list_view_header_response_time", children: "Response Time" })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", "data-id": "dashboard_model_list_view_body", children: data.slice(0, visibleCount).map((model, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", "data-test-id": "dashboard_model_list_view_body", children: data.slice(0, visibleCount).map((model, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
           className: "grid grid-cols-4 items-center gap-4 px-[16px] py-[12px] cursor-pointer transition-colors duration-150 border-b border-gray-200",
-          "data-id": `dashboard_model_list_view_row_${index}`,
+          "data-test-id": `dashboard_model_list_view_row_${index}`,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", "data-id": `dashboard_model_list_view_row_name_${index}`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-id": `dashboard_model_list_view_row_icon_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", "data-test-id": `dashboard_model_list_view_row_name_${index}`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-test-id": `dashboard_model_list_view_row_icon_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ModelIcon,
                 {
                   provider: model.provider
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1 w-full", "data-id": `dashboard_model_list_view_row_name_text_${index}`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-gray-700 truncate", "data-id": `dashboard_model_list_view_row_name_value_${index}`, children: model.name || model.modelName || "Unknown Model" }),
-                model.provider && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 truncate", "data-id": `dashboard_model_list_view_row_provider_${index}`, children: getProviderDisplayName(model.provider) })
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1 w-full", "data-test-id": `dashboard_model_list_view_row_name_text_${index}`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-gray-700 truncate", "data-test-id": `dashboard_model_list_view_row_name_value_${index}`, children: model.name || model.modelName || "Unknown Model" }),
+                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-id": `dashboard_model_list_view_row_runs_${index}`, children: formatValue2(model.runs || 0) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-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-id": `dashboard_model_list_view_row_response_time_${index}`, children: model.responseTime || (model.avgResponseTime ? `${model.avgResponseTime}ms` : "N/A") })
+            /* @__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.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") })
           ]
         },
         model.id || index
       )) }),
-      visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-id": "dashboard_model_list_view_load_more_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-test-id": "dashboard_model_list_view_load_more_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: loadMore,
           className: "px-[16px] py-[8px] text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-150",
-          "data-id": "dashboard_model_list_view_load_more_btn",
+          "data-test-id": "dashboard_model_list_view_load_more_btn",
           children: "Load 10 more"
         }
       ) })
@@ -30027,7 +30027,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         {
           className: "fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300",
           onClick: handleClose,
-          "data-id": "dashboard_runs_slider_overlay"
+          "data-test-id": "dashboard_runs_slider_overlay"
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -30038,42 +30038,42 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             isOpen ? "translate-x-0" : "translate-x-full",
             className
           ),
-          "data-id": "dashboard_runs_slider_panel",
+          "data-test-id": "dashboard_runs_slider_panel",
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-3 border-b border-[#d0d5dd]", "data-id": "dashboard_runs_slider_header", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-[#101828]", "data-id": "dashboard_runs_slider_title", children: config2.title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-3 border-b border-[#d0d5dd]", "data-test-id": "dashboard_runs_slider_header", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-[#101828]", "data-test-id": "dashboard_runs_slider_title", children: config2.title }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
                   onClick: handleClose,
                   className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
-                  "data-id": "dashboard_runs_slider_close_btn",
+                  "data-test-id": "dashboard_runs_slider_close_btn",
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-5 w-5 text-[#101828]" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-[calc(100%-64px)] p-6 gap-6", "data-id": "dashboard_runs_slider_content", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", "data-id": "dashboard_runs_slider_subheader", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm font-medium text-[#344054]", "data-id": "dashboard_runs_slider_date_label", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-[calc(100%-64px)] p-6 gap-6", "data-test-id": "dashboard_runs_slider_content", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", "data-test-id": "dashboard_runs_slider_subheader", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm font-medium text-[#344054]", "data-test-id": "dashboard_runs_slider_date_label", children: [
                   config2.title,
                   " (",
                   formatDate(date2),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[210px] relative filter-dropdown", "data-id": "dashboard_runs_slider_filter_dropdown", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[210px] relative filter-dropdown", "data-test-id": "dashboard_runs_slider_filter_dropdown", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs(
                     "button",
                     {
                       onClick: () => setShowFilterDropdown(!showFilterDropdown),
                       className: "w-full bg-white border border-[#d0d5dd] rounded-lg px-3.5 py-2.5 flex items-center justify-between text-sm text-[#101828] hover:bg-gray-50 transition-colors",
-                      "data-id": "dashboard_runs_slider_filter_btn",
+                      "data-test-id": "dashboard_runs_slider_filter_btn",
                       children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: selectedFilterLabel }),
                         /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 text-[#101828]" })
                       ]
                     }
                   ),
-                  showFilterDropdown && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white border border-[#d0d5dd] rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto", "data-id": "dashboard_runs_slider_filter_menu", children: filterOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  showFilterDropdown && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white border border-[#d0d5dd] rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto", "data-test-id": "dashboard_runs_slider_filter_menu", children: filterOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "button",
                     {
                       onClick: () => handleFilterSelect(option.value),
@@ -30081,26 +30081,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                         "w-full px-3.5 py-2.5 text-left text-sm hover:bg-gray-50 transition-colors",
                         selectedFilter === option.value ? "bg-blue-50 text-blue-700" : "text-[#101828]"
                       ),
-                      "data-id": `dashboard_runs_slider_filter_option_${option.value}`,
+                      "data-test-id": `dashboard_runs_slider_filter_option_${option.value}`,
                       children: option.label
                     },
                     option.value
                   )) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-hidden", "data-id": "dashboard_runs_slider_table_container", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#f9fafb] border-b border-[#eaecf0] px-2 py-2", "data-id": "dashboard_runs_slider_table_header", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 gap-3 items-center", "data-id": "dashboard_runs_slider_table_header_row", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "col-span-2 px-0 py-2", "data-id": "dashboard_runs_slider_table_header_name", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: "Name" }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center px-0 py-2", "data-id": "dashboard_runs_slider_table_header_runs", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: "Runs" }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center px-0 py-2", "data-id": "dashboard_runs_slider_table_header_response_time", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: "Response Time" }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-hidden", "data-test-id": "dashboard_runs_slider_table_container", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#f9fafb] border-b border-[#eaecf0] px-2 py-2", "data-test-id": "dashboard_runs_slider_table_header", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 gap-3 items-center", "data-test-id": "dashboard_runs_slider_table_header_row", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "col-span-2 px-0 py-2", "data-test-id": "dashboard_runs_slider_table_header_name", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: "Name" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center px-0 py-2", "data-test-id": "dashboard_runs_slider_table_header_runs", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: "Runs" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center px-0 py-2", "data-test-id": "dashboard_runs_slider_table_header_response_time", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: "Response Time" }) })
                 ] }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-y-auto max-h-[calc(100%-40px)]", "data-id": "dashboard_runs_slider_table_body", children: visibleData.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-64 text-center", "data-id": "dashboard_runs_slider_empty_state", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-md font-medium text-gray-900 mb-[8px]", "data-id": "dashboard_runs_slider_empty_state_title", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-y-auto max-h-[calc(100%-40px)]", "data-test-id": "dashboard_runs_slider_table_body", children: visibleData.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-64 text-center", "data-test-id": "dashboard_runs_slider_empty_state", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-md font-medium text-gray-900 mb-[8px]", "data-test-id": "dashboard_runs_slider_empty_state_title", children: [
                     "No ",
                     config2.title.toLowerCase(),
                     " for this date"
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500", "data-id": "dashboard_runs_slider_empty_state_message", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500", "data-test-id": "dashboard_runs_slider_empty_state_message", children: [
                     "There were no ",
                     config2.title.toLowerCase(),
                     " recorded on ",
@@ -30112,10 +30112,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     "div",
                     {
                       className: "grid grid-cols-4 gap-3 items-center px-2 py-3 border-b border-[#eaecf0] hover:bg-gray-50 transition-colors",
-                      "data-id": `dashboard_runs_slider_table_row_${index}`,
+                      "data-test-id": `dashboard_runs_slider_table_row_${index}`,
                       children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-2 flex items-center gap-2", "data-id": `dashboard_runs_slider_table_row_name_${index}`, children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-id": `dashboard_runs_slider_table_row_avatar_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-2 flex items-center gap-2", "data-test-id": `dashboard_runs_slider_table_row_name_${index}`, children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-test-id": `dashboard_runs_slider_table_row_avatar_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                             IconPreview,
                             {
                               icon: item.icon,
@@ -30127,23 +30127,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                               modelName: item.modelName
                             }
                           ) }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", "data-id": `dashboard_runs_slider_table_row_name_text_${index}`, children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", "data-test-id": `dashboard_runs_slider_table_row_name_text_${index}`, children: [
                             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-[#101828] truncate", children: item.name }),
-                            metricType === "modelRuns" && item.provider && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-[#475467] truncate", "data-id": `dashboard_runs_slider_table_row_provider_${index}`, children: item.provider })
+                            metricType === "modelRuns" && item.provider && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-[#475467] truncate", "data-test-id": `dashboard_runs_slider_table_row_provider_${index}`, children: item.provider })
                           ] })
                         ] }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-id": `dashboard_runs_slider_table_row_runs_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: formatValue(item.runs) }) }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-id": `dashboard_runs_slider_table_row_response_time_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: item.responseTime }) })
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-test-id": `dashboard_runs_slider_table_row_runs_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: formatValue(item.runs) }) }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-test-id": `dashboard_runs_slider_table_row_response_time_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: item.responseTime }) })
                       ]
                     },
                     item.id || index
                   )),
-                  visibleCount < filteredData.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-id": "dashboard_runs_slider_load_more_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  visibleCount < filteredData.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-test-id": "dashboard_runs_slider_load_more_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "button",
                     {
                       onClick: loadMore,
                       className: "bg-white border border-[#d0d5dd] rounded px-3 py-1 text-xs font-medium text-[#344054] hover:bg-gray-50 transition-colors",
-                      "data-id": "dashboard_runs_slider_load_more_btn",
+                      "data-test-id": "dashboard_runs_slider_load_more_btn",
                       children: "Load 10 more"
                     }
                   ) })
@@ -31761,7 +31761,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("w-full", className), "data-id": "dashboard_view_renderer_root", children: renderView() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("w-full", className), "data-test-id": "dashboard_view_renderer_root", children: renderView() }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         RunsSlider,
         {
@@ -32174,7 +32174,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return { maxItems: 40, maxLabelLength: 25 };
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex items-center gap-3", className), "data-id": "dashboard_section_controls", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex items-center gap-3", className), "data-test-id": "dashboard_section_controls", children: [
       dropdown && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: dropdown.multiSelect ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         MultiSelect,
         {
@@ -32202,7 +32202,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           className: "w-48"
         }
       ) }),
-      buttons && buttons.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center border border-gray-200 rounded-lg overflow-hidden", "data-id": "dashboard_section_controls_button_group", children: buttons.map((button, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      buttons && buttons.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center border border-gray-200 rounded-lg overflow-hidden", "data-test-id": "dashboard_section_controls_button_group", children: buttons.map((button, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: () => {
@@ -32215,12 +32215,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             button.active ? "bg-white text-gray-900 shadow-[0 1px 3px 0  rgba(16, 24, 40, 0.08), 0  1px 2px 0 rgba(16, 24, 40, 0.08)]" : "text-gray-500 bg-white",
             index > 0 && "border-l border-gray-200"
           ),
-          "data-id": `dashboard_section_controls_btn_${button.value}`,
+          "data-test-id": `dashboard_section_controls_btn_${button.value}`,
           children: button.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "mr-[8px]", children: button.icon })
         },
         button.value
       )) }),
-      toggle && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px] border border-gray-200 bg-gray-50 overflow-hidden p-[2px] rounded-[6px]", "data-id": "dashboard_section_controls_view_toggle", children: [
+      toggle && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px] border border-gray-200 bg-gray-50 overflow-hidden p-[2px] rounded-[6px]", "data-test-id": "dashboard_section_controls_view_toggle", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -32233,7 +32233,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               "hover:bg-white ",
               toggle.chartView ? "bg-white text-gray-900 shadow-md" : "text-gray-500 bg-white"
             ),
-            "data-id": "dashboard_section_controls_view_toggle_btn_chart",
+            "data-test-id": "dashboard_section_controls_view_toggle_btn_chart",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(BarChart3, { className: "w-[16px] h-[16px]" })
           }
         ),
@@ -32249,7 +32249,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               "hover:bg-white ",
               toggle.tableView ? "bg-white text-gray-900 shadow-md" : "text-gray-500 bg-white"
             ),
-            "data-id": "dashboard_section_controls_view_toggle_btn_table",
+            "data-test-id": "dashboard_section_controls_view_toggle_btn_table",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1, { className: "w-[16px] h-[16px]" })
           }
         )
@@ -32863,18 +32863,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           gridColumn: (layout == null ? void 0 : layout.span) ? `span ${layout.span}` : void 0,
           order: layout == null ? void 0 : layout.order
         },
-        "data-id": `dashboard_section_${id}`,
+        "data-test-id": `dashboard_section_${id}`,
         children: [
-          title && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", "data-id": `dashboard_section_header_${id}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-md font-medium text-gray-700", "data-id": `dashboard_section_title_${id}`, children: title }),
-            description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500", "data-id": `dashboard_section_description_${id}`, children: description })
+          title && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", "data-test-id": `dashboard_section_header_${id}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-md font-medium text-gray-700", "data-test-id": `dashboard_section_title_${id}`, children: title }),
+            description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500", "data-test-id": `dashboard_section_description_${id}`, children: description })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col sm:flex-row gap-[16px]", "data-id": `dashboard_section_metrics_${id}`, children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-id": `dashboard_section_metric_skeleton_${id}_0`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-id": `dashboard_section_metric_skeleton_${id}_1`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-id": `dashboard_section_metric_skeleton_${id}_2`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-id": `dashboard_section_metric_skeleton_${id}_3`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) })
-          ] }) : getUpdatedMetrics().map((metric, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-id": `dashboard_section_metric_${id}_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col sm:flex-row gap-[16px]", "data-test-id": `dashboard_section_metrics_${id}`, children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-test-id": `dashboard_section_metric_skeleton_${id}_0`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-test-id": `dashboard_section_metric_skeleton_${id}_1`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-test-id": `dashboard_section_metric_skeleton_${id}_2`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-test-id": `dashboard_section_metric_skeleton_${id}_3`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) })
+          ] }) : getUpdatedMetrics().map((metric, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-test-id": `dashboard_section_metric_${id}_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             MetricCard,
             {
               data: metric,
@@ -32882,8 +32882,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               isFirst: index === 0
             }
           ) }, `${id}-metric-${index}`)) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", "data-id": `dashboard_section_subtitle_${id}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-id": `dashboard_section_current_metric_${id}`, children: getCurrentMetric() && /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-md font-medium text-gray-700", "data-id": `dashboard_section_current_metric_title_${id}`, children: (_a = getCurrentMetric()) == null ? void 0 : _a.title }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", "data-test-id": `dashboard_section_subtitle_${id}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test-id": `dashboard_section_current_metric_${id}`, children: getCurrentMetric() && /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-md font-medium text-gray-700", "data-test-id": `dashboard_section_current_metric_title_${id}`, children: (_a = getCurrentMetric()) == null ? void 0 : _a.title }) }),
             enhancedControls && /* @__PURE__ */ jsxRuntimeExports.jsx(SectionControls, { config: enhancedControls })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -33052,12 +33052,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     var date2 = toDate(dirtyDate);
     return !isNaN(Number(date2));
   }
-  function endOfDay(dirtyDate) {
-    requiredArgs(1, arguments);
-    var date2 = toDate(dirtyDate);
-    date2.setHours(23, 59, 59, 999);
-    return date2;
-  }
   function startOfMonth(dirtyDate) {
     requiredArgs(1, arguments);
     var date2 = toDate(dirtyDate);
@@ -34547,19 +34541,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     });
     const presets = [
       {
-        label: "Today",
-        value: "today",
+        label: "Last 24 hours",
+        value: "24h",
         dateRange: {
-          from: startOfDay(/* @__PURE__ */ new Date()),
+          from: subDays(/* @__PURE__ */ new Date(), 1),
           to: /* @__PURE__ */ new Date()
         }
       },
       {
-        label: "Yesterday",
-        value: "yesterday",
+        label: "Last 48 hours",
+        value: "48h",
         dateRange: {
-          from: startOfDay(subDays(/* @__PURE__ */ new Date(), 1)),
-          to: endOfDay(subDays(/* @__PURE__ */ new Date(), 1))
+          from: subDays(/* @__PURE__ */ new Date(), 2),
+          to: /* @__PURE__ */ new Date()
         }
       },
       {
@@ -35236,6 +35230,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         } else if (typeof value === "string") {
           const daysMap = {
             "24h": 1,
+            "48h": 2,
             "7d": 7,
             "30d": 30,
             "90d": 90
@@ -35269,13 +35264,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       onExport == null ? void 0 : onExport();
     };
     const isAnyChartLoading = Object.values(sectionChartLoading).some((loading) => loading);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full h-full flex flex-col overflow-hidden", className), "data-id": "dashboard_root", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 w-full p-[24px] pb-[12px]", "data-id": "dashboard_header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-lg font-bold text-gray-900 w-full", "data-id": "dashboard_title", children: title }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 w-full", "data-id": "dashboard_header_content", children: [
-          subtitle && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 text-xs w-full", "data-id": "dashboard_subtitle", children: subtitle }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 justify-end flex-shrink-0", "data-id": "dashboard_global_controls", children: [
-            (isInitialLoading || isAnyChartLoading) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm medium text-gray-500", "data-id": "dashboard_loading_indicator", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full h-full flex flex-col overflow-hidden", className), "data-test-id": "dashboard_root", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 w-full p-[24px] pb-[12px]", "data-test-id": "dashboard_header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-lg font-bold text-gray-900 w-full", "data-test-id": "dashboard_title", children: title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 w-full", "data-test-id": "dashboard_header_content", children: [
+          subtitle && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 text-xs w-full", "data-test-id": "dashboard_subtitle", children: subtitle }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 justify-end flex-shrink-0", "data-test-id": "dashboard_global_controls", children: [
+            (isInitialLoading || isAnyChartLoading) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm medium text-gray-500", "data-test-id": "dashboard_loading_indicator", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "h-[16px] w-[16px] animate-spin" }),
               "Loading..."
             ] }),
@@ -35354,7 +35349,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             gridTemplateColumns: layout.responsive ? void 0 : `repeat(${layout.columns}, minmax(0, 1fr))`,
             gap: layout.gap ? `${layout.gap}px` : void 0
           },
-          "data-id": "dashboard_sections_grid",
+          "data-test-id": "dashboard_sections_grid",
           children: dynamicSections.map((section) => {
             var _a2, _b, _c, _d;
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -35386,7 +35381,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       console.log("🔧 TracingApiService initialized:", {
         tracingUrl: config2.tracingUrl,
         projectId: config2.projectId,
-        hasAuth: !!config2.headers.authorization
+        hasAuth: !!config2.headers.authorization,
+        hasDynamicAuth: !!config2.getAuthHeaders
       });
     }
     /**
@@ -35396,15 +35392,36 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const encodedInput = encodeURIComponent(JSON.stringify(input));
       return `${this.config.tracingUrl}/tracing/api/trpc/${endpoint}?input=${encodedInput}`;
     }
+    /**
+     * Get current headers, refreshing auth token if callback is provided
+     */
+    async getHeaders() {
+      if (this.config.getAuthHeaders) {
+        try {
+          const authHeaders = await this.config.getAuthHeaders();
+          return {
+            ...this.config.headers,
+            authorization: authHeaders.authorization,
+            accountid: authHeaders.accountid,
+            userId: authHeaders.userId || this.config.headers.userId || ""
+          };
+        } catch (error) {
+          console.warn("⚠️ Failed to get fresh auth headers, using static headers:", error);
+          return this.config.headers;
+        }
+      }
+      return this.config.headers;
+    }
     /**
      * Helper to make GET request with proper headers
      */
     async makeRequest(url) {
       var _a, _b, _c;
       console.log("📤 API Request:", url);
+      const headers = await this.getHeaders();
       const response = await fetch(url, {
         method: "GET",
-        headers: this.config.headers
+        headers
       });
       console.log("📥 API Response status:", response.status);
       if (!response.ok) {
@@ -35791,9 +35808,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       try {
         const url = `${this.config.tracingUrl}/aaa/api/v1/apps/${this.config.projectId}/environments?rnd=${Math.random().toString(36).substring(2, 8)}`;
         console.log("🌍 Fetching environments for project:", this.config.projectId);
+        const headers = await this.getHeaders();
         const response = await fetch(url, {
           method: "GET",
-          headers: this.config.headers
+          headers
         });
         if (!response.ok) {
           const errorText = await response.text();
@@ -104881,11 +104899,11 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             TailwindDateRangePicker,
             {
-              defaultValue: typeof timeRange === "string" ? timeRange === "7 days" ? "7d" : timeRange === "30 days" ? "30d" : timeRange === "90 days" ? "30d" : timeRange === "24 hours" ? "today" : timeRange === "1 hour" ? "today" : "7d" : "7d",
+              defaultValue: typeof timeRange === "string" ? timeRange === "7 days" ? "7d" : timeRange === "30 days" ? "30d" : timeRange === "90 days" ? "30d" : timeRange === "24 hours" ? "24h" : timeRange === "1 hour" ? "24h" : "7d" : "7d",
               value: typeof timeRange === "object" ? timeRange : void 0,
               presetLabel: timeRangePresetLabel,
               onDateRangeChange: handleDateRangeChange,
-              className: "w-[172px]"
+              className: "w-[190px]"
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -106567,27 +106585,16 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       showTraceId && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-[8px] items-center justify-end px-0 py-[4px] w-full", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] leading-[12px] text-[#98A2B3]", children: "Trace ID" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-[10px] leading-[12px] text-[#667085]", children: trace.id }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-[8px] items-center", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              onClick: handleCopyTraceId,
-              className: "p-0 opacity-60 hover:opacity-100 transition-opacity",
-              title: "Copy trace ID",
-              "data-test-id": `trace-tree-copy-id-btn-${trace.id}`,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `w-[12px] h-[12px] ${copied ? "text-[#17B26A]" : "text-[#98A2B3]"}` })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              className: "p-0 opacity-60 hover:opacity-100 transition-opacity",
-              title: "Open trace details",
-              "data-test-id": `trace-tree-external-link-btn-${trace.id}`,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-[12px] h-[12px] text-[#98A2B3]" })
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: handleCopyTraceId,
+            className: "p-0 opacity-60 hover:opacity-100 transition-opacity",
+            title: "Copy trace ID",
+            "data-test-id": `trace-tree-copy-id-btn-${trace.id}`,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `w-[12px] h-[12px] ${copied ? "text-[#17B26A]" : "text-[#98A2B3]"}` })
+          }
+        )
       ] })
     ] });
   }
@@ -106609,19 +106616,19 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         case "sm":
           return {
             button: "p-1",
-            iconStyle: { width: "12px", height: "12px" },
+            icon: "w-[12px] h-[12px]",
             tooltip: "text-xs py-1 px-2"
           };
         case "lg":
           return {
             button: "p-2",
-            iconStyle: { width: "20px", height: "20px" },
+            icon: "w-[20px] h-[20px]",
             tooltip: "text-sm py-2 px-3"
           };
         default:
           return {
             button: "p-1.5",
-            iconStyle: { width: "16px", height: "16px" },
+            icon: "w-[16px] h-[16px]",
             tooltip: "text-xs py-1 px-2"
           };
       }
@@ -106684,7 +106691,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           onClick: copyToClipboard2,
           className: `${sizeClasses2.button} hover:bg-gray-100 rounded transition-colors ${className}`,
           title,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `text-gray-400 ${iconClassName}`, style: { ...sizeClasses2.iconStyle, ...iconStyle } })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `${sizeClasses2.icon} text-gray-400 ${iconClassName}`, style: iconStyle })
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -107818,7 +107825,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-700", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(FileCode, { style: { width: "20px", height: "20px", stroke: "#9CA3AF" } }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(FileCode, { className: "w-[20px] h-[20px] text-[#9CA3AF]" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-100", children: title })
           ] }),
           isValidJson && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 ml-4 pl-4 border-l border-gray-700", children: [
@@ -107828,7 +107835,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                 onClick: () => setViewMode("interactive"),
                 className: `p-1.5 hover:bg-gray-700 rounded transition-colors ${viewMode === "interactive" ? "bg-gray-700" : ""}`,
                 title: "Collapsed JSON view (fold/unfold)",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { style: { width: "16px", height: "16px", stroke: "#9CA3AF" } })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { className: "w-[16px] h-[16px] text-[#9CA3AF]" })
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -107837,7 +107844,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                 onClick: () => setViewMode("plain"),
                 className: `p-1.5 hover:bg-gray-700 rounded transition-colors ${viewMode === "plain" ? "bg-gray-700" : ""}`,
                 title: "Plain JSON view",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { style: { width: "16px", height: "16px", stroke: "#9CA3AF" } })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { className: "w-[16px] h-[16px] text-[#9CA3AF]" })
               }
             )
           ] })
@@ -107858,7 +107865,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               onClick: onClose,
               className: "p-2 hover:bg-gray-700 rounded-lg transition-colors",
               title: "Close",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { style: { width: "16px", height: "16px", stroke: "#9CA3AF" } })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-[#9CA3AF]" })
             }
           )
         ] })
@@ -107936,7 +107943,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                 onClick: () => onToggleKey == null ? void 0 : onToggleKey(fullPath),
                 className: `flex items-center gap-1 p-1 rounded transition-colors ${darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100"}`,
                 children: [
-                  isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { style: { width: "12px", height: "12px", stroke: darkMode ? "#6B7280" : "#9CA3AF" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { style: { width: "12px", height: "12px", stroke: darkMode ? "#6B7280" : "#9CA3AF" } }),
+                  isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: `w-[12px] h-[12px] ${darkMode ? "text-[#6B7280]" : "text-[#9CA3AF]"}` }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: `w-[12px] h-[12px] ${darkMode ? "text-[#6B7280]" : "text-[#9CA3AF]"}` }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: `text-xs ${darkMode ? "text-gray-300" : "text-gray-600"}`, children: [
                     "Array[",
                     value.length,
@@ -107971,7 +107978,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                 onClick: () => onToggleKey == null ? void 0 : onToggleKey(fullPath),
                 className: `flex items-center gap-1 p-1 rounded transition-colors ${darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100"}`,
                 children: [
-                  isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { style: { width: "12px", height: "12px", stroke: darkMode ? "#6B7280" : "#9CA3AF" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { style: { width: "12px", height: "12px", stroke: darkMode ? "#6B7280" : "#9CA3AF" } }),
+                  isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: `w-[12px] h-[12px] ${darkMode ? "text-[#6B7280]" : "text-[#9CA3AF]"}` }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: `w-[12px] h-[12px] ${darkMode ? "text-[#6B7280]" : "text-[#9CA3AF]"}` }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: `text-xs ${darkMode ? "text-gray-300" : "text-gray-600"}`, children: [
                     "Object ",
                     "{",
@@ -108138,17 +108145,17 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       ] });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"} border rounded-md overflow-hidden ${className}`, "data-id": "data_viewer_root", children: [
-        showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-[#F9FAFB] border_secondary_bottom px-4 py-2 flex items-center justify-between", "data-id": "data_viewer_header", children: [
-          isValidJson && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": "data_viewer_header_view_toggles", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"} border rounded-md overflow-hidden ${className}`, "data-test-id": "data_viewer_root", children: [
+        showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-[#F9FAFB] border_secondary_bottom px-4 py-2 flex items-center justify-between", "data-test-id": "data_viewer_header", children: [
+          isValidJson && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-test-id": "data_viewer_header_view_toggles", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
                 onClick: () => handleViewModeChange("interactive"),
                 className: `p-1 hover:bg-gray-200 rounded transition-colors ${currentViewMode === "interactive" ? "bg-gray-200" : ""}`,
                 title: "Collapsed JSON view (fold/unfold)",
-                "data-id": "data_viewer_header_btn_interactive",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { style: { width: "16px", height: "16px", stroke: "#98A2B3" } })
+                "data-test-id": "data_viewer_header_btn_interactive",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { className: "w-[16px] h-[16px] text-[#98A2B3]" })
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -108157,21 +108164,21 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                 onClick: () => handleViewModeChange("plain"),
                 className: `p-1 hover:bg-gray-200 rounded transition-colors ${currentViewMode === "plain" ? "bg-gray-200" : ""}`,
                 title: "Plain JSON view",
-                "data-id": "data_viewer_header_btn_plain",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { style: { width: "16px", height: "16px", stroke: "#98A2B3" } })
+                "data-test-id": "data_viewer_header_btn_plain",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { className: "w-[16px] h-[16px] text-[#98A2B3]" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-id": "data_viewer_header_spacer" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": "data_viewer_header_actions", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", "data-test-id": "data_viewer_header_spacer" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-test-id": "data_viewer_header_actions", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
                 onClick: handleExpand,
                 className: "p-1 hover:bg-gray-200 rounded transition-colors",
                 title: "Expand to full screen",
-                "data-id": "data_viewer_header_btn_expand",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { style: { width: "16px", height: "16px", stroke: "#98A2B3" } })
+                "data-test-id": "data_viewer_header_btn_expand",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { className: "w-[16px] h-[16px] text-[#98A2B3]" })
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -108190,7 +108197,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           {
             className: `${padding ? padding : "p-3"} overflow-auto ${darkMode ? "bg-gray-800" : "bg-white"}`,
             style: { maxHeight },
-            "data-id": "data_viewer_content",
+            "data-test-id": "data_viewer_content",
             children: [
               isValidJson ? currentViewMode === "interactive" ? useEnhancedJsonView ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                 JsonView,
@@ -108218,7 +108225,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                   darkMode
                 }
               ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs whitespace-pre font-mono ${darkMode ? "text-gray-300" : "text-[#344054]"}`, children: stringifyJsonNode(parsedData) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs whitespace-pre-wrap font-mono ${darkMode ? "text-gray-300" : "text-[#344054]"}`, children: displayContent }),
-              !displayContent && displayContent !== 0 && displayContent !== false && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-center text-sm py-8 ${darkMode ? "text-gray-500" : "text-gray-400"}`, "data-id": "data_viewer_empty_state", children: "No data available" })
+              !displayContent && displayContent !== 0 && displayContent !== false && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-center text-sm py-8 ${darkMode ? "text-gray-500" : "text-gray-400"}`, "data-test-id": "data_viewer_empty_state", children: "No data available" })
             ]
           }
         )
@@ -109211,45 +109218,61 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[480px] min-w-[400px] max-w-[600px] border-r border-[#E4E7EC] flex flex-col bg-[#F9FAFB] overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 p-[16px]", children: [
-          traces.length === 0 && loadingState === "success" && progressiveState.traceCount === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[32px] text-center text-[13px] text-[#667085]", children: "No traces available" }),
-          traces.map((trace, index) => {
-            var _a, _b, _c, _d;
-            const observations = ((_b = (_a = traceObservations[trace.id]) == null ? void 0 : _a.observations) == null ? void 0 : _b.length) > 0 ? traceObservations[trace.id].observations : mode === "trace" ? (traceData == null ? void 0 : traceData.observations) || [] : [];
-            const isLoadingObservations = ((_c = traceObservations[trace.id]) == null ? void 0 : _c.loading) || mode === "trace" && (((_d = traceData == null ? void 0 : traceData.observations) == null ? void 0 : _d.length) || 0) === 0;
-            const filteredObservations = getFilteredObservations(trace.id, observations);
-            const autoExpandIds = index === 0 ? getAutoExpandIds(trace.id, filteredObservations) : void 0;
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
-              TraceTree,
-              {
-                trace,
-                observations: filteredObservations,
-                isExpanded: mode === "trace" || index === 0,
-                selectedNodeId: selectedNode && "traceId" in selectedNode ? selectedNode.id : null,
-                onNodeSelect: handleNodeSelect,
-                onExpandToggle: () => handleTraceExpand(trace.id, trace.timestamp),
-                showTraceId: mode === "session",
-                isLoading: isLoadingObservations,
-                defaultExpandedNodeIds: autoExpandIds
-              },
-              trace.id
-            );
-          }),
-          mode === "session" && progressiveState.pendingTraceIds.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: progressiveState.pendingTraceIds.map((pendingTraceId, index) => {
-            const isFirstPending = index === 0 && !progressiveState.firstTraceLoaded;
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
-              TreeSkeleton,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[480px] min-w-[400px] max-w-[600px] border-r border-[#E4E7EC] flex flex-col bg-[#F9FAFB] overflow-auto", children: [
+          mode === "session" && sessionId && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] px-[24px] py-[4px] bg-white border-b border-[#EAECF0]", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] text-[#667085]", children: "Session ID" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[12px] text-[#344054]", children: sessionId }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
               {
-                traceCount: 1,
-                observationsPerTrace: 4,
-                isExpanded: isFirstPending,
-                showTraceId: true,
-                className: "!p-0"
-              },
-              `skeleton-${pendingTraceId}`
-            );
-          }) })
-        ] }) }),
+                onClick: handleCopyId,
+                className: "p-[2px] rounded-[4px] hover:bg-[#F2F4F7] transition-opacity opacity-60 hover:opacity-100",
+                title: "Copy Session ID",
+                "data-test-id": "session-id-copy-btn",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `w-[12px] h-[12px] ${copiedId ? "text-[#17B26A]" : "text-[#98A2B3]"}` })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 p-[16px]", children: [
+            traces.length === 0 && loadingState === "success" && progressiveState.traceCount === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[32px] text-center text-[13px] text-[#667085]", children: "No traces available" }),
+            traces.map((trace, index) => {
+              var _a, _b, _c, _d;
+              const observations = ((_b = (_a = traceObservations[trace.id]) == null ? void 0 : _a.observations) == null ? void 0 : _b.length) > 0 ? traceObservations[trace.id].observations : mode === "trace" ? (traceData == null ? void 0 : traceData.observations) || [] : [];
+              const isLoadingObservations = ((_c = traceObservations[trace.id]) == null ? void 0 : _c.loading) || mode === "trace" && (((_d = traceData == null ? void 0 : traceData.observations) == null ? void 0 : _d.length) || 0) === 0;
+              const filteredObservations = getFilteredObservations(trace.id, observations);
+              const autoExpandIds = index === 0 ? getAutoExpandIds(trace.id, filteredObservations) : void 0;
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                TraceTree,
+                {
+                  trace,
+                  observations: filteredObservations,
+                  isExpanded: mode === "trace" || index === 0,
+                  selectedNodeId: selectedNode && "traceId" in selectedNode ? selectedNode.id : null,
+                  onNodeSelect: handleNodeSelect,
+                  onExpandToggle: () => handleTraceExpand(trace.id, trace.timestamp),
+                  showTraceId: mode === "session",
+                  isLoading: isLoadingObservations,
+                  defaultExpandedNodeIds: autoExpandIds
+                },
+                trace.id
+              );
+            }),
+            mode === "session" && progressiveState.pendingTraceIds.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: progressiveState.pendingTraceIds.map((pendingTraceId, index) => {
+              const isFirstPending = index === 0 && !progressiveState.firstTraceLoaded;
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                TreeSkeleton,
+                {
+                  traceCount: 1,
+                  observationsPerTrace: 4,
+                  isExpanded: isFirstPending,
+                  showTraceId: true,
+                  className: "!p-0"
+                },
+                `skeleton-${pendingTraceId}`
+              );
+            }) })
+          ] })
+        ] }),
         !selectedNode && !hasAutoSelected ? /* @__PURE__ */ jsxRuntimeExports.jsx(NodeDetailSkeleton, { showFullSummary: true }) : /* @__PURE__ */ jsxRuntimeExports.jsx(NodeDetailPanel, { node: selectedNode, nodeType, apiConfig })
       ] })
     ] });
@@ -110403,7 +110426,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               newMap.set(traceId, {
                 input: detail["input"],
                 output: detail["output"],
-                totalCost: detail["totalCost"]
+                totalCost: detail["totalCost"],
+                envId: detail["envId"]
               });
               return newMap;
             });
@@ -110514,7 +110538,14 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             headerName: "Environment",
             width: 150,
             hide: false,
-            cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx(EnvironmentNameCell, { envId: params.value })
+            cellRenderer: (params) => {
+              const detailData = detailedTraceData.get(params.data.id);
+              const envId = detailData == null ? void 0 : detailData.envId;
+              if (envId === void 0) {
+                return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 italic", children: "Loading..." });
+              }
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(EnvironmentNameCell, { envId });
+            }
           }
         );
         baseColumns.push(
@@ -110874,6 +110905,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           title: "Traces",
           description: "Inspect execution traces to analyze model reasoning, tool usage, and performance insights.",
           searchPlaceholder: "Search...",
+          showSearch: totalCount > 0 || searchTerm.length > 0,
           searchConfig: {
             metadataSearchFields: ["ID", "Input", "User ID"],
             updateQuery: handleSearch,
@@ -113445,15 +113477,15 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     };
     return (
       // bg-white w-full border-t border-gray-200
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white w-full", "data-id": `debug_card_${node.id}`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white w-full", "data-test-id": `debug_card_${node.id}`, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             className: `flex items-center pl-[8px] pr-[8px] relative transition-colors cursor-pointer w-full
         ${isSelected ? "" : ""}`,
             onClick: handleNodeClick,
-            "data-id": `debug_card_header_${node.id}`,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[10px] w-full", "data-id": `debug_card_header_content_${node.id}`, children: [
+            "data-test-id": `debug_card_header_${node.id}`,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[10px] w-full", "data-test-id": `debug_card_header_content_${node.id}`, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
@@ -113467,7 +113499,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                     }
                   },
                   title: hasChildren ? isExpanded ? "Collapse" : "Expand" : "Show details",
-                  "data-id": `debug_card_toggle_${node.id}`,
+                  "data-test-id": `debug_card_toggle_${node.id}`,
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     ChevronRight,
                     {
@@ -113476,18 +113508,18 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] w-full py-[8px] border-b border-gray-200", "data-id": `debug_card_node_info_${node.id}`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 rounded-[8px] bg-[#B2DDFF]", "data-id": `debug_card_node_icon_${node.id}`, children: getNodeIcon() }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] w-full py-[8px] border-b border-gray-200", "data-test-id": `debug_card_node_info_${node.id}`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 rounded-[8px] bg-[#B2DDFF]", "data-test-id": `debug_card_node_icon_${node.id}`, children: getNodeIcon() }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "span",
                   {
                     className: "font-semibold text-gray-900 text-xs truncate w-full",
                     title: node.type === "llm" ? node.name : void 0,
-                    "data-id": `debug_card_node_name_${node.id}`,
+                    "data-test-id": `debug_card_node_name_${node.id}`,
                     children: isGuardrailsNode ? node.type === "GuardrailsInputScan" ? "Input Guardrails Scanner" : "Output Guardrails Scanner" : node.type === "llm" ? "AI Model Call" : node.type === "tool" ? formatToolName(node.name) : node.name
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[12px] text-[10px] text-gray-500", "data-id": `debug_card_node_metadata_${node.id}`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[12px] text-[10px] text-gray-500", "data-test-id": `debug_card_node_metadata_${node.id}`, children: [
                   node.type === "Agent" && (() => {
                     var _a;
                     const llmChild = (_a = node.children) == null ? void 0 : _a.find((child) => child.type === "llm");
@@ -113497,7 +113529,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                         {
                           className: "text-[10px] text-gray-500 truncate max-w-[100px]",
                           title: llmChild.name,
-                          "data-id": `debug_card_node_model_name_${node.id}`,
+                          "data-test-id": `debug_card_node_model_name_${node.id}`,
                           children: llmChild.name
                         }
                       );
@@ -113530,7 +113562,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                           title: `Input: ${((_a = llmUsage.input_tokens) == null ? void 0 : _a.toLocaleString()) || 0} tokens
 Output: ${((_b = llmUsage.output_tokens) == null ? void 0 : _b.toLocaleString()) || 0} tokens
 Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) || 0} tokens`,
-                          "data-id": `debug_card_node_tokens_${node.id}`,
+                          "data-test-id": `debug_card_node_tokens_${node.id}`,
                           children: [
                             llmUsage.total_tokens.toLocaleString(),
                             " Tokens"
@@ -113540,34 +113572,34 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                     }
                     return null;
                   })(),
-                  node.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", "data-id": `debug_card_node_duration_${node.id}`, children: [
+                  node.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", "data-test-id": `debug_card_node_duration_${node.id}`, children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "w-[12px] h-[12px]" }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-gray-500 whitespace-nowrap", children: formatDuration(node.duration) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-id": `debug_card_node_status_${node.id}`, children: getStatusIcon() })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-test-id": `debug_card_node_status_${node.id}`, children: getStatusIcon() })
               ] })
             ] })
           }
         ),
-        isSelected && availableTabs.length > 0 && showDetailView && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", "data-id": `debug_card_detail_panel_${node.id}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-[-40px] left-[16px] w-[1px] border-l border-dashed border-gray-200 h-[calc(100%+40px)] z-[1]", "data-id": `debug_card_detail_panel_connector_${node.id}` }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-[4px] py-[8px] w-full", "data-id": `debug_card_detail_panel_content_${node.id}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-50 rounded-[4px] p-[4px] inline-flex gap-[4px] mb-[8px] border border-gray-200", "data-id": `debug_card_detail_panel_tabs_${node.id}`, children: getTabsForNodeType().map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        isSelected && availableTabs.length > 0 && showDetailView && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", "data-test-id": `debug_card_detail_panel_${node.id}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-[-40px] left-[16px] w-[1px] border-l border-dashed border-gray-200 h-[calc(100%+40px)] z-[1]", "data-test-id": `debug_card_detail_panel_connector_${node.id}` }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-[4px] py-[8px] w-full", "data-test-id": `debug_card_detail_panel_content_${node.id}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-50 rounded-[4px] p-[4px] inline-flex gap-[4px] mb-[8px] border border-gray-200", "data-test-id": `debug_card_detail_panel_tabs_${node.id}`, children: getTabsForNodeType().map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
                 onClick: () => handleTabClick(tab),
                 className: `px-[8px] py-[4px] text-xs font-medium rounded-[4px] text-gray-500 hover:text-gray-700 hover:shadow-tab hover:bg-white transition-colors ${activeTab === tab ? "bg-white text-gray-900 shadow-tab" : "text-gray-500 hover:text-gray-700 hover:bg-white"}`,
-                "data-id": `debug_card_detail_panel_tab_${node.id}_${tab}`,
+                "data-test-id": `debug_card_detail_panel_tab_${node.id}_${tab}`,
                 children: tab.charAt(0).toUpperCase() + tab.slice(1)
               },
               tab
             )) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[4px]", "data-id": `debug_card_detail_panel_tab_content_${node.id}`, children: renderTabContent() })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[4px]", "data-test-id": `debug_card_detail_panel_tab_content_${node.id}`, children: renderTabContent() })
           ] })
         ] }),
-        isExpanded && hasChildren && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", "data-id": `debug_card_children_${node.id}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-[-40px] left-[16px] w-[1px] border-l border-dashed border-gray-200 h-[calc(100%+40px)] z-[1]", "data-id": `debug_card_children_connector_${node.id}` }),
+        isExpanded && hasChildren && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", "data-test-id": `debug_card_children_${node.id}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-[-40px] left-[16px] w-[1px] border-l border-dashed border-gray-200 h-[calc(100%+40px)] z-[1]", "data-test-id": `debug_card_children_connector_${node.id}` }),
           node.children.map((child, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             DebugCard,
             {
@@ -113871,14 +113903,14 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
       return `${tokens} tokens`;
     };
     if (!sessionTree.runs.length) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex flex-col h-full ${className}`, "data-id": "debug_panel_empty_state", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", "data-id": "debug_panel_empty_state_content", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 text-sm", "data-id": "debug_panel_empty_state_message", children: "No execution events to display" }) }) });
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex flex-col h-full bg-white ${className}`, "data-id": "debug_panel_root", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px] p-[24px] overflow-y-auto overflow-x-hidden", ref: scrollContainerRef, "data-id": "debug_panel_content", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center w-full gap-[16px]", "data-id": "debug_panel_session_header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-400 whitespace-nowrap flex-shrink-0", "data-id": "debug_panel_session_header_label", children: "Session initiated" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 h-[1px] border-t border-dashed border-gray-300 w-full", "data-id": "debug_panel_session_header_divider" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-400 flex-shrink-0", "data-id": "debug_panel_session_header_actions", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "data-id": "debug_panel_session_id", children: sessionTree.sessionId }),
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex flex-col h-full ${className}`, "data-test-id": "debug_panel_empty_state", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", "data-test-id": "debug_panel_empty_state_content", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 text-sm", "data-test-id": "debug_panel_empty_state_message", children: "No execution events to display" }) }) });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex flex-col h-full bg-white ${className}`, "data-test-id": "debug_panel_root", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px] p-[24px] overflow-y-auto overflow-x-hidden", ref: scrollContainerRef, "data-test-id": "debug_panel_content", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center w-full gap-[16px]", "data-test-id": "debug_panel_session_header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-400 whitespace-nowrap flex-shrink-0", "data-test-id": "debug_panel_session_header_label", children: "Session initiated" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 h-[1px] border-t border-dashed border-gray-300 w-full", "data-test-id": "debug_panel_session_header_divider" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-400 flex-shrink-0", "data-test-id": "debug_panel_session_header_actions", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "data-test-id": "debug_panel_session_id", children: sessionTree.sessionId }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             CopyButton$1,
             {
@@ -113904,22 +113936,22 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                   }
                 }
               },
-              "data-id": "debug_panel_session_external_link_btn",
+              "data-test-id": "debug_panel_session_external_link_btn",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-[12px] h-[12px]" })
             }
           )
         ] })
       ] }),
-      showExpansionControls && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-4 p-3 bg-gray-50 rounded-lg border border-gray-200", "data-id": "debug_panel_expansion_controls", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": "debug_panel_expansion_controls_buttons", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-700", "data-id": "debug_panel_expansion_controls_label", children: "Expansion:" }),
+      showExpansionControls && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-4 p-3 bg-gray-50 rounded-lg border border-gray-200", "data-test-id": "debug_panel_expansion_controls", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-test-id": "debug_panel_expansion_controls_buttons", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-700", "data-test-id": "debug_panel_expansion_controls_label", children: "Expansion:" }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               onClick: handleExpandAll,
               className: "flex items-center gap-1 px-2 py-1 text-xs bg-white hover:bg-gray-50 border border-gray-300 rounded transition-colors",
               title: "Expand all nodes",
-              "data-id": "debug_panel_expansion_controls_btn_expand_all",
+              "data-test-id": "debug_panel_expansion_controls_btn_expand_all",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-3 h-3" }),
                 "Expand All"
@@ -113932,7 +113964,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               onClick: handleExpandLast,
               className: "flex items-center gap-1 px-2 py-1 text-xs bg-white hover:bg-gray-50 border border-gray-300 rounded transition-colors",
               title: "Expand only the last execution path",
-              "data-id": "debug_panel_expansion_controls_btn_expand_last",
+              "data-test-id": "debug_panel_expansion_controls_btn_expand_last",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Expand, { className: "w-3 h-3" }),
                 "Expand Last"
@@ -113945,7 +113977,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               onClick: handleCollapseAll,
               className: "flex items-center gap-1 px-2 py-1 text-xs bg-white hover:bg-gray-50 border border-gray-300 rounded transition-colors",
               title: "Collapse all nodes",
-              "data-id": "debug_panel_expansion_controls_btn_collapse_all",
+              "data-test-id": "debug_panel_expansion_controls_btn_collapse_all",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { className: "w-3 h-3" }),
                 "Collapse All"
@@ -113953,8 +113985,8 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": "debug_panel_expansion_controls_live_mode", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-700", "data-id": "debug_panel_expansion_controls_live_mode_label", children: "Live Mode:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-test-id": "debug_panel_expansion_controls_live_mode", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-700", "data-test-id": "debug_panel_expansion_controls_live_mode_label", children: "Live Mode:" }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "select",
             {
@@ -113962,7 +113994,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               onChange: (e) => setLiveExpansionMode(e.target.value),
               className: "text-xs px-2 py-1 bg-white border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500",
               title: "Control auto-expansion behavior during live updates",
-              "data-id": "debug_panel_expansion_controls_live_mode_select",
+              "data-test-id": "debug_panel_expansion_controls_live_mode_select",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: "Expand All" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "last", children: "Expand Last" }),
@@ -113972,18 +114004,18 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
           )
         ] })
       ] }),
-      sessionTree.runs.map((run2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", "data-id": `debug_panel_run_${run2.runId}`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-[8px] border border-gray-300 bg-white overflow-hidden", "data-id": `debug_panel_run_container_${run2.runId}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col w-full", "data-id": `debug_panel_run_header_${run2.runId}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 p-[8px] bg-gray-50", "data-id": `debug_panel_run_header_content_${run2.runId}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "flex-shrink-0", "data-id": `debug_panel_run_header_icon_${run2.runId}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.8277 1.33398C11.3643 1.33398 11.8072 1.33396 12.168 1.36343C12.5428 1.39405 12.8872 1.45978 13.2108 1.62463C13.7125 1.8803 14.1205 2.28825 14.3762 2.79001C14.541 3.11356 14.6067 3.45803 14.6374 3.83276C14.6668 4.19356 14.6668 4.63646 14.6668 5.1731V9.0235C14.6668 9.47003 14.6668 9.83861 14.6462 10.1404C14.6249 10.4532 14.5792 10.7426 14.4638 11.0211C14.1932 11.6746 13.674 12.1937 13.0206 12.4643C12.7421 12.5797 12.4527 12.6254 12.1399 12.6467C11.8381 12.6673 11.4695 12.6673 11.023 12.6673H11.0002C10.6424 12.6673 10.5714 12.6715 10.5136 12.6852C10.4129 12.7089 10.3191 12.7558 10.2397 12.8221C10.1941 12.8602 10.1481 12.9145 9.9335 13.2007L8.94888 14.5135C8.88665 14.5965 8.81628 14.6904 8.74857 14.7657C8.6739 14.8487 8.54979 14.971 8.36264 15.0438C8.1295 15.1344 7.87083 15.1344 7.6377 15.0438C7.45054 14.971 7.32641 14.8487 7.25174 14.7657C7.18403 14.6904 7.11368 14.5965 7.05145 14.5135L6.06683 13.2007C5.85221 12.9145 5.80624 12.8602 5.76065 12.8221C5.68119 12.7558 5.58739 12.7089 5.48666 12.6852C5.42887 12.6715 5.35786 12.6673 5.00015 12.6673H4.9773C4.53078 12.6673 4.16221 12.6673 3.86047 12.6467C3.54762 12.6254 3.25822 12.5797 2.97968 12.4643C2.32627 12.1937 1.80712 11.6746 1.53647 11.0211C1.42109 10.7426 1.37541 10.4532 1.35407 10.1404C1.33348 9.83861 1.33349 9.47003 1.3335 9.0235V5.17313C1.33349 4.63648 1.33347 4.19356 1.36295 3.83276C1.39356 3.45803 1.45929 3.11356 1.62415 2.79001C1.87981 2.28825 2.28776 1.8803 2.78952 1.62463C3.11308 1.45978 3.45755 1.39405 3.83228 1.36343C4.19307 1.33396 4.63599 1.33398 5.17264 1.33398H10.8277ZM10.4715 4.52924C10.2112 4.2689 9.78906 4.26889 9.52872 4.52924L6.66681 7.39114V5.6673C6.6668 5.29912 6.36834 5.00064 6.00015 5.00064C5.63197 5.00064 5.33351 5.29912 5.3335 5.6673V9.00064C5.3335 9.17745 5.40373 9.34702 5.52875 9.47205C5.65377 9.59707 5.82334 9.6673 6.00015 9.6673H9.3335L9.35068 9.66708C9.71092 9.65796 10.0002 9.36308 10.0002 9.00064C10.0001 8.63821 9.71092 8.34332 9.35068 8.3342L9.3335 8.33398H7.60962L10.4715 5.47205C10.7319 5.2117 10.7319 4.78958 10.4715 4.52924Z", fill: "#079455" }) }),
+      sessionTree.runs.map((run2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", "data-test-id": `debug_panel_run_${run2.runId}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-[8px] border border-gray-300 bg-white overflow-hidden", "data-test-id": `debug_panel_run_container_${run2.runId}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col w-full", "data-test-id": `debug_panel_run_header_${run2.runId}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 p-[8px] bg-gray-50", "data-test-id": `debug_panel_run_header_content_${run2.runId}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "flex-shrink-0", "data-test-id": `debug_panel_run_header_icon_${run2.runId}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.8277 1.33398C11.3643 1.33398 11.8072 1.33396 12.168 1.36343C12.5428 1.39405 12.8872 1.45978 13.2108 1.62463C13.7125 1.8803 14.1205 2.28825 14.3762 2.79001C14.541 3.11356 14.6067 3.45803 14.6374 3.83276C14.6668 4.19356 14.6668 4.63646 14.6668 5.1731V9.0235C14.6668 9.47003 14.6668 9.83861 14.6462 10.1404C14.6249 10.4532 14.5792 10.7426 14.4638 11.0211C14.1932 11.6746 13.674 12.1937 13.0206 12.4643C12.7421 12.5797 12.4527 12.6254 12.1399 12.6467C11.8381 12.6673 11.4695 12.6673 11.023 12.6673H11.0002C10.6424 12.6673 10.5714 12.6715 10.5136 12.6852C10.4129 12.7089 10.3191 12.7558 10.2397 12.8221C10.1941 12.8602 10.1481 12.9145 9.9335 13.2007L8.94888 14.5135C8.88665 14.5965 8.81628 14.6904 8.74857 14.7657C8.6739 14.8487 8.54979 14.971 8.36264 15.0438C8.1295 15.1344 7.87083 15.1344 7.6377 15.0438C7.45054 14.971 7.32641 14.8487 7.25174 14.7657C7.18403 14.6904 7.11368 14.5965 7.05145 14.5135L6.06683 13.2007C5.85221 12.9145 5.80624 12.8602 5.76065 12.8221C5.68119 12.7558 5.58739 12.7089 5.48666 12.6852C5.42887 12.6715 5.35786 12.6673 5.00015 12.6673H4.9773C4.53078 12.6673 4.16221 12.6673 3.86047 12.6467C3.54762 12.6254 3.25822 12.5797 2.97968 12.4643C2.32627 12.1937 1.80712 11.6746 1.53647 11.0211C1.42109 10.7426 1.37541 10.4532 1.35407 10.1404C1.33348 9.83861 1.33349 9.47003 1.3335 9.0235V5.17313C1.33349 4.63648 1.33347 4.19356 1.36295 3.83276C1.39356 3.45803 1.45929 3.11356 1.62415 2.79001C1.87981 2.28825 2.28776 1.8803 2.78952 1.62463C3.11308 1.45978 3.45755 1.39405 3.83228 1.36343C4.19307 1.33396 4.63599 1.33398 5.17264 1.33398H10.8277ZM10.4715 4.52924C10.2112 4.2689 9.78906 4.26889 9.52872 4.52924L6.66681 7.39114V5.6673C6.6668 5.29912 6.36834 5.00064 6.00015 5.00064C5.63197 5.00064 5.33351 5.29912 5.3335 5.6673V9.00064C5.3335 9.17745 5.40373 9.34702 5.52875 9.47205C5.65377 9.59707 5.82334 9.6673 6.00015 9.6673H9.3335L9.35068 9.66708C9.71092 9.65796 10.0002 9.36308 10.0002 9.00064C10.0001 8.63821 9.71092 8.34332 9.35068 8.3342L9.3335 8.33398H7.60962L10.4715 5.47205C10.7319 5.2117 10.7319 4.78958 10.4715 4.52924Z", fill: "#079455" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
                 className: "flex-1 cursor-pointer select-none truncate",
                 onClick: () => handleRunToggle(run2.runId),
                 title: run2.userInput,
-                "data-id": `debug_panel_run_title_${run2.runId}`,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-900 truncate", "data-id": `debug_panel_run_title_text_${run2.runId}`, children: run2.userInput || `Run ${run2.runId}` })
+                "data-test-id": `debug_panel_run_title_${run2.runId}`,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-900 truncate", "data-test-id": `debug_panel_run_title_text_${run2.runId}`, children: run2.userInput || `Run ${run2.runId}` })
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -114004,7 +114036,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                   const anyDetailsVisible = Array.from(runNodeIds).some((nodeId) => selectedNodeIds.has(nodeId));
                   return anyDetailsVisible ? "Hide all node details in this run" : "Show all node details in this run";
                 })(),
-                "data-id": `debug_panel_run_details_toggle_${run2.runId}`,
+                "data-test-id": `debug_panel_run_details_toggle_${run2.runId}`,
                 children: (() => {
                   const runNodeIds = /* @__PURE__ */ new Set();
                   const collectNodeIds = (node) => {
@@ -114032,14 +114064,14 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                 },
                 className: "p-1 hover:bg-gray-200 rounded transition-colors flex-shrink-0",
                 title: expandedRuns.has(run2.runId) ? "Collapse run" : "Expand run",
-                "data-id": `debug_panel_run_toggle_${run2.runId}`,
+                "data-test-id": `debug_panel_run_toggle_${run2.runId}`,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: `w-[16px] h-[16px] text-gray-400 transition-transform ${expandedRuns.has(run2.runId) ? "rotate-180" : ""}` })
               }
             )
           ] }) }),
-          expandedRuns.has(run2.runId) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white w-full flex flex-col", "data-id": `debug_panel_run_execution_trees_${run2.runId}`, children: run2.rootNodes && run2.rootNodes.map((rootNode, index) => {
+          expandedRuns.has(run2.runId) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white w-full flex flex-col", "data-test-id": `debug_panel_run_execution_trees_${run2.runId}`, children: run2.rootNodes && run2.rootNodes.map((rootNode, index) => {
             var _a;
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", "data-id": `debug_panel_run_root_node_${run2.runId}_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", "data-test-id": `debug_panel_run_root_node_${run2.runId}_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               DebugCard,
               {
                 node: updateTreeExpansion(rootNode),
@@ -114125,22 +114157,22 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             };
             const outputFromNodes = run2.rootNodes ? findFinalOutput(run2.rootNodes) : void 0;
             const finalOutput = outputFromNodes || run2.finalOutput;
-            return finalOutput ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-[8px] bg-gray-50 flex items-center gap-[8px] w-full border-t border-gray-200", "data-id": `debug_panel_run_final_output_${run2.runId}`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "flex-shrink-0", "data-id": `debug_panel_run_final_output_icon_${run2.runId}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.8277 1.33398C11.3643 1.33398 11.8072 1.33396 12.168 1.36343C12.5428 1.39405 12.8872 1.45978 13.2108 1.62463C13.7125 1.8803 14.1205 2.28825 14.3762 2.79001C14.541 3.11356 14.6067 3.45803 14.6374 3.83276C14.6668 4.19356 14.6668 4.63646 14.6668 5.1731V9.0235C14.6668 9.47003 14.6668 9.83861 14.6462 10.1404C14.6249 10.4532 14.5792 10.7426 14.4638 11.0211C14.1932 11.6746 13.674 12.1937 13.0206 12.4643C12.7421 12.5797 12.4527 12.6254 12.1399 12.6467C11.8381 12.6673 11.4695 12.6673 11.023 12.6673H11.0002C10.6424 12.6673 10.5714 12.6715 10.5136 12.6852C10.4129 12.7089 10.3191 12.7558 10.2397 12.8221C10.1941 12.8602 10.1481 12.9145 9.9335 13.2007L8.94888 14.5135C8.88665 14.5965 8.81628 14.6904 8.74857 14.7657C8.6739 14.8487 8.54979 14.971 8.36264 15.0438C8.1295 15.1344 7.87083 15.1344 7.6377 15.0438C7.45054 14.971 7.32641 14.8487 7.25174 14.7657C7.18403 14.6904 7.11368 14.5965 7.05145 14.5135L6.06683 13.2007C5.85221 12.9145 5.80624 12.8602 5.76065 12.8221C5.68119 12.7558 5.58739 12.7089 5.48666 12.6852C5.42887 12.6715 5.35786 12.6673 5.00015 12.6673H4.9773C4.53078 12.6673 4.16221 12.6673 3.86047 12.6467C3.54762 12.6254 3.25822 12.5797 2.97968 12.4643C2.32627 12.1937 1.80712 11.6746 1.53647 11.0211C1.42109 10.7426 1.37541 10.4532 1.35407 10.1404C1.33348 9.83861 1.33349 9.47003 1.3335 9.0235V5.17313C1.33349 4.63648 1.33347 4.19356 1.36295 3.83276C1.39356 3.45803 1.45929 3.11356 1.62415 2.79001C1.87981 2.28825 2.28776 1.8803 2.78952 1.62463C3.11308 1.45978 3.45755 1.39405 3.83228 1.36343C4.19307 1.33396 4.63599 1.33398 5.17264 1.33398H10.8277ZM6.66653 4.33398C6.29835 4.334 5.99988 4.63246 5.99988 5.00064C5.99988 5.36882 6.29835 5.66729 6.66653 5.6673H8.39041L5.52847 8.52924C5.26813 8.78958 5.26813 9.2117 5.52847 9.47205C5.78882 9.73239 6.21093 9.73239 6.47128 9.47205L9.33322 6.61011V8.33398C9.33323 8.70217 9.6317 9.00064 9.99988 9.00064C10.3681 9.00064 10.6665 8.70217 10.6665 8.33398V5.00064C10.6665 4.63821 10.3773 4.34333 10.0171 4.3342L9.99988 4.33398H6.66653Z", fill: "#155EEF" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 text-xs text-gray-900 truncate", title: convertToString(finalOutput), "data-id": `debug_panel_run_final_output_text_${run2.runId}`, children: convertToString(finalOutput) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] flex-shrink-0", "data-id": `debug_panel_run_final_output_metadata_${run2.runId}`, children: [
-                run2.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", "data-id": `debug_panel_run_final_output_duration_${run2.runId}`, children: [
+            return finalOutput ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-[8px] bg-gray-50 flex items-center gap-[8px] w-full border-t border-gray-200", "data-test-id": `debug_panel_run_final_output_${run2.runId}`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "flex-shrink-0", "data-test-id": `debug_panel_run_final_output_icon_${run2.runId}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.8277 1.33398C11.3643 1.33398 11.8072 1.33396 12.168 1.36343C12.5428 1.39405 12.8872 1.45978 13.2108 1.62463C13.7125 1.8803 14.1205 2.28825 14.3762 2.79001C14.541 3.11356 14.6067 3.45803 14.6374 3.83276C14.6668 4.19356 14.6668 4.63646 14.6668 5.1731V9.0235C14.6668 9.47003 14.6668 9.83861 14.6462 10.1404C14.6249 10.4532 14.5792 10.7426 14.4638 11.0211C14.1932 11.6746 13.674 12.1937 13.0206 12.4643C12.7421 12.5797 12.4527 12.6254 12.1399 12.6467C11.8381 12.6673 11.4695 12.6673 11.023 12.6673H11.0002C10.6424 12.6673 10.5714 12.6715 10.5136 12.6852C10.4129 12.7089 10.3191 12.7558 10.2397 12.8221C10.1941 12.8602 10.1481 12.9145 9.9335 13.2007L8.94888 14.5135C8.88665 14.5965 8.81628 14.6904 8.74857 14.7657C8.6739 14.8487 8.54979 14.971 8.36264 15.0438C8.1295 15.1344 7.87083 15.1344 7.6377 15.0438C7.45054 14.971 7.32641 14.8487 7.25174 14.7657C7.18403 14.6904 7.11368 14.5965 7.05145 14.5135L6.06683 13.2007C5.85221 12.9145 5.80624 12.8602 5.76065 12.8221C5.68119 12.7558 5.58739 12.7089 5.48666 12.6852C5.42887 12.6715 5.35786 12.6673 5.00015 12.6673H4.9773C4.53078 12.6673 4.16221 12.6673 3.86047 12.6467C3.54762 12.6254 3.25822 12.5797 2.97968 12.4643C2.32627 12.1937 1.80712 11.6746 1.53647 11.0211C1.42109 10.7426 1.37541 10.4532 1.35407 10.1404C1.33348 9.83861 1.33349 9.47003 1.3335 9.0235V5.17313C1.33349 4.63648 1.33347 4.19356 1.36295 3.83276C1.39356 3.45803 1.45929 3.11356 1.62415 2.79001C1.87981 2.28825 2.28776 1.8803 2.78952 1.62463C3.11308 1.45978 3.45755 1.39405 3.83228 1.36343C4.19307 1.33396 4.63599 1.33398 5.17264 1.33398H10.8277ZM6.66653 4.33398C6.29835 4.334 5.99988 4.63246 5.99988 5.00064C5.99988 5.36882 6.29835 5.66729 6.66653 5.6673H8.39041L5.52847 8.52924C5.26813 8.78958 5.26813 9.2117 5.52847 9.47205C5.78882 9.73239 6.21093 9.73239 6.47128 9.47205L9.33322 6.61011V8.33398C9.33323 8.70217 9.6317 9.00064 9.99988 9.00064C10.3681 9.00064 10.6665 8.70217 10.6665 8.33398V5.00064C10.6665 4.63821 10.3773 4.34333 10.0171 4.3342L9.99988 4.33398H6.66653Z", fill: "#155EEF" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 text-xs text-gray-900 truncate", title: convertToString(finalOutput), "data-test-id": `debug_panel_run_final_output_text_${run2.runId}`, children: convertToString(finalOutput) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] flex-shrink-0", "data-test-id": `debug_panel_run_final_output_metadata_${run2.runId}`, children: [
+                run2.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", "data-test-id": `debug_panel_run_final_output_duration_${run2.runId}`, children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "w-[12px] h-[12px] text-gray-400" }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-gray-500 whitespace-nowrap", children: formatDuration(run2.duration) })
                 ] }),
-                run2.totalTokens && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-gray-500 whitespace-nowrap", "data-id": `debug_panel_run_final_output_tokens_${run2.runId}`, children: formatTokens(run2.totalTokens) })
+                run2.totalTokens && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-gray-500 whitespace-nowrap", "data-test-id": `debug_panel_run_final_output_tokens_${run2.runId}`, children: formatTokens(run2.totalTokens) })
               ] })
             ] }) : null;
           })()
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2 py-1", "data-id": `debug_panel_run_footer_${run2.runId}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400", "data-id": `debug_panel_run_footer_id_${run2.runId}`, children: run2.runId }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": `debug_panel_run_footer_actions_${run2.runId}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2 py-1", "data-test-id": `debug_panel_run_footer_${run2.runId}`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400", "data-test-id": `debug_panel_run_footer_id_${run2.runId}`, children: run2.runId }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-test-id": `debug_panel_run_footer_actions_${run2.runId}`, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               CopyButton$1,
               {
@@ -114166,7 +114198,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                     }
                   }
                 },
-                "data-id": `debug_panel_run_footer_external_link_${run2.runId}`,
+                "data-test-id": `debug_panel_run_footer_external_link_${run2.runId}`,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3 h-3 text-gray-400" })
               }
             )
@@ -141019,7 +141051,7 @@ ${code2}
           backgroundColor: config2.bgColor,
           borderColor: config2.borderColor
         },
-        "data-id": `md-editor-variable-${variableType}-${path}`,
+        "data-test-id": `md-editor-variable-${variableType}-${path}`,
         "data-variable-type": variableType,
         "data-path": path,
         title: displayName || fullSyntax,
@@ -141244,7 +141276,7 @@ ${code2}
           backgroundColor: config2.bgColor,
           color: config2.color
         },
-        "data-id": `md-editor-mention-${mentionType}-${name.toLowerCase().replace(/\s+/g, "-")}`,
+        "data-test-id": `md-editor-mention-${mentionType}-${name.toLowerCase().replace(/\s+/g, "-")}`,
         "data-mention-type": mentionType,
         "data-name": name,
         title: name,
@@ -141315,9 +141347,9 @@ ${code2}
         },
         id: {
           default: "",
-          parseHTML: (element) => element.getAttribute("data-id"),
+          parseHTML: (element) => element.getAttribute("data-test-id"),
           renderHTML: (attributes) => ({
-            "data-id": attributes["id"]
+            "data-test-id": attributes["id"]
           })
         },
         name: {
@@ -142127,7 +142159,7 @@ ${code2}
         {
           ref: menuRef,
           className: "k-md-editor-slash-menu w-[300px] max-h-[360px] bg-white rounded-lg shadow-lg overflow-hidden flex flex-col",
-          "data-id": "md-editor-slash-menu",
+          "data-test-id": "md-editor-slash-menu",
           children: [
             hasBlockItems && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2 pt-2 pb-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[11px] font-semibold text-gray-400 uppercase tracking-wide pl-1", children: "Blocks" }) }),
@@ -142149,7 +142181,7 @@ ${code2}
                         title: `${item.label}${item.shortcut ? ` (${item.shortcut})` : ""}`,
                         className: `flex items-center justify-center w-9 h-9 p-0 border-0 rounded-lg cursor-pointer transition-all duration-150 shrink-0 ${isSelected ? "bg-gray-200 text-gray-800" : "bg-gray-50 text-gray-500 hover:bg-gray-200 hover:text-gray-800"}`,
                         onMouseEnter: () => setSelectedIndex(index),
-                        "data-id": `md-editor-slash-block-${item.id}`,
+                        "data-test-id": `md-editor-slash-block-${item.id}`,
                         children: item.icon
                       },
                       item.id
@@ -142168,7 +142200,7 @@ ${code2}
                     onClick: handleBack,
                     className: "flex items-center justify-center w-6 h-6 p-0 border-0 bg-gray-100 rounded cursor-pointer text-gray-500 hover:bg-gray-200",
                     "aria-label": "Go back",
-                    "data-id": "md-editor-slash-back-btn",
+                    "data-test-id": "md-editor-slash-back-btn",
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { size: 16 })
                   }
                 ),
@@ -142188,7 +142220,7 @@ ${code2}
                     },
                     placeholder: "Search...",
                     className: "flex-1 bg-transparent text-sm border-0 outline-none text-gray-700 placeholder:text-gray-400",
-                    "data-id": "md-editor-slash-search"
+                    "data-test-id": "md-editor-slash-search"
                   }
                 )
               ] }) })
@@ -142223,7 +142255,7 @@ ${code2}
                           title: isDisabled ? disabledReason : void 0,
                           className: `flex items-center gap-2.5 w-full py-2 px-2.5 border-0 rounded-md text-left transition-colors duration-100 ${isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${isSelected && !isDisabled ? "bg-gray-100" : "bg-transparent hover:bg-gray-100"}`,
                           onMouseEnter: () => !isDisabled && setSelectedIndex(adjustedIndex),
-                          "data-id": `md-editor-slash-item-${"id" in item ? item.id : label.toLowerCase().replace(/\s+/g, "-")}`,
+                          "data-test-id": `md-editor-slash-item-${"id" in item ? item.id : label.toLowerCase().replace(/\s+/g, "-")}`,
                           children: [
                             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 shrink-0 ${isDisabled ? "text-gray-300" : "text-gray-500"}`, children: getIcon(item) }),
                             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-[13px] font-medium truncate ${isDisabled ? "text-gray-400" : "text-gray-800"}`, children: label }) }),
@@ -142867,7 +142899,7 @@ ${code2}
         ref: menuRef,
         className: "k-md-editor-variable-menu fixed w-[280px] max-h-[320px] bg-white rounded-lg shadow-lg z-[9999] overflow-hidden flex flex-col",
         style: { top: adjustedPosition.top, left: adjustedPosition.left },
-        "data-id": "md-editor-variable-menu",
+        "data-test-id": "md-editor-variable-menu",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
             activeCategory && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -142877,7 +142909,7 @@ ${code2}
                 onClick: handleBack,
                 className: "flex items-center justify-center w-6 h-6 p-0 border-0 bg-gray-100 rounded cursor-pointer text-gray-500 hover:bg-gray-200",
                 "aria-label": "Go back",
-                "data-id": "md-editor-variable-back-btn",
+                "data-test-id": "md-editor-variable-back-btn",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { size: 16 })
               }
             ),
@@ -142905,7 +142937,7 @@ ${code2}
                   },
                   placeholder: "memory.store.field",
                   className: "flex-1 border border-blue-300 bg-white rounded px-2 py-1.5 outline-none text-[13px] text-gray-700 font-mono focus:border-blue-500 focus:ring-1 focus:ring-blue-500",
-                  "data-id": "md-editor-custom-variable-input"
+                  "data-test-id": "md-editor-custom-variable-input"
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[14px] font-mono text-gray-500", children: "}}" })
@@ -142943,7 +142975,7 @@ ${code2}
                   onChange: (e) => onQueryChange(e.target.value),
                   placeholder: "Search...",
                   className: "flex-1 border-0 bg-transparent outline-none text-[13px] text-gray-700",
-                  "data-id": "md-editor-variable-search"
+                  "data-test-id": "md-editor-variable-search"
                 }
               )
             ] }) }),
@@ -142965,7 +142997,7 @@ ${code2}
                   onClick: () => handleItemClick(item),
                   className: `flex items-center gap-2.5 w-full py-2 px-2.5 border-0 rounded-md text-left cursor-pointer transition-colors duration-100 ${index === selectedIndex ? "bg-gray-100" : "bg-transparent hover:bg-gray-100"}`,
                   onMouseEnter: () => setSelectedIndex(index),
-                  "data-id": `md-editor-variable-item-${isCategory ? item.id : item.id}`,
+                  "data-test-id": `md-editor-variable-item-${isCategory ? item.id : item.id}`,
                   children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 text-gray-500 shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { size: 16 }) }),
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
@@ -142985,7 +143017,7 @@ ${code2}
                 onClick: () => handleItemClick("custom"),
                 className: `flex items-center gap-2.5 w-full py-2 px-2.5 border-0 rounded-md text-left cursor-pointer transition-colors duration-100 border-t border-gray-100 mt-1 pt-2 ${selectedIndex === items.length ? "bg-blue-50" : "bg-transparent hover:bg-blue-50"}`,
                 onMouseEnter: () => setSelectedIndex(items.length),
-                "data-id": "md-editor-variable-custom",
+                "data-test-id": "md-editor-variable-custom",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-md bg-blue-100 text-blue-600 shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 16 }) }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
@@ -143069,7 +143101,7 @@ ${code2}
       "div",
       {
         className: "k-md-editor-link-editor flex items-center gap-1.5 p-1 bg-gray-800 rounded-lg shadow-lg min-w-[280px]",
-        "data-id": "md-editor-link-editor",
+        "data-test-id": "md-editor-link-editor",
         onMouseDown: (e) => e.stopPropagation(),
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 bg-gray-700 rounded-md px-2 gap-1.5", children: [
@@ -143084,7 +143116,7 @@ ${code2}
                 onKeyDown: handleKeyDown2,
                 placeholder: "Enter URL...",
                 className: "flex-1 h-8 bg-transparent border-none outline-none text-gray-100 text-[13px] font-inherit min-w-[150px]",
-                "data-id": "md-editor-link-input"
+                "data-test-id": "md-editor-link-input"
               }
             )
           ] }),
@@ -143095,7 +143127,7 @@ ${code2}
               onClick: handleOpenLink,
               title: "Open link",
               className: "flex items-center justify-center w-7 h-7 p-0 border-0 rounded-md cursor-pointer bg-transparent text-gray-400 transition-all duration-150 hover:bg-gray-700 hover:text-blue-400",
-              "data-id": "md-editor-link-open",
+              "data-test-id": "md-editor-link-open",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { size: 14 })
             }
           ),
@@ -143106,7 +143138,7 @@ ${code2}
               onClick: handleRemoveLink,
               title: "Remove link",
               className: "flex items-center justify-center w-7 h-7 p-0 border-0 rounded-md cursor-pointer bg-transparent text-gray-400 transition-all duration-150 hover:bg-gray-700 hover:text-red-500",
-              "data-id": "md-editor-link-remove",
+              "data-test-id": "md-editor-link-remove",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(Link2Off, { size: 14 })
             }
           ),
@@ -143117,7 +143149,7 @@ ${code2}
               onClick: handleSubmit,
               title: "Apply link",
               className: "flex items-center justify-center w-7 h-7 p-0 border-0 rounded-md cursor-pointer bg-blue-500 text-white transition-all duration-150 hover:bg-blue-600",
-              "data-id": "md-editor-link-apply",
+              "data-test-id": "md-editor-link-apply",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { size: 14 })
             }
           ),
@@ -143128,7 +143160,7 @@ ${code2}
               onClick: onClose,
               title: "Cancel",
               className: "flex items-center justify-center w-7 h-7 p-0 border-0 rounded-md cursor-pointer bg-transparent text-gray-400 transition-all duration-150 hover:bg-gray-700 hover:text-white",
-              "data-id": "md-editor-link-cancel",
+              "data-test-id": "md-editor-link-cancel",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { size: 14 })
             }
           )
@@ -143255,7 +143287,7 @@ ${code2}
       "div",
       {
         className: "k-md-editor-inline-toolbar flex items-center gap-0.5 p-1 bg-gray-800 rounded-lg shadow-lg pointer-events-auto",
-        "data-id": "md-editor-inline-toolbar",
+        "data-test-id": "md-editor-inline-toolbar",
         onMouseDown: (e) => {
           e.stopPropagation();
         },
@@ -143279,7 +143311,7 @@ ${code2}
                   title: `${item.label}${item.shortcut ? ` (${item.shortcut})` : ""}`,
                   "aria-label": item.label,
                   "aria-pressed": isActive2,
-                  "data-id": `md-editor-toolbar-${item.id}`,
+                  "data-test-id": `md-editor-toolbar-${item.id}`,
                   children: item.icon
                 }
               ),
@@ -143299,7 +143331,7 @@ ${code2}
               className: `flex items-center justify-center w-8 h-8 p-0 border-0 rounded-md cursor-pointer transition-colors duration-150 pointer-events-auto ${isLinkActive ? "bg-gray-700 text-blue-400" : "bg-transparent text-gray-400 hover:bg-gray-700 hover:text-blue-400"}`,
               "aria-label": "Link",
               "aria-pressed": isLinkActive,
-              "data-id": "md-editor-toolbar-link",
+              "data-test-id": "md-editor-toolbar-link",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(Link$1, { size: 16 })
             }
           ),
@@ -143317,7 +143349,7 @@ ${code2}
                 title: "Refine with AI (⌘⇧R)",
                 className: "k-md-editor-inline-toolbar__ai-btn flex items-center justify-center gap-1 h-8 px-2.5 border-0 rounded-md cursor-pointer transition-colors duration-150 bg-transparent text-violet-400 text-xs font-medium pointer-events-auto hover:bg-violet-900 hover:text-white",
                 "aria-label": "Refine with AI",
-                "data-id": "md-editor-toolbar-ai-refine",
+                "data-test-id": "md-editor-toolbar-ai-refine",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { size: 14 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "AI" })
@@ -143338,7 +143370,7 @@ ${code2}
               title: "Delete selection",
               className: "flex items-center justify-center w-8 h-8 p-0 border-0 rounded-md cursor-pointer transition-colors duration-150 bg-transparent text-gray-400 pointer-events-auto hover:bg-red-500/20 hover:text-red-400",
               "aria-label": "Delete",
-              "data-id": "md-editor-toolbar-delete",
+              "data-test-id": "md-editor-toolbar-delete",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { size: 16 })
             }
           )
@@ -143635,7 +143667,7 @@ ${code2}
         {
           className: "k-md-editor-drag-handle-container absolute left-1 flex items-center gap-0.5 z-10 opacity-100 pointer-events-auto h-6 px-1.5 py-1 -ml-1 mt-0.5 rounded-md hover:bg-black/[0.03]",
           style: { top: handleTop },
-          "data-id": "md-editor-drag-handle",
+          "data-test-id": "md-editor-drag-handle",
           onMouseEnter: () => {
           },
           onMouseLeave: () => {
@@ -143655,7 +143687,7 @@ ${code2}
                 className: "flex items-center justify-center w-[22px] h-[22px] p-0 border-0 rounded bg-transparent text-gray-400 cursor-pointer transition-all duration-150 hover:bg-black/[0.08] hover:text-gray-700",
                 onClick: handleAddClick,
                 title: "Add block below",
-                "data-id": "md-editor-add-block-btn",
+                "data-test-id": "md-editor-add-block-btn",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 14 })
               }
             ),
@@ -143666,7 +143698,7 @@ ${code2}
                 draggable: "true",
                 onDragStart: handleDragStart,
                 title: "Drag to reorder",
-                "data-id": "md-editor-drag-grip",
+                "data-test-id": "md-editor-drag-grip",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(GripVertical, { size: 14 })
               }
             )
@@ -143712,7 +143744,7 @@ ${code2}
       "div",
       {
         className: `inline-flex items-center gap-1.5 px-2 py-1.5 rounded-lg shadow-lg z-50 ${isDark ? "bg-gray-800 border border-gray-700" : "bg-white border border-gray-200"}`,
-        "data-id": "md-editor-table-toolbar",
+        "data-test-id": "md-editor-table-toolbar",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[10px] font-medium uppercase tracking-wide mr-1 ${isDark ? "text-gray-500" : "text-gray-400"}`, children: "Row" }),
@@ -143723,7 +143755,7 @@ ${code2}
                 onClick: addRowBefore2,
                 className: btnBase,
                 title: "Add row above",
-                "data-id": "md-editor-table-add-row-above",
+                "data-test-id": "md-editor-table-add-row-above",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { size: 14 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 10 })
@@ -143737,7 +143769,7 @@ ${code2}
                 onClick: addRowAfter2,
                 className: btnBase,
                 title: "Add row below",
-                "data-id": "md-editor-table-add-row-below",
+                "data-test-id": "md-editor-table-add-row-below",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { size: 14 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 10 })
@@ -143751,7 +143783,7 @@ ${code2}
                 onClick: deleteRow2,
                 className: btnDanger,
                 title: "Delete row",
-                "data-id": "md-editor-table-delete-row",
+                "data-test-id": "md-editor-table-delete-row",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { size: 14 })
               }
             )
@@ -143766,7 +143798,7 @@ ${code2}
                 onClick: addColumnBefore2,
                 className: btnBase,
                 title: "Add column left",
-                "data-id": "md-editor-table-add-col-left",
+                "data-test-id": "md-editor-table-add-col-left",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { size: 14 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 10 })
@@ -143780,7 +143812,7 @@ ${code2}
                 onClick: addColumnAfter2,
                 className: btnBase,
                 title: "Add column right",
-                "data-id": "md-editor-table-add-col-right",
+                "data-test-id": "md-editor-table-add-col-right",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { size: 14 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 10 })
@@ -143794,7 +143826,7 @@ ${code2}
                 onClick: deleteColumn2,
                 className: btnDanger,
                 title: "Delete column",
-                "data-id": "md-editor-table-delete-col",
+                "data-test-id": "md-editor-table-delete-col",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { size: 14 })
               }
             )
@@ -143807,7 +143839,7 @@ ${code2}
               onClick: deleteTable2,
               className: `${btnDanger} shrink-0`,
               title: "Delete table",
-              "data-id": "md-editor-table-delete",
+              "data-test-id": "md-editor-table-delete",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { size: 14 })
             }
           )
@@ -144284,7 +144316,7 @@ ${code2}
       "div",
       {
         className: `shrink-0 rounded-xl mb-2 border overflow-hidden transition-all duration-300 ${isDark ? "bg-gray-800/80 border-white/10 backdrop-blur-sm" : "bg-white/90 border-black/[0.08] backdrop-blur-sm shadow-sm"}`,
-        "data-id": "md-editor-ai-tips-section",
+        "data-test-id": "md-editor-ai-tips-section",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
@@ -144292,7 +144324,7 @@ ${code2}
               type: "button",
               onClick: () => setIsTipsExpanded(!isTipsExpanded),
               className: `w-full flex items-center justify-between px-3.5 py-2 transition-colors ${isDark ? "hover:bg-white/5" : "hover:bg-black/[0.02]"}`,
-              "data-id": "md-editor-ai-tips-toggle",
+              "data-test-id": "md-editor-ai-tips-toggle",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex items-center justify-center w-5 h-5 rounded-md ${isDark ? "bg-amber-500/20 text-amber-400" : "bg-amber-500/15 text-amber-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { size: 12 }) }),
@@ -144412,7 +144444,7 @@ ${code2}
               className: "flex items-center justify-center w-8 h-8 rounded-lg bg-white/15 text-white cursor-pointer transition-all hover:bg-white/25 hover:scale-105",
               onClick: handleReset,
               title: "Start over",
-              "data-id": "md-editor-ai-reset-btn",
+              "data-test-id": "md-editor-ai-reset-btn",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { size: 16 })
             }
           ),
@@ -144422,7 +144454,7 @@ ${code2}
               className: "flex items-center justify-center w-8 h-8 rounded-lg bg-white/15 text-white cursor-pointer transition-all hover:bg-red-500/80",
               onClick: onClose,
               title: "Close",
-              "data-id": "md-editor-ai-close-btn",
+              "data-test-id": "md-editor-ai-close-btn",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { size: 18 })
             }
           )
@@ -144436,7 +144468,7 @@ ${code2}
             "div",
             {
               className: `relative flex items-start gap-2 w-full px-3 py-2.5 rounded-lg text-left mt-2 transition-all duration-300 border ${isDark ? "bg-white/5 border-white/10" : "bg-black/[0.03] border-black/5"} ${showSelectionHighlight ? "k-md-editor-snake-border" : ""}`,
-              "data-id": "md-editor-ai-selection-box",
+              "data-test-id": "md-editor-ai-selection-box",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `shrink-0 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide rounded-md transition-all duration-300 ${showSelectionHighlight ? "text-white bg-gradient-to-r from-violet-500 to-indigo-500 scale-105 shadow-md" : isDark ? "text-violet-400 bg-violet-500/20" : "text-violet-600 bg-violet-500/10"}`, children: context.type === "selection" ? "Selection" : "Full" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs leading-snug break-words ${isDark ? "text-gray-300" : "text-gray-600"} ${isContentExpanded ? "" : "line-clamp-4"}`, children: context.originalText || "(No content selected)" }) }),
@@ -144447,7 +144479,7 @@ ${code2}
                     onClick: () => setIsContentExpanded(!isContentExpanded),
                     className: `shrink-0 p-1 rounded transition-all duration-200 ${isDark ? "text-gray-500 hover:text-gray-300 hover:bg-white/10" : "text-gray-400 hover:text-gray-600 hover:bg-black/5"}`,
                     title: isContentExpanded ? "Show less" : "Show more",
-                    "data-id": "md-editor-ai-expand-btn",
+                    "data-test-id": "md-editor-ai-expand-btn",
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                       ChevronDown,
                       {
@@ -144472,13 +144504,13 @@ ${code2}
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: messagesEndRef })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex flex-col gap-2.5 px-3.5 py-3 border-t shrink-0 rounded-b-xl ${isDark ? "bg-gradient-to-b from-transparent to-black/20 border-white/5" : "bg-gradient-to-b from-transparent to-black/[0.02] border-black/5"}`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-1.5", "data-id": "md-editor-ai-quick-actions", children: QUICK_ACTIONS.map((action) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-1.5", "data-test-id": "md-editor-ai-quick-actions", children: QUICK_ACTIONS.map((action) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
             className: `flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-full cursor-pointer transition-all disabled:opacity-50 disabled:cursor-not-allowed ${isDark ? "bg-gray-700 text-gray-300 hover:bg-violet-500 hover:text-white" : "bg-gray-100 text-gray-600 hover:bg-violet-500 hover:text-white"} active:scale-95`,
             onClick: () => handleQuickAction(action),
             disabled: isLoading,
-            "data-id": `md-editor-ai-action-${action.id}`,
+            "data-test-id": `md-editor-ai-action-${action.id}`,
             children: [
               action.icon,
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: action.label })
@@ -144491,7 +144523,7 @@ ${code2}
           {
             ref: mentionMenuRef,
             className: `rounded-lg border shadow-lg overflow-hidden max-h-[280px] flex flex-col ${isDark ? "bg-gray-800 border-gray-600" : "bg-white border-gray-200"}`,
-            "data-id": "md-editor-ai-mention-menu",
+            "data-test-id": "md-editor-ai-mention-menu",
             children: [
               mentionQuery && !selectedCategory && searchResults.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-1 overflow-y-auto", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `px-3 py-1.5 text-[10px] font-medium uppercase tracking-wide ${isDark ? "text-gray-500" : "text-gray-400"}`, children: "Results" }),
@@ -144502,7 +144534,7 @@ ${code2}
                     {
                       className: `w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${index === selectedMentionIndex ? isDark ? "bg-violet-500/20 text-violet-300" : "bg-violet-50 text-violet-700" : isDark ? "text-gray-300 hover:bg-white/5" : "text-gray-700 hover:bg-gray-50"}`,
                       onClick: () => insertMentionItem(item, item.category),
-                      "data-id": `md-editor-ai-mention-${isVariable ? item.path : item.id}`,
+                      "data-test-id": `md-editor-ai-mention-${isVariable ? item.path : item.id}`,
                       children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs px-1.5 py-0.5 rounded ${isDark ? "bg-gray-700 text-gray-400" : "bg-gray-100 text-gray-500"}`, children: item.category }),
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium truncate", children: item.name }),
@@ -144528,7 +144560,7 @@ ${code2}
                     {
                       className: `w-full flex items-center justify-between gap-2 px-3 py-2 text-left transition-colors ${index === selectedMentionIndex ? isDark ? "bg-violet-500/20 text-violet-300" : "bg-violet-50 text-violet-700" : isDark ? "text-gray-300 hover:bg-white/5" : "text-gray-700 hover:bg-gray-50"}`,
                       onClick: () => handleCategorySelect(category.type),
-                      "data-id": `md-editor-ai-mention-category-${category.type}`,
+                      "data-test-id": `md-editor-ai-mention-category-${category.type}`,
                       children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
                           category.icon,
@@ -144553,7 +144585,7 @@ ${code2}
                     {
                       className: `flex items-center gap-1 text-xs transition-colors ${isDark ? "text-gray-400 hover:text-gray-200" : "text-gray-500 hover:text-gray-700"}`,
                       onClick: handleBackToCategories,
-                      "data-id": "md-editor-ai-mention-back",
+                      "data-test-id": "md-editor-ai-mention-back",
                       children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "rotate-180" }),
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Back" })
@@ -144586,7 +144618,7 @@ ${code2}
                           (_a2 = inputRef.current) == null ? void 0 : _a2.dispatchEvent(new KeyboardEvent("keydown", { key: e.key, bubbles: true }));
                         }
                       },
-                      "data-id": "md-editor-ai-mention-search"
+                      "data-test-id": "md-editor-ai-mention-search"
                     }
                   )
                 ] }) }),
@@ -144597,7 +144629,7 @@ ${code2}
                     {
                       className: `w-full flex flex-col gap-0.5 px-3 py-2 text-left transition-colors ${index === selectedMentionIndex ? isDark ? "bg-violet-500/20 text-violet-300" : "bg-violet-50 text-violet-700" : isDark ? "text-gray-300 hover:bg-white/5" : "text-gray-700 hover:bg-gray-50"}`,
                       onClick: () => insertMentionItem(item, selectedCategory || void 0),
-                      "data-id": `md-editor-ai-mention-item-${isVariable ? item.path : item.id}`,
+                      "data-test-id": `md-editor-ai-mention-item-${isVariable ? item.path : item.id}`,
                       children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: item.name }),
                         isVariable ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs truncate ${isDark ? "text-gray-500" : "text-gray-400"}`, children: `{{${selectedCategory}.${item.path}}}` }) : item.description ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs truncate ${isDark ? "text-gray-500" : "text-gray-400"}`, children: item.description }) : null
@@ -144610,7 +144642,7 @@ ${code2}
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-end gap-2 p-1 rounded-xl border-[1.5px] transition-all ${isDark ? "bg-gray-800 border-gray-600 focus-within:border-violet-500 focus-within:shadow-[0_0_0_4px_rgba(139,92,246,0.2)]" : "bg-white border-gray-200 focus-within:border-violet-500 focus-within:shadow-[0_0_0_4px_rgba(139,92,246,0.1)]"}`, "data-id": "md-editor-ai-input-container", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex items-end gap-2 p-1 rounded-xl border-[1.5px] transition-all ${isDark ? "bg-gray-800 border-gray-600 focus-within:border-violet-500 focus-within:shadow-[0_0_0_4px_rgba(139,92,246,0.2)]" : "bg-white border-gray-200 focus-within:border-violet-500 focus-within:shadow-[0_0_0_4px_rgba(139,92,246,0.1)]"}`, "data-test-id": "md-editor-ai-input-container", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "textarea",
             {
@@ -144622,7 +144654,7 @@ ${code2}
               onKeyDown: handleKeyDown2,
               rows: 1,
               disabled: isLoading,
-              "data-id": "md-editor-ai-input"
+              "data-test-id": "md-editor-ai-input"
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -144636,7 +144668,7 @@ ${code2}
               },
               disabled: !inputValue.trim() || isLoading,
               title: "Send",
-              "data-id": "md-editor-ai-send-btn",
+              "data-test-id": "md-editor-ai-send-btn",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 18 })
             }
           )
@@ -144649,7 +144681,7 @@ ${code2}
           "div",
           {
             className: "flex flex-col w-[400px] min-w-[340px] max-w-[500px] h-[calc(100%-24px)] m-3 mr-3 ml-0 shrink-0 animate-[ai-panel-slide-in_0.3s_cubic-bezier(0.4,0,0.2,1)]",
-            "data-id": "md-editor-ai-panel-side",
+            "data-test-id": "md-editor-ai-panel-side",
             children: [
               tipsContent,
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-1 min-h-0 border rounded-2xl overflow-hidden ${isDark ? "border-white/10 shadow-[-4px_0_32px_rgba(0,0,0,0.4)]" : "border-black/[0.08] shadow-[-4px_0_32px_rgba(0,0,0,0.12)]"}`, children: panelContent })
@@ -144657,13 +144689,13 @@ ${code2}
           }
         );
       case "inline-popup":
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center", "data-id": "md-editor-ai-panel-popup", children: [
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center", "data-test-id": "md-editor-ai-panel-popup", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               className: "absolute inset-0 bg-black/60 backdrop-blur-sm animate-[ai-backdrop-in_0.2s_ease-out]",
               onClick: onClose,
-              "data-id": "md-editor-ai-panel-backdrop"
+              "data-test-id": "md-editor-ai-panel-backdrop"
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-[90%] max-w-[600px] max-h-[80vh] flex flex-col gap-2 animate-[ai-popup-scale-in_0.3s_cubic-bezier(0.4,0,0.2,1)]", children: [
@@ -144672,19 +144704,19 @@ ${code2}
           ] })
         ] });
       case "bottom-drawer":
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[9999] flex flex-col justify-end", "data-id": "md-editor-ai-panel-drawer", children: [
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[9999] flex flex-col justify-end", "data-test-id": "md-editor-ai-panel-drawer", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               className: "absolute inset-0 bg-black/60 backdrop-blur-sm",
               onClick: onClose,
-              "data-id": "md-editor-ai-panel-backdrop"
+              "data-test-id": "md-editor-ai-panel-backdrop"
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full max-h-[70vh] flex flex-col gap-2 px-4 pb-4 animate-[ai-drawer-slide-up_0.4s_cubic-bezier(0.4,0,0.2,1)]", children: [
             tipsContent,
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-h-0 rounded-t-[24px] overflow-hidden shadow-[0_-10px_40px_rgba(0,0,0,0.2)]", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-1 rounded-full mx-auto mt-3 mb-2 ${isDark ? "bg-white/20" : "bg-black/20"}`, "data-id": "md-editor-ai-panel-drawer-handle" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-10 h-1 rounded-full mx-auto mt-3 mb-2 ${isDark ? "bg-white/20" : "bg-black/20"}`, "data-test-id": "md-editor-ai-panel-drawer-handle" }),
               panelContent
             ] })
           ] })
@@ -144694,7 +144726,7 @@ ${code2}
           "div",
           {
             className: "flex flex-col w-[400px] min-w-[340px] max-w-[500px] h-[calc(100%-24px)] m-3 mr-3 ml-0 shrink-0 animate-[ai-panel-slide-in_0.3s_cubic-bezier(0.4,0,0.2,1)]",
-            "data-id": "md-editor-ai-panel",
+            "data-test-id": "md-editor-ai-panel",
             children: [
               tipsContent,
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-1 min-h-0 border rounded-2xl overflow-hidden ${isDark ? "border-white/10 shadow-[-4px_0_32px_rgba(0,0,0,0.4)]" : "border-black/[0.08] shadow-[-4px_0_32px_rgba(0,0,0,0.12)]"}`, children: panelContent })
@@ -144775,14 +144807,14 @@ ${code2}
         ref: menuRef,
         className: "ai-context-menu fixed z-[9999] min-w-[180px] bg-gray-800 rounded-lg shadow-xl p-1 overflow-hidden",
         style: { top: adjustedPosition.y, left: adjustedPosition.x },
-        "data-id": "md-editor-context-menu",
+        "data-test-id": "md-editor-context-menu",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               className: "ai-context-menu__item ai-context-menu__item--ai flex items-center gap-2.5 w-full py-2.5 px-3 border-0 rounded-md cursor-pointer bg-violet-500/10 text-violet-400 text-sm font-medium text-left transition-colors duration-150 hover:bg-violet-500/20",
               onClick: handleAIRefine,
-              "data-id": "md-editor-context-ai-refine",
+              "data-test-id": "md-editor-context-ai-refine",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { size: 16 }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: hasSelection2 ? "Refine Selection with AI" : "Refine with AI" }),
@@ -144797,7 +144829,7 @@ ${code2}
               {
                 className: "ai-context-menu__item flex items-center gap-2.5 w-full py-2 px-3 border-0 rounded-md cursor-pointer bg-transparent text-gray-400 text-sm text-left transition-colors duration-150 hover:bg-gray-700 hover:text-white",
                 onClick: handleCut,
-                "data-id": "md-editor-context-cut",
+                "data-test-id": "md-editor-context-cut",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Scissors, { size: 16 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Cut" }),
@@ -144810,7 +144842,7 @@ ${code2}
               {
                 className: "ai-context-menu__item flex items-center gap-2.5 w-full py-2 px-3 border-0 rounded-md cursor-pointer bg-transparent text-gray-400 text-sm text-left transition-colors duration-150 hover:bg-gray-700 hover:text-white",
                 onClick: handleCopy,
-                "data-id": "md-editor-context-copy",
+                "data-test-id": "md-editor-context-copy",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { size: 16 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Copy" }),
@@ -144824,7 +144856,7 @@ ${code2}
             {
               className: "ai-context-menu__item flex items-center gap-2.5 w-full py-2 px-3 border-0 rounded-md cursor-pointer bg-transparent text-gray-400 text-sm text-left transition-colors duration-150 hover:bg-gray-700 hover:text-white",
               onClick: handlePaste2,
-              "data-id": "md-editor-context-paste",
+              "data-test-id": "md-editor-context-paste",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Clipboard, { size: 16 }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Paste" }),
@@ -145556,7 +145588,7 @@ ${code2}
         [editor, insertVariable, insertMention, openAIRefine, closeAIRefine, toggleRawMode, isRawMode]
       );
       if (!editor) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `k-md-editor k-md-editor--${theme} flex items-center justify-center min-h-[200px] ${className}`, "data-id": "md-editor-loading", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full min-h-[200px] rounded bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%] animate-pulse" }) });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `k-md-editor k-md-editor--${theme} flex items-center justify-center min-h-[200px] ${className}`, "data-test-id": "md-editor-loading", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full min-h-[200px] rounded bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%] animate-pulse" }) });
       }
       const isAIEnabled = mergedAIConfig.enabled && onAIRefine && !readOnly;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -145564,7 +145596,7 @@ ${code2}
         {
           ref: editorContainerRef,
           className: `k-md-editor k-md-editor--${theme} ${readOnly ? "pointer-events-none opacity-80" : ""} ${mergedFeatures.dragDrop ? "k-md-editor--drag-enabled" : ""} ${aiPanelOpen && mergedAIConfig.panelPosition === "side-panel" ? "k-md-editor--ai-panel-open" : ""} ${className}`,
-          "data-id": "md-editor",
+          "data-test-id": "md-editor",
           "data-theme": theme,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "k-md-editor__main flex flex-col flex-1 min-w-0 h-full relative transition-[flex] duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]", children: [
@@ -145667,7 +145699,7 @@ ${code2}
                   onClick: toggleRawMode,
                   className: "absolute top-2 right-2 p-1.5 rounded-md z-10 transition-all duration-200\n                         bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm\n                         border border-gray-200 dark:border-gray-700\n                         hover:bg-gray-100 dark:hover:bg-gray-700\n                         hover:border-gray-300 dark:hover:border-gray-600\n                         text-gray-600 dark:text-gray-400\n                         hover:text-gray-900 dark:hover:text-gray-100\n                         shadow-sm hover:shadow",
                   title: isRawMode ? "Switch to rich editor" : "Switch to raw markdown",
-                  "data-id": "md-editor-raw-toggle",
+                  "data-test-id": "md-editor-raw-toggle",
                   children: isRawMode ? (
                     // Eye icon (switch to rich/preview mode)
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
@@ -145689,7 +145721,7 @@ ${code2}
                     onChange: (e) => handleRawMarkdownChange(e.target.value),
                     className: "k-md-editor__raw-textarea w-full h-full min-h-[200px] p-4 pr-12\n                           font-mono text-sm leading-relaxed resize-none\n                           bg-gray-50 dark:bg-gray-900\n                           text-gray-900 dark:text-gray-100\n                           border-0 focus:outline-none focus:ring-0\n                           placeholder:text-gray-400 dark:placeholder:text-gray-600",
                     placeholder: "Write your markdown here...\n\n# Heading\n## Subheading\n- Bullet point\n1. Numbered list\n**bold** _italic_ `code`",
-                    "data-id": "md-editor-raw-textarea",
+                    "data-test-id": "md-editor-raw-textarea",
                     spellCheck: false
                   }
                 )