agentic-ui-libs 1.1.0-beta.-1.0 → 1.1.0-beta.10

package/dist/index.js

@@ -977,6 +977,23 @@ const createLucideIcon = (iconName, iconNode) => {
   Component2.displayName = `${iconName}`;
   return Component2;
 };
+/**
+ * @license lucide-react v0.294.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const AlertTriangle = createLucideIcon("AlertTriangle", [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
+      key: "c3ski4"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+]);
 /**
  * @license lucide-react v0.294.0 - ISC
  *
@@ -4314,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(
@@ -4335,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",
             {
@@ -28949,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,
@@ -29049,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",
@@ -29066,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)) }) })
     ] })
   ] });
@@ -29162,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",
@@ -29175,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(
@@ -29192,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",
             {
@@ -29213,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
@@ -29222,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",
@@ -29234,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"
           }
         ),
@@ -29259,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
@@ -29271,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";
@@ -29571,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,
@@ -29594,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"
       }
     ) })
@@ -29652,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,
@@ -29676,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"
       }
     ) })
@@ -29833,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"
       }
     ) })
@@ -29992,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(
@@ -30003,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),
@@ -30046,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 ",
@@ -30077,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,
@@ -30092,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"
                   }
                 ) })
@@ -31726,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,
       {
@@ -32139,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,
       {
@@ -32167,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: () => {
@@ -32180,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",
         {
@@ -32198,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]" })
         }
       ),
@@ -32214,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]" })
         }
       )
@@ -32828,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,
@@ -32847,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(
@@ -33017,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);
@@ -34512,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()
       }
     },
     {
@@ -34825,20 +34836,21 @@ function TailwindDateRangePicker({ className, defaultValue, value, presetLabel:
   const getDropdownClasses = () => {
     return "fixed bg-white border border-gray-200 rounded-lg shadow-xl z-[99999]";
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `relative ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `relative shrink-0 ${className}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
         ref: triggerRef,
         onClick: () => handleOpenChange(!open),
-        className: `min-w-[200px] h-[40px] px-[12px] text-left border !border-gray-300 rounded-md shadow-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex items-center ${!date2 ? "text-gray-500" : "text-gray-900"}`,
+        className: `w-full h-[40px] px-[14px] text-left border border-gray-300 rounded-[8px] bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex items-center gap-[8px] ${!date2 ? "text-gray-400" : "text-gray-700"}`,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "mr-2 h-[16px] w-[16px]" }),
-          (() => {
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "h-[20px] w-[20px] shrink-0" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 text-[14px] font-medium leading-[20px] overflow-hidden text-ellipsis whitespace-nowrap", children: (() => {
             const displayText = formatDateRange(date2, selectedPresetLabel);
             console.log("📅 Button display text:", { displayText, date: date2, selectedPresetLabel });
             return displayText;
-          })()
+          })() }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 6L8 10L12 6", stroke: "#98A2B3", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) })
         ]
       }
     ),
@@ -35200,6 +35212,7 @@ const Dashboard = ({
       } else if (typeof value === "string") {
         const daysMap = {
           "24h": 1,
+          "48h": 2,
           "7d": 7,
           "30d": 30,
           "90d": 90
@@ -35233,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..."
           ] }),
@@ -35318,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(
@@ -35350,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
     });
   }
   /**
@@ -35360,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) {
@@ -35755,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();
@@ -36428,28 +36464,40 @@ class TracingUtils {
 }
 function EmptyState(props) {
   const {
-    icon = "search",
+    icon = "alert",
     title,
     description,
     actionLabel,
     onAction,
     className = ""
   } = props;
-  const Icon = icon === "search" ? FileSearch : Filter;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex flex-col items-center justify-center h-full text-center p-8 ${className}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-8 h-8 text-gray-400" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 max-w-md mb-6", children: description }),
+  const renderIcon = () => {
+    switch (icon) {
+      case "search":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(FileSearch, { className: "w-[24px] h-[24px] text-gray-900", strokeWidth: 1.5 });
+      case "filter":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Filter, { className: "w-[24px] h-[24px] text-gray-900", strokeWidth: 1.5 });
+      case "alert":
+      default:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "w-[24px] h-[24px] text-gray-900", strokeWidth: 1.5 });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex flex-col items-center justify-center h-full w-full px-[24px] py-[16px] ${className}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px] items-center w-full", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[48px] h-[48px] border border-gray-300 rounded-[10px] flex items-center justify-center shrink-0", children: renderIcon() }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[4px] items-center text-center max-w-[352px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[16px] font-semibold leading-[24px] text-gray-900 whitespace-nowrap", children: title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[14px] font-normal leading-[20px] text-gray-600 w-full", children: description })
+    ] }),
     actionLabel && onAction && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         onClick: onAction,
-        className: "px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700",
+        className: "mt-[8px] px-[16px] py-[10px] bg-gray-900 border border-gray-700 text-white text-[14px] font-medium leading-[20px] rounded-[8px] hover:bg-gray-800 transition-colors",
         "data-test-id": "empty-state-action-btn",
         children: actionLabel
       }
     )
-  ] });
+  ] }) });
 }
 function LoadingSpinner(props) {
   const { message = "Loading...", className = "" } = props;
@@ -44069,7 +44117,7 @@ __export(browser_exports, {
   isInvisibleScrollbar: () => isInvisibleScrollbar,
   isMacOsUserAgent: () => isMacOsUserAgent
 });
-var isSafari;
+var isSafari$1;
 var safariVersion;
 var isChrome;
 var isFirefox;
@@ -44078,10 +44126,10 @@ var isIOS;
 var invisibleScrollbar;
 var browserScrollbarWidth;
 function isBrowserSafari() {
-  if (isSafari === void 0) {
-    isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  if (isSafari$1 === void 0) {
+    isSafari$1 = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
   }
-  return isSafari;
+  return isSafari$1;
 }
 function getSafariVersion() {
   if (safariVersion === void 0) {
@@ -104490,7 +104538,6 @@ function TracingTable(props) {
     onRowClick,
     onSortChange,
     className = "",
-    emptyStateMessage = "No data available",
     hasInitiallyLoaded: hasInitiallyLoadedProp
   } = props;
   const hasInitiallyLoaded = hasInitiallyLoadedProp === true;
@@ -104570,8 +104617,16 @@ function TracingTable(props) {
       }
     );
   }
+  const showEmptyState = hasInitiallyLoaded && !loading && data.length === 0;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex flex-col h-full tracing-table-with-pagination rounded-[8px] border border-gray-300 ${className}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 ag-theme-alpine relative w-full overflow-auto", children: [
+    showEmptyState ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      EmptyState,
+      {
+        icon: "alert",
+        title: "There is no data to display for the selected filters",
+        description: "Try adjusting the filters or ensure your agentic app is deployed and receiving traffic."
+      }
+    ) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 ag-theme-alpine relative w-full overflow-auto", children: [
       loading && hasInitiallyLoaded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 text-sm font-medium", children: "Loading..." })
@@ -104591,13 +104646,7 @@ function TracingTable(props) {
           rowHeight: 52,
           animateRows: true,
           enableCellTextSelection: true,
-          suppressNoRowsOverlay: loading || !hasInitiallyLoaded,
-          overlayNoRowsTemplate: `<div class="flex flex-col items-center justify-center h-full text-gray-500">
-              <svg class="w-12 h-12 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-              <p class="text-sm">${emptyStateMessage}</p>
-            </div>`
+          suppressNoRowsOverlay: true
         }
       )
     ] }),
@@ -104675,7 +104724,7 @@ function TracingListHeader(props) {
     title,
     description,
     searchConfig,
-    searchPlaceholder = "Search...",
+    searchPlaceholder = "Search by Session ID, Trace ID ,...",
     searchValue = "",
     onSearchChange,
     showSearch = true,
@@ -104757,21 +104806,21 @@ function TracingListHeader(props) {
       onTimeRangeChange(normalizedDateRange, presetLabel);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 w-full p-[24px] pb-[12px]", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-lg font-bold text-gray-900 w-full", children: title }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 text-xs w-full", children: description }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 justify-end shrink-0", children: [
-        showSearch && (useAdvancedSearch || onSearchChange) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch h-[40px] border border-gray-300 bg-white rounded-md", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center h-full", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[8px] w-full pt-[24px] pb-[8px] px-[24px] bg-white", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-[8px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-[18px] font-semibold leading-[28px] text-gray-900", children: title }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[16px] justify-end w-full", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "flex-1 min-w-0 text-[12px] font-normal leading-[16px] text-gray-600 overflow-hidden text-ellipsis line-clamp-1", children: description }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] shrink-0", children: [
+        showSearch && (useAdvancedSearch || onSearchChange) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch h-[40px] border border-gray-300 bg-white rounded-[8px] w-[220px] overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 px-[14px] py-[10px] gap-[8px]", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
                 onClick: handleSearchSubmit,
-                className: "flex items-center justify-center w-10 h-full text-gray-400 hover:text-gray-600 shrink-0",
+                className: "flex items-center justify-center text-gray-500 hover:text-gray-600 shrink-0",
                 title: "Search",
                 type: "button",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "w-[16px] h-[16px]", strokeWidth: 1.5 })
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -104786,7 +104835,7 @@ function TracingListHeader(props) {
                     handleSearchSubmit();
                   }
                 },
-                className: "w-[160px] h-full pr-3 text-sm bg-transparent border-none outline-none",
+                className: "flex-1 text-[14px] leading-[20px] text-gray-900 placeholder:text-gray-400 bg-transparent border-none outline-none overflow-hidden text-ellipsis whitespace-nowrap",
                 "data-test-id": "tracing-list-search-input"
               }
             )
@@ -104832,23 +104881,23 @@ 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: "min-w-[200px]"
+            className: "w-[190px]"
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
             onClick: onFiltersClick,
-            className: `inline-flex items-center h-[40px] px-4 border rounded-md text-sm font-medium ${TracingUtils.getActiveFiltersCount(filters) > 0 ? "border-blue-600 text-blue-700 bg-blue-50" : "!border-gray-300 text-gray-700 bg-white hover:bg-gray-50"}`,
+            className: `inline-flex items-center justify-center h-[40px] px-[16px] py-[8px] gap-[8px] border rounded-[8px] text-[14px] font-medium leading-[20px] ${TracingUtils.getActiveFiltersCount(filters) > 0 ? "border-blue-600 text-blue-700 bg-blue-50" : "border-gray-300 text-gray-700 bg-white hover:bg-gray-50"}`,
             "data-test-id": "tracing-list-filters-btn",
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Filter, { className: "w-4 h-4 mr-2" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M1.33325 3.06667C1.33325 2.6933 1.33325 2.50661 1.40599 2.36401C1.46991 2.23856 1.57189 2.13658 1.69734 2.07266C1.83994 2 2.02663 2 2.39992 2H13.5999C13.9732 2 14.1599 2 14.3025 2.07266C14.4279 2.13658 14.5299 2.23856 14.5939 2.36401C14.6666 2.50661 14.6666 2.6933 14.6666 3.06667V3.51294C14.6666 3.69214 14.6666 3.78173 14.6447 3.86505C14.6253 3.93888 14.5933 4.00882 14.5503 4.07184C14.5016 4.14295 14.4339 4.20164 14.2986 4.31901L10.0348 8.01433C9.89929 8.1317 9.83154 8.19039 9.78291 8.26149C9.73989 8.32451 9.70798 8.39445 9.68859 8.46828C9.66659 8.5516 9.66659 8.64119 9.66659 8.82039V12.3056C9.66659 12.4359 9.66659 12.5011 9.64556 12.5575C9.62697 12.6073 9.59675 12.6519 9.55749 12.6877C9.51299 12.7281 9.45246 12.7524 9.33139 12.8008L7.06472 13.7074C6.81963 13.8054 6.69709 13.8545 6.59876 13.834C6.51276 13.8161 6.43728 13.765 6.38875 13.6918C6.33325 13.6081 6.33325 13.4761 6.33325 13.2122V8.82039C6.33325 8.64119 6.33325 8.5516 6.31126 8.46828C6.29187 8.39445 6.25996 8.32451 6.21693 8.26149C6.16831 8.19039 6.10055 8.1317 5.96505 8.01433L1.70127 4.319C1.56591 4.20164 1.49823 4.14295 1.44959 4.07184C1.40656 4.00882 1.37456 3.93888 1.35516 3.86505C1.33325 3.78173 1.33325 3.69214 1.33325 3.51294V3.06667Z", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) }),
               "Filters",
-              TracingUtils.getActiveFiltersCount(filters) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 px-2 py-0.5 bg-blue-600 text-white text-xs rounded-full", "data-test-id": "tracing-list-active-filters-count", children: TracingUtils.getActiveFiltersCount(filters) })
+              TracingUtils.getActiveFiltersCount(filters) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-[8px] py-[2px] bg-blue-600 text-white text-[12px] leading-[16px] rounded-full", "data-test-id": "tracing-list-active-filters-count", children: TracingUtils.getActiveFiltersCount(filters) })
             ]
           }
         ),
@@ -104856,10 +104905,10 @@ function TracingListHeader(props) {
           "button",
           {
             onClick: onModifyColumnsClick,
-            className: "inline-flex items-center justify-center w-10 h-10 p-0 border !border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
+            className: "inline-flex items-center justify-center w-[40px] h-[40px] p-[8px] border border-gray-300 rounded-[8px] bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
             title: "Modify Columns",
             "data-test-id": "tracing-list-modify-columns-btn",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3.33333 14L3.33333 10M3.33333 10C4.06971 10 4.66667 9.40305 4.66667 8.66667C4.66667 7.93029 4.06971 7.33333 3.33333 7.33333C2.59695 7.33333 2 7.93029 2 8.66667C2 9.40305 2.59695 10 3.33333 10ZM3.33333 4.66667V2M8 14V10M8 4.66667V2M8 4.66667C7.26362 4.66667 6.66667 5.26362 6.66667 6C6.66667 6.73638 7.26362 7.33333 8 7.33333C8.73638 7.33333 9.33333 6.73638 9.33333 6C9.33333 5.26362 8.73638 4.66667 8 4.66667ZM12.6667 14V11.3333M12.6667 11.3333C13.403 11.3333 14 10.7364 14 10C14 9.26362 13.403 8.66667 12.6667 8.66667C11.9303 8.66667 11.3333 9.26362 11.3333 10C11.3333 10.7364 11.9303 11.3333 12.6667 11.3333ZM12.6667 6V2", stroke: "#344054", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3.33333 14L3.33333 10M3.33333 10C4.06971 10 4.66667 9.40305 4.66667 8.66667C4.66667 7.93029 4.06971 7.33333 3.33333 7.33333C2.59695 7.33333 2 7.93029 2 8.66667C2 9.40305 2.59695 10 3.33333 10ZM3.33333 4.66667V2M8 14V10M8 4.66667V2M8 4.66667C7.26362 4.66667 6.66667 5.26362 6.66667 6C6.66667 6.73638 7.26362 7.33333 8 7.33333C8.73638 7.33333 9.33333 6.73638 9.33333 6C9.33333 5.26362 8.73638 4.66667 8 4.66667ZM12.6667 14V11.3333M12.6667 11.3333C13.403 11.3333 14 10.7364 14 10C14 9.26362 13.403 8.66667 12.6667 8.66667C11.9303 8.66667 11.3333 9.26362 11.3333 10C11.3333 10.7364 11.9303 11.3333 12.6667 11.3333ZM12.6667 6V2", stroke: "#344054", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) })
           }
         )
       ] })
@@ -104907,42 +104956,45 @@ function ColumnCustomization(props) {
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: "fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 ease-in-out"
+        className: "fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 ease-in-out",
+        onClick: handleCancel
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `fixed top-0 right-0 bottom-0 z-50 bg-white shadow-2xl flex flex-col animate-slideIn ${className}`,
+        className: `fixed top-0 right-0 bottom-0 z-50 bg-white shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),0px_8px_8px_-4px_rgba(16,24,40,0.03)] flex flex-col animate-slideIn ${className}`,
         style: { width: "540px" },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-3 border-b border-gray-300 h-[64px] shrink-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Modify Columns" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[16px] px-[24px] py-[12px] border_default_bottom shrink-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-[16px] flex-1 h-[44px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-[18px] font-semibold leading-[28px] text-gray-900 flex-1", children: "Modify Columns" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
                 onClick: handleCancel,
-                className: "p-1 rounded-md hover:bg-gray-100 flex items-center justify-center w-8 h-8",
+                className: "w-[32px] h-[32px] flex items-center justify-center rounded-md hover:bg-gray-100",
                 title: "Close",
                 "data-test-id": "column-customization-close-btn",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 text-gray-900" })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-gray-900", strokeWidth: 2 })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-gray-900", children: [
-                  visibleCount,
-                  "/",
-                  totalCount
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-[24px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px]", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-[10px] w-full", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] flex-1 whitespace-nowrap", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[14px] leading-[20px]", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-900", children: [
+                    visibleCount,
+                    "/",
+                    totalCount
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600", children: " columns selected" })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600", children: "columns selected" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "button",
                   {
                     onClick: handleClearSelection,
-                    className: "text-sm font-medium text-blue-600 hover:text-blue-700 ml-2",
+                    className: "text-[14px] font-medium leading-[20px] text-blue-600 hover:text-blue-700",
                     "data-test-id": "column-customization-clear-selection-btn",
                     children: "Clear selection"
                   }
@@ -104952,7 +105004,7 @@ function ColumnCustomization(props) {
                 "button",
                 {
                   onClick: handleRevertToDefault,
-                  className: "text-sm font-medium text-gray-700 hover:text-gray-900",
+                  className: "text-[14px] font-medium leading-[20px] text-gray-700 hover:text-gray-900 shrink-0",
                   "data-test-id": "column-customization-revert-default-btn",
                   children: "Revert to default"
                 }
@@ -104964,57 +105016,64 @@ function ColumnCustomization(props) {
               return /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
-                  className: "border-t border-gray-200 py-3 px-3",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: `flex items-center gap-3 ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"}`, children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center mt-0.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "input",
-                      {
-                        type: "checkbox",
-                        checked: isChecked,
-                        disabled: isDisabled,
-                        onChange: () => !isDisabled && toggleColumn(col.field),
-                        className: `w-5 h-5 rounded-md border-2 ${isChecked ? isDisabled ? "bg-blue-200 border-blue-200" : "bg-blue-600 border-blue-600" : "bg-white border-gray-300"} ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,
-                        style: {
-                          appearance: "none",
-                          backgroundImage: isChecked ? `url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5L4.5 8L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")` : "none",
-                          backgroundRepeat: "no-repeat",
-                          backgroundPosition: "center"
-                        },
-                        "data-test-id": `column-customization-checkbox-${col.field}`
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  className: "border_secondary_top border_secondary_bottom p-[12px] -mb-px first:mb-0",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: `flex items-start gap-[12px] ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"}`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center shrink-0", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          className: `w-[20px] h-[20px] rounded-[6px] flex items-center justify-center transition-colors ${isChecked ? isDisabled ? "bg-blue-200 border border-blue-200" : "bg-blue-600 border border-blue-600" : "bg-white border border-gray-300"} ${isDisabled ? "opacity-50" : ""}`,
+                          onClick: () => !isDisabled && toggleColumn(col.field),
+                          children: isChecked && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[14px] h-[14px] text-white", strokeWidth: 2.5 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: isChecked,
+                          disabled: isDisabled,
+                          onChange: () => !isDisabled && toggleColumn(col.field),
+                          className: "sr-only",
+                          "data-test-id": `column-customization-checkbox-${col.field}`
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
                       "span",
                       {
-                        className: `text-sm font-medium ${isDisabled ? "text-gray-400" : "text-gray-700"}`,
+                        className: `flex-1 text-[14px] font-medium leading-[20px] ${isDisabled ? "text-gray-700" : "text-gray-700"}`,
                         children: col.headerName
                       }
-                    ) })
+                    )
                   ] })
                 },
                 col.field
               );
             }) })
           ] }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-gray-300 px-6 py-3 flex items-center justify-end gap-2 h-[64px] shrink-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
-              {
-                onClick: handleCancel,
-                className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50",
-                "data-test-id": "column-customization-cancel-btn",
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
-              {
-                onClick: handleSave,
-                className: "px-4 py-2 text-sm font-medium text-white bg-gray-900 border border-gray-700 rounded-lg hover:bg-gray-800",
-                "data-test-id": "column-customization-save-btn",
-                children: "Save"
-              }
-            )
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] px-[24px] py-[12px] border_default_top shrink-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: handleCancel,
+                  className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-gray-700 bg-white border border-gray-300 rounded-[8px] hover:bg-gray-50",
+                  "data-test-id": "column-customization-cancel-btn",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: handleSave,
+                  className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-white bg-gray-900 border border-gray-700 rounded-[8px] hover:bg-gray-800",
+                  "data-test-id": "column-customization-save-btn",
+                  children: "Save"
+                }
+              )
+            ] })
           ] })
         ]
       }
@@ -105127,8 +105186,8 @@ function FilterPanel(props) {
         {
           type: "text",
           disabled: true,
-          placeholder: "Enter value",
-          className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-lg text-sm text-gray-400 bg-gray-50"
+          placeholder: "Enter Value",
+          className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-[8px] text-[14px] leading-[20px] text-gray-400 bg-white"
         }
       );
     }
@@ -105160,7 +105219,7 @@ function FilterPanel(props) {
               const date2 = e3.target.value ? new Date(e3.target.value).toISOString() : "";
               handleFilterChange(index, "value", date2);
             },
-            className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-lg text-sm text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+            className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-[8px] text-[14px] leading-[20px] text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
             "data-test-id": `filter-panel-datetime-input-${index}`
           }
         );
@@ -105174,8 +105233,8 @@ function FilterPanel(props) {
               const numValue = e3.target.value === "" ? void 0 : Number(e3.target.value);
               handleFilterChange(index, "value", numValue);
             },
-            placeholder: "Enter value",
-            className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-lg text-sm text-gray-900 bg-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+            placeholder: "Enter Value",
+            className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-[8px] text-[14px] leading-[20px] text-gray-900 bg-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
             "data-test-id": `filter-panel-number-input-${index}`
           }
         );
@@ -105202,8 +105261,8 @@ function FilterPanel(props) {
             type: "text",
             value: filter.value ?? "",
             onChange: (e3) => handleFilterChange(index, "value", e3.target.value),
-            placeholder: "Enter value",
-            className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-lg text-sm text-gray-900 bg-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+            placeholder: "Enter Value",
+            className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-[8px] text-[14px] leading-[20px] text-gray-900 bg-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
             "data-test-id": `filter-panel-text-input-${index}`
           }
         );
@@ -105213,24 +105272,24 @@ function FilterPanel(props) {
     return operator;
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `bg-white shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),0px_8px_8px_-4px_rgba(16,24,40,0.03)] w-full h-full flex flex-col ${className}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-3 border-b border-gray-300 h-[64px] shrink-0", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 border border-gray-300 rounded-lg flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "18", height: "17", viewBox: "0 0 18 17", fill: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M0.650146 1.98372C0.650146 1.51701 0.650146 1.28366 0.740974 1.1054C0.820869 0.948597 0.948353 0.821113 1.10515 0.741219C1.28341 0.650391 1.51677 0.650391 1.98348 0.650391H15.9835C16.4502 0.650391 16.6835 0.650391 16.8618 0.741219C17.0186 0.821113 17.1461 0.948597 17.226 1.1054C17.3168 1.28366 17.3168 1.51701 17.3168 1.98372V2.54155C17.3168 2.76555 17.3168 2.87755 17.2894 2.98169C17.2652 3.07398 17.2253 3.16142 17.1714 3.24019C17.1106 3.32908 17.026 3.40243 16.8567 3.54914L11.5269 8.16831C11.3576 8.31501 11.273 8.38836 11.2122 8.47726C11.1584 8.55603 11.1184 8.64347 11.0942 8.73576C11.0668 8.8399 11.0668 8.9519 11.0668 9.1759V13.5324C11.0668 13.6953 11.0668 13.7768 11.0405 13.8473C11.0173 13.9095 10.9795 13.9653 10.9304 14.01C10.8747 14.0606 10.7991 14.0908 10.6477 14.1514L7.81441 15.2847C7.50812 15.4072 7.35498 15.4685 7.23204 15.4429C7.12453 15.4206 7.03019 15.3567 6.96952 15.2652C6.90015 15.1605 6.90015 14.9956 6.90015 14.6657V9.1759C6.90015 8.9519 6.90015 8.8399 6.87278 8.73576C6.84852 8.64347 6.80859 8.55603 6.75474 8.47726C6.69396 8.38836 6.60933 8.31501 6.44005 8.16831L1.11024 3.54914C0.940967 3.40244 0.856331 3.32908 0.795556 3.24019C0.7417 3.16142 0.701774 3.07398 0.677518 2.98169C0.650146 2.87755 0.650146 2.76555 0.650146 2.54155V1.98372Z", stroke: "#475467", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title })
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[16px] px-[24px] py-[12px] border_default_bottom shrink-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[16px] flex-1 h-[44px]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[40px] h-[40px] border border-gray-300 rounded-[8px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M1.66675 3.83333C1.66675 3.36662 1.66675 3.13327 1.75758 2.95501C1.83747 2.79821 1.96496 2.67072 2.12175 2.59083C2.30001 2.5 2.53337 2.5 3.00008 2.5H17.0001C17.4668 2.5 17.7001 2.5 17.8784 2.59083C18.0352 2.67072 18.1627 2.79821 18.2426 2.95501C18.3334 3.13327 18.3334 3.36662 18.3334 3.83333V4.39117C18.3334 4.61517 18.3334 4.72716 18.306 4.83131C18.2818 4.9236 18.2418 5.01103 18.188 5.0898C18.1272 5.17869 18.0426 5.25205 17.8733 5.39876L12.5435 10.0179C12.3742 10.1646 12.2896 10.238 12.2288 10.3269C12.175 10.4057 12.135 10.4931 12.1108 10.5854C12.0834 10.6895 12.0834 10.8015 12.0834 11.0255V15.382C12.0834 15.5449 12.0834 15.6263 12.0571 15.6969C12.0338 15.7591 11.9961 15.8149 11.947 15.8596C11.8913 15.9102 11.8157 15.9405 11.6643 16.001L8.83099 17.1343C8.52471 17.2568 8.37156 17.3181 8.24862 17.2925C8.14112 17.2702 8.04678 17.2063 7.98611 17.1148C7.91675 17.0101 7.91675 16.8452 7.91675 16.5153V11.0255C7.91675 10.8015 7.91675 10.6895 7.88937 10.5854C7.86511 10.4931 7.82518 10.4057 7.77133 10.3269C7.71055 10.238 7.62593 10.1646 7.45665 10.0179L2.12684 5.39875C1.95756 5.25205 1.87293 5.17869 1.81215 5.0898C1.75829 5.01103 1.71837 4.9236 1.69411 4.83131C1.66675 4.72716 1.66675 4.61517 1.66675 4.39117V3.83333Z", stroke: "#475467", strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-[18px] font-semibold leading-[28px] text-gray-900", children: title })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: handleCancel,
-          className: "p-1 rounded-md hover:bg-gray-100 flex items-center justify-center w-8 h-8",
+          className: "w-[32px] h-[32px] flex items-center justify-center rounded-md hover:bg-gray-100",
           title: "Close",
           "data-test-id": "filter-panel-close-btn",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 text-gray-900" })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-gray-900", strokeWidth: 2 })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("table", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: wipFilters.map((filter, index) => {
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-[24px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-[16px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-[8px]", children: wipFilters.map((filter, index) => {
         const column = filter.column ? availableColumns.find((c3) => c3.field === filter.column) : void 0;
         const operators = column ? column.operators : filter.type ? getOperatorsForType(filter.type) : [];
         const parameterOptions = availableColumns.map((col) => ({
@@ -105241,71 +105300,72 @@ function FilterPanel(props) {
           label: formatOperator(op),
           value: op
         }));
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "pr-2 py-1 text-sm text-gray-600 whitespace-nowrap w-12", children: index === 0 ? "Where" : "And" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-[50px] shrink-0 text-[14px] font-medium leading-[20px] text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis", children: index === 0 ? "Where" : "And" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Select,
             {
               options: parameterOptions,
               value: filter.column || "",
               onChange: (value) => handleFilterChange(index, "column", value),
-              placeholder: "Column",
-              className: "min-w-[140px]"
+              placeholder: "Select Parameter",
+              className: "w-full"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Select,
             {
               options: operatorOptions,
               value: filter.operator || "",
               onChange: (value) => handleFilterChange(index, "operator", value),
-              placeholder: "Operator",
+              placeholder: "Select Operator",
               disabled: !filter.column,
-              className: "min-w-[120px]"
+              className: "w-full"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-[160px]", children: renderValueInput(filter, index) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: renderValueInput(filter, index) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-[10px] shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
               onClick: () => handleRemoveFilter(index),
-              className: "p-2 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700",
+              className: "text-gray-500 hover:text-gray-700",
               title: "Remove filter",
               "data-test-id": `filter-panel-delete-filter-${index}`,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-[16px] h-[16px]", strokeWidth: 1.5 })
             }
           ) })
         ] }, `filter-${index}`);
-      }) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2 items-start mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-[8px] items-start", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
         {
           onClick: handleAddFilter,
-          className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 bg-white border border-blue-300 rounded-lg hover:bg-blue-50",
+          className: "inline-flex items-center gap-[8px] px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-blue-700 bg-white border border-blue-300 rounded-[8px] hover:bg-blue-50",
           "data-test-id": "filter-panel-add-filter-btn",
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-[16px] h-[16px]", strokeWidth: 2 }),
             "New filter"
           ]
         }
       ) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-gray-300 px-6 py-3 h-[64px] flex items-center justify-between shrink-0", children: [
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] px-[24px] py-[12px] border_default_top shrink-0", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: handleReset,
-          className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50",
+          className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-gray-700 bg-white border border-gray-300 rounded-[8px] hover:bg-gray-50",
           "data-test-id": "filter-panel-reset-btn",
           children: "Reset filters"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             onClick: handleCancel,
-            className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50",
+            className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-gray-700 bg-white border border-gray-300 rounded-[8px] hover:bg-gray-50",
             "data-test-id": "filter-panel-cancel-btn",
             children: "Cancel"
           }
@@ -105314,7 +105374,7 @@ function FilterPanel(props) {
           "button",
           {
             onClick: handleApply,
-            className: "px-4 py-2 text-sm font-medium text-white bg-gray-900 border border-gray-700 rounded-lg hover:bg-gray-800",
+            className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-white bg-gray-900 border border-gray-700 rounded-[8px] hover:bg-gray-800",
             "data-test-id": "filter-panel-apply-btn",
             children: "Apply"
           }
@@ -106507,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]"}` })
+        }
+      )
     ] })
   ] });
 }
@@ -106535,6 +106584,7 @@ const CopyButton$1 = ({
   text,
   className = "",
   iconClassName = "",
+  iconStyle,
   title = "Copy to clipboard",
   onCopySuccess,
   onCopyError,
@@ -106548,19 +106598,19 @@ const CopyButton$1 = ({
       case "sm":
         return {
           button: "p-1",
-          icon: "w-3 h-3",
+          icon: "w-[12px] h-[12px]",
           tooltip: "text-xs py-1 px-2"
         };
       case "lg":
         return {
           button: "p-2",
-          icon: "w-5 h-5",
+          icon: "w-[20px] h-[20px]",
           tooltip: "text-sm py-2 px-3"
         };
       default:
         return {
           button: "p-1.5",
-          icon: "w-4 h-4",
+          icon: "w-[16px] h-[16px]",
           tooltip: "text-xs py-1 px-2"
         };
     }
@@ -106623,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: `${sizeClasses2.icon} text-gray-400 ${iconClassName}` })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `${sizeClasses2.icon} text-gray-400 ${iconClassName}`, style: iconStyle })
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -107757,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, { className: "w-5 h-5 text-gray-400" }),
+          /* @__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: [
@@ -107767,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, { className: "w-4 h-4 text-gray-400" })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { className: "w-[16px] h-[16px] text-[#9CA3AF]" })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -107776,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, { className: "w-4 h-4 text-gray-400" })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { className: "w-[16px] h-[16px] text-[#9CA3AF]" })
             }
           )
         ] })
@@ -107788,7 +107838,7 @@ const DataModal = ({
             text: stringifyJsonNode(parsedData),
             title: "Copy content",
             className: "p-2 rounded-lg hover:bg-gray-700",
-            iconClassName: "w-4 h-4 text-gray-400"
+            iconStyle: { width: "16px", height: "16px", stroke: "#9CA3AF" }
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -107797,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, { className: "w-4 h-4 text-gray-400" })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-[#9CA3AF]" })
           }
         )
       ] })
@@ -107875,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, { className: `w-3 h-3 ${darkMode ? "text-gray-500" : "text-gray-400"}` }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: `w-3 h-3 ${darkMode ? "text-gray-500" : "text-gray-400"}` }),
+                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,
@@ -107910,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, { className: `w-3 h-3 ${darkMode ? "text-gray-500" : "text-gray-400"}` }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: `w-3 h-3 ${darkMode ? "text-gray-500" : "text-gray-400"}` }),
+                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 ",
                   "{",
@@ -108077,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-b border-[#EAECF0] 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, { className: "w-4 h-4 text-[#98A2B3]" })
+              "data-test-id": "data_viewer_header_btn_interactive",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { className: "w-[16px] h-[16px] text-[#98A2B3]" })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -108096,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, { className: "w-4 h-4 text-[#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, { className: "w-4 h-4 text-[#98A2B3]" })
+              "data-test-id": "data_viewer_header_btn_expand",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { className: "w-[16px] h-[16px] text-[#98A2B3]" })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -108119,7 +108169,7 @@ const DataViewer = ({
               text: stringifyJsonNode(parsedData),
               title: "Copy content",
               className: "p-1",
-              iconClassName: "w-4 h-4 text-[#98A2B3]"
+              iconStyle: { width: "16px", height: "16px", stroke: "#98A2B3" }
             }
           )
         ] })
@@ -108129,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,
@@ -108157,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" })
           ]
         }
       )
@@ -109150,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 })
     ] })
   ] });
@@ -109821,14 +109887,18 @@ function SessionsListContent(props) {
         }
       },
       // === ADDITIONAL COLUMNS (HIDDEN BY DEFAULT) ===
-      {
-        field: "bookmarked",
-        headerName: "⭐️",
-        width: 50,
-        hide: true,
-        disabled: true,
-        cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `cursor-pointer ${params.value ? "text-yellow-500" : "text-gray-300"}`, children: params.value ? "★" : "☆" })
-      },
+      // {
+      //   field: 'bookmarked',
+      //   headerName: '⭐️',
+      //   width: 50,
+      //   hide: true,
+      //   disabled: true,
+      //   cellRenderer: (params: any) => (
+      //     <span className={`cursor-pointer ${params.value ? 'text-yellow-500' : 'text-gray-300'}`}>
+      //       {params.value ? '★' : '☆'}
+      //     </span>
+      //   ),
+      // },
       {
         field: "appvId",
         headerName: "App Version ID",
@@ -109837,6 +109907,13 @@ function SessionsListContent(props) {
         disabled: true,
         cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", children: params.value || "-" })
       },
+      {
+        field: "source",
+        headerName: "Source",
+        width: 150,
+        hide: false,
+        cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", children: params.value || "-" })
+      },
       {
         field: "inputCost",
         headerName: "Input Cost ($)",
@@ -109872,21 +109949,24 @@ function SessionsListContent(props) {
         disabled: true,
         valueFormatter: (params) => TracingUtils.formatTokens(params.value),
         cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", children: TracingUtils.formatTokens(params.value) })
-      },
-      {
-        field: "traceTags",
-        headerName: "Trace Tags",
-        width: 180,
-        hide: true,
-        disabled: true,
-        cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-1", children: [
-          (params.value || []).slice(0, 3).map((tag, i2) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-1.5 py-0.5 text-xs bg-gray-100 rounded", children: tag }, i2)),
-          (params.value || []).length > 3 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-500", children: [
-            "+",
-            params.value.length - 3
-          ] })
-        ] })
       }
+      // {
+      //   field: 'traceTags',
+      //   headerName: 'Trace Tags',
+      //   width: 180,
+      //   hide: true,
+      //   disabled: true,
+      //   cellRenderer: (params: any) => (
+      //     <div className="flex flex-wrap gap-1">
+      //       {(params.value || []).slice(0, 3).map((tag: string, i: number) => (
+      //         <span key={i} className="px-1.5 py-0.5 text-xs bg-gray-100 rounded">{tag}</span>
+      //       ))}
+      //       {(params.value || []).length > 3 && (
+      //         <span className="text-xs text-gray-500">+{params.value.length - 3}</span>
+      //       )}
+      //     </div>
+      //   ),
+      // },
     ],
     []
   );
@@ -109968,6 +110048,12 @@ function SessionsListContent(props) {
         type: "string",
         operators: ["=", "!=", "contains"]
       },
+      {
+        field: "source",
+        label: "Source",
+        type: "string",
+        operators: ["=", "!=", "contains"]
+      },
       {
         field: "tags",
         label: "Trace Tags",
@@ -110342,7 +110428,9 @@ function TracesListContent(props) {
             newMap.set(traceId, {
               input: detail["input"],
               output: detail["output"],
-              totalCost: detail["totalCost"]
+              totalCost: detail["totalCost"],
+              envId: detail["envId"],
+              source: detail["source"]
             });
             return newMap;
           });
@@ -110453,28 +110541,39 @@ 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(
-        {
-          field: "bookmarked",
-          headerName: "⭐️",
-          width: 50,
-          hide: true,
-          // DISABLED - Enable when ready
-          disabled: true,
-          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `cursor-pointer ${params.value ? "text-yellow-500" : "text-gray-300"}`, children: params.value ? "★" : "☆" })
-        },
-        {
-          field: "name",
-          headerName: "Name",
-          width: 180,
-          hide: true,
-          // DISABLED - Enable when ready
-          disabled: true,
-          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-900", children: TracingUtils.truncate(params.value || "-", 25) })
-        },
+        // {
+        //   field: 'bookmarked',
+        //   headerName: '⭐️',
+        //   width: 50,
+        //   hide: true, // DISABLED - Enable when ready
+        //   disabled: true,
+        //   cellRenderer: (params: any) => (
+        //     <span className={`cursor-pointer ${params.value ? 'text-yellow-500' : 'text-gray-300'}`}>
+        //       {params.value ? '★' : '☆'}
+        //     </span>
+        //   ),
+        // },
+        // {
+        //   field: 'name',
+        //   headerName: 'Name',
+        //   width: 180,
+        //   hide: true, // DISABLED - Enable when ready
+        //   disabled: true,
+        //   cellRenderer: (params: any) => (
+        //     <span className="text-sm text-gray-900">{TracingUtils.truncate(params.value || '-', 25)}</span>
+        //   ),
+        // },
         {
           field: "timestamp",
           headerName: "Timestamp",
@@ -110510,15 +110609,20 @@ function TracesListContent(props) {
             return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `px-2 py-0.5 text-xs rounded ${levelColors[params.value] || levelColors["DEFAULT"]}`, children: params.value || "DEFAULT" });
           }
         },
-        {
-          field: "tags",
-          headerName: "Tags",
-          width: 180,
-          hide: true,
-          // DISABLED - Enable when ready
-          disabled: true,
-          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-1", children: (params.value || []).slice(0, 3).map((tag, i2) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-1.5 py-0.5 text-xs bg-gray-100 rounded", children: tag }, i2)) })
-        },
+        // {
+        //   field: 'tags',
+        //   headerName: 'Tags',
+        //   width: 180,
+        //   hide: true, // DISABLED - Enable when ready
+        //   disabled: true,
+        //   cellRenderer: (params: any) => (
+        //     <div className="flex flex-wrap gap-1">
+        //       {(params.value || []).slice(0, 3).map((tag: string, i: number) => (
+        //         <span key={i} className="px-1.5 py-0.5 text-xs bg-gray-100 rounded">{tag}</span>
+        //       ))}
+        //     </div>
+        //   ),
+        // },
         {
           field: "appvId",
           headerName: "App Version ID",
@@ -110537,6 +110641,20 @@ function TracesListContent(props) {
           disabled: true,
           cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", children: params.value || "-" })
         },
+        {
+          field: "source",
+          headerName: "Source",
+          width: 150,
+          hide: false,
+          cellRenderer: (params) => {
+            const detailData = detailedTraceData.get(params.data.id);
+            const source = detailData == null ? void 0 : detailData.source;
+            if (source === void 0) {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 italic", children: "Loading..." });
+            }
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", children: source || "-" });
+          }
+        },
         {
           field: "promptTokens",
           headerName: "Input Tokens",
@@ -110572,34 +110690,39 @@ function TracesListContent(props) {
           // DISABLED - Enable when ready
           disabled: true,
           cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-xs font-medium ${TracingUtils.getCostColor(params.value || 0)}`, children: TracingUtils.formatCost(params.value) })
-        },
-        {
-          field: "version",
-          headerName: "Version",
-          width: 100,
-          hide: true,
-          // DISABLED - Enable when ready
-          disabled: true,
-          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", children: params.value || "-" })
-        },
-        {
-          field: "release",
-          headerName: "Release",
-          width: 100,
-          hide: true,
-          // DISABLED - Enable when ready
-          disabled: true,
-          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", children: params.value || "-" })
-        },
-        {
-          field: "metadata",
-          headerName: "Metadata",
-          width: 200,
-          hide: true,
-          // DISABLED - Enable when ready
-          disabled: true,
-          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600 font-mono", children: params.value ? TracingUtils.truncate(JSON.stringify(params.value), 30) : "-" })
         }
+        // {
+        //   field: 'version',
+        //   headerName: 'Version',
+        //   width: 100,
+        //   hide: true, // DISABLED - Enable when ready
+        //   disabled: true,
+        //   cellRenderer: (params: any) => (
+        //     <span className="text-xs text-gray-600">{params.value || '-'}</span>
+        //   ),
+        // },
+        // {
+        //   field: 'release',
+        //   headerName: 'Release',
+        //   width: 100,
+        //   hide: true, // DISABLED - Enable when ready
+        //   disabled: true,
+        //   cellRenderer: (params: any) => (
+        //     <span className="text-xs text-gray-600">{params.value || '-'}</span>
+        //   ),
+        // },
+        // {
+        //   field: 'metadata',
+        //   headerName: 'Metadata',
+        //   width: 200,
+        //   hide: true, // DISABLED - Enable when ready
+        //   disabled: true,
+        //   cellRenderer: (params: any) => (
+        //     <span className="text-xs text-gray-600 font-mono">
+        //       {params.value ? TracingUtils.truncate(JSON.stringify(params.value), 30) : '-'}
+        //     </span>
+        //   ),
+        // },
       );
       return baseColumns;
     },
@@ -110725,6 +110848,12 @@ function TracesListContent(props) {
           type: "string",
           operators: ["=", "!=", "contains"]
         },
+        {
+          field: "source",
+          label: "Source",
+          type: "string",
+          operators: ["=", "!=", "contains"]
+        },
         {
           field: "version",
           label: "Version",
@@ -110813,6 +110942,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,
@@ -113384,15 +113514,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",
               {
@@ -113406,7 +113536,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,
                   {
@@ -113415,18 +113545,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");
@@ -113436,7 +113566,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
                       }
                     );
@@ -113469,7 +113599,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"
@@ -113479,34 +113609,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,
           {
@@ -113810,14 +113940,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,
           {
@@ -113843,22 +113973,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"
@@ -113871,7 +114001,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"
@@ -113884,7 +114014,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"
@@ -113892,8 +114022,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",
           {
@@ -113901,7 +114031,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" }),
@@ -113911,18 +114041,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(
@@ -113943,7 +114073,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) => {
@@ -113971,14 +114101,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),
@@ -114064,22 +114194,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,
             {
@@ -114105,7 +114235,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" })
             }
           )
@@ -127754,6 +127884,9 @@ function isiOS() {
     "iPod"
   ].includes(navigator.platform) || navigator.userAgent.includes("Mac") && "ontouchend" in document;
 }
+function isSafari() {
+  return typeof navigator !== "undefined" ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent) : false;
+}
 const focus = (position = null, options = {}) => ({ editor, view, tr: tr2, dispatch }) => {
   options = {
     scrollIntoView: true,
@@ -127766,8 +127899,8 @@ const focus = (position = null, options = {}) => ({ editor, view, tr: tr2, dispa
     requestAnimationFrame(() => {
       if (!editor.isDestroyed) {
         view.focus();
-        if (options === null || options === void 0 ? void 0 : options.scrollIntoView) {
-          editor.commands.scrollIntoView();
+        if (isSafari() && !isiOS() && !isAndroid()) {
+          view.dom.focus({ preventScroll: true });
         }
       }
     });
@@ -139399,7 +139532,7 @@ function handlePaste(view, _2, slice2) {
     return true;
   } else return false;
 }
-function handleMouseDown(view, startEvent) {
+function handleMouseDown$1(view, startEvent) {
   var _cellUnderMouse;
   if (startEvent.button != 0) return;
   if (startEvent.ctrlKey || startEvent.metaKey) return;
@@ -139469,8 +139602,8 @@ function cellUnderMouse(view, event) {
     top: event.clientY
   });
   if (!mousePos) return null;
-  const pos = mousePos.inside >= 0 ? mousePos.inside : mousePos.pos;
-  return cellAround(view.state.doc.resolve(pos));
+  let { inside, pos } = mousePos;
+  return inside >= 0 && cellAround(view.state.doc.resolve(inside)) || cellAround(view.state.doc.resolve(pos));
 }
 var TableView$1 = class TableView {
   constructor(node, defaultCellMinWidth) {
@@ -139562,7 +139695,7 @@ function columnResizing({ handleWidth = 5, cellMinWidth = 25, defaultCellMinWidt
           handleMouseLeave(view);
         },
         mousedown: (view, event) => {
-          handleMouseDown$1(view, event, cellMinWidth, defaultCellMinWidth);
+          handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth);
         }
       },
       decorations: (state) => {
@@ -139621,7 +139754,7 @@ function handleMouseLeave(view) {
   const pluginState = columnResizingPluginKey.getState(view.state);
   if (pluginState && pluginState.activeHandle > -1 && !pluginState.dragging) updateHandle(view, -1);
 }
-function handleMouseDown$1(view, event, cellMinWidth, defaultCellMinWidth) {
+function handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth) {
   var _view$dom$ownerDocume;
   if (!view.editable) return false;
   const win = (_view$dom$ownerDocume = view.dom.ownerDocument.defaultView) !== null && _view$dom$ownerDocume !== void 0 ? _view$dom$ownerDocume : window;
@@ -139768,7 +139901,7 @@ function tableEditing({ allowTableNodeSelection = false } = {}) {
     },
     props: {
       decorations: drawCellSelection,
-      handleDOMEvents: { mousedown: handleMouseDown },
+      handleDOMEvents: { mousedown: handleMouseDown$1 },
       createSelectionBetween(view) {
         return tableEditingKey.getState(view.state) != null ? view.state.selection : null;
       },
@@ -140958,7 +141091,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,
@@ -141183,7 +141316,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,
@@ -141254,9 +141387,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: {
@@ -142066,7 +142199,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" }) }),
@@ -142088,7 +142221,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
@@ -142107,7 +142240,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 })
                 }
               ),
@@ -142127,7 +142260,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"
                 }
               )
             ] }) })
@@ -142162,7 +142295,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 }) }),
@@ -142806,7 +142939,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(
@@ -142816,7 +142949,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 })
             }
           ),
@@ -142844,7 +142977,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: "}}" })
@@ -142882,7 +143015,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"
               }
             )
           ] }) }),
@@ -142904,7 +143037,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: [
@@ -142924,7 +143057,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: [
@@ -143008,7 +143141,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: [
@@ -143023,7 +143156,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"
             }
           )
         ] }),
@@ -143034,7 +143167,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 })
           }
         ),
@@ -143045,7 +143178,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 })
           }
         ),
@@ -143056,7 +143189,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 })
           }
         ),
@@ -143067,7 +143200,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 })
           }
         )
@@ -143194,7 +143327,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();
       },
@@ -143218,7 +143351,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
               }
             ),
@@ -143238,7 +143371,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 })
           }
         ),
@@ -143256,7 +143389,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" })
@@ -143277,7 +143410,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 })
           }
         )
@@ -143574,7 +143707,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: () => {
@@ -143594,7 +143727,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 })
             }
           ),
@@ -143605,7 +143738,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 })
             }
           )
@@ -143651,7 +143784,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" }),
@@ -143662,7 +143795,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 })
@@ -143676,7 +143809,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 })
@@ -143690,7 +143823,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 })
             }
           )
@@ -143705,7 +143838,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 })
@@ -143719,7 +143852,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 })
@@ -143733,7 +143866,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 })
             }
           )
@@ -143746,7 +143879,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 })
           }
         )
@@ -144223,7 +144356,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",
@@ -144231,7 +144364,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 }) }),
@@ -144351,7 +144484,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 })
           }
         ),
@@ -144361,7 +144494,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 })
           }
         )
@@ -144375,7 +144508,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)" }) }),
@@ -144386,7 +144519,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,
                     {
@@ -144411,13 +144544,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 })
@@ -144430,7 +144563,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" }),
@@ -144441,7 +144574,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 }),
@@ -144467,7 +144600,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,
@@ -144492,7 +144625,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" })
@@ -144525,7 +144658,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"
                   }
                 )
               ] }) }),
@@ -144536,7 +144669,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
@@ -144549,7 +144682,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",
           {
@@ -144561,7 +144694,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(
@@ -144575,7 +144708,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 })
           }
         )
@@ -144588,7 +144721,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 })
@@ -144596,13 +144729,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: [
@@ -144611,19 +144744,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
           ] })
         ] })
@@ -144633,7 +144766,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 })
@@ -144714,14 +144847,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" }),
@@ -144736,7 +144869,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" }),
@@ -144749,7 +144882,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" }),
@@ -144763,7 +144896,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" }),
@@ -145495,7 +145628,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(
@@ -145503,7 +145636,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: [
@@ -145606,7 +145739,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: [
@@ -145628,7 +145761,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
                 }
               )