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

package/dist/ui-libs.umd.js

@@ -3905,9 +3905,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           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(
@@ -3925,8 +3926,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               ] })
             ] })
           ] }),
-          /* @__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",
               {
@@ -28509,8 +28510,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     console.log("Chart lines configuration:", chartLines);
     console.log("Sample filled data points:", sortedData.slice(0, 3));
     console.log("=== END ANALYTICS CHART DEBUG ===");
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), 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,
@@ -28609,10 +28610,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ]
         }
       ) }) }),
-      /* @__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",
@@ -28626,15 +28627,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             })
           ] })
         ] }) }),
-        /* @__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)) }) })
       ] })
     ] });
@@ -28721,10 +28723,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-[12px] h-[12px] opacity-30 -mt-1" })
       ] });
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full", className), 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",
@@ -28733,13 +28735,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               placeholder: "Search...",
               value: searchTerm,
               onChange: (e) => handleSearch(e.target.value),
-              className: "pl-[36px] pr-[12px] py-[8px] border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              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(
@@ -28750,17 +28753,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             ),
             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",
               {
@@ -28769,6 +28774,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   column.align === "center" && "text-center",
                   column.align === "right" && "text-right"
                 ),
+                "data-id": `dashboard_analytics_table_cell_${rowIndex}_${column.key}`,
                 children: formatCellValue(row[column.key], column, row)
               },
               column.key
@@ -28777,8 +28783,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           rowIndex
         )) })
       ] }) }),
-      pagination.enabled && totalPages > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mt-4", 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",
@@ -28789,13 +28795,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           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"
             }
           ),
@@ -28813,6 +28820,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   "px-[12px] py-[4px] text-xs border rounded",
                   currentPage === pageNum ? "bg-blue-500 text-white border-blue-500" : "border-gray-200 hover:bg-gray-50"
                 ),
+                "data-id": `dashboard_analytics_table_pagination_btn_page_${pageNum}`,
                 children: pageNum
               },
               pageNum
@@ -28824,12 +28832,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               onClick: () => setCurrentPage((prev) => Math.min(totalPages, prev + 1)),
               disabled: currentPage === totalPages,
               className: "px-[12px] py-[4px] text-xs border border-gray-200 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
+              "data-id": "dashboard_analytics_table_pagination_btn_next",
               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;
@@ -29123,20 +29132,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       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,
@@ -29145,20 +29155,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   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"
         }
       ) })
@@ -29202,20 +29213,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       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,
@@ -29225,23 +29237,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   toolType: tool["toolType"] || tool["type"]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1 w-full", 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"
         }
       ) })
@@ -29381,42 +29394,44 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       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"
         }
       ) })
@@ -29537,7 +29552,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         "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(
@@ -29548,39 +29564,42 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             isOpen ? "translate-x-0" : "translate-x-full",
             className
           ),
+          "data-id": "dashboard_runs_slider_panel",
           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),
@@ -29588,25 +29607,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                         "w-full px-3.5 py-2.5 text-left text-sm hover:bg-gray-50 transition-colors",
                         selectedFilter === option.value ? "bg-blue-50 text-blue-700" : "text-[#101828]"
                       ),
+                      "data-id": `dashboard_runs_slider_filter_option_${option.value}`,
                       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 ",
@@ -29618,9 +29638,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     "div",
                     {
                       className: "grid grid-cols-4 gap-3 items-center px-2 py-3 border-b border-[#eaecf0] hover:bg-gray-50 transition-colors",
+                      "data-id": `dashboard_runs_slider_table_row_${index}`,
                       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,
@@ -29632,22 +29653,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                               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"
                     }
                   ) })
@@ -31265,7 +31287,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("w-full", className), children: renderView() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("w-full", className), "data-id": "dashboard_view_renderer_root", children: renderView() }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         RunsSlider,
         {
@@ -31676,7 +31698,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return { maxItems: 40, maxLabelLength: 25 };
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex items-center gap-3", className), 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,
         {
@@ -31704,7 +31726,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           className: "w-48"
         }
       ) }),
-      buttons && buttons.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center border border-gray-200 rounded-lg overflow-hidden", 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: () => {
@@ -31717,11 +31739,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             button.active ? "bg-white text-gray-900 shadow-[0 1px 3px 0  rgba(16, 24, 40, 0.08), 0  1px 2px 0 rgba(16, 24, 40, 0.08)]" : "text-gray-500 bg-white",
             index > 0 && "border-l border-gray-200"
           ),
+          "data-id": `dashboard_section_controls_btn_${button.value}`,
           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",
           {
@@ -31734,6 +31757,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               "hover:bg-white ",
               toggle.chartView ? "bg-white text-gray-900 shadow-md" : "text-gray-500 bg-white"
             ),
+            "data-id": "dashboard_section_controls_view_toggle_btn_chart",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(BarChart3, { className: "w-[16px] h-[16px]" })
           }
         ),
@@ -31749,6 +31773,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               "hover:bg-white ",
               toggle.tableView ? "bg-white text-gray-900 shadow-md" : "text-gray-500 bg-white"
             ),
+            "data-id": "dashboard_section_controls_view_toggle_btn_table",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(Table, { className: "w-[16px] h-[16px]" })
           }
         )
@@ -32362,17 +32387,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           gridColumn: (layout == null ? void 0 : layout.span) ? `span ${layout.span}` : void 0,
           order: layout == null ? void 0 : layout.order
         },
+        "data-id": `dashboard_section_${id}`,
         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,
@@ -32380,8 +32406,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               isFirst: index === 0
             }
           ) }, `${id}-metric-${index}`)) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", 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(
@@ -34770,13 +34796,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       onExport == null ? void 0 : onExport();
     };
     const isAnyChartLoading = Object.values(sectionChartLoading).some((loading) => loading);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("w-full h-full flex flex-col overflow-hidden", className), 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..."
             ] }),
@@ -34855,6 +34881,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             gridTemplateColumns: layout.responsive ? void 0 : `repeat(${layout.columns}, minmax(0, 1fr))`,
             gap: layout.gap ? `${layout.gap}px` : void 0
           },
+          "data-id": "dashboard_sections_grid",
           children: dynamicSections.map((section) => {
             var _a2, _b, _c, _d;
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -35956,15 +35983,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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" })
               }
             ),
@@ -35974,18 +36002,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 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" })
               }
             ),
@@ -36005,6 +36035,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           {
             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,
@@ -36016,7 +36047,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   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" })
             ]
           }
         )
@@ -36906,14 +36937,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     };
     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",
                 {
@@ -36927,6 +36959,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     }
                   },
                   title: hasChildren ? isExpanded ? "Collapse" : "Expand" : "Show details",
+                  "data-id": `debug_card_toggle_${node.id}`,
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     ChevronRight,
                     {
@@ -36935,17 +36968,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   )
                 }
               ),
-              /* @__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");
@@ -36955,6 +36989,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                         {
                           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
                         }
                       );
@@ -36987,6 +37022,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                           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"
@@ -36996,33 +37032,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,
             {
@@ -37326,14 +37363,14 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
       return `${tokens} tokens`;
     };
     if (!sessionTree.runs.length) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex flex-col h-full ${className}`, 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,
             {
@@ -37359,20 +37396,22 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                   }
                 }
               },
+              "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"
@@ -37385,6 +37424,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               onClick: handleExpandLast,
               className: "flex items-center gap-1 px-2 py-1 text-xs bg-white hover:bg-gray-50 border border-gray-300 rounded transition-colors",
               title: "Expand only the last execution path",
+              "data-id": "debug_panel_expansion_controls_btn_expand_last",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Expand, { className: "w-3 h-3" }),
                 "Expand Last"
@@ -37397,6 +37437,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               onClick: handleCollapseAll,
               className: "flex items-center gap-1 px-2 py-1 text-xs bg-white hover:bg-gray-50 border border-gray-300 rounded transition-colors",
               title: "Collapse all nodes",
+              "data-id": "debug_panel_expansion_controls_btn_collapse_all",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { className: "w-3 h-3" }),
                 "Collapse All"
@@ -37404,8 +37445,8 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             }
           )
         ] }),
-        /* @__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",
             {
@@ -37413,6 +37454,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               onChange: (e) => setLiveExpansionMode(e.target.value),
               className: "text-xs px-2 py-1 bg-white border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500",
               title: "Control auto-expansion behavior during live updates",
+              "data-id": "debug_panel_expansion_controls_live_mode_select",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "all", children: "Expand All" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "last", children: "Expand Last" }),
@@ -37422,17 +37464,18 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
           )
         ] })
       ] }),
-      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(
@@ -37453,6 +37496,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                   const anyDetailsVisible = Array.from(runNodeIds).some((nodeId) => selectedNodeIds.has(nodeId));
                   return anyDetailsVisible ? "Hide all node details in this run" : "Show all node details in this run";
                 })(),
+                "data-id": `debug_panel_run_details_toggle_${run.runId}`,
                 children: (() => {
                   const runNodeIds = /* @__PURE__ */ new Set();
                   const collectNodeIds = (node) => {
@@ -37480,13 +37524,14 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                 },
                 className: "p-1 hover:bg-gray-200 rounded transition-colors flex-shrink-0",
                 title: expandedRuns.has(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),
@@ -37572,22 +37617,22 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             };
             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,
               {
@@ -37613,6 +37658,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                     }
                   }
                 },
+                "data-id": `debug_panel_run_footer_external_link_${run.runId}`,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "w-3 h-3 text-gray-400" })
               }
             )
@@ -37623,7 +37669,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
   });
   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",
         {
@@ -37631,13 +37677,14 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
           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",
               {
@@ -37851,8 +37898,9 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
         },
         onClick: (e) => e.stopPropagation(),
         onMouseDown: (e) => e.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: (e) => {
@@ -37866,6 +37914,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               },
               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 })
@@ -37874,7 +37923,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             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",
@@ -37885,7 +37934,8 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                 onChange: (e) => setCustomInput(e.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(
@@ -37894,6 +37944,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                 onClick: handleSubmit,
                 disabled: !customInput.trim(),
                 className: "shrink-0",
+                "data-id": "prompt-editor_refine_dropdown_submit_btn",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowCircleUpIcon, { isActive: !!customInput.trim() })
               }
             )
@@ -37926,7 +37977,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
       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",
         {
@@ -37934,8 +37985,8 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
           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",
             {
@@ -37946,6 +37997,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               },
               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",
                 {
@@ -37965,6 +38017,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               },
               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",
                 {
@@ -37975,7 +38028,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             }
           )
         ] }),
-        /* @__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,
@@ -37990,6 +38043,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               e.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" })
@@ -38011,11 +38065,12 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
   }
   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 }),
@@ -38221,8 +38276,8 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
       ];
       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;
@@ -38233,6 +38288,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
               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),
@@ -38248,12 +38304,13 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
     };
     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",
@@ -38280,6 +38337,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             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 })
@@ -38298,6 +38356,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
           top: `${position.top}px`,
           left: `${position.left}px`
         },
+        "data-id": "prompt-editor_insert_menu",
         children: menuMode === "categories" ? renderCategories() : renderItems()
       }
     );
@@ -38567,7 +38626,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
       }
     };
     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",
         {
@@ -38586,7 +38645,8 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
           },
           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(
@@ -39236,6 +39296,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             left: `${position.left}px`,
             transform: "translateX(-50%)"
           },
+          "data-id": "prompt-editor_formatting_toolbar",
           children: [
             buttons.map((btn) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
@@ -39247,6 +39308,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                 className: "p-2 hover:bg-gray-100 rounded transition-colors",
                 title: btn.label,
                 onMouseDown: (e) => e.preventDefault(),
+                "data-id": `prompt-editor_formatting_toolbar_btn_${btn.command}`,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(btn.icon, { className: "size-4 text-[#344054]" })
               },
               btn.command
@@ -39267,6 +39329,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                 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" })
@@ -39337,6 +39400,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             e.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(
@@ -39356,11 +39420,12 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                   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,
@@ -39402,13 +39467,15 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
           e.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,
                   {
@@ -39429,6 +39496,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                 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" })
               }
             )
@@ -39778,6 +39846,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
       {
         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,
@@ -39803,11 +39872,12 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                   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() })
           )
         ]
       }
@@ -39815,19 +39885,20 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
   }
   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"
           }
         ),
@@ -39836,6 +39907,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
           {
             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"
           }
         )
@@ -40075,19 +40147,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;
@@ -40109,7 +40182,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",
@@ -40121,7 +40194,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(
@@ -40129,6 +40203,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 })
           }
         )
@@ -40627,10 +40702,10 @@ ${actualTextToRefine}` : instruction,
       }
       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,
             {
@@ -40661,7 +40736,7 @@ ${actualTextToRefine}` : instruction,
           ),
           /* @__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,