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

package/dist/index.js

@@ -4331,10 +4331,10 @@ const MetricCard = ({
         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(
@@ -4352,8 +4352,8 @@ const MetricCard = ({
             ] })
           ] })
         ] }),
-        /* @__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",
             {
@@ -28966,8 +28966,8 @@ const AnalyticsChart = ({
   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,
@@ -29066,10 +29066,10 @@ const AnalyticsChart = ({
         ]
       }
     ) }) }),
-    /* @__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",
@@ -29083,16 +29083,16 @@ const AnalyticsChart = ({
           })
         ] })
       ] }) }),
-      /* @__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)) }) })
     ] })
   ] });
@@ -29179,10 +29179,10 @@ const AnalyticsTable = ({
       /* @__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",
@@ -29192,13 +29192,13 @@ const AnalyticsTable = ({
             value: searchTerm,
             onChange: (e3) => handleSearch(e3.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(
@@ -29209,19 +29209,19 @@ const AnalyticsTable = ({
           ),
           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",
             {
@@ -29230,7 +29230,7 @@ const AnalyticsTable = ({
                 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
@@ -29239,8 +29239,8 @@ const AnalyticsTable = ({
         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",
@@ -29251,14 +29251,14 @@ const AnalyticsTable = ({
         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"
           }
         ),
@@ -29276,7 +29276,7 @@ const AnalyticsTable = ({
                 "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
@@ -29288,13 +29288,13 @@ const AnalyticsTable = ({
             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";
@@ -29588,21 +29588,21 @@ const AgentListView = ({
     }
     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,
@@ -29611,21 +29611,21 @@ const AgentListView = ({
                 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"
       }
     ) })
@@ -29669,21 +29669,21 @@ const ToolListView = ({
     }
     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,
@@ -29693,24 +29693,24 @@ const ToolListView = ({
                 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"
       }
     ) })
@@ -29850,44 +29850,44 @@ const ModelListView = ({
     }
     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"
       }
     ) })
@@ -30009,7 +30009,7 @@ const RunsSlider = ({
       {
         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(
@@ -30020,42 +30020,42 @@ const RunsSlider = ({
           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),
@@ -30063,26 +30063,26 @@ const RunsSlider = ({
                       "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 ",
@@ -30094,10 +30094,10 @@ const RunsSlider = ({
                   "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,
@@ -30109,23 +30109,23 @@ const RunsSlider = ({
                             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"
                   }
                 ) })
@@ -31743,7 +31743,7 @@ const ViewRenderer = ({
     }
   };
   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,
       {
@@ -32156,7 +32156,7 @@ const SectionControls = ({
     }
     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,
       {
@@ -32184,7 +32184,7 @@ const SectionControls = ({
         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: () => {
@@ -32197,12 +32197,12 @@ const SectionControls = ({
           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",
         {
@@ -32215,7 +32215,7 @@ const SectionControls = ({
             "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]" })
         }
       ),
@@ -32231,7 +32231,7 @@ const SectionControls = ({
             "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]" })
         }
       )
@@ -32845,18 +32845,18 @@ const DashboardSection = ({
         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,
@@ -32864,8 +32864,8 @@ const DashboardSection = ({
             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(
@@ -33034,12 +33034,6 @@ function isValid(dirtyDate) {
   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);
@@ -34529,19 +34523,19 @@ function TailwindDateRangePicker({ className, defaultValue, value, presetLabel:
   });
   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()
       }
     },
     {
@@ -35218,6 +35212,7 @@ const Dashboard = ({
       } else if (typeof value === "string") {
         const daysMap = {
           "24h": 1,
+          "48h": 2,
           "7d": 7,
           "30d": 30,
           "90d": 90
@@ -35251,13 +35246,13 @@ const Dashboard = ({
     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..."
           ] }),
@@ -35336,7 +35331,7 @@ const Dashboard = ({
           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(
@@ -35368,7 +35363,8 @@ class TracingApiService {
     console.log("🔧 TracingApiService initialized:", {
       tracingUrl: config2.tracingUrl,
       projectId: config2.projectId,
-      hasAuth: !!config2.headers.authorization
+      hasAuth: !!config2.headers.authorization,
+      hasDynamicAuth: !!config2.getAuthHeaders
     });
   }
   /**
@@ -35378,15 +35374,36 @@ class TracingApiService {
     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) {
@@ -35773,9 +35790,10 @@ class TracingApiService {
     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();
@@ -104863,11 +104881,11 @@ function TracingListHeader(props) {
         /* @__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(
@@ -106549,27 +106567,16 @@ function TraceTree({
     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]"}` })
+        }
+      )
     ] })
   ] });
 }
@@ -106591,19 +106598,19 @@ const CopyButton$1 = ({
       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"
         };
     }
@@ -106666,7 +106673,7 @@ const CopyButton$1 = ({
         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(
@@ -107800,7 +107807,7 @@ const DataModal = ({
     /* @__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: [
@@ -107810,7 +107817,7 @@ const DataModal = ({
               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(
@@ -107819,7 +107826,7 @@ const DataModal = ({
               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]" })
             }
           )
         ] })
@@ -107840,7 +107847,7 @@ const DataModal = ({
             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]" })
           }
         )
       ] })
@@ -107918,7 +107925,7 @@ const JsonViewer = ({
               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,
@@ -107953,7 +107960,7 @@ const JsonViewer = ({
               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 ",
                   "{",
@@ -108120,17 +108127,17 @@ const DataViewer = ({
     ] });
   }
   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(
@@ -108139,21 +108146,21 @@ const DataViewer = ({
               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(
@@ -108172,7 +108179,7 @@ const DataViewer = ({
         {
           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,
@@ -108200,7 +108207,7 @@ const DataViewer = ({
                 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" })
           ]
         }
       )
@@ -109193,45 +109200,61 @@ function DetailPage({
       ] })
     ] }),
     /* @__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 })
     ] })
   ] });
@@ -110385,7 +110408,8 @@ function TracesListContent(props) {
             newMap.set(traceId, {
               input: detail["input"],
               output: detail["output"],
-              totalCost: detail["totalCost"]
+              totalCost: detail["totalCost"],
+              envId: detail["envId"]
             });
             return newMap;
           });
@@ -110496,7 +110520,14 @@ function TracesListContent(props) {
           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(
@@ -110856,6 +110887,7 @@ function TracesListContent(props) {
         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,
@@ -113427,15 +113459,15 @@ function DebugCard({
   };
   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",
               {
@@ -113449,7 +113481,7 @@ function DebugCard({
                   }
                 },
                 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,
                   {
@@ -113458,18 +113490,18 @@ function DebugCard({
                 )
               }
             ),
-            /* @__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");
@@ -113479,7 +113511,7 @@ function DebugCard({
                       {
                         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
                       }
                     );
@@ -113512,7 +113544,7 @@ function DebugCard({
                         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"
@@ -113522,34 +113554,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,
           {
@@ -113853,14 +113885,14 @@ const DebugPanel = forwardRef(({
     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,
           {
@@ -113886,22 +113918,22 @@ const DebugPanel = forwardRef(({
                 }
               }
             },
-            "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"
@@ -113914,7 +113946,7 @@ const DebugPanel = forwardRef(({
             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"
@@ -113927,7 +113959,7 @@ const DebugPanel = forwardRef(({
             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"
@@ -113935,8 +113967,8 @@ const DebugPanel = forwardRef(({
           }
         )
       ] }),
-      /* @__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",
           {
@@ -113944,7 +113976,7 @@ const DebugPanel = forwardRef(({
             onChange: (e3) => setLiveExpansionMode(e3.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" }),
@@ -113954,18 +113986,18 @@ const DebugPanel = forwardRef(({
         )
       ] })
     ] }),
-    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(
@@ -113986,7 +114018,7 @@ const DebugPanel = forwardRef(({
                 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) => {
@@ -114014,14 +114046,14 @@ const DebugPanel = forwardRef(({
               },
               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),
@@ -114107,22 +114139,22 @@ const DebugPanel = forwardRef(({
           };
           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,
             {
@@ -114148,7 +114180,7 @@ const DebugPanel = forwardRef(({
                   }
                 }
               },
-              "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" })
             }
           )
@@ -141001,7 +141033,7 @@ const VariableChipComponent = ({
         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,
@@ -141226,7 +141258,7 @@ const MentionChipComponent = ({
         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,
@@ -141297,9 +141329,9 @@ const MentionChipExtension = Node$1.create({
       },
       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: {
@@ -142109,7 +142141,7 @@ const SlashMenu = forwardRef(
       {
         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" }) }),
@@ -142131,7 +142163,7 @@ const SlashMenu = forwardRef(
                       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
@@ -142150,7 +142182,7 @@ const SlashMenu = forwardRef(
                   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 })
                 }
               ),
@@ -142170,7 +142202,7 @@ const SlashMenu = forwardRef(
                   },
                   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"
                 }
               )
             ] }) })
@@ -142205,7 +142237,7 @@ const SlashMenu = forwardRef(
                         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 }) }),
@@ -142849,7 +142881,7 @@ const VariableMenu = ({
       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(
@@ -142859,7 +142891,7 @@ const VariableMenu = ({
               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 })
             }
           ),
@@ -142887,7 +142919,7 @@ const VariableMenu = ({
                 },
                 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: "}}" })
@@ -142925,7 +142957,7 @@ const VariableMenu = ({
                 onChange: (e3) => onQueryChange(e3.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"
               }
             )
           ] }) }),
@@ -142947,7 +142979,7 @@ const VariableMenu = ({
                 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: [
@@ -142967,7 +142999,7 @@ const VariableMenu = ({
               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: [
@@ -143051,7 +143083,7 @@ const LinkEditor = ({ editor, initialUrl = "", onClose }) => {
     "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: (e3) => e3.stopPropagation(),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 bg-gray-700 rounded-md px-2 gap-1.5", children: [
@@ -143066,7 +143098,7 @@ const LinkEditor = ({ editor, initialUrl = "", onClose }) => {
               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"
             }
           )
         ] }),
@@ -143077,7 +143109,7 @@ const LinkEditor = ({ editor, initialUrl = "", onClose }) => {
             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 })
           }
         ),
@@ -143088,7 +143120,7 @@ const LinkEditor = ({ editor, initialUrl = "", onClose }) => {
             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 })
           }
         ),
@@ -143099,7 +143131,7 @@ const LinkEditor = ({ editor, initialUrl = "", onClose }) => {
             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 })
           }
         ),
@@ -143110,7 +143142,7 @@ const LinkEditor = ({ editor, initialUrl = "", onClose }) => {
             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 })
           }
         )
@@ -143237,7 +143269,7 @@ const InlineToolbar = ({
     "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: (e3) => {
         e3.stopPropagation();
       },
@@ -143261,7 +143293,7 @@ const InlineToolbar = ({
                 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
               }
             ),
@@ -143281,7 +143313,7 @@ const InlineToolbar = ({
             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 })
           }
         ),
@@ -143299,7 +143331,7 @@ const InlineToolbar = ({
               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" })
@@ -143320,7 +143352,7 @@ const InlineToolbar = ({
             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 })
           }
         )
@@ -143617,7 +143649,7 @@ const DragHandle = ({ editor }) => {
       {
         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: () => {
@@ -143637,7 +143669,7 @@ const DragHandle = ({ editor }) => {
               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 })
             }
           ),
@@ -143648,7 +143680,7 @@ const DragHandle = ({ editor }) => {
               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 })
             }
           )
@@ -143694,7 +143726,7 @@ const TableToolbar = ({ editor, theme = "light" }) => {
     "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" }),
@@ -143705,7 +143737,7 @@ const TableToolbar = ({ editor, theme = "light" }) => {
               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 })
@@ -143719,7 +143751,7 @@ const TableToolbar = ({ editor, theme = "light" }) => {
               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 })
@@ -143733,7 +143765,7 @@ const TableToolbar = ({ editor, theme = "light" }) => {
               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 })
             }
           )
@@ -143748,7 +143780,7 @@ const TableToolbar = ({ editor, theme = "light" }) => {
               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 })
@@ -143762,7 +143794,7 @@ const TableToolbar = ({ editor, theme = "light" }) => {
               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 })
@@ -143776,7 +143808,7 @@ const TableToolbar = ({ editor, theme = "light" }) => {
               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 })
             }
           )
@@ -143789,7 +143821,7 @@ const TableToolbar = ({ editor, theme = "light" }) => {
             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 })
           }
         )
@@ -144266,7 +144298,7 @@ const AIRefinePanel = ({
     "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",
@@ -144274,7 +144306,7 @@ const AIRefinePanel = ({
             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 }) }),
@@ -144394,7 +144426,7 @@ const AIRefinePanel = ({
             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 })
           }
         ),
@@ -144404,7 +144436,7 @@ const AIRefinePanel = ({
             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 })
           }
         )
@@ -144418,7 +144450,7 @@ const AIRefinePanel = ({
           "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)" }) }),
@@ -144429,7 +144461,7 @@ const AIRefinePanel = ({
                   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,
                     {
@@ -144454,13 +144486,13 @@ const AIRefinePanel = ({
       /* @__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 })
@@ -144473,7 +144505,7 @@ const AIRefinePanel = ({
         {
           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" }),
@@ -144484,7 +144516,7 @@ const AIRefinePanel = ({
                   {
                     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 }),
@@ -144510,7 +144542,7 @@ const AIRefinePanel = ({
                   {
                     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,
@@ -144535,7 +144567,7 @@ const AIRefinePanel = ({
                   {
                     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" })
@@ -144568,7 +144600,7 @@ const AIRefinePanel = ({
                         (_a2 = inputRef.current) == null ? void 0 : _a2.dispatchEvent(new KeyboardEvent("keydown", { key: e3.key, bubbles: true }));
                       }
                     },
-                    "data-id": "md-editor-ai-mention-search"
+                    "data-test-id": "md-editor-ai-mention-search"
                   }
                 )
               ] }) }),
@@ -144579,7 +144611,7 @@ const AIRefinePanel = ({
                   {
                     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
@@ -144592,7 +144624,7 @@ const AIRefinePanel = ({
           ]
         }
       ),
-      /* @__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",
           {
@@ -144604,7 +144636,7 @@ const AIRefinePanel = ({
             onKeyDown: handleKeyDown2,
             rows: 1,
             disabled: isLoading,
-            "data-id": "md-editor-ai-input"
+            "data-test-id": "md-editor-ai-input"
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -144618,7 +144650,7 @@ const AIRefinePanel = ({
             },
             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 })
           }
         )
@@ -144631,7 +144663,7 @@ const AIRefinePanel = ({
         "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 })
@@ -144639,13 +144671,13 @@ const AIRefinePanel = ({
         }
       );
     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: [
@@ -144654,19 +144686,19 @@ const AIRefinePanel = ({
         ] })
       ] });
     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
           ] })
         ] })
@@ -144676,7 +144708,7 @@ const AIRefinePanel = ({
         "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 })
@@ -144757,14 +144789,14 @@ const AIContextMenu = ({
       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" }),
@@ -144779,7 +144811,7 @@ const AIContextMenu = ({
             {
               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" }),
@@ -144792,7 +144824,7 @@ const AIContextMenu = ({
             {
               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" }),
@@ -144806,7 +144838,7 @@ const AIContextMenu = ({
           {
             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" }),
@@ -145538,7 +145570,7 @@ const MDEditor = forwardRef(
       [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(
@@ -145546,7 +145578,7 @@ const MDEditor = forwardRef(
       {
         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: [
@@ -145649,7 +145681,7 @@ const MDEditor = forwardRef(
                 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: [
@@ -145671,7 +145703,7 @@ const MDEditor = forwardRef(
                   onChange: (e3) => handleRawMarkdownChange(e3.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
                 }
               )