agentic-ui-libs 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/index.js

@@ -3887,9 +3887,10 @@ const MetricCard = ({
         className
       ),
       onClick: handleClick,
+      "data-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]", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-700", children: title }),
+        /* @__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 }),
           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(
@@ -3907,8 +3908,8 @@ const MetricCard = ({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-baseline gap-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-2xl font-semibold text-gray-900", children: formatValue2(value) }),
+        /* @__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) }),
           change && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
@@ -4746,9 +4747,9 @@ var isNullish = function isNullish2(value) {
 var isNumOrStr = function isNumOrStr2(value) {
   return isNumber(value) || isString$1(value);
 };
-var idCounter = 0;
+var idCounter$1 = 0;
 var uniqueId = function uniqueId2(prefix2) {
-  var id = ++idCounter;
+  var id = ++idCounter$1;
   return "".concat(prefix2 || "").concat(id);
 };
 var getPercentValue = function getPercentValue2(percent, totalValue) {
@@ -28491,8 +28492,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), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative bg-gray-50/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  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(
       ComposedChart,
       {
         data: sortedData,
@@ -28591,10 +28592,10 @@ const AnalyticsChart = ({
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: dateRange && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 flex items-center gap-[4px]", children: [
+    /* @__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.jsx("span", { className: "text-gray-500", children: "Showing data from" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-700", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-700", "data-id": "dashboard_analytics_chart_date_range_value", children: [
           new Date(dateRange.start).toLocaleDateString("en-US", {
             day: "numeric",
             month: "short",
@@ -28608,15 +28609,16 @@ const AnalyticsChart = ({
           })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: chartLines.map((lineConfig) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__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: "w-[8px] h-[8px] rounded-full",
-            style: { backgroundColor: lineConfig.color }
+            style: { backgroundColor: lineConfig.color },
+            "data-id": `dashboard_analytics_chart_legend_color_${lineConfig.dataKey}`
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", children: lineConfig.label })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", "data-id": `dashboard_analytics_chart_legend_label_${lineConfig.dataKey}`, children: lineConfig.label })
       ] }, lineConfig.dataKey)) }) })
     ] })
   ] });
@@ -28703,10 +28705,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), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-md font-medium text-gray-700", children: title }),
-      filtering.enabled && filtering.searchable && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+  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: [
         /* @__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",
@@ -28715,13 +28717,14 @@ const AnalyticsTable = ({
             placeholder: "Search...",
             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"
+            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"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border border-gray-200 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__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(
         "th",
         {
           className: cn(
@@ -28732,17 +28735,19 @@ const AnalyticsTable = ({
           ),
           style: { width: column.width },
           onClick: () => handleSort(column),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+          "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: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: column.title }),
             getSortIcon(column)
           ] })
         },
         column.key
       )) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: paginatedData.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__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(
         "tr",
         {
           className: "hover:bg-gray-50 transition-colors",
+          "data-id": `dashboard_analytics_table_row_${rowIndex}`,
           children: columns.map((column) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             "td",
             {
@@ -28751,6 +28756,7 @@ const AnalyticsTable = ({
                 column.align === "center" && "text-center",
                 column.align === "right" && "text-right"
               ),
+              "data-id": `dashboard_analytics_table_cell_${rowIndex}_${column.key}`,
               children: formatCellValue(row[column.key], column, row)
             },
             column.key
@@ -28759,8 +28765,8 @@ const AnalyticsTable = ({
         rowIndex
       )) })
     ] }) }),
-    pagination.enabled && totalPages > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mt-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500", children: [
+    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: [
         "Showing ",
         (currentPage - 1) * pagination.pageSize + 1,
         " to",
@@ -28771,13 +28777,14 @@ const AnalyticsTable = ({
         processedData.length,
         " results"
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-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",
             children: "Previous"
           }
         ),
@@ -28795,6 +28802,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}`,
               children: pageNum
             },
             pageNum
@@ -28806,12 +28814,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",
             children: "Next"
           }
         )
       ] })
     ] }),
-    paginatedData.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center py-[32px] text-gray-500", 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-id": "dashboard_analytics_table_empty_state", children: searchTerm ? "No results found for your search." : "No data available." })
   ] });
 };
 const DOMAIN = window.location.protocol + "//" + window.location.host;
@@ -29105,20 +29114,21 @@ const AgentListView = ({
     }
     return value.toString();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), 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", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: "Name" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: "Runs" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: "Response Time" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: "Tokens" })
+  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" })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", children: data.slice(0, visibleCount).map((agent, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", "data-id": "dashboard_agent_list_view_body", children: data.slice(0, visibleCount).map((agent, 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}`,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__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(
               IconPreview,
               {
                 icon: agent.icon,
@@ -29127,20 +29137,21 @@ const AgentListView = ({
                 name: agent.name || "Unknown Agent"
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-gray-700 truncate", children: agent.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: agent.name || "Unknown Agent" }) })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", children: agent.runs ? formatValue2(agent.runs) : "-" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", children: agent.responseTime || "-" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", children: agent.tokens ? formatValue2(agent.tokens) : "-" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", "data-id": `dashboard_agent_list_view_row_runs_${index}`, children: agent.runs ? formatValue2(agent.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: agent.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: agent.tokens ? formatValue2(agent.tokens) : "-" })
         ]
       },
       agent.id || index
     )) }),
-    visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-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",
         children: "Load 10 more"
       }
     ) })
@@ -29184,20 +29195,21 @@ const ToolListView = ({
     }
     return value.toString();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), 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", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: "Name" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: "Type" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: "Runs" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: "Response Time" })
+  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" })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", children: data.slice(0, visibleCount).map((tool, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__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(
       "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}`,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__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(
               IconPreview,
               {
                 icon: tool.icon,
@@ -29207,23 +29219,24 @@ const ToolListView = ({
                 toolType: tool["toolType"] || tool["type"]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1 w-full", 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-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", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn(
+          /* @__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(
             "inline-flex items-center px-[10px] py-[4px] rounded-full text-xs font-medium border",
             getToolTypeStyle(tool["toolType"] || tool["type"] || "Default")
-          ), children: getToolTypeName(tool["toolType"] || tool["type"] || "Default") }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", children: tool.runs ? formatValue2(tool.runs) : "-" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", children: tool.responseTime || "-" })
+          ), "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 || "-" })
         ]
       },
       tool.id || index
     )) }),
-    visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-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",
         children: "Load 10 more"
       }
     ) })
@@ -29363,42 +29376,44 @@ const ModelListView = ({
     }
     return value.toString();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), 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", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: "Model Name" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: "Runs" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: "Tokens" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: "Response Time" })
+  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" })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-gray-100", children: data.slice(0, visibleCount).map((model, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__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(
       "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}`,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__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(
               ModelIcon,
               {
                 provider: model.provider
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1 w-full", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-gray-700 truncate", children: model.name || model.modelName || "Unknown Model" }),
-              model.provider && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 truncate", children: getProviderDisplayName(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.jsx("div", { className: "text-center font-medium text-xs text-gray-700", children: formatValue2(model.runs || 0) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", children: formatValue2(model.tokens || model.totalTokens || 0) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center font-medium text-xs text-gray-700", 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-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") })
         ]
       },
       model.id || index
     )) }),
-    visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    visibleCount < data.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-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",
         children: "Load 10 more"
       }
     ) })
@@ -29519,7 +29534,8 @@ const RunsSlider = ({
       "div",
       {
         className: "fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300",
-        onClick: handleClose
+        onClick: handleClose,
+        "data-id": "dashboard_runs_slider_overlay"
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -29530,39 +29546,42 @@ const RunsSlider = ({
           isOpen ? "translate-x-0" : "translate-x-full",
           className
         ),
+        "data-id": "dashboard_runs_slider_panel",
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-3 border-b border-[#d0d5dd]", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-[#101828]", children: config2.title }),
+          /* @__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.jsx(
               "button",
               {
                 onClick: handleClose,
                 className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
+                "data-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", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm font-medium text-[#344054]", children: [
+          /* @__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: [
                 config2.title,
                 " (",
                 formatDate(date2),
                 ")"
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[210px] relative filter-dropdown", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[210px] relative filter-dropdown", "data-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",
                     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", 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-id": "dashboard_runs_slider_filter_menu", children: filterOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "button",
                   {
                     onClick: () => handleFilterSelect(option.value),
@@ -29570,25 +29589,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}`,
                     children: option.label
                   },
                   option.value
                 )) })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-hidden", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#f9fafb] border-b border-[#eaecf0] px-2 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 gap-3 items-center", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "col-span-2 px-0 py-2", 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", 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", 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-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.jsx("div", { className: "overflow-y-auto max-h-[calc(100%-40px)]", children: visibleData.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-64 text-center", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-md font-medium text-gray-900 mb-[8px]", children: [
+              /* @__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: [
                   "No ",
                   config2.title.toLowerCase(),
                   " for this date"
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500", "data-id": "dashboard_runs_slider_empty_state_message", children: [
                   "There were no ",
                   config2.title.toLowerCase(),
                   " recorded on ",
@@ -29600,9 +29620,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}`,
                     children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-2 flex items-center gap-2", children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      /* @__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(
                           IconPreview,
                           {
                             icon: item.icon,
@@ -29614,22 +29635,23 @@ const RunsSlider = ({
                             modelName: item.modelName
                           }
                         ) }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", "data-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", children: item.provider })
+                          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 })
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: formatValue(item.runs) }) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-[#475467]", children: item.responseTime }) })
+                      /* @__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 }) })
                     ]
                   },
                   item.id || index
                 )),
-                visibleCount < filteredData.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                visibleCount < filteredData.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center", "data-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",
                     children: "Load 10 more"
                   }
                 ) })
@@ -31247,7 +31269,7 @@ const ViewRenderer = ({
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("w-full", className), children: renderView() }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("w-full", className), "data-id": "dashboard_view_renderer_root", children: renderView() }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       RunsSlider,
       {
@@ -31658,7 +31680,7 @@ const SectionControls = ({
     }
     return { maxItems: 40, maxLabelLength: 25 };
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex items-center gap-3", className), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex items-center gap-3", className), "data-id": "dashboard_section_controls", children: [
     dropdown && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: dropdown.multiSelect ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       MultiSelect,
       {
@@ -31686,7 +31708,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", 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-id": "dashboard_section_controls_button_group", children: buttons.map((button, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         onClick: () => {
@@ -31699,11 +31721,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}`,
         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]", 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-id": "dashboard_section_controls_view_toggle", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
@@ -31716,6 +31739,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",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(BarChart3, { className: "w-[16px] h-[16px]" })
         }
       ),
@@ -31731,6 +31755,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",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(Table, { className: "w-[16px] h-[16px]" })
         }
       )
@@ -32344,17 +32369,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}`,
       children: [
-        title && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-md font-medium text-gray-700", children: title }),
-          description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500", children: description })
+        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 })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col sm:flex-row gap-[16px]", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCardSkeleton, {}) })
-        ] }) : getUpdatedMetrics().map((metric, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__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(
           MetricCard,
           {
             data: metric,
@@ -32362,8 +32388,8 @@ const DashboardSection = ({
             isFirst: index === 0
           }
         ) }, `${id}-metric-${index}`)) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: getCurrentMetric() && /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-md font-medium text-gray-700", children: (_a = getCurrentMetric()) == null ? void 0 : _a.title }) }),
+        /* @__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 }) }),
           enhancedControls && /* @__PURE__ */ jsxRuntimeExports.jsx(SectionControls, { config: enhancedControls })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -34752,13 +34778,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), children: [
-    /* @__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: [
-        subtitle && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 text-xs w-full", children: subtitle }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 justify-end flex-shrink-0", children: [
-          (isInitialLoading || isAnyChartLoading) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm medium text-gray-500", children: [
+  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: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "h-[16px] w-[16px] animate-spin" }),
             "Loading..."
           ] }),
@@ -34837,6 +34863,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",
         children: dynamicSections.map((section) => {
           var _a2, _b, _c, _d;
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -35938,15 +35965,16 @@ const DataViewer = ({
     setIsModalOpen(false);
   }, []);
   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}`, children: [
-      showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 border-b border-gray-200 px-4 py-2 flex items-center justify-between", children: [
-        isValidJson && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", 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-gray-50 border-b border-gray-200 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.jsx(
             "button",
             {
               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-gray-400" })
             }
           ),
@@ -35956,18 +35984,20 @@ const DataViewer = ({
               onClick: () => handleViewModeChange("interactive"),
               className: `p-1 hover:bg-gray-200 rounded transition-colors ${currentViewMode === "interactive" ? "bg-gray-200" : ""}`,
               title: "Interactive JSON view (fold/unfold)",
+              "data-id": "data_viewer_header_btn_interactive",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "w-4 h-4 text-gray-400" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__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(
             "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-gray-400" })
             }
           ),
@@ -35987,6 +36017,7 @@ const DataViewer = ({
         {
           className: `${padding ? padding : "p-3"} overflow-auto ${darkMode ? "bg-gray-800" : "bg-white"}`,
           style: { maxHeight },
+          "data-id": "data_viewer_content",
           children: [
             isValidJson ? currentViewMode === "interactive" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               JsonViewer,
@@ -35998,7 +36029,7 @@ const DataViewer = ({
                 darkMode
               }
             ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs whitespace-pre ${darkMode ? "text-gray-300" : "text-gray-700"}`, children: JSON.stringify(displayContent, null, 2) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs whitespace-pre-wrap ${darkMode ? "text-gray-300" : "text-gray-700"}`, 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"}`, 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-id": "data_viewer_empty_state", children: "No data available" })
           ]
         }
       )
@@ -36888,14 +36919,15 @@ function DebugCard({
   };
   return (
     // bg-white w-full border-t border-gray-200
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white w-full", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white w-full", "data-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,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[10px] w-full", children: [
+          "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: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
@@ -36909,6 +36941,7 @@ function DebugCard({
                   }
                 },
                 title: hasChildren ? isExpanded ? "Collapse" : "Expand" : "Show details",
+                "data-id": `debug_card_toggle_${node.id}`,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   ChevronRight,
                   {
@@ -36917,17 +36950,18 @@ function DebugCard({
                 )
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] w-full py-[8px] border-b border-gray-200", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 rounded-[8px] bg-[#B2DDFF]", children: getNodeIcon() }),
+            /* @__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.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}`,
                   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", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[12px] text-[10px] text-gray-500", "data-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");
@@ -36937,6 +36971,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}`,
                         children: llmChild.name
                       }
                     );
@@ -36969,6 +37004,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}`,
                         children: [
                           llmUsage.total_tokens.toLocaleString(),
                           " Tokens"
@@ -36978,33 +37014,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]", children: [
+                node.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", "data-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", children: getStatusIcon() })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-id": `debug_card_node_status_${node.id}`, children: getStatusIcon() })
             ] })
           ] })
         }
       ),
-      isSelected && availableTabs.length > 0 && showDetailView && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", 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]" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-[4px] py-[8px] w-full", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-50 rounded-[4px] p-[4px] inline-flex gap-[4px] mb-[8px] border border-gray-200", children: getTabsForNodeType().map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      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(
             "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}`,
               children: tab.charAt(0).toUpperCase() + tab.slice(1)
             },
             tab
           )) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[4px]", children: renderTabContent() })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[4px]", "data-id": `debug_card_detail_panel_tab_content_${node.id}`, children: renderTabContent() })
         ] })
       ] }),
-      isExpanded && hasChildren && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", 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]" }),
+      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}` }),
         node.children.map((child, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           DebugCard,
           {
@@ -37308,14 +37345,14 @@ const DebugPanel = forwardRef(({
     return `${tokens} tokens`;
   };
   if (!sessionTree.runs.length) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex flex-col h-full ${className}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 text-sm", children: "No execution events to display" }) }) });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex flex-col h-full bg-white ${className}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px] p-[24px] overflow-y-auto overflow-x-hidden", ref: scrollContainerRef, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center w-full gap-[16px]", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-400 whitespace-nowrap flex-shrink-0", children: "Session initiated" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 h-[1px] border-t border-dashed border-gray-300 w-full" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-400 flex-shrink-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: sessionTree.sessionId }),
+    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 }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           CopyButton,
           {
@@ -37341,20 +37378,22 @@ const DebugPanel = forwardRef(({
                 }
               }
             },
+            "data-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", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-700", 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-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:" }),
         /* @__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",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-3 h-3" }),
               "Expand All"
@@ -37367,6 +37406,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",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Expand, { className: "w-3 h-3" }),
               "Expand Last"
@@ -37379,6 +37419,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",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { className: "w-3 h-3" }),
               "Collapse All"
@@ -37386,8 +37427,8 @@ const DebugPanel = forwardRef(({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-700", children: "Live Mode:" }),
+      /* @__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(
           "select",
           {
@@ -37395,6 +37436,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",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: "Expand All" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "last", children: "Expand Last" }),
@@ -37404,17 +37446,18 @@ const DebugPanel = forwardRef(({
         )
       ] })
     ] }),
-    sessionTree.runs.map((run) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-[8px] border border-gray-300 bg-white overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 p-[8px] bg-gray-50", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "flex-shrink-0", 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((run) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", "data-id": `debug_panel_run_${run.runId}`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-[8px] border border-gray-300 bg-white overflow-hidden", "data-id": `debug_panel_run_container_${run.runId}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col w-full", "data-id": `debug_panel_run_header_${run.runId}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 p-[8px] bg-gray-50", "data-id": `debug_panel_run_header_content_${run.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_${run.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(run.runId),
               title: run.userInput,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-900 truncate", children: run.userInput || `Run ${run.runId}` })
+              "data-id": `debug_panel_run_title_${run.runId}`,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-900 truncate", "data-id": `debug_panel_run_title_text_${run.runId}`, children: run.userInput || `Run ${run.runId}` })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -37435,6 +37478,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_${run.runId}`,
               children: (() => {
                 const runNodeIds = /* @__PURE__ */ new Set();
                 const collectNodeIds = (node) => {
@@ -37462,13 +37506,14 @@ const DebugPanel = forwardRef(({
               },
               className: "p-1 hover:bg-gray-200 rounded transition-colors flex-shrink-0",
               title: expandedRuns.has(run.runId) ? "Collapse run" : "Expand run",
+              "data-id": `debug_panel_run_toggle_${run.runId}`,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: `w-[16px] h-[16px] text-gray-400 transition-transform ${expandedRuns.has(run.runId) ? "rotate-180" : ""}` })
             }
           )
         ] }) }),
-        expandedRuns.has(run.runId) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white w-full flex flex-col", children: run.rootNodes && run.rootNodes.map((rootNode, index) => {
+        expandedRuns.has(run.runId) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white w-full flex flex-col", "data-id": `debug_panel_run_execution_trees_${run.runId}`, children: run.rootNodes && run.rootNodes.map((rootNode, index) => {
           var _a;
-          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", "data-id": `debug_panel_run_root_node_${run.runId}_${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             DebugCard,
             {
               node: updateTreeExpansion(rootNode),
@@ -37554,22 +37599,22 @@ const DebugPanel = forwardRef(({
           };
           const outputFromNodes = run.rootNodes ? findFinalOutput(run.rootNodes) : void 0;
           const finalOutput = outputFromNodes || run.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", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "flex-shrink-0", 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), children: convertToString(finalOutput) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] flex-shrink-0", children: [
-              run.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", 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-id": `debug_panel_run_final_output_${run.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_${run.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_${run.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_${run.runId}`, children: [
+              run.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", "data-id": `debug_panel_run_final_output_duration_${run.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(run.duration) })
               ] }),
-              run.totalTokens && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-gray-500 whitespace-nowrap", children: formatTokens(run.totalTokens) })
+              run.totalTokens && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-gray-500 whitespace-nowrap", "data-id": `debug_panel_run_final_output_tokens_${run.runId}`, children: formatTokens(run.totalTokens) })
             ] })
           ] }) : null;
         })()
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2 py-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400", children: run.runId }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2 py-1", "data-id": `debug_panel_run_footer_${run.runId}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400", "data-id": `debug_panel_run_footer_id_${run.runId}`, children: run.runId }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": `debug_panel_run_footer_actions_${run.runId}`, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             CopyButton,
             {
@@ -37595,6 +37640,7 @@ const DebugPanel = forwardRef(({
                   }
                 }
               },
+              "data-id": `debug_panel_run_footer_external_link_${run.runId}`,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3 h-3 text-gray-400" })
             }
           )
@@ -37605,7 +37651,7 @@ const DebugPanel = forwardRef(({
 });
 DebugPanel.displayName = "DebugPanel";
 function Header() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white h-[56px] relative shrink-0 w-full", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white h-[56px] relative shrink-0 w-full", "data-id": "prompt-editor_header", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -37613,13 +37659,14 @@ function Header() {
         className: "absolute border-[#d0d5dd] border-[0px_0px_1px] border-solid inset-0 pointer-events-none"
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "box-border content-stretch flex gap-[16px] h-[56px] items-center px-[16px] py-[8px] relative w-full justify-between", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center size-full", "data-id": "prompt-editor_header_inner", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "box-border content-stretch flex gap-[16px] h-[56px] items-center px-[16px] py-[8px] relative w-full justify-between", "data-id": "prompt-editor_header_content", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: " font-medium text-[16px] leading-[24px] text-[#101828]", children: "Orchestration Prompt" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           className: "relative shrink-0 size-[20px] hover:opacity-70 transition-opacity cursor-pointer",
           "aria-label": "Close",
+          "data-id": "prompt-editor_header_close_btn",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "svg",
             {
@@ -37833,8 +37880,9 @@ function RefineDropdown({
       },
       onClick: (e3) => e3.stopPropagation(),
       onMouseDown: (e3) => e3.stopPropagation(),
+      "data-id": "prompt-editor_refine_dropdown",
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "box-border content-stretch flex flex-col gap-[8px] items-start p-[12px] relative w-full", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "content-stretch flex flex-col items-start relative shrink-0 w-full", children: MENU_ITEMS.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "content-stretch flex flex-col gap-[4px] items-start relative shrink-0 w-full", "data-id": "prompt-editor_refine_dropdown_menu_items", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "content-stretch flex flex-col items-start relative shrink-0 w-full", "data-id": "prompt-editor_refine_dropdown_menu_items_list", children: MENU_ITEMS.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             onClick: (e3) => {
@@ -37848,6 +37896,7 @@ function RefineDropdown({
             },
             className: "content-stretch flex items-center relative shrink-0 w-full hover:bg-gray-50 transition-colors rounded-[4px] cursor-pointer",
             style: { pointerEvents: "auto", zIndex: 1e3 },
+            "data-id": `prompt-editor_refine_dropdown_btn_${item.id}`,
             children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "basis-0 grow h-[40px] min-h-px min-w-px relative rounded-[4px] shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-center size-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "box-border content-stretch flex flex-col gap-[8px] h-[40px] items-start justify-center px-[12px] py-[8px] relative w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "content-stretch flex gap-[8px] items-center relative shrink-0 w-full", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(item.icon, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "basis-0  grow leading-[20px] min-h-px min-w-px not-italic relative shrink-0 text-[#101828] text-[14px] text-left", children: item.label })
@@ -37856,7 +37905,7 @@ function RefineDropdown({
           item.id
         )) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-px bg-[#eaecf0] shrink-0" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white h-[40px] relative rounded-[8px] shrink-0 w-full border border-[#d0d5dd]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center overflow-clip rounded-[inherit] size-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "box-border content-stretch flex flex-col gap-[24px] h-[40px] items-center pl-[16px] pr-[8px] py-[8px] relative w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "content-stretch flex gap-[8px] items-center relative shrink-0 w-full", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white h-[40px] relative rounded-[8px] shrink-0 w-full border border-[#d0d5dd]", "data-id": "prompt-editor_refine_dropdown_input_section", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center overflow-clip rounded-[inherit] size-full", "data-id": "prompt-editor_refine_dropdown_input_wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "box-border content-stretch flex flex-col gap-[24px] h-[40px] items-center pl-[16px] pr-[8px] py-[8px] relative w-full", "data-id": "prompt-editor_refine_dropdown_input_inner", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "content-stretch flex gap-[8px] items-center relative shrink-0 w-full", "data-id": "prompt-editor_refine_dropdown_input_container", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(GenerateIcon, {}),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
@@ -37867,7 +37916,8 @@ function RefineDropdown({
               onChange: (e3) => setCustomInput(e3.target.value),
               onKeyDown: handleKeyDown,
               placeholder: "Modify with a prompt",
-              className: "basis-0 grow  leading-[20px] not-italic text-[14px] text-[#101828] placeholder:text-[#98a2b3] outline-none bg-transparent border-none"
+              className: "basis-0 grow  leading-[20px] not-italic text-[14px] text-[#101828] placeholder:text-[#98a2b3] outline-none bg-transparent border-none",
+              "data-id": "prompt-editor_refine_dropdown_input"
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -37876,6 +37926,7 @@ function RefineDropdown({
               onClick: handleSubmit,
               disabled: !customInput.trim(),
               className: "shrink-0",
+              "data-id": "prompt-editor_refine_dropdown_submit_btn",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowCircleUpIcon, { isActive: !!customInput.trim() })
             }
           )
@@ -37908,7 +37959,7 @@ function SectionHeader({
     onOpenRefineModal("whole", sectionContent, instruction);
     setIsRefineDropdownOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative shrink-0 w-full", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative shrink-0 w-full", "data-id": "prompt-editor_section_header", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -37916,8 +37967,8 @@ function SectionHeader({
         className: "absolute border-[#eaecf0] border-[0px_0px_1px] border-solid inset-0 pointer-events-none"
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center justify-center size-full h-[64px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "box-border content-stretch flex gap-[12px] items-center px-[24px] py-[16px] relative w-full justify-between", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "content-stretch flex gap-[4px] items-center relative shrink-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center justify-center size-full h-[64px]", "data-id": "prompt-editor_section_header_inner", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "box-border content-stretch flex gap-[12px] items-center px-[24px] py-[16px] relative w-full justify-between", "data-id": "prompt-editor_section_header_content", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "content-stretch flex gap-[4px] items-center relative shrink-0", "data-id": "prompt-editor_section_header_tabs", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -37928,6 +37979,7 @@ function SectionHeader({
             },
             className: `box-border content-stretch flex gap-[8px] items-center justify-center overflow-clip px-[8px] py-[4px] relative rounded-[4px] shrink-0 transition-colors cursor-pointer ${activeFormat === "editor" ? "bg-[#eff4ff]" : "hover:bg-gray-100"}`,
             style: { pointerEvents: "auto", zIndex: 10 },
+            "data-id": "prompt-editor_section_header_tab_editor",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               "p",
               {
@@ -37947,6 +37999,7 @@ function SectionHeader({
             },
             className: `box-border content-stretch flex gap-[8px] items-center justify-center overflow-clip px-[8px] py-[4px] relative rounded-[4px] shrink-0 transition-colors cursor-pointer ${activeFormat === "preview" ? "bg-[#eff4ff]" : "hover:bg-gray-100"}`,
             style: { pointerEvents: "auto", zIndex: 10 },
+            "data-id": "prompt-editor_section_header_tab_preview",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               "p",
               {
@@ -37957,7 +38010,7 @@ function SectionHeader({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shrink-0", children: activeFormat === "editor" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shrink-0", "data-id": "prompt-editor_section_header_refine_btn_container", children: activeFormat === "editor" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
         {
           ref: refineButtonRef,
@@ -37972,6 +38025,7 @@ function SectionHeader({
             e3.stopPropagation();
           },
           style: { pointerEvents: "auto", zIndex: 10 },
+          "data-id": "prompt-editor_section_header_btn_refine_ai",
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative size-[16px] shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PencilAi, {}) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: " leading-[16px] not-italic relative shrink-0 text-[12px] text-nowrap whitespace-pre text-[#344054]", children: "Refine with AI" })
@@ -37993,11 +38047,12 @@ function SectionHeader({
 }
 function AddToolbar({ onAdd, isNested = false, isRootLevel = false }) {
   const buttonText = isRootLevel ? "Add Section" : "Add Subsection";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "content-stretch flex flex-col gap-[4px] items-start relative", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "content-stretch flex gap-[8px] items-start relative shrink-0", children: !isNested && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "content-stretch flex flex-col gap-[4px] items-start relative", "data-id": "prompt-editor_add_toolbar", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "content-stretch flex gap-[8px] items-start relative shrink-0", "data-id": "prompt-editor_add_toolbar_buttons", children: !isNested && /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
     {
       onClick: () => onAdd("subsection"),
       className: "bg-white relative rounded-[4px] shrink-0 hover:bg-gray-50 transition-colors",
+      "data-id": `prompt-editor_add_toolbar_btn_${isRootLevel ? "section" : "subsection"}`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "box-border content-stretch flex flex-col gap-[10px] items-center justify-center overflow-clip px-[12px] py-[4px] relative rounded-[inherit]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "box-border content-stretch flex gap-[4px] items-center justify-center px-0 py-[2px] relative shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { className: "size-[12px] text-[#344054]", strokeWidth: 2 }),
@@ -38203,8 +38258,8 @@ function InsertMenu({
     ];
     const hasDynamicData = suggestions && suggestions.length > 0;
     const hasAnyData = hasDynamicData || systemVariables.length > 0;
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-[4px]", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[12px] py-[8px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: " text-[12px] text-[#667085]", children: "Insert from:" }) }),
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-[4px]", "data-id": "prompt-editor_insert_menu_categories", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[12px] py-[8px]", "data-id": "prompt-editor_insert_menu_categories_header", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: " text-[12px] text-[#667085]", children: "Insert from:" }) }),
       !hasAnyData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[12px] py-[16px] text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: " text-[14px] text-[#667085]", children: "No data available" }) }) : categories.map((category, index) => {
         const categoryItems = getItemsByTypeDynamic(category.type);
         const hasItems = categoryItems.length > 0;
@@ -38215,6 +38270,7 @@ function InsertMenu({
             onClick: () => hasItems && handleCategoryClick(category.type),
             disabled: !hasItems,
             className: `w-full flex items-center justify-between px-[12px] py-[8px] transition-colors ${!hasItems ? "opacity-50 cursor-not-allowed" : selectedIndex === index ? "bg-[#f2f4f7]" : "hover:bg-[#f9fafb]"}`,
+            "data-id": `prompt-editor_insert_menu_category_${category.type}`,
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
                 getCategoryIcon(category.type),
@@ -38230,12 +38286,13 @@ function InsertMenu({
   };
   const renderItems = () => {
     const hasNoResults = filteredItems.length === 0;
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-[4px]", children: [
-      !searchQuery && selectedCategory && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-[41px] border-b border-[#eaecf0]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-[4px]", "data-id": "prompt-editor_insert_menu_items", children: [
+      !searchQuery && selectedCategory && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-[41px] border-b border-[#eaecf0]", "data-id": "prompt-editor_insert_menu_back_button_container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
         {
           onClick: handleBackToCategories,
           className: "box-border flex items-center gap-[4px] h-full px-[12px] py-[13px] hover:bg-[#f9fafb] transition-colors w-full",
+          "data-id": "prompt-editor_insert_menu_back_btn",
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative shrink-0 size-[16px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               "path",
@@ -38262,6 +38319,7 @@ function InsertMenu({
           ref: (el) => itemRefs.current[index] = el,
           onClick: () => onSelect(item),
           className: `w-full flex items-center px-[12px] py-[8px] transition-colors group ${selectedIndex === index ? "bg-[#f2f4f7]" : "hover:bg-[#f9fafb]"}`,
+          "data-id": `prompt-editor_insert_menu_item_${item.type}_${item.id}`,
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
             getCategoryIcon(item.type),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: " text-[14px] text-[#344054]", children: item.displayName })
@@ -38280,6 +38338,7 @@ function InsertMenu({
         top: `${position.top}px`,
         left: `${position.left}px`
       },
+      "data-id": "prompt-editor_insert_menu",
       children: menuMode === "categories" ? renderCategories() : renderItems()
     }
   );
@@ -38549,7 +38608,7 @@ function EditableContent({
     }
   };
   const shouldShowPlaceholder = showPlaceholder && (!content || content === "" || content === "<br>");
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", "data-id": "prompt-editor_editable_content", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -38568,7 +38627,8 @@ function EditableContent({
         },
         className: `outline-none cursor-text ${className} ${shouldShowPlaceholder ? "empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400" : ""}`,
         "data-placeholder": placeholder,
-        suppressContentEditableWarning: true
+        suppressContentEditableWarning: true,
+        "data-id": "prompt-editor_editable_content_editor"
       }
     ),
     showVariableDropdown && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -38850,6 +38910,11 @@ function findOriginalPosition(originalText, normalizedText, normalizedIndex) {
   }
   return originalPos;
 }
+let idCounter = 0;
+function generateUniqueId(prefix2 = "content") {
+  idCounter++;
+  return `${prefix2}-${Date.now()}-${idCounter}-${Math.random().toString(36).substr(2, 9)}`;
+}
 function parseMarkdownToBlocks(markdown, depth = 0) {
   const blocks = [];
   const lines = markdown.split("\n");
@@ -38883,7 +38948,7 @@ function parseMarkdownToBlocks(markdown, depth = 0) {
     }
     if (headingLevel !== null) {
       const subsectionBlock = {
-        id: `content-${Date.now()}-${Math.random()}`,
+        id: generateUniqueId("subsection"),
         type: "subsection",
         content: markdownToHtml(subsectionTitle),
         headingLevel,
@@ -38904,7 +38969,7 @@ function parseMarkdownToBlocks(markdown, depth = 0) {
       }
       if (!subsectionBlock.children || subsectionBlock.children.length === 0) {
         subsectionBlock.children = [{
-          id: `content-${Date.now()}-child`,
+          id: generateUniqueId("child"),
           type: "text",
           content: ""
         }];
@@ -38926,7 +38991,7 @@ function parseMarkdownToBlocks(markdown, depth = 0) {
       }
       const listHtml = "<ul>" + listItems.map((item) => `<li>${markdownToHtml(item)}</li>`).join("") + "</ul>";
       blocks.push({
-        id: `content-${Date.now()}-${Math.random()}`,
+        id: generateUniqueId("list"),
         type: "text",
         content: listHtml,
         listType: "bulleted"
@@ -38952,7 +39017,7 @@ function parseMarkdownToBlocks(markdown, depth = 0) {
       }
       const listHtml = "<ol>" + listItems.map((item) => `<li>${markdownToHtml(item)}</li>`).join("") + "</ol>";
       blocks.push({
-        id: `content-${Date.now()}-${Math.random()}`,
+        id: generateUniqueId("list"),
         type: "text",
         content: listHtml,
         listType: "numbered"
@@ -38971,7 +39036,7 @@ function parseMarkdownToBlocks(markdown, depth = 0) {
     }
     if (textLines.length > 0) {
       blocks.push({
-        id: `content-${Date.now()}-${Math.random()}`,
+        id: generateUniqueId("text"),
         type: "text",
         content: markdownToHtml(textLines.join("\n"))
       });
@@ -38979,7 +39044,7 @@ function parseMarkdownToBlocks(markdown, depth = 0) {
   }
   if (blocks.length === 0) {
     blocks.push({
-      id: `content-${Date.now()}`,
+      id: generateUniqueId("text"),
       type: "text",
       content: ""
     });
@@ -39213,6 +39278,7 @@ function FormattingToolbar({ onFormat, onOpenRefineModal }) {
           left: `${position.left}px`,
           transform: "translateX(-50%)"
         },
+        "data-id": "prompt-editor_formatting_toolbar",
         children: [
           buttons.map((btn) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
@@ -39224,6 +39290,7 @@ function FormattingToolbar({ onFormat, onOpenRefineModal }) {
               className: "p-2 hover:bg-gray-100 rounded transition-colors",
               title: btn.label,
               onMouseDown: (e3) => e3.preventDefault(),
+              "data-id": `prompt-editor_formatting_toolbar_btn_${btn.command}`,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(btn.icon, { className: "size-4 text-[#344054]" })
             },
             btn.command
@@ -39244,6 +39311,7 @@ function FormattingToolbar({ onFormat, onOpenRefineModal }) {
               className: "flex items-center gap-1.5 px-2 py-2 hover:bg-gray-100 rounded transition-colors cursor-pointer",
               title: "Refine with AI",
               style: { pointerEvents: "auto", zIndex: 100 },
+              "data-id": "prompt-editor_formatting_toolbar_btn_refine_ai",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PencilAi, {}) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: " text-[14px] text-[#344054] leading-[20px] whitespace-nowrap", children: "Refine with AI" })
@@ -39314,6 +39382,7 @@ function ContentBlock({
           e3.stopPropagation();
           onSetActive(block.id);
         },
+        "data-id": `prompt-editor_subsection_${block.id}`,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 mb-3 group", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -39333,11 +39402,12 @@ function ContentBlock({
                 onClick: onDelete,
                 className: "opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-gray-100 rounded",
                 title: "Delete subsection",
+                "data-id": `prompt-editor_subsection_delete_btn_${block.id}`,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-4 text-gray-500" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 mb-3", children: (_a = block.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 mb-3", "data-id": `prompt-editor_subsection_children_${block.id}`, children: (_a = block.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             ContentBlock,
             {
               block: child,
@@ -39379,13 +39449,15 @@ function ContentBlock({
         e3.stopPropagation();
         onSetActive(parentId);
       },
+      "data-id": `prompt-editor_text_block_${block.id}`,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-start", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-start", "data-id": `prompt-editor_text_block_container_${block.id}`, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               className: "flex-1 min-h-[40px]",
               "data-block-id": block.id,
+              "data-id": `prompt-editor_text_block_content_${block.id}`,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 EditableContent,
                 {
@@ -39406,6 +39478,7 @@ function ContentBlock({
               onClick: onDelete,
               className: "opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-gray-100 rounded",
               title: "Delete text block",
+              "data-id": `prompt-editor_text_block_delete_btn_${block.id}`,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-4 text-gray-500" })
             }
           )
@@ -39755,6 +39828,7 @@ function Section({
     {
       ref,
       className: "bg-white flex flex-col h-full relative rounded-[12px] shrink-0 w-full",
+      "data-id": `prompt-editor_section_${safeSection.id}`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           SectionHeader,
@@ -39780,11 +39854,12 @@ function Section({
                 onSetActive(section.id);
               }
             },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "box-border content-stretch flex flex-col gap-[16px] items-start px-[24px] py-[16px] relative w-full", children: renderContent2() })
+            "data-id": `prompt-editor_section_content_${safeSection.id}`,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "box-border content-stretch flex flex-col gap-[16px] items-start px-[24px] py-[16px] relative w-full", "data-id": `prompt-editor_section_content_inner_${safeSection.id}`, children: renderContent2() })
           }
         ) : (
           // Code editor takes full width without padding
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden relative shrink-0 w-full", children: renderContent2() })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden relative shrink-0 w-full", "data-id": `prompt-editor_section_preview_${safeSection.id}`, children: renderContent2() })
         )
       ]
     }
@@ -39792,19 +39867,20 @@ function Section({
 }
 function ChatMessage({ role, content, quotedText, onInsert, onReplace, showActions = false, isUsed = false }) {
   if (role === "user") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-[#f2f4f7] text-[#101828] rounded-[12px] px-[16px] py-[12px] max-w-[80%]", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-4", "data-id": "prompt-editor_chat_message_user", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-[#f2f4f7] text-[#101828] rounded-[12px] px-[16px] py-[12px] max-w-[80%]", "data-id": "prompt-editor_chat_message_user_content", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: " text-[14px] leading-[20px] whitespace-pre-wrap", children: content }),
       quotedText && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-[12px] pl-[12px] border-l-2 border-[#d0d5dd]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: " text-[13px] leading-[18px] text-[#667085] whitespace-pre-wrap", children: quotedText }) })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-start mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[8px]", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#f2f4f7] text-[#101828] rounded-[12px] px-[16px] py-[12px] max-w-[80%]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: " text-[14px] leading-[20px] whitespace-pre-wrap", children: content }) }),
-    showActions && !isUsed && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-start mb-4", "data-id": "prompt-editor_chat_message_assistant", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[8px]", "data-id": "prompt-editor_chat_message_assistant_container", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#f2f4f7] text-[#101828] rounded-[12px] px-[16px] py-[12px] max-w-[80%]", "data-id": "prompt-editor_chat_message_assistant_content", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: " text-[14px] leading-[20px] whitespace-pre-wrap", children: content }) }),
+    showActions && !isUsed && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", "data-id": "prompt-editor_chat_message_actions", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: () => onReplace == null ? void 0 : onReplace(content),
           className: "bg-white border border-[#eaecf0] rounded-[9999px] px-[8px] py-[2px]  font-medium text-[14px] leading-[20px] text-[#344054] hover:bg-gray-50 transition-colors cursor-pointer",
+          "data-id": "prompt-editor_chat_message_btn_replace",
           children: "Replace"
         }
       ),
@@ -39813,6 +39889,7 @@ function ChatMessage({ role, content, quotedText, onInsert, onReplace, showActio
         {
           onClick: () => onInsert == null ? void 0 : onInsert(content),
           className: "bg-white border border-[#eaecf0] rounded-[9999px] px-[8px] py-[2px]  font-medium text-[14px] leading-[20px] text-[#344054] hover:bg-gray-50 transition-colors cursor-pointer",
+          "data-id": "prompt-editor_chat_message_btn_insert",
           children: "Insert"
         }
       )
@@ -40052,19 +40129,20 @@ ${actualTextToRefine}` : instruction,
     }
   };
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white border border-[#d0d5dd] h-full flex flex-col shrink-0 rounded-[12px] shadow-[0px_1px_2px_0px_rgba(16,24,40,0.04)]", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[60px] border-b border-[#eaecf0] flex items-center justify-between px-[16px] shrink-0", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white border border-[#d0d5dd] h-full flex flex-col shrink-0 rounded-[12px] shadow-[0px_1px_2px_0px_rgba(16,24,40,0.04)]", "data-id": "prompt-editor_refine_panel_root", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[60px] border-b border-[#eaecf0] flex items-center justify-between px-[16px] shrink-0", "data-id": "prompt-editor_refine_panel_header", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-[16px] leading-[24px] text-[#101828]", children: "Refine with AI" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: onClose,
           className: "p-1 hover:bg-gray-100 rounded transition-colors",
+          "data-id": "prompt-editor_refine_panel_close_btn",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-5 text-[#101828]" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-[16px] py-[16px] min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px] justify-end min-h-full", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-[16px] py-[16px] min-h-0", "data-id": "prompt-editor_refine_panel_chat_area", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px] justify-end min-h-full", "data-id": "prompt-editor_refine_panel_messages_container", children: [
       messages.map((msg, idx) => {
         const lastAssistantIndex = getLastAssistantMessageIndex();
         const isLastAssistant = msg.role === "assistant" && idx === lastAssistantIndex;
@@ -40086,7 +40164,7 @@ ${actualTextToRefine}` : instruction,
       isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonMessage, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: chatEndRef })
     ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[16px] py-[16px] border-t border-[#eaecf0] shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-[8px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 bg-white h-[44px] relative rounded-[8px] border border-[#d0d5dd]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center h-full px-[16px] gap-[8px]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[16px] py-[16px] border-t border-[#eaecf0] shrink-0", "data-id": "prompt-editor_refine_panel_input_area", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-[8px]", "data-id": "prompt-editor_refine_panel_input_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 bg-white h-[44px] relative rounded-[8px] border border-[#d0d5dd]", "data-id": "prompt-editor_refine_panel_input_wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center h-full px-[16px] gap-[8px]", "data-id": "prompt-editor_refine_panel_input_inner", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(GenerateIcon, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
@@ -40098,7 +40176,8 @@ ${actualTextToRefine}` : instruction,
           onKeyDown: handleKeyDown,
           placeholder: "Iterate further",
           disabled: isLoading,
-          className: "flex-1 min-w-0 text-[14px] leading-[20px] text-[#101828] placeholder:text-[#98a2b3] outline-none bg-transparent"
+          className: "flex-1 min-w-0 text-[14px] leading-[20px] text-[#101828] placeholder:text-[#98a2b3] outline-none bg-transparent",
+          "data-id": "prompt-editor_refine_panel_input"
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -40106,6 +40185,7 @@ ${actualTextToRefine}` : instruction,
         {
           onClick: handleIterate,
           disabled: !iterateInput.trim() || isLoading,
+          "data-id": "prompt-editor_refine_panel_submit_btn",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowCircleUpIcon, { isActive: !!iterateInput.trim() && !isLoading })
         }
       )
@@ -40240,15 +40320,20 @@ function PromptEditor({
     if (type === "subsection" && parentId) {
       headingLevel = findParentAndGetHeadingLevel(internalValue, parentId) ?? 1;
     }
+    const generateUniqueId2 = (prefix2 = "content") => {
+      const counter = Date.now();
+      const random = Math.random().toString(36).substr(2, 9);
+      return `${prefix2}-${counter}-${random}`;
+    };
     const newBlock = {
-      id: `content-${Date.now()}`,
+      id: generateUniqueId2("block"),
       type,
       content: initialContent !== void 0 ? initialContent : "",
       listType,
       headingLevel: type === "subsection" ? headingLevel : void 0,
       children: type === "subsection" ? [
         {
-          id: `content-${Date.now()}-child`,
+          id: generateUniqueId2("child"),
           type: "text",
           content: ""
         }
@@ -40599,10 +40684,10 @@ function PromptEditor({
     }
     return await onRefine(context);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `bg-white content-stretch flex flex-col items-start relative size-full ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `bg-white content-stretch flex flex-col items-start relative size-full ${className}`, "data-id": "prompt-editor_root", children: [
     showHeader && /* @__PURE__ */ jsxRuntimeExports.jsx(Header, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "basis-0 bg-gray-50 grow min-h-px min-w-px relative shrink-0 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "box-border content-stretch flex gap-[24px] items-stretch px-[32px] py-[24px] relative h-full", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white flex-1 h-full relative rounded-[12px] shrink-0 flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "basis-0 bg-gray-50 grow min-h-px min-w-px relative shrink-0 w-full", "data-id": "prompt-editor_main_container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "box-border content-stretch flex gap-[24px] items-stretch px-[32px] py-[24px] relative h-full", "data-id": "prompt-editor_panels_container", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white flex-1 h-full relative rounded-[12px] shrink-0 flex flex-col overflow-hidden", "data-id": "prompt-editor_editor_container", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Section,
           {
@@ -40633,7 +40718,7 @@ function PromptEditor({
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "aria-hidden": "true", className: "absolute border border-[#d0d5dd] border-solid inset-0 pointer-events-none rounded-[12px] shadow-[0px_1px_2px_0px_rgba(16,24,40,0.04)]" })
       ] }),
-      refineContext && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `transition-all duration-300 h-full ${refinePanelOpen ? "w-[400px] opacity-100" : "w-0 opacity-0 overflow-hidden"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      refineContext && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `transition-all duration-300 h-full ${refinePanelOpen ? "w-[400px] opacity-100" : "w-0 opacity-0 overflow-hidden"}`, "data-id": "prompt-editor_refine_panel_container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         RefinePanel,
         {
           isOpen: refinePanelOpen,