agentic-ui-libs 1.2.0-beta.2 → 1.2.0-beta.20

package/dist/ui-libs.umd.js

@@ -30900,7 +30900,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       listViewData.forEach((item) => {
         if (item.modelName) {
           options.push({
-            label: item.modelName,
+            label: item.connectionName ? `${item.modelName} - ${item.connectionName}` : item.modelName,
             value: item.modelName.replace(/[-\.]/g, ""),
             icon: getModelIconPath2(item.provider),
             // Use actual SVG icon path
@@ -35549,6 +35549,31 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         traces: data.traces || []
       };
     }
+    /**
+     * Get total count of traces matching filters (for pagination)
+     * Endpoint: /tracing/api/trpc/traces.countAll
+     */
+    async fetchTracesCount(projectId, filters, options = {}) {
+      const input = {
+        json: {
+          projectId,
+          filter: filters,
+          searchQuery: options.searchQuery ?? null,
+          searchType: options.searchType ?? ["id"],
+          page: 0,
+          limit: 0,
+          orderBy: options.orderBy ?? null
+        },
+        meta: {
+          values: this.buildMetaValues(filters)
+        }
+      };
+      const url = this.buildTrpcUrl("traces.countAll", input);
+      const data = await this.makeRequest(url);
+      return {
+        totalCount: (data == null ? void 0 : data.totalCount) ?? 0
+      };
+    }
     /**
      * Fetch metrics for multiple traces (latency, tokens, cost)
      * Endpoint: /tracing/api/trpc/traces.metrics
@@ -36622,6 +36647,140 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] }) })
     ] });
   }
+  const CopyButton$1 = ({
+    text,
+    className = "",
+    iconClassName = "",
+    iconStyle,
+    title = "Copy to clipboard",
+    onCopySuccess,
+    onCopyError,
+    tooltipText = "Copied!",
+    tooltipPosition = "bottom",
+    size = "md"
+  }) => {
+    const [showTooltip, setShowTooltip] = React.useState(false);
+    const getSizeClasses = () => {
+      switch (size) {
+        case "sm":
+          return {
+            button: "p-1",
+            icon: "w-[12px] h-[12px]",
+            tooltip: "text-xs py-1 px-2"
+          };
+        case "lg":
+          return {
+            button: "p-2",
+            icon: "w-[20px] h-[20px]",
+            tooltip: "text-sm py-2 px-3"
+          };
+        default:
+          return {
+            button: "p-1.5",
+            icon: "w-[16px] h-[16px]",
+            tooltip: "text-xs py-1 px-2"
+          };
+      }
+    };
+    const getTooltipPositionClasses = () => {
+      const baseClasses = "absolute bg-gray-800 text-white rounded whitespace-nowrap z-50";
+      switch (tooltipPosition) {
+        case "bottom":
+          return `${baseClasses} top-full mt-1 left-1/2 -translate-x-1/2`;
+        case "left":
+          return `${baseClasses} right-full mr-1 top-1/2 -translate-y-1/2`;
+        case "right":
+          return `${baseClasses} left-full ml-1 top-1/2 -translate-y-1/2`;
+        default:
+          return `${baseClasses} bottom-full mb-1 left-1/2 -translate-x-1/2`;
+      }
+    };
+    const sizeClasses2 = getSizeClasses();
+    const showCopyTooltip = React.useCallback(() => {
+      setShowTooltip(true);
+      setTimeout(() => setShowTooltip(false), 1e3);
+    }, []);
+    const copyToClipboard2 = React.useCallback(async () => {
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          await navigator.clipboard.writeText(text);
+          showCopyTooltip();
+          onCopySuccess == null ? void 0 : onCopySuccess();
+          return;
+        }
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        textArea.style.top = "-999999px";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+          document.execCommand("copy");
+          showCopyTooltip();
+          onCopySuccess == null ? void 0 : onCopySuccess();
+        } catch (err) {
+          const error = err instanceof Error ? err : new Error("Copy failed");
+          console.warn("Copy to clipboard failed:", error);
+          onCopyError == null ? void 0 : onCopyError(error);
+        } finally {
+          document.body.removeChild(textArea);
+        }
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error("Copy failed");
+        console.warn("Copy to clipboard failed:", error);
+        onCopyError == null ? void 0 : onCopyError(error);
+      }
+    }, [text, showCopyTooltip, onCopySuccess, onCopyError]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: copyToClipboard2,
+          className: `${sizeClasses2.button} hover:bg-gray-100 rounded transition-colors ${className}`,
+          title,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `${sizeClasses2.icon} text-gray-400 ${iconClassName}`, style: iconStyle })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `${getTooltipPositionClasses()} ${sizeClasses2.tooltip} transition-opacity duration-150 ${showTooltip ? "opacity-100 animate-fade-in" : "opacity-0 pointer-events-none"}`,
+          style: {
+            visibility: showTooltip ? "visible" : "hidden"
+          },
+          children: tooltipText
+        }
+      )
+    ] });
+  };
+  function CopyableId({ value, truncateLength = 30 }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "copyable-id-wrapper", title: value, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 truncate", children: TracingUtils.truncate(value, truncateLength) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: "copyable-id-btn",
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          onMouseDown: (e) => e.stopPropagation(),
+          onMouseUp: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CopyButton$1,
+            {
+              text: value,
+              size: "sm",
+              title: "Copy to clipboard",
+              iconClassName: "text-[#667085]"
+            }
+          )
+        }
+      )
+    ] });
+  }
   function Shimmer$2({ className = "", children }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `animate-pulse bg-[#F2F4F7] rounded ${className}`, children });
   }
@@ -104632,6 +104791,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     }, [columns]);
     const handleRowClick = React.useCallback(
       (event) => {
+        var _a;
+        const target = (_a = event.event) == null ? void 0 : _a.target;
+        if (target == null ? void 0 : target.closest(".copyable-id-btn")) return;
         if (onRowClick && event.data) {
           onRowClick(event.data);
         }
@@ -104728,9 +104890,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               onClick: goToFirstPage,
               disabled: currentPage === 0,
               className: "p-2 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
+              style: { color: "var(--colors-gray-light-mode-700, #344054)" },
               title: "First page",
               "data-test-id": "tracing-table-first-page-btn",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsLeft, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsLeft, { size: 16 })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -104739,12 +104902,13 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               onClick: goToPreviousPage,
               disabled: currentPage === 0,
               className: "p-2 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
+              style: { color: "var(--colors-gray-light-mode-700, #344054)" },
               title: "Previous page",
               "data-test-id": "tracing-table-prev-page-btn",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "px-4 py-2 text-sm text-gray-700", "data-test-id": "tracing-table-page-info", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "px-4 py-2 text-sm", style: { color: "var(--colors-gray-light-mode-700, #344054)" }, "data-test-id": "tracing-table-page-info", children: [
             "Page ",
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: currentPage + 1 }),
             " of",
@@ -104757,9 +104921,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               onClick: goToNextPage,
               disabled: currentPage >= totalPages - 1,
               className: "p-2 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
+              style: { color: "var(--colors-gray-light-mode-700, #344054)" },
               title: "Next page",
               "data-test-id": "tracing-table-next-page-btn",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 16 })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -104768,13 +104933,14 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               onClick: goToLastPage,
               disabled: currentPage >= totalPages - 1,
               className: "p-2 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
+              style: { color: "var(--colors-gray-light-mode-700, #344054)" },
               title: "Last page",
               "data-test-id": "tracing-table-last-page-btn",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsRight, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsRight, { size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center text-sm text-gray-700 shrink-0 absolute right-[24px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center text-sm shrink-0 absolute right-[24px]", style: { color: "var(--colors-gray-light-mode-700, #344054)" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
           "Showing ",
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold", children: startRow }),
           " to",
@@ -104802,9 +104968,12 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       timeRangePresetLabel,
       onTimeRangeChange,
       filters,
+      filterColumns: filterColumnsProp,
       onFiltersClick,
       onModifyColumnsClick,
       showModifyColumns = true,
+      onClearFilters,
+      onRemoveFilter,
       onRefresh,
       isRefreshing = false
     } = props;
@@ -104849,6 +105018,50 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       }
       return `Searches in ${fields}.`;
     };
+    const activeFilters = filters.filter(TracingUtils.isFilterActive);
+    const [filtersExpanded, setFiltersExpanded] = React.useState(false);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const chipsContainerRef = React.useRef(null);
+    const checkOverflow = React.useCallback(() => {
+      const el = chipsContainerRef.current;
+      if (!el) return;
+      setIsOverflowing(el.scrollHeight > el.clientHeight);
+    }, []);
+    React.useEffect(() => {
+      checkOverflow();
+      window.addEventListener("resize", checkOverflow);
+      return () => window.removeEventListener("resize", checkOverflow);
+    }, [checkOverflow, activeFilters.length]);
+    const getFilterChipLabel = (filter) => {
+      const col = filterColumnsProp == null ? void 0 : filterColumnsProp.find((c2) => c2.field === filter.column);
+      const label = (col == null ? void 0 : col.label) ?? filter.column;
+      let valueText;
+      if (filter.type === "datetime") {
+        valueText = new Date(filter.value).toLocaleDateString();
+      } else if (filter.type === "number") {
+        valueText = parseFloat(filter.value).toLocaleString();
+      } else if (Array.isArray(filter.value)) {
+        valueText = filter.value.length <= 2 ? filter.value.join(", ") : `${filter.value.length} selected`;
+      } else {
+        valueText = String(filter.value ?? "");
+      }
+      const shortOp = {
+        "=": "",
+        "!=": "≠ ",
+        ">": "> ",
+        ">=": "≥ ",
+        "<": "< ",
+        "<=": "≤ ",
+        "contains": "~ ",
+        "does not contain": "!~ ",
+        "starts with": "starts ",
+        "ends with": "ends ",
+        "any of": "",
+        "none of": "not "
+      };
+      const op = shortOp[filter.operator] ?? `${filter.operator} `;
+      return `${label}: ${op}${valueText}`;
+    };
     const handleDateRangeChange = (dateRange, presetLabel) => {
       if (dateRange && dateRange.from && dateRange.to) {
         const fromDate = dateRange.from;
@@ -105001,7 +105214,66 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             }
           )
         ] })
-      ] })
+      ] }),
+      activeFilters.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "flex items-start gap-[8px] border border-gray-200 rounded-[8px] px-[12px] py-[8px]",
+          "data-test-id": "tracing-filter-chips",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] font-medium leading-[28px] text-gray-500 shrink-0", children: "Filters" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                ref: chipsContainerRef,
+                className: `flex items-center gap-[8px] flex-wrap flex-1 min-w-0 ${!filtersExpanded ? "max-h-[28px] overflow-hidden" : ""}`,
+                children: activeFilters.map((filter, idx) => {
+                  const originalIndex = filters.indexOf(filter);
+                  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: "inline-flex items-center gap-[4px] h-[28px] px-[10px] py-[4px] bg-blue-50 border border-blue-200 rounded-[6px] text-[12px] leading-[16px] text-blue-800 max-w-[260px]",
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-medium", children: getFilterChipLabel(filter) }),
+                        onRemoveFilter && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "button",
+                          {
+                            onClick: () => onRemoveFilter(originalIndex),
+                            className: "flex items-center justify-center shrink-0 text-blue-400 hover:text-blue-700 transition-colors",
+                            title: "Remove filter",
+                            children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[14px] h-[14px]", strokeWidth: 2 })
+                          }
+                        )
+                      ]
+                    },
+                    `chip-${idx}`
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] shrink-0 leading-[28px]", children: [
+              (isOverflowing || filtersExpanded) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setFiltersExpanded((prev) => !prev),
+                  className: "text-[12px] font-medium text-blue-600 hover:text-blue-800 transition-colors whitespace-nowrap",
+                  "data-test-id": "tracing-filter-toggle",
+                  children: filtersExpanded ? "View less" : "View all"
+                }
+              ),
+              onClearFilters && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: onClearFilters,
+                  className: "text-[12px] font-medium text-gray-500 hover:text-gray-700 transition-colors whitespace-nowrap",
+                  "data-test-id": "tracing-filter-clear-all",
+                  children: "Clear all"
+                }
+              )
+            ] })
+          ]
+        }
+      )
     ] });
   }
   function ColumnCustomization(props) {
@@ -105488,6 +105760,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       ] })
     ] });
   }
+  const TRACE_PII_DISPLAY_USER_MESSAGE_KEY = "piiDisplayUserMessage";
+  const TRACE_PII_DISPLAY_APP_RESPONSE_KEY = "piiDisplayAppResponse";
   class TraceTreeService {
     /**
      * Build a hierarchical tree from a flat list of observations
@@ -105660,43 +105934,205 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       });
     }
     /**
-     * Extract user message from trace input
+     * Extract user message from trace input for display.
+     * Handles string, object with message/content/text/query, and messages array (e.g. voice/chat).
+     */
+    /**
+     * Parse trace metadata from API (string or object) into a plain object.
+     */
+    static parseTraceMetadata(metadata) {
+      if (metadata === null || metadata === void 0) {
+        return {};
+      }
+      if (typeof metadata === "string") {
+        try {
+          return JSON.parse(metadata);
+        } catch {
+          return {};
+        }
+      }
+      if (typeof metadata === "object" && !Array.isArray(metadata)) {
+        return metadata;
+      }
+      return {};
+    }
+    /**
+     * Read PII display strings from Langfuse/Kore trace metadata (if present).
      */
+    static extractPiiDisplayFromTraceMetadata(metadata) {
+      const obj = this.parseTraceMetadata(metadata);
+      const userRaw = obj[TRACE_PII_DISPLAY_USER_MESSAGE_KEY];
+      const appRaw = obj[TRACE_PII_DISPLAY_APP_RESPONSE_KEY];
+      const result = {};
+      if (typeof userRaw === "string" && userRaw.length > 0) {
+        result.displayUserMessage = userRaw;
+      }
+      if (typeof appRaw === "string" && appRaw.length > 0) {
+        result.displayAppResponse = appRaw;
+      }
+      return result;
+    }
+    /**
+     * Some tracing APIs expose custom PII display keys on trace root as well as under metadata.
+     */
+    static extractPiiDisplayFromApiTrace(trace) {
+      const fromMeta = this.extractPiiDisplayFromTraceMetadata(trace.metadata);
+      const userTop = trace[TRACE_PII_DISPLAY_USER_MESSAGE_KEY];
+      const appTop = trace[TRACE_PII_DISPLAY_APP_RESPONSE_KEY];
+      const fromTop = {};
+      if (typeof userTop === "string" && userTop.length > 0) {
+        fromTop.displayUserMessage = userTop;
+      }
+      if (typeof appTop === "string" && appTop.length > 0) {
+        fromTop.displayAppResponse = appTop;
+      }
+      return {
+        displayUserMessage: fromTop.displayUserMessage ?? fromMeta.displayUserMessage,
+        displayAppResponse: fromTop.displayAppResponse ?? fromMeta.displayAppResponse
+      };
+    }
     static extractUserMessage(input) {
       if (!input) return "";
       if (typeof input === "string") {
         try {
           const parsed = JSON.parse(input);
-          return (parsed == null ? void 0 : parsed.message) || (parsed == null ? void 0 : parsed.content) || (parsed == null ? void 0 : parsed.text) || (parsed == null ? void 0 : parsed.query) || input;
+          const fromParsed = (parsed == null ? void 0 : parsed.message) ?? (parsed == null ? void 0 : parsed.content) ?? (parsed == null ? void 0 : parsed.text) ?? (parsed == null ? void 0 : parsed.query);
+          if (fromParsed !== void 0 && fromParsed !== null) return String(fromParsed);
+          if (Array.isArray(parsed == null ? void 0 : parsed.messages)) {
+            return this.extractLastUserMessageFromArray(parsed.messages);
+          }
+          return input;
         } catch {
           return input;
         }
       }
       if (typeof input === "object") {
         const obj = input;
-        return String((obj == null ? void 0 : obj["message"]) || (obj == null ? void 0 : obj["content"]) || (obj == null ? void 0 : obj["text"]) || (obj == null ? void 0 : obj["query"]) || "");
+        const direct = (obj == null ? void 0 : obj["message"]) ?? (obj == null ? void 0 : obj["content"]) ?? (obj == null ? void 0 : obj["text"]) ?? (obj == null ? void 0 : obj["query"]);
+        if (direct !== void 0 && direct !== null && direct !== "") {
+          return typeof direct === "object" ? JSON.stringify(direct) : String(direct);
+        }
+        if (Array.isArray(obj == null ? void 0 : obj.messages)) {
+          return this.extractLastUserMessageFromArray(obj.messages);
+        }
+        if (Array.isArray(input)) {
+          return this.extractLastUserMessageFromArray(input);
+        }
+        return JSON.stringify(obj);
       }
       return String(input);
     }
     /**
-     * Extract app response from trace output
+     * LangChain-serialized messages store role/content under `kwargs` and type in `id`.
+     */
+    static getLangchainMessageContent(msg) {
+      if (msg["content"] !== void 0 && msg["content"] !== null) {
+        return msg["content"];
+      }
+      const kwargs = msg["kwargs"];
+      if (kwargs && typeof kwargs === "object" && !Array.isArray(kwargs)) {
+        const c2 = kwargs["content"];
+        if (c2 !== void 0 && c2 !== null) {
+          return c2;
+        }
+      }
+      return void 0;
+    }
+    static inferLangchainMessageRole(msg) {
+      if (typeof msg["role"] === "string") {
+        return msg["role"];
+      }
+      const kwargs = msg["kwargs"];
+      if (kwargs && typeof kwargs === "object" && !Array.isArray(kwargs)) {
+        const r2 = kwargs["role"];
+        if (typeof r2 === "string") {
+          return r2;
+        }
+      }
+      const id = msg["id"];
+      if (Array.isArray(id)) {
+        const tail = id[id.length - 1];
+        if (tail === "HumanMessage") {
+          return "user";
+        }
+        if (tail === "AIMessage" || tail === "AIMessageChunk") {
+          return "assistant";
+        }
+        if (tail === "SystemMessage") {
+          return "system";
+        }
+        if (tail === "ToolMessage") {
+          return "tool";
+        }
+      }
+      return void 0;
+    }
+    /**
+     * Get last user message content from a messages array (chat/voice format).
+     */
+    static extractLastUserMessageFromArray(messages) {
+      if (!messages.length) return "";
+      for (let i2 = messages.length - 1; i2 >= 0; i2--) {
+        const msg = messages[i2];
+        const role = this.inferLangchainMessageRole(msg);
+        const content2 = this.getLangchainMessageContent(msg);
+        if (role === "user" && content2 != null) {
+          return typeof content2 === "string" ? content2 : JSON.stringify(content2);
+        }
+      }
+      const last2 = messages[messages.length - 1];
+      const content = this.getLangchainMessageContent(last2);
+      if (content != null) {
+        return typeof content === "string" ? content : JSON.stringify(content);
+      }
+      return JSON.stringify(messages[messages.length - 1]);
+    }
+    /**
+     * Extract app response from trace output for display.
+     * Handles string, object with message/content/text/response, and messages array.
      */
     static extractAppResponse(output) {
       if (!output) return "";
       if (typeof output === "string") {
         try {
           const parsed = JSON.parse(output);
-          return (parsed == null ? void 0 : parsed.message) || (parsed == null ? void 0 : parsed.content) || (parsed == null ? void 0 : parsed.text) || (parsed == null ? void 0 : parsed.response) || output;
+          const fromParsed = (parsed == null ? void 0 : parsed.message) ?? (parsed == null ? void 0 : parsed.content) ?? (parsed == null ? void 0 : parsed.text) ?? (parsed == null ? void 0 : parsed.response);
+          if (fromParsed !== void 0 && fromParsed !== null) return String(fromParsed);
+          if (Array.isArray(parsed == null ? void 0 : parsed.messages)) {
+            return this.extractLastMessageContentFromArray(parsed.messages);
+          }
+          return output;
         } catch {
           return output;
         }
       }
       if (typeof output === "object") {
         const obj = output;
-        return String((obj == null ? void 0 : obj["message"]) || (obj == null ? void 0 : obj["content"]) || (obj == null ? void 0 : obj["text"]) || (obj == null ? void 0 : obj["response"]) || "");
+        const direct = (obj == null ? void 0 : obj["message"]) ?? (obj == null ? void 0 : obj["content"]) ?? (obj == null ? void 0 : obj["text"]) ?? (obj == null ? void 0 : obj["response"]);
+        if (direct !== void 0 && direct !== null && direct !== "") {
+          return typeof direct === "object" ? JSON.stringify(direct) : String(direct);
+        }
+        if (Array.isArray(obj == null ? void 0 : obj.messages)) {
+          return this.extractLastMessageContentFromArray(obj.messages);
+        }
+        if (Array.isArray(output)) {
+          return this.extractLastMessageContentFromArray(output);
+        }
+        return JSON.stringify(obj);
       }
       return String(output);
     }
+    /**
+     * Get last message content from a messages array for output display.
+     */
+    static extractLastMessageContentFromArray(messages) {
+      if (!messages.length) return "";
+      const last2 = messages[messages.length - 1];
+      const fromKwargs = this.getLangchainMessageContent(last2);
+      const content = fromKwargs ?? (last2 == null ? void 0 : last2.message) ?? (last2 == null ? void 0 : last2.text);
+      if (content != null) return typeof content === "string" ? content : JSON.stringify(content);
+      return JSON.stringify(last2);
+    }
     /**
      * Calculate trace metrics from observations
      */
@@ -105706,7 +106142,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       let maxEndTime = 0;
       let minStartTime = Infinity;
       observations.forEach((obs) => {
-        totalTokens += obs.totalTokens || 0;
+        var _a;
+        const obsTokens = ((_a = obs.usageDetails) == null ? void 0 : _a.total) ?? obs.totalUsage ?? obs.totalTokens;
+        totalTokens += typeof obsTokens === "number" ? obsTokens : parseInt(String(obsTokens || 0), 10) || 0;
         const cost = parseFloat(obs.totalCost || "0");
         if (!isNaN(cost)) totalCost += cost;
         const startMs = new Date(obs.startTime).getTime();
@@ -105729,7 +106167,15 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       );
       const generation = sorted.find((obs) => obs.type === "GENERATION");
       if (!generation) {
-        return { observation: null, ancestorIds: [] };
+        const tree = this.buildObservationTree(observations);
+        if (tree.length === 0) return { observation: null, ancestorIds: [] };
+        const findFirstLeaf = (node) => {
+          if (node.children.length === 0) return node;
+          return findFirstLeaf(node.children[0]);
+        };
+        const leafNode = findFirstLeaf(tree[0]);
+        const ancestorIds2 = this.getAncestorIds(observations, leafNode.observation.id);
+        return { observation: leafNode.observation, ancestorIds: ancestorIds2 };
       }
       const ancestorIds = this.getAncestorIds(observations, generation.id);
       return { observation: generation, ancestorIds };
@@ -105876,6 +106322,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         "toolNode",
         "agent_toolNode",
         "PreProcessor",
+        "PostProcessor",
         "MergerNode"
       ]
     }
@@ -106135,6 +106582,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
      * Transform API trace response to TraceDetailData
      */
     transformToTraceDetailData(trace) {
+      const piiDisplay = TraceTreeService.extractPiiDisplayFromApiTrace(trace);
       return {
         id: trace.id,
         name: trace.name || "",
@@ -106147,6 +106595,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         input: trace.input,
         output: trace.output,
         metadata: trace.metadata,
+        displayUserMessage: piiDisplay.displayUserMessage,
+        displayAppResponse: piiDisplay.displayAppResponse,
         tags: trace.tags || [],
         bookmarked: trace.bookmarked || false,
         public: trace.public || false,
@@ -106208,6 +106658,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         timestamp: trace.timestamp,
         input: trace.input,
         output: trace.output,
+        displayUserMessage: trace.displayUserMessage,
+        displayAppResponse: trace.displayAppResponse,
         latency: trace.latency,
         totalTokens: trace.totalTokens,
         totalCost: typeof trace.totalCost === "number" ? String(trace.totalCost) : trace.totalCost,
@@ -106361,6 +106813,19 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       name
     };
   }
+  function getObservationTokens(obs) {
+    var _a;
+    const total = ((_a = obs.usageDetails) == null ? void 0 : _a.total) ?? obs.totalUsage ?? obs.totalTokens;
+    if (total === void 0 || total === null) return 0;
+    return typeof total === "number" ? total : parseInt(String(total), 10) || 0;
+  }
+  function getAggregatedTotalTokens(node) {
+    let sum2 = getObservationTokens(node.observation);
+    node.children.forEach((child) => {
+      sum2 += getAggregatedTotalTokens(child);
+    });
+    return sum2;
+  }
   const SuccessIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "6", cy: "6", r: "5.5", fill: "#17B26A" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 6L5.5 7.5L8 4.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -106422,7 +106887,11 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       return observation.name || observation.type || "";
     };
     const displayName = getDisplayName2();
-    const displayTokens = ((_d = observation.usageDetails) == null ? void 0 : _d.total) || observation.totalUsage || observation.totalTokens;
+    const displayTokens = ((_d = observation.usageDetails) == null ? void 0 : _d.total) ?? observation.totalUsage ?? observation.totalTokens;
+    const aggregatedTotalTokens = React.useMemo(() => {
+      if (!isSupervisorOrAgent) return 0;
+      return getAggregatedTotalTokens(node);
+    }, [node, isSupervisorOrAgent]);
     const handleRowClick = () => {
       if (hasChildren) {
         onToggle(observation.id);
@@ -106469,34 +106938,43 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                 className: "w-[24px] h-[24px] rounded-[8px]"
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-[12px] leading-[16px] text-[#101828] truncate flex-1 min-w-0", title: displayName, children: displayName }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] flex-shrink-0", children: [
-              isSupervisorOrAgent && (modelFromMetadata || observation.model) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] leading-[12px] text-[#667085] font-normal", children: modelFromMetadata || observation.model }),
-              (isGeneration || isSupervisorOrAgent) && displayTokens !== void 0 && displayTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[10px] leading-[12px] text-[#667085] font-normal whitespace-nowrap", children: [
-                TraceTreeService.formatTokens(displayTokens),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[2px] flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-[12px] leading-[16px] text-[#101828] truncate", title: displayName, children: displayName }),
+              isSupervisorOrAgent && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[6px] flex-wrap text-[10px] leading-[12px] text-[#667085] font-normal", children: [
+                modelFromMetadata || observation.model ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: modelFromMetadata || observation.model }) : null,
+                aggregatedTotalTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  (modelFromMetadata || observation.model) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "·" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "whitespace-nowrap", children: [
+                    TraceTreeService.formatTokens(aggregatedTotalTokens),
+                    " Tokens"
+                  ] })
+                ] }),
+                duration > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  modelFromMetadata || observation.model || aggregatedTotalTokens > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "·" }) : null,
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "whitespace-nowrap flex items-center gap-[4px]", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(ClockIcon, {}),
+                    TraceTreeService.formatDuration(duration)
+                  ] })
+                ] })
+              ] })
+            ] }),
+            !isSupervisorOrAgent && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] flex-shrink-0", children: [
+              isGeneration && displayTokens !== void 0 && Number(displayTokens) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[10px] leading-[12px] text-[#667085] font-normal whitespace-nowrap", children: [
+                TraceTreeService.formatTokens(Number(displayTokens)),
                 " Tokens"
               ] }),
               duration > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(ClockIcon, {}),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] leading-[12px] text-[#667085] font-normal whitespace-nowrap", children: TraceTreeService.formatDuration(duration) })
               ] }),
-              isError && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: "flex-shrink-0 cursor-help",
-                  title: statusTooltip,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorIcon, {})
-                }
-              ),
-              isWarning && !isError && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: "flex-shrink-0 cursor-help",
-                  title: statusTooltip,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(WarningIcon, {})
-                }
-              ),
+              isError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 cursor-help", title: statusTooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorIcon, {}) }),
+              isWarning && !isError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 cursor-help", title: statusTooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(WarningIcon, {}) }),
               isCompleted && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SuccessIcon, {}) })
+            ] }),
+            isSupervisorOrAgent && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 flex items-center", children: [
+              isError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "cursor-help", title: statusTooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorIcon, {}) }),
+              isWarning && !isError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "cursor-help", title: statusTooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(WarningIcon, {}) }),
+              isCompleted && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SuccessIcon, {}) })
             ] })
           ]
         }
@@ -106534,8 +107012,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     onNodeSelect,
     onExpandToggle,
     showTraceId = true,
+    onTraceIdClick,
     isLoading = false,
-    defaultExpandedNodeIds
+    defaultExpandedNodeIds,
+    runHeaderInputMode = "display"
   }) {
     const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
     const [expandedNodeIds, setExpandedNodeIds] = React.useState(
@@ -106553,11 +107033,20 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       return TraceTreeService.buildObservationTree(observations);
     }, [observations]);
     const userMessage = React.useMemo(() => {
+      if (runHeaderInputMode !== "tokenized" && trace.displayUserMessage !== void 0 && trace.displayUserMessage.length > 0) {
+        return trace.displayUserMessage;
+      }
       return TraceTreeService.extractUserMessage(trace.input);
-    }, [trace.input]);
+    }, [trace.input, trace.displayUserMessage, runHeaderInputMode]);
     const appResponse = React.useMemo(() => {
+      if (runHeaderInputMode !== "tokenized" && trace.displayAppResponse !== void 0 && trace.displayAppResponse.length > 0) {
+        return trace.displayAppResponse;
+      }
       return TraceTreeService.extractAppResponse(trace.output);
-    }, [trace.output]);
+    }, [trace.output, trace.displayAppResponse, runHeaderInputMode]);
+    const traceMetrics = React.useMemo(() => {
+      return TraceTreeService.calculateTraceMetrics(trace, observations);
+    }, [trace, observations]);
     const handleTraceToggle = React.useCallback(() => {
       setIsExpanded((prev) => !prev);
       onExpandToggle == null ? void 0 : onExpandToggle();
@@ -106584,7 +107073,16 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[4px] w-full mb-[8px]", children: [
       showTraceId && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-[8px] items-center px-0 py-[4px] w-full", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] leading-[12px] text-[#98A2B3]", children: "Trace ID" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-[10px] leading-[12px] text-[#667085]", children: trace.id }),
+        onTraceIdClick ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => onTraceIdClick(trace.id),
+            className: "font-medium text-[10px] leading-[12px] text-[#155EEF] hover:underline cursor-pointer bg-transparent border-none p-0",
+            title: "View Trace Details",
+            "data-test-id": `trace-tree-id-link-${trace.id}`,
+            children: trace.id
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-[10px] leading-[12px] text-[#667085]", children: trace.id }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -106659,10 +107157,18 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           rootNode.observation.id
         )) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[16px] text-[12px] text-[#667085] text-center", children: "No observations available" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white flex flex-col gap-[8px] p-[12px] border-t border-[#EAECF0]", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-[8px] items-center w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-[8px] items-center flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(AppResponseIcon, {}),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-[11px] leading-[14px] text-[#98A2B3] uppercase tracking-[0.02em] flex-1", children: "APP RESPONSE" })
-          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-[8px] items-center w-full", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-[8px] items-center flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(AppResponseIcon, {}),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-[11px] leading-[14px] text-[#98A2B3] uppercase tracking-[0.02em]", children: "APP RESPONSE" })
+            ] }),
+            (traceMetrics.latency > 0 || traceMetrics.totalTokens > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[10px] leading-[12px] text-[#667085] font-normal whitespace-nowrap flex-shrink-0", children: [
+              TraceTreeService.formatDuration(traceMetrics.latency),
+              " · ",
+              TraceTreeService.formatTokens(traceMetrics.totalTokens),
+              " Tokens"
+            ] })
+          ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-[12px] leading-[16px] text-[#101828]", children: appResponse ? appResponse.length > 150 && !isResponseExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             appResponse.substring(0, 150),
             "...",
@@ -106695,114 +107201,6 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       ] })
     ] });
   }
-  const CopyButton$1 = ({
-    text,
-    className = "",
-    iconClassName = "",
-    iconStyle,
-    title = "Copy to clipboard",
-    onCopySuccess,
-    onCopyError,
-    tooltipText = "Copied!",
-    tooltipPosition = "bottom",
-    size = "md"
-  }) => {
-    const [showTooltip, setShowTooltip] = React.useState(false);
-    const getSizeClasses = () => {
-      switch (size) {
-        case "sm":
-          return {
-            button: "p-1",
-            icon: "w-[12px] h-[12px]",
-            tooltip: "text-xs py-1 px-2"
-          };
-        case "lg":
-          return {
-            button: "p-2",
-            icon: "w-[20px] h-[20px]",
-            tooltip: "text-sm py-2 px-3"
-          };
-        default:
-          return {
-            button: "p-1.5",
-            icon: "w-[16px] h-[16px]",
-            tooltip: "text-xs py-1 px-2"
-          };
-      }
-    };
-    const getTooltipPositionClasses = () => {
-      const baseClasses = "absolute bg-gray-800 text-white rounded whitespace-nowrap z-50";
-      switch (tooltipPosition) {
-        case "bottom":
-          return `${baseClasses} top-full mt-1 left-1/2 -translate-x-1/2`;
-        case "left":
-          return `${baseClasses} right-full mr-1 top-1/2 -translate-y-1/2`;
-        case "right":
-          return `${baseClasses} left-full ml-1 top-1/2 -translate-y-1/2`;
-        default:
-          return `${baseClasses} bottom-full mb-1 left-1/2 -translate-x-1/2`;
-      }
-    };
-    const sizeClasses2 = getSizeClasses();
-    const showCopyTooltip = React.useCallback(() => {
-      setShowTooltip(true);
-      setTimeout(() => setShowTooltip(false), 1e3);
-    }, []);
-    const copyToClipboard2 = React.useCallback(async () => {
-      try {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          await navigator.clipboard.writeText(text);
-          showCopyTooltip();
-          onCopySuccess == null ? void 0 : onCopySuccess();
-          return;
-        }
-        const textArea = document.createElement("textarea");
-        textArea.value = text;
-        textArea.style.position = "fixed";
-        textArea.style.left = "-999999px";
-        textArea.style.top = "-999999px";
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        try {
-          document.execCommand("copy");
-          showCopyTooltip();
-          onCopySuccess == null ? void 0 : onCopySuccess();
-        } catch (err) {
-          const error = err instanceof Error ? err : new Error("Copy failed");
-          console.warn("Copy to clipboard failed:", error);
-          onCopyError == null ? void 0 : onCopyError(error);
-        } finally {
-          document.body.removeChild(textArea);
-        }
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error("Copy failed");
-        console.warn("Copy to clipboard failed:", error);
-        onCopyError == null ? void 0 : onCopyError(error);
-      }
-    }, [text, showCopyTooltip, onCopySuccess, onCopyError]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative inline-flex", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: copyToClipboard2,
-          className: `${sizeClasses2.button} hover:bg-gray-100 rounded transition-colors ${className}`,
-          title,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `${sizeClasses2.icon} text-gray-400 ${iconClassName}`, style: iconStyle })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: `${getTooltipPositionClasses()} ${sizeClasses2.tooltip} transition-opacity duration-150 ${showTooltip ? "opacity-100 animate-fade-in" : "opacity-0 pointer-events-none"}`,
-          style: {
-            visibility: showTooltip ? "visible" : "hidden"
-          },
-          children: tooltipText
-        }
-      )
-    ] });
-  };
   function __awaiter(thisArg, _arguments, P2, generator) {
     function adopt(value) {
       return value instanceof P2 ? value : new P2(function(resolve) {
@@ -107967,21 +108365,35 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto bg-gray-800 p-4", children: viewMode === "interactive" && useEnhancedJsonView ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        JsonView,
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
         {
-          src: parsedData,
-          theme: "github",
-          dark: true,
-          collapseObjectsAfterLength: 20,
-          collapseStringsAfterLength: 500,
-          collapseStringMode: "word",
-          displaySize: "collapsed",
-          matchesURL: true,
-          customizeCopy: (node) => stringifyJsonNode(node),
-          className: "w-full text-xs"
+          className: "flex-1 overflow-auto bg-gray-800 p-4",
+          style: {
+            "--json-property": "#ffffff",
+            "--json-index": "#e2e8f0",
+            "--json-number": "#e2e8f0",
+            "--json-string": "#e2e8f0",
+            "--json-boolean": "#e2e8f0",
+            "--json-null": "#e2e8f0"
+          },
+          children: viewMode === "interactive" && useEnhancedJsonView ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            JsonView,
+            {
+              src: parsedData,
+              dark: true,
+              collapseObjectsAfterLength: 20,
+              collapseStringsAfterLength: 500,
+              collapseStringMode: "word",
+              displaySize: "collapsed",
+              matchesURL: true,
+              customizeCopy: (node) => stringifyJsonNode(node),
+              className: "w-full text-xs",
+              style: { color: "#f1f5f9" }
+            }
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs whitespace-pre text-white font-mono", children: stringifyJsonNode(parsedData) })
         }
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs whitespace-pre text-gray-300 font-mono", children: stringifyJsonNode(parsedData) }) })
+      )
     ] }) });
   };
   const JsonViewer = ({
@@ -108349,6 +108761,23 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
   function isObservation(node) {
     return node !== null && "traceId" in node && "type" in node;
   }
+  function metadataForDisplay(metadata) {
+    if (metadata === null || metadata === void 0) return {};
+    let obj;
+    if (typeof metadata === "string") {
+      try {
+        obj = JSON.parse(metadata);
+      } catch {
+        return {};
+      }
+    } else if (typeof metadata === "object") {
+      obj = metadata;
+    } else {
+      return {};
+    }
+    const { tools: _tools, ...rest } = obj;
+    return rest;
+  }
   const defaultMetrics = {
     totalCost: "0",
     totalTokens: 0,
@@ -108397,7 +108826,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 h-[1px] bg-[#EAECF0]" })
     ] });
   }
-  function PreviewContent({ input, output, metadata, statusMessage, isLoading = false, modelParameters }) {
+  function PreviewContent({ input, output, metadata, statusMessage, isLoading = false }) {
     const [showAllMetadata, setShowAllMetadata] = React.useState(false);
     const messages = React.useMemo(() => {
       if (!input || typeof input !== "object") return null;
@@ -108429,15 +108858,6 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       }
       return String(output);
     }, [output]);
-    const modelName = React.useMemo(() => {
-      if (!input || typeof input !== "object") return null;
-      return input["model"] ?? null;
-    }, [input]);
-    const formatParamValue = (value) => {
-      if (value === null || value === void 0) return "";
-      if (typeof value === "object") return JSON.stringify(value);
-      return String(value);
-    };
     if (isLoading) {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px] p-[16px] overflow-y-auto h-full", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
@@ -108451,29 +108871,6 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       ] });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[20px] p-[16px] overflow-y-auto h-full", children: [
-      (modelName || modelParameters && Object.keys(modelParameters).length > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-[6px]", children: [
-        modelName && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "px-[8px] py-[4px] bg-[#F2F4F7] rounded-[4px] text-[11px] font-medium text-[#344054]", children: [
-          "Model: ",
-          modelName
-        ] }),
-        modelParameters && typeof modelParameters === "object" && Object.entries(modelParameters).filter(([_2, value]) => value !== null && value !== void 0).map(([key, value]) => {
-          const valueString = formatParamValue(value);
-          const displayKey = key.replace(/_/g, " ");
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "span",
-            {
-              className: "px-[8px] py-[4px] bg-[#F2F4F7] border border-[#EAECF0] rounded-[4px] text-[11px] font-medium text-[#344054] max-w-[200px] truncate",
-              title: `${key}: ${valueString}`,
-              children: [
-                displayKey,
-                ": ",
-                valueString
-              ]
-            },
-            key
-          );
-        })
-      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SectionHeader, { title: "Input" }),
         messages ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-[8px]", children: messages.map((msg, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -108560,14 +108957,21 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           showHeader: true,
           useEnhancedJsonView: true,
           collapseStringsAfterLength: 500,
-          collapseObjectsAfterLength: 20,
+          collapseObjectsAfterLength: selectedTab === "metadata" ? 100 : 20,
+          defaultExpanded: selectedTab === "metadata",
           maxHeight: "100%",
           className: "h-full border-0 rounded-none"
-        }
+        },
+        selectedTab
       ) })
     ] });
   }
-  function NodeDetailPanel({ node, nodeType: _nodeType, apiConfig }) {
+  function NodeDetailPanel({
+    node,
+    nodeType: _nodeType,
+    apiConfig,
+    generationSummaryInputOverride = null
+  }) {
     const [selectedTab, setSelectedTab] = React.useState("preview");
     const [showTokenTooltip, setShowTokenTooltip] = React.useState(false);
     const tooltipTimeoutRef = React.useRef(null);
@@ -108654,6 +109058,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       }
       return TraceTreeService.extractUserMessage(displayNode.input);
     }, [displayNode]);
+    const summaryInputLine = generationSummaryInputOverride !== null && generationSummaryInputOverride.length > 0 ? generationSummaryInputOverride : inputText;
     const isGeneration = React.useMemo(() => {
       return node !== null && isObservation(node) && node.type === "GENERATION";
     }, [node]);
@@ -108737,7 +109142,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         case "response":
           return displayNode.output || {};
         case "metadata":
-          return isObservation(displayNode) ? displayNode.metadata || {} : {};
+          return isObservation(displayNode) ? metadataForDisplay(displayNode.metadata || {}) : {};
         case "logs":
           return {
             id: isObservation(displayNode) ? displayNode.id : displayNode.id,
@@ -108757,11 +109162,17 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       return {
         input: formattedInput,
         output: displayNode.output || {},
-        metadata: isObservation(displayNode) ? displayNode.metadata || {} : {},
+        metadata: isObservation(displayNode) ? metadataForDisplay(displayNode.metadata || {}) : {},
         statusMessage: isObservation(displayNode) ? displayNode.statusMessage : void 0,
         modelParameters: isObservation(displayNode) ? displayNode.modelParameters : void 0
       };
     }, [displayNode, formattedInput]);
+    const summaryModelInfo = React.useMemo(() => {
+      if (!isGeneration || !displayNode) return { modelName: null, modelParameters: {} };
+      const modelName = typeof formattedInput === "object" && formattedInput !== null && "model" in formattedInput ? formattedInput.model ?? null : null;
+      const modelParameters = isObservation(displayNode) && displayNode.modelParameters && typeof displayNode.modelParameters === "object" ? displayNode.modelParameters : {};
+      return { modelName, modelParameters };
+    }, [isGeneration, displayNode, formattedInput]);
     const tokenTooltipContent = metrics.totalTokens > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -108854,10 +109265,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             ] })
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(ContentDivider, {}),
-          isGeneration && inputText.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          isGeneration && summaryInputLine.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[8px]", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] font-medium leading-[16px] text-[#98A2B3]", children: "Input" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[12px] font-medium leading-[16px] text-[#101828] truncate", children: inputText })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[12px] font-medium leading-[16px] text-[#101828] truncate", children: summaryInputLine })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(ContentDivider, {})
           ] }),
@@ -108873,6 +109284,37 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(ContentDivider, {})
+          ] }),
+          isGeneration && (summaryModelInfo.modelName || Object.keys(summaryModelInfo.modelParameters).length > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[8px]", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] font-medium leading-[16px] text-[#98A2B3]", children: "Model parameters" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-[6px]", children: [
+                summaryModelInfo.modelName && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "px-[8px] py-[4px] bg-[#F2F4F7] rounded-[4px] text-[11px] font-medium text-[#344054]", children: [
+                  "Model: ",
+                  summaryModelInfo.modelName
+                ] }),
+                Object.entries(summaryModelInfo.modelParameters).filter(
+                  ([_2, value]) => value !== null && value !== void 0
+                ).map(([key, value]) => {
+                  const valueStr = typeof value === "object" ? JSON.stringify(value) : String(value);
+                  const displayKey = key.replace(/_/g, " ");
+                  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "span",
+                    {
+                      className: "px-[8px] py-[4px] bg-[#F2F4F7] border border-[#EAECF0] rounded-[4px] text-[11px] font-medium text-[#344054] max-w-[200px] truncate",
+                      title: `${key}: ${valueStr}`,
+                      children: [
+                        displayKey,
+                        ": ",
+                        valueStr
+                      ]
+                    },
+                    key
+                  );
+                })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ContentDivider, {})
           ] })
         ] })
       ] }),
@@ -108900,7 +109342,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     selectedObservationId,
     batchSize = DEFAULT_BATCH_SIZE,
     initialTraceCount,
-    initialSessionData
+    initialSessionData,
+    runHeaderInputMode = "display"
   }) {
     const [currentMode, setCurrentMode] = React.useState(initialMode);
     const [currentSessionId, setCurrentSessionId] = React.useState(initialSessionId);
@@ -109141,12 +109584,52 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     }, [mode, sessionData, traceData, sessionId, traceId, initialSessionData]);
     const traces = React.useMemo(() => {
       if (mode === "session" && sessionData) {
-        return sessionData.traces.map((t) => service.transformToTraceData(t));
+        const sorted = [...sessionData.traces].sort((a2, b) => {
+          const tA = a2.timestamp ? new Date(a2.timestamp).getTime() : 0;
+          const tB = b.timestamp ? new Date(b.timestamp).getTime() : 0;
+          return tA - tB;
+        });
+        return sorted.map((t) => service.transformToTraceData(t));
       } else if (mode === "trace" && traceData) {
         return [service.transformToTraceData(traceData)];
       }
       return [];
     }, [mode, sessionData, traceData, service]);
+    const generationSummaryInputOverride = React.useMemo(() => {
+      var _a;
+      if (runHeaderInputMode === "tokenized") {
+        return null;
+      }
+      if (!selectedNode || !("traceId" in selectedNode) || !("type" in selectedNode)) {
+        return null;
+      }
+      const obs = selectedNode;
+      if (obs.type !== "GENERATION") {
+        return null;
+      }
+      const traceRow = traces.find((t) => t.id === obs.traceId);
+      if (!traceRow) {
+        return null;
+      }
+      const displayUser = traceRow.displayUserMessage && traceRow.displayUserMessage.length > 0 ? traceRow.displayUserMessage : TraceTreeService.extractUserMessage(traceRow.input);
+      if (!displayUser || displayUser.length === 0) {
+        return null;
+      }
+      const fromState = (_a = traceObservations[obs.traceId]) == null ? void 0 : _a.observations;
+      const observations = fromState && fromState.length > 0 ? fromState : mode === "trace" && (traceData == null ? void 0 : traceData.id) === obs.traceId && traceData.observations.length > 0 ? traceData.observations : [];
+      const { observation: firstGen } = TraceTreeService.findFirstGeneration(observations);
+      if (!firstGen || firstGen.id !== obs.id) {
+        return null;
+      }
+      return displayUser;
+    }, [
+      runHeaderInputMode,
+      selectedNode,
+      traces,
+      traceObservations,
+      mode,
+      traceData
+    ]);
     const handleNodeSelect = React.useCallback((node) => {
       setSelectedNode(node);
     }, []);
@@ -109195,6 +109678,23 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         firstTraceId: null
       });
     }, []);
+    const handleNavigateToTrace = React.useCallback((targetTraceId) => {
+      setSelectedNode(null);
+      setSessionData(null);
+      setTraceData(null);
+      setTraceObservations({});
+      setLoadingState("idle");
+      setError(null);
+      setHasAutoSelected(false);
+      setCurrentMode("trace");
+      setCurrentTraceId(targetTraceId);
+      setProgressiveState({
+        traceCount: 0,
+        pendingTraceIds: [],
+        firstTraceLoaded: false,
+        firstTraceId: null
+      });
+    }, []);
     if (loadingState === "loading") {
       const canShowHeader = mode === "session" && initialSessionData;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col bg-white ${className}`, children: [
@@ -109363,8 +109863,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                 onNodeSelect: handleNodeSelect,
                 onExpandToggle: () => handleTraceExpand(trace.id, trace.timestamp),
                 showTraceId: mode === "session",
+                onTraceIdClick: mode === "session" ? handleNavigateToTrace : void 0,
                 isLoading: isLoadingObservations,
-                defaultExpandedNodeIds: autoExpandIds
+                defaultExpandedNodeIds: autoExpandIds,
+                runHeaderInputMode
               },
               trace.id
             );
@@ -109384,7 +109886,15 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             );
           }) })
         ] }) }),
-        !selectedNode && !hasAutoSelected ? /* @__PURE__ */ jsxRuntimeExports.jsx(NodeDetailSkeleton, { showFullSummary: true }) : /* @__PURE__ */ jsxRuntimeExports.jsx(NodeDetailPanel, { node: selectedNode, nodeType, apiConfig })
+        !selectedNode && !hasAutoSelected ? /* @__PURE__ */ jsxRuntimeExports.jsx(NodeDetailSkeleton, { showFullSummary: true }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          NodeDetailPanel,
+          {
+            node: selectedNode,
+            nodeType,
+            apiConfig,
+            generationSummaryInputOverride
+          }
+        )
       ] })
     ] });
   }
@@ -109799,22 +110309,25 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", title: envId || "-", children: displayName });
   }
   function SessionsListContent(props) {
-    const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours" } = props;
-    const { environments } = useEnvironment();
-    const [selectedSessionId, setSelectedSessionId] = React.useState(null);
+    const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId } = props;
+    const { environments, resolveEnvironmentName } = useEnvironment();
+    const [selectedSessionId, setSelectedSessionId] = React.useState(() => initialSessionId ?? null);
     const [selectedSessionData, setSelectedSessionData] = React.useState(null);
-    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const [isModalOpen, setIsModalOpen] = React.useState(() => !!initialSessionId);
     const [sessions, setSessions] = React.useState([]);
     const [totalCount, setTotalCount] = React.useState(0);
     const [loading, setLoading] = React.useState(true);
     const [hasInitiallyLoaded, setHasInitiallyLoaded] = React.useState(false);
+    const [appVersionOptions, setAppVersionOptions] = React.useState([]);
+    const [searchTerm, setSearchTerm] = React.useState("");
     const initialFilters = React.useMemo(() => {
       const hasEnvFilter = defaultFilters.some((f) => f.column === "envId");
-      if (hasEnvFilter) {
-        return defaultFilters;
+      const base2 = hasEnvFilter ? defaultFilters : [createDraftEnvironmentFilter$1(), ...defaultFilters];
+      if (initialSessionId) {
+        return [...base2, { column: "id", type: "string", operator: "=", value: initialSessionId }];
       }
-      return [createDraftEnvironmentFilter$1(), ...defaultFilters];
-    }, [defaultFilters]);
+      return base2;
+    }, [defaultFilters, initialSessionId]);
     const [filters, setFilters] = React.useState(initialFilters);
     const [showFilterPanel, setShowFilterPanel] = React.useState(false);
     const [showColumnCustomization, setShowColumnCustomization] = React.useState(false);
@@ -109823,6 +110336,32 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     const [pagination, setPagination] = React.useState({ page: 0, limit: 50 });
     const [orderBy, setOrderBy] = React.useState({ column: "createdAt", order: "DESC" });
     const apiService = React.useMemo(() => new TracingApiService(apiConfig), [apiConfig]);
+    React.useEffect(() => {
+      if (initialSessionId) {
+        setSelectedSessionId(initialSessionId);
+        setIsModalOpen(true);
+      }
+    }, [initialSessionId]);
+    React.useEffect(() => {
+      const fetchAppVersions = async () => {
+        try {
+          const filterOptionsData = await apiService.fetchFilterOptions({
+            projectId: apiConfig.projectId
+          });
+          if ((filterOptionsData == null ? void 0 : filterOptionsData.appvIds) && Array.isArray(filterOptionsData.appvIds)) {
+            setAppVersionOptions(
+              filterOptionsData.appvIds.map((item) => ({
+                value: item.value,
+                label: item.value
+              }))
+            );
+          }
+        } catch (error) {
+          console.warn("Failed to fetch app version filter options:", error);
+        }
+      };
+      fetchAppVersions();
+    }, [apiService, apiConfig.projectId]);
     const convertPresetToDateRange = (preset) => {
       const now2 = /* @__PURE__ */ new Date();
       let pastDate;
@@ -109884,7 +110423,6 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         });
       }
       const allFilters = [...timeFilters, ...filters];
-      if (apiConfig.projectId) ;
       return allFilters;
     }, [timeRange, filters]);
     const fetchSessions = React.useCallback(async () => {
@@ -109944,6 +110482,28 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     React.useEffect(() => {
       fetchSessions();
     }, [fetchSessions]);
+    const filteredSessions = React.useMemo(() => {
+      const term = searchTerm.trim().toLowerCase();
+      if (!term) return sessions;
+      return sessions.filter((session) => {
+        var _a;
+        const envName = ((_a = resolveEnvironmentName(session.envId)) == null ? void 0 : _a.toLowerCase()) || "";
+        const searchableFields = [
+          session.id,
+          envName,
+          session.envId,
+          session.appvId,
+          session.source,
+          session.environment,
+          session.sessionReference,
+          session.userReference,
+          ...session.userIds || []
+        ];
+        return searchableFields.some(
+          (field) => field && String(field).toLowerCase().includes(term)
+        );
+      });
+    }, [sessions, searchTerm, resolveEnvironmentName]);
     const defaultColumns = React.useMemo(
       () => [
         {
@@ -109952,8 +110512,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           width: 320,
           pinned: "left",
           hide: false,
-          // Pinned columns should always be visible
-          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900", title: params.value, children: TracingUtils.truncate(params.value, 30) })
+          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableId, { value: params.value, truncateLength: 30 })
         },
         {
           field: "envId",
@@ -110080,6 +110639,20 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           disabled: true,
           valueFormatter: (params) => TracingUtils.formatTokens(params.value),
           cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", children: TracingUtils.formatTokens(params.value) })
+        },
+        {
+          field: "sessionReference",
+          headerName: "Session Reference",
+          width: 180,
+          hide: true,
+          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: params.value || "-", children: params.value || "-" })
+        },
+        {
+          field: "identity",
+          headerName: "User Reference",
+          width: 180,
+          hide: true,
+          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: params.value || "-", children: params.value || "-" })
         }
         // {
         //   field: 'traceTags',
@@ -110199,8 +110772,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           // User-friendly label
           apiColumnName: "App Version ID",
           // API expects "App Version ID" (koretracing uiTableName)
-          type: "string",
-          operators: ["=", "!=", "contains"]
+          type: "stringOptions",
+          operators: ["any of", "none of"],
+          options: appVersionOptions
         },
         {
           field: "source",
@@ -110252,10 +110826,27 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           // API expects "Output Tokens" (koretracing uiTableName)
           type: "number",
           operators: ["=", ">", ">=", "<", "<="]
+        },
+        {
+          field: "sessionReference",
+          label: "Session Reference",
+          apiColumnName: "Session Reference",
+          type: "string",
+          operators: ["=", "!=", "contains"]
+        },
+        {
+          field: "identity",
+          label: "User Reference",
+          apiColumnName: "User Reference",
+          type: "string",
+          operators: ["=", "!=", "contains"]
         }
       ],
-      [environments]
+      [environments, appVersionOptions]
     );
+    const handleSearch = React.useCallback((term) => {
+      setSearchTerm(term);
+    }, []);
     const handleTimeRangeChange = (value, presetLabel) => {
       console.log("🗓️ SessionsList: Time range change requested:", value, presetLabel);
       setTimeRange(value);
@@ -110297,6 +110888,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     };
     const handleClearFilters = () => {
       setFilters([]);
+      setSearchTerm("");
       setTimeRange("24 hours");
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col w-full ${className}`, children: [
@@ -110305,11 +110897,19 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         {
           title: "Sessions",
           description: "Review session logs and trace details to analyze conversation logs and app behavior.",
-          showSearch: false,
+          searchPlaceholder: "Search sessions...",
+          showSearch: true,
+          searchConfig: {
+            metadataSearchFields: ["Session ID", "Environment", "App Version", "User ID", "Source"],
+            updateQuery: handleSearch,
+            currentQuery: searchTerm,
+            tableAllowsFullTextSearch: false
+          },
           timeRange,
           timeRangePresetLabel,
           onTimeRangeChange: handleTimeRangeChange,
           filters,
+          filterColumns,
           onFiltersClick: () => setShowFilterPanel(!showFilterPanel),
           onModifyColumnsClick: () => setShowColumnCustomization(true),
           onExportClick: handleExport,
@@ -110360,10 +110960,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto p-[24px] pt-[8px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         TracingTable,
         {
-          data: sessions,
+          data: filteredSessions,
           columns,
           loading,
-          totalCount,
+          totalCount: searchTerm.trim() ? filteredSessions.length : totalCount,
           pagination,
           onPaginationChange: setPagination,
           onRowClick: handleRowClick,
@@ -110410,24 +111010,26 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       onTraceClick,
       className = "",
       defaultFilters = [],
-      sessionId
+      sessionId,
+      initialTraceId
     } = props;
     const { environments } = useEnvironment();
-    const [selectedTraceId, setSelectedTraceId] = React.useState(null);
-    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const [selectedTraceId, setSelectedTraceId] = React.useState(() => initialTraceId ?? null);
+    const [isModalOpen, setIsModalOpen] = React.useState(() => !!initialTraceId);
     const [traces, setTraces] = React.useState([]);
     const [totalCount, setTotalCount] = React.useState(0);
     const [loading, setLoading] = React.useState(true);
     const [hasInitiallyLoaded, setHasInitiallyLoaded] = React.useState(false);
     const [searchTerm, setSearchTerm] = React.useState("");
-    const [searchType, setSearchType] = React.useState(["id"]);
+    const [searchType, setSearchType] = React.useState(["id", "content"]);
     const initialFilters = React.useMemo(() => {
       const hasEnvFilter = defaultFilters.some((f) => f.column === "envId");
-      if (hasEnvFilter) {
-        return defaultFilters;
+      const base2 = hasEnvFilter ? defaultFilters : [createDraftEnvironmentFilter(), ...defaultFilters];
+      if (initialTraceId) {
+        return [...base2, { column: "id", type: "string", operator: "=", value: initialTraceId }];
       }
-      return [createDraftEnvironmentFilter(), ...defaultFilters];
-    }, [defaultFilters]);
+      return base2;
+    }, [defaultFilters, initialTraceId]);
     const [filters, setFilters] = React.useState(initialFilters);
     const [showFilterPanel, setShowFilterPanel] = React.useState(false);
     const [showColumnCustomization, setShowColumnCustomization] = React.useState(false);
@@ -110436,6 +111038,12 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     const [pagination, setPagination] = React.useState({ page: 0, limit: 50 });
     const [orderBy, setOrderBy] = React.useState({ column: "timestamp", order: "DESC" });
     const [detailedTraceData, setDetailedTraceData] = React.useState(/* @__PURE__ */ new Map());
+    React.useEffect(() => {
+      if (initialTraceId) {
+        setSelectedTraceId(initialTraceId);
+        setIsModalOpen(true);
+      }
+    }, [initialTraceId]);
     const apiService = React.useMemo(() => new TracingApiService(apiConfig), [apiConfig]);
     const convertPresetToDateRange = (preset) => {
       const now2 = /* @__PURE__ */ new Date();
@@ -110521,18 +111129,24 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           orderBy
         });
         const apiFilters = TracingUtils.convertFiltersToApiFormat(effectiveFilters, filterColumns);
-        const tracesResponse = await apiService.fetchTraces({
-          projectId: apiConfig.projectId,
-          filter: apiFilters,
-          orderBy,
-          page: pagination.page,
-          limit: pagination.limit,
-          searchQuery: searchTerm || null,
-          searchType
-          // 'id' for IDs/Names, ['id', 'content'] for Full Text
-        });
+        const [tracesResponse, countResponse] = await Promise.all([
+          apiService.fetchTraces({
+            projectId: apiConfig.projectId,
+            filter: apiFilters,
+            orderBy,
+            page: pagination.page,
+            limit: pagination.limit,
+            searchQuery: searchTerm || null,
+            searchType
+          }),
+          apiService.fetchTracesCount(apiConfig.projectId, apiFilters, {
+            searchQuery: searchTerm || null,
+            searchType,
+            orderBy
+          })
+        ]);
         const basicTraces = tracesResponse.traces || [];
-        console.log("✅ Basic traces loaded:", { count: basicTraces.length });
+        console.log("✅ Basic traces loaded:", { count: basicTraces.length, total: countResponse.totalCount });
         if (basicTraces.length > 0) {
           const traceIds = basicTraces.map((t) => t.id);
           try {
@@ -110567,7 +111181,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         } else {
           setTraces([]);
         }
-        setTotalCount(basicTraces.length);
+        setTotalCount(countResponse.totalCount);
       } catch (error) {
         console.error("❌ Error fetching traces:", error);
         setTraces([]);
@@ -110596,11 +111210,13 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               projectId: apiConfig.projectId,
               timestamp: trace.timestamp
             });
+            const inputDisplay = TraceTreeService.extractUserMessage(detail["input"]);
+            const outputDisplay = TraceTreeService.extractAppResponse(detail["output"]);
             setDetailedTraceData((prev) => {
               const newMap = new Map(prev);
               newMap.set(traceId, {
-                input: detail["input"],
-                output: detail["output"],
+                input: inputDisplay,
+                output: outputDisplay,
                 totalCost: detail["totalCost"],
                 envId: detail["envId"],
                 source: detail["source"]
@@ -110637,8 +111253,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             width: 320,
             pinned: "left",
             hide: false,
-            // Pinned columns should always be visible
-            cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900", title: params.value, children: TracingUtils.truncate(params.value, 30) })
+            cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableId, { value: params.value, truncateLength: 30 })
           }
         ];
         {
@@ -110649,11 +111264,13 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             hide: false,
             cellRenderer: (params) => {
               const detailData = detailedTraceData.get(params.data.id);
-              const inputText = detailData == null ? void 0 : detailData.input;
-              if (inputText === void 0) {
+              const rawInput = detailData == null ? void 0 : detailData.input;
+              if (rawInput === void 0) {
                 return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 italic", children: "Loading..." });
               }
-              return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: inputText, children: TracingUtils.truncate(inputText || "-", 50) });
+              const inputText = typeof rawInput === "string" ? rawInput : TraceTreeService.extractUserMessage(rawInput);
+              const displayText = TracingUtils.truncate(inputText || "-", 50);
+              return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: inputText || void 0, children: displayText });
             }
           });
         }
@@ -110682,11 +111299,13 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             hide: false,
             cellRenderer: (params) => {
               const detailData = detailedTraceData.get(params.data.id);
-              const outputText = detailData == null ? void 0 : detailData.output;
-              if (outputText === void 0) {
+              const rawOutput = detailData == null ? void 0 : detailData.output;
+              if (rawOutput === void 0) {
                 return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400 italic", children: "Loading..." });
               }
-              return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: outputText, children: TracingUtils.truncate(outputText || "-", 50) });
+              const outputText = typeof rawOutput === "string" ? rawOutput : TraceTreeService.extractAppResponse(rawOutput);
+              const displayText = TracingUtils.truncate(outputText || "-", 50);
+              return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: outputText || void 0, children: displayText });
             }
           });
         }
@@ -110749,11 +111368,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           // },
           {
             field: "timestamp",
-            headerName: "Timestamp",
+            headerName: "Created At",
             width: 180,
-            hide: true,
-            // DISABLED - This is the main sort column for traces
-            disabled: true,
+            hide: false,
             cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500", children: params.value ? new Date(params.value).toLocaleString() : "-" })
           },
           {
@@ -110828,6 +111445,20 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", children: source || "-" });
             }
           },
+          {
+            field: "sessionReference",
+            headerName: "Session Reference",
+            width: 180,
+            hide: true,
+            cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: params.value || "-", children: params.value || "-" })
+          },
+          {
+            field: "identity",
+            headerName: "User Reference",
+            width: 180,
+            hide: true,
+            cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: params.value || "-", children: params.value || "-" })
+          },
           {
             field: "promptTokens",
             headerName: "Input Tokens",
@@ -111004,10 +111635,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           },
           {
             field: "timestamp",
-            label: "Timestamp",
-            // Same as API
+            label: "Created At",
             apiColumnName: "Timestamp",
-            // API expects "Timestamp" (koretracing uiTableName)
+            // Backend payload: keep "Timestamp" for API
             type: "datetime",
             operators: [">=", "<=", "="]
           },
@@ -111098,6 +111728,20 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             label: "Output Tokens",
             type: "number",
             operators: ["=", ">", ">=", "<", "<="]
+          },
+          {
+            field: "sessionReference",
+            label: "Session Reference",
+            apiColumnName: "Session Reference",
+            type: "string",
+            operators: ["=", "!=", "contains"]
+          },
+          {
+            field: "identity",
+            label: "User Reference",
+            apiColumnName: "User Reference",
+            type: "string",
+            operators: ["=", "!=", "contains"]
           }
         );
         return baseColumns;
@@ -111164,6 +111808,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           timeRangePresetLabel,
           onTimeRangeChange: handleTimeRangeChange,
           filters,
+          filterColumns,
           onFiltersClick: () => setShowFilterPanel(!showFilterPanel),
           onModifyColumnsClick: () => setShowColumnCustomization(true),
           onExportClick: handleExport,
@@ -112215,12 +112860,12 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
      * Process execution events and build a hierarchical tree structure
      * Session > Run > Node Tree
      */
-    static buildSessionTree(events, sessionId) {
+    static buildSessionTree(events, sessionId, options) {
       var _a;
       const runGroups = this.groupEventsByRun(events);
       const runs = [];
       for (const [runId, runEvents] of runGroups.entries()) {
-        const runTree = this.buildRunTree(runId, runEvents);
+        const runTree = this.buildRunTree(runId, runEvents, options);
         runs.push(runTree);
       }
       runs.sort((a2, b) => new Date(a2.startTime).getTime() - new Date(b.startTime).getTime());
@@ -112246,11 +112891,11 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     /**
      * Build tree for a single run
      */
-    static buildRunTree(runId, events) {
+    static buildRunTree(runId, events, options) {
       var _a;
       const nodeEventMap = /* @__PURE__ */ new Map();
       events.forEach((event) => {
-        const nodeKey = `${event.data.id}|${event.data.name}|${event.data.toolName}`;
+        const nodeKey = event.data.id;
         if (!nodeEventMap.has(nodeKey)) {
           nodeEventMap.set(nodeKey, {});
         }
@@ -112277,7 +112922,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       const status = this.calculateRunStatus(runEvents);
       const duration = endTime && startTime ? endTime - startTime : void 0;
       const totalTokens = this.calculateRunTokens(runEvents);
-      const userInput = this.extractUserInput(runEvents);
+      const userInput = this.extractUserInput(runEvents, options);
       const finalOutput = this.extractFinalOutput(runEvents);
       return {
         runId,
@@ -112296,11 +112941,12 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
      * Create TreeNode from paired started/completed events
      */
     static createTreeNodeFromEvents(startedEvent, completedEvent, runId) {
+      var _a;
       const startTime = startedEvent.data.timestamp;
       const endTime = completedEvent == null ? void 0 : completedEvent.data.timestamp;
       const duration = endTime && startTime ? new Date(endTime).getTime() - new Date(startTime).getTime() : void 0;
       const primaryEvent = completedEvent || startedEvent;
-      const hasInputOutput = primaryEvent.data.type === "llm" || primaryEvent.data.type === "tool" || primaryEvent.data.type === "GuardrailsInputScan" || primaryEvent.data.type === "GuardrailsOutputScan" || primaryEvent.data.type === "Agent" || primaryEvent.data.type === "External Orchestrator" || primaryEvent.data.type === "ProxyWorker" || primaryEvent.data.type === "event";
+      const hasInputOutput = primaryEvent.data.type === "llm" || primaryEvent.data.type === "tool" || primaryEvent.data.type === "GuardrailsInputScan" || primaryEvent.data.type === "GuardrailsOutputScan" || primaryEvent.data.type === "Agent" || primaryEvent.data.type === "External Orchestrator" || primaryEvent.data.type === "ProxyWorker" || primaryEvent.data.type === "PostProcessor" || primaryEvent.data.type === "event";
       const input = hasInputOutput ? startedEvent.data.input : void 0;
       let output = void 0;
       let error = void 0;
@@ -112314,7 +112960,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       const { toolInvocations, isResponse } = this.extractToolInvocations(output);
       console.log("toolInvocations", toolInvocations);
       console.log("isResponse", isResponse);
-      const provider = primaryEvent.data.type === "llm" ? this.extractProvider(primaryEvent.data.name || primaryEvent.data.toolName) : void 0;
+      const extractedProvider = primaryEvent.data.type === "llm" ? this.extractProvider(primaryEvent.data.name || primaryEvent.data.toolName) : void 0;
+      const provider = ((_a = primaryEvent.data.metadata) == null ? void 0 : _a.provider) || extractedProvider;
       return {
         id: primaryEvent.data.id,
         parentId: primaryEvent.data.parentId,
@@ -112473,12 +113120,22 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     /**
      * Extract initial user input from the first LLM node's input
      */
-    static extractUserInput(events) {
+    static extractUserInput(events, options) {
+      const preferDisplay = ((options == null ? void 0 : options.runHeaderInputMode) ?? "display") === "display";
       const llmEvents = events.filter(
         (e) => e.type === "node_started" && e.data.type === "llm"
       ).sort((a2, b) => new Date(a2.data.timestamp).getTime() - new Date(b.data.timestamp).getTime());
       if (llmEvents.length > 0) {
         const firstLlmEvent = llmEvents[0];
+        if (preferDisplay && firstLlmEvent.data.displayInput !== void 0 && firstLlmEvent.data.displayInput !== null) {
+          const d = firstLlmEvent.data.displayInput;
+          if (typeof d === "string") {
+            return d;
+          }
+          if (typeof d === "object") {
+            return JSON.stringify(d);
+          }
+        }
         if (firstLlmEvent.data.input) {
           if (typeof firstLlmEvent.data.input === "string") {
             return firstLlmEvent.data.input;
@@ -112546,6 +113203,22 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
      */
     static extractFinalOutput(events) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      const postProcessorEvents = events.filter(
+        (e) => {
+          var _a2;
+          return e.type === "node_completed" && e.data.type === "tool" && ((_a2 = e.data.metadata) == null ? void 0 : _a2.type) === "PostProcessor" && e.data.output;
+        }
+      );
+      if (postProcessorEvents.length > 0) {
+        const lastPP = postProcessorEvents[postProcessorEvents.length - 1];
+        const ppOutput = lastPP.data.output;
+        if (typeof ppOutput === "object" && ppOutput.output) {
+          return typeof ppOutput.output === "string" ? ppOutput.output : JSON.stringify(ppOutput.output);
+        }
+        if (typeof ppOutput === "string") {
+          return ppOutput;
+        }
+      }
       const errorEvents = events.filter(
         (e) => e.type === "node_completed" && e.data.error && (e.data.status === "errored" || e.data.status === "failed")
       );
@@ -112672,8 +113345,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     /**
      * Update tree with new events (optimized for real-time updates)
      */
-    static updateTree(existingTree, _newEvents, allEvents) {
-      return this.buildSessionTree(allEvents, existingTree.sessionId);
+    static updateTree(existingTree, _newEvents, allEvents, options) {
+      return this.buildSessionTree(allEvents, existingTree.sessionId, options);
     }
     /**
      * Merge new events into existing events efficiently
@@ -113025,7 +113698,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         nodeId,
         totalObservations: observations.length
       });
-      const matchedObservation = observations.find((obs) => {
+      const matchingObservations = observations.filter((obs) => {
         let metadata = obs.metadata;
         if (typeof metadata === "string") {
           try {
@@ -113046,6 +113719,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         });
         return nodeId === observationNodeId;
       });
+      const matchedObservation = matchingObservations.find((obs) => obs.type === "GENERATION") || matchingObservations[0] || null;
       if (!matchedObservation) {
         const parts = nodeId.split("_");
         if (parts.length === 2) {
@@ -113187,6 +113861,36 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       return this.config;
     }
   }
+  function sanitizeForTestId(value) {
+    return value.trim().toLowerCase().replace(/[\s_]+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "") || "node";
+  }
+  function getDebuggerCallTypeTestId(node) {
+    const name = (node.name ?? "unknown").toString();
+    let slug = sanitizeForTestId(name);
+    switch (node.type) {
+      case "event":
+        slug = slug.replace(/-event$/, "") || "event";
+        return `debugger-event-${slug}`;
+      case "Agent":
+        return `debugger-${slug}-call`;
+      case "tool":
+        return `debugger-${slug}-call`;
+      case "llm":
+        return `debugger-llm-${slug}`;
+      case "GuardrailsInputScan":
+        return `debugger-guardrails-input-${slug}`;
+      case "GuardrailsOutputScan":
+        return `debugger-guardrails-output-${slug}`;
+      case "External Orchestrator":
+        return `debugger-orchestrator-${slug}`;
+      case "ProxyWorker":
+        return `debugger-proxy-${slug}`;
+      case "PostProcessor":
+        return `debugger-postprocessor-${slug}`;
+      default:
+        return `debugger-${String(node.type).toLowerCase().replace(/\s+/g, "-")}-${slug}`;
+    }
+  }
   function DebugCard({
     node,
     onToggle,
@@ -113198,9 +113902,12 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     projectId,
     nodeIndex = 0
   }) {
+    var _a;
+    const callTypeTestId = React.useMemo(() => getDebuggerCallTypeTestId(node), [node.type, node.name]);
+    const cardTestId = React.useMemo(() => `${callTypeTestId}_${node.id}`, [callTypeTestId, node.id]);
     const isGuardrailsNode = React.useMemo(() => {
-      var _a;
-      return node.type === "GuardrailsInputScan" || node.type === "GuardrailsOutputScan" || ((_a = node.name) == null ? void 0 : _a.toLowerCase().includes("guardrail"));
+      var _a2;
+      return node.type === "GuardrailsInputScan" || node.type === "GuardrailsOutputScan" || ((_a2 = node.name) == null ? void 0 : _a2.toLowerCase().includes("guardrail"));
     }, [node.type, node.name]);
     const availableTabs = React.useMemo(() => {
       switch (node.type) {
@@ -113377,7 +114084,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       }
     };
     const getNodeIcon = () => {
-      var _a, _b;
+      var _a2, _b;
       if (isGuardrailsNode) {
         return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 relative w-[24px] h-[24px] bg-gray-200 rounded-[8px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "21", viewBox: "0 0 17 21", fill: "none", className: "w-[16px] h-[16px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "path",
@@ -113412,7 +114119,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           size: "small",
           name: node.name,
           className: "w-[24px] h-[24px]",
-          toolType: node.type === "tool" ? (_a = node.metadata) == null ? void 0 : _a.type : void 0,
+          toolType: node.type === "tool" ? (_a2 = node.metadata) == null ? void 0 : _a2.type : void 0,
           provider: node.type === "llm" ? (_b = node.metadata) == null ? void 0 : _b.provider : void 0,
           modelName: node.type === "llm" ? node.name : void 0
         }
@@ -113436,7 +114143,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       return availableTabs;
     };
     const renderActionContent = () => {
-      var _a, _b;
+      var _a2, _b;
       let toolInvocations = node.toolInvocations || [];
       if (node.type === "llm" && Array.isArray(node.output)) {
         toolInvocations = node.output.filter(
@@ -113458,7 +114165,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 truncate", children: child.name || "Unknown" })
             ] }, child.id || index))
           ] }),
-          toolInvocations.length > 0 && ((_b = (_a = toolInvocations[0]) == null ? void 0 : _a.args) == null ? void 0 : _b.reason) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          toolInvocations.length > 0 && ((_b = (_a2 = toolInvocations[0]) == null ? void 0 : _a2.args) == null ? void 0 : _b.reason) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-gray-400 mb-[4px]", children: "Reason" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-600", children: toolInvocations[0].args.reason })
           ] })
@@ -113485,14 +114192,14 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 italic", children: "No actions taken" });
     };
     const extractOutputMessage = (output) => {
-      var _a, _b, _c, _d;
+      var _a2, _b, _c, _d;
       if (!output || typeof output !== "object") return void 0;
       if (Array.isArray(output)) {
         const routeToUserTool = output.find(
           (item) => item && typeof item === "object" && (item.name === "route_to_user" || item.toolName === "route_to_user")
         );
         if (routeToUserTool) {
-          return ((_a = routeToUserTool.args) == null ? void 0 : _a.message) || routeToUserTool.message || ((_b = routeToUserTool.output) == null ? void 0 : _b.message);
+          return ((_a2 = routeToUserTool.args) == null ? void 0 : _a2.message) || routeToUserTool.message || ((_b = routeToUserTool.output) == null ? void 0 : _b.message);
         }
       } else if (output.name === "route_to_user" || output.toolName === "route_to_user") {
         return ((_c = output.args) == null ? void 0 : _c.message) || output.message || ((_d = output.output) == null ? void 0 : _d.message);
@@ -113589,7 +114296,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       ] });
     };
     const renderTabContent = () => {
-      var _a;
+      var _a2;
       switch (activeTab) {
         case "summary":
           if (isGuardrailsNode) {
@@ -113780,7 +114487,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             DataViewer,
             {
-              data: ((_a = node.metadata) == null ? void 0 : _a["logs"]) || {},
+              data: ((_a2 = node.metadata) == null ? void 0 : _a2["logs"]) || {},
               title: "Execution Logs",
               maxHeight: "250px",
               defaultExpanded: true,
@@ -113793,15 +114500,15 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     };
     return (
       // bg-white w-full border-t border-gray-200
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white w-full", "data-test-id": `debug_card_${node.id}`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white w-full", "data-test-id": cardTestId, "data-call-type-test-id": callTypeTestId, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             className: `flex items-center pl-[8px] pr-[8px] relative transition-colors cursor-pointer w-full
         ${isSelected ? "" : ""}`,
             onClick: handleNodeClick,
-            "data-test-id": `debug_card_header_${node.id}`,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[10px] w-full", "data-test-id": `debug_card_header_content_${node.id}`, children: [
+            "data-test-id": `${callTypeTestId}_header`,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[10px] w-full", "data-test-id": `${callTypeTestId}_header_content`, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
@@ -113815,7 +114522,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                     }
                   },
                   title: hasChildren ? isExpanded ? "Collapse" : "Expand" : "Show details",
-                  "data-test-id": `debug_card_toggle_${node.id}`,
+                  "data-test-id": `${callTypeTestId}_toggle`,
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     ChevronRight,
                     {
@@ -113824,28 +114531,28 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] w-full py-[8px] border-b border-gray-200", "data-test-id": `debug_card_node_info_${node.id}`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 rounded-[8px] bg-[#B2DDFF]", "data-test-id": `debug_card_node_icon_${node.id}`, children: getNodeIcon() }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] w-full py-[8px] border-b border-gray-200", "data-test-id": `${callTypeTestId}_node_info`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 rounded-[8px] bg-[#B2DDFF]", "data-test-id": `${callTypeTestId}_node_icon`, 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-test-id": `debug_card_node_name_${node.id}`,
-                    children: isGuardrailsNode ? node.type === "GuardrailsInputScan" ? "Input Guardrails Scanner" : "Output Guardrails Scanner" : node.type === "llm" ? "AI Model Call" : node.type === "tool" ? formatToolName(node.name) : node.name
+                    "data-test-id": `${callTypeTestId}_node_name`,
+                    children: isGuardrailsNode ? node.type === "GuardrailsInputScan" ? "Input Guardrails Scanner" : "Output Guardrails Scanner" : node.type === "llm" ? ((_a = node == null ? void 0 : node.metadata) == null ? void 0 : _a.isRoutedModel) ? `AI Model Call (${node.name})` : "AI Model Call" : node.type === "PostProcessor" ? "Response Processor" : node.type === "tool" ? formatToolName(node.name) : node.name
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[12px] text-[10px] text-gray-500", "data-test-id": `debug_card_node_metadata_${node.id}`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[12px] text-[10px] text-gray-500", "data-test-id": `${callTypeTestId}_node_metadata`, children: [
                   node.type === "Agent" && (() => {
-                    var _a;
-                    const llmChild = (_a = node.children) == null ? void 0 : _a.find((child) => child.type === "llm");
+                    var _a2;
+                    const llmChild = (_a2 = node.children) == null ? void 0 : _a2.find((child) => child.type === "llm");
                     if (llmChild == null ? void 0 : llmChild.name) {
                       return /* @__PURE__ */ jsxRuntimeExports.jsx(
                         "span",
                         {
                           className: "text-[10px] text-gray-500 truncate max-w-[100px]",
                           title: llmChild.name,
-                          "data-test-id": `debug_card_node_model_name_${node.id}`,
+                          "data-test-id": `${callTypeTestId}_node_model_name`,
                           children: llmChild.name
                         }
                       );
@@ -113853,7 +114560,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                     return null;
                   })(),
                   (node.type === "Agent" || node.type === "llm" || isGuardrailsNode) && (() => {
-                    var _a, _b, _c;
+                    var _a2, _b, _c;
                     let llmUsage = node.llmUsage;
                     if (node.type === "Agent" && node.children) {
                       const llmChildren = node.children.filter((child) => child.type === "llm");
@@ -113875,10 +114582,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                         "span",
                         {
                           className: "text-[10px] text-gray-500 whitespace-nowrap cursor-help",
-                          title: `Input: ${((_a = llmUsage.input_tokens) == null ? void 0 : _a.toLocaleString()) || 0} tokens
+                          title: `Input: ${((_a2 = llmUsage.input_tokens) == null ? void 0 : _a2.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-test-id": `debug_card_node_tokens_${node.id}`,
+                          "data-test-id": `${callTypeTestId}_node_tokens`,
                           children: [
                             llmUsage.total_tokens.toLocaleString(),
                             " Tokens"
@@ -113888,34 +114595,34 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                     }
                     return null;
                   })(),
-                  node.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", "data-test-id": `debug_card_node_duration_${node.id}`, children: [
+                  node.duration && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", "data-test-id": `${callTypeTestId}_node_duration`, children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "w-[12px] h-[12px]" }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-gray-500 whitespace-nowrap", children: formatDuration(node.duration) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-test-id": `debug_card_node_status_${node.id}`, children: getStatusIcon() })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "data-test-id": `${callTypeTestId}_node_status`, children: getStatusIcon() })
               ] })
             ] })
           }
         ),
-        isSelected && availableTabs.length > 0 && showDetailView && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", "data-test-id": `debug_card_detail_panel_${node.id}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-[-40px] left-[16px] w-[1px] border-l border-dashed border-gray-200 h-[calc(100%+40px)] z-[1]", "data-test-id": `debug_card_detail_panel_connector_${node.id}` }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-[4px] py-[8px] w-full", "data-test-id": `debug_card_detail_panel_content_${node.id}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-50 rounded-[4px] p-[4px] inline-flex gap-[4px] mb-[8px] border border-gray-200", "data-test-id": `debug_card_detail_panel_tabs_${node.id}`, children: getTabsForNodeType().map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        isSelected && availableTabs.length > 0 && showDetailView && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", "data-test-id": `${callTypeTestId}_detail_panel`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-[-40px] left-[16px] w-[1px] border-l border-dashed border-gray-200 h-[calc(100%+40px)] z-[1]", "data-test-id": `${callTypeTestId}_detail_panel_connector` }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-[4px] py-[8px] w-full", "data-test-id": `${callTypeTestId}_detail_panel_content`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-50 rounded-[4px] p-[4px] inline-flex gap-[4px] mb-[8px] border border-gray-200", "data-test-id": `${callTypeTestId}_detail_panel_tabs`, 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-test-id": `debug_card_detail_panel_tab_${node.id}_${tab}`,
+                "data-test-id": `${callTypeTestId}_detail_panel_tab_${tab}`,
                 children: tab.charAt(0).toUpperCase() + tab.slice(1)
               },
               tab
             )) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[4px]", "data-test-id": `debug_card_detail_panel_tab_content_${node.id}`, children: renderTabContent() })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-[4px]", "data-test-id": `${callTypeTestId}_detail_panel_tab_content`, children: renderTabContent() })
           ] })
         ] }),
-        isExpanded && hasChildren && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", "data-test-id": `debug_card_children_${node.id}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-[-40px] left-[16px] w-[1px] border-l border-dashed border-gray-200 h-[calc(100%+40px)] z-[1]", "data-test-id": `debug_card_children_connector_${node.id}` }),
+        isExpanded && hasChildren && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full pl-[32px] relative", "data-test-id": `${callTypeTestId}_children`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-[-40px] left-[16px] w-[1px] border-l border-dashed border-gray-200 h-[calc(100%+40px)] z-[1]", "data-test-id": `${callTypeTestId}_children_connector` }),
           node.children.map((child, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             DebugCard,
             {
@@ -113951,6 +114658,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
       expansionMode = "none",
       showExpansionControls = false,
       defaultDetailView = true,
+      runHeaderInputMode = "display",
       apiConfig
     } = config2;
     console.log("🔧 DebugPanel - Config received:", {
@@ -114011,10 +114719,12 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
       }
     }), []);
     const sessionTree = React.useMemo(() => {
-      const tree = TreeBuilder.buildSessionTree(executionEvents, sessionId);
+      const tree = TreeBuilder.buildSessionTree(executionEvents, sessionId, {
+        runHeaderInputMode
+      });
       prevSessionTreeRef.current = tree;
       return tree;
-    }, [executionEvents, sessionId]);
+    }, [executionEvents, sessionId, runHeaderInputMode]);
     const getAllNodeIds = (tree) => {
       const nodeIds = [];
       const collectIds = (node) => {
@@ -114422,16 +115132,25 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
             const findFinalOutput = (nodes) => {
               let lastOutput = void 0;
               let routeToUserOutput = void 0;
+              let postProcessorOutput = void 0;
               const traverse = (nodeList) => {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d, _e, _f;
                 for (const node of nodeList) {
+                  if (node.type === "tool" && ((_a = node.metadata) == null ? void 0 : _a.type) === "PostProcessor" && node.output) {
+                    const ppOut = node.output;
+                    if (typeof ppOut === "object" && ppOut.output) {
+                      postProcessorOutput = typeof ppOut.output === "string" ? ppOut.output : JSON.stringify(ppOut.output);
+                    } else if (typeof ppOut === "string") {
+                      postProcessorOutput = ppOut;
+                    }
+                  }
                   if (node.type === "tool" && (node.name === "route_to_user" || node.name === "route_to_user")) {
                     if (node.output) {
                       if (typeof node.output === "string") {
                         routeToUserOutput = node.output;
-                      } else if ((_a = node.output) == null ? void 0 : _a.message) {
+                      } else if ((_b = node.output) == null ? void 0 : _b.message) {
                         routeToUserOutput = node.output.message;
-                      } else if ((_b = node.output) == null ? void 0 : _b.result) {
+                      } else if ((_c = node.output) == null ? void 0 : _c.result) {
                         routeToUserOutput = node.output.result;
                       }
                     }
@@ -114441,7 +115160,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                       (item) => (item == null ? void 0 : item.name) === "route_to_user" || (item == null ? void 0 : item.toolName) === "route_to_user"
                     );
                     if (routeItem) {
-                      if ((_c = routeItem.args) == null ? void 0 : _c.message) {
+                      if ((_d = routeItem.args) == null ? void 0 : _d.message) {
                         routeToUserOutput = routeItem.args.message;
                       } else if (routeItem.message) {
                         routeToUserOutput = routeItem.message;
@@ -114452,9 +115171,9 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                     if (typeof node.output === "string") {
                       lastOutput = node.output;
                     } else if (!Array.isArray(node.output)) {
-                      if ((_d = node.output) == null ? void 0 : _d.message) {
+                      if ((_e = node.output) == null ? void 0 : _e.message) {
                         lastOutput = node.output.message;
-                      } else if ((_e = node.output) == null ? void 0 : _e.result) {
+                      } else if ((_f = node.output) == null ? void 0 : _f.result) {
                         lastOutput = node.output.result;
                       } else if (typeof node.output === "object") {
                         if (!node.output.name && !node.output.toolName) {
@@ -114469,7 +115188,7 @@ Total: ${((_c = llmUsage.total_tokens) == null ? void 0 : _c.toLocaleString()) |
                 }
               };
               traverse(nodes);
-              return routeToUserOutput || lastOutput;
+              return postProcessorOutput || routeToUserOutput || lastOutput;
             };
             const outputFromNodes = run2.rootNodes ? findFinalOutput(run2.rootNodes) : void 0;
             const finalOutput = outputFromNodes || run2.finalOutput;
@@ -141290,6 +142009,57 @@ ${code2}
       };
     });
   }
+  function getVariableContextAtPosition(editor, pos) {
+    const { doc: doc2 } = editor.state;
+    if (pos < 2 || pos > doc2.content.size) {
+      return null;
+    }
+    const $pos = doc2.resolve(pos);
+    const parent = $pos.parent;
+    if (!parent.isTextblock) {
+      return null;
+    }
+    const contentStart = $pos.start();
+    let text = "";
+    const posMap = [];
+    parent.forEach((node, offset2) => {
+      const nodeDocStart = contentStart + offset2;
+      if (nodeDocStart >= pos) return;
+      if (node.isText && node.text) {
+        const charsToTake = Math.min(node.text.length, pos - nodeDocStart);
+        for (let i2 = 0; i2 < charsToTake; i2++) {
+          posMap.push(nodeDocStart + i2);
+          text += node.text[i2];
+        }
+      }
+    });
+    const lastOpen = text.lastIndexOf("{{");
+    if (lastOpen === -1) {
+      return null;
+    }
+    const queryText = text.substring(lastOpen + 2);
+    if (queryText.includes("}}")) {
+      return null;
+    }
+    const triggerFrom = posMap[lastOpen];
+    if (triggerFrom === void 0) {
+      return null;
+    }
+    const trimmedQuery = /^\}*$/.test(queryText) ? "" : queryText;
+    return { triggerFrom, query: trimmedQuery };
+  }
+  const TYPE_PREFIXES = ["env", "memory", "system", "content"];
+  function inferVariableType(path) {
+    const firstDot = path.indexOf(".");
+    if (firstDot === -1) return "custom";
+    const prefix2 = path.substring(0, firstDot).toLowerCase();
+    return TYPE_PREFIXES.includes(prefix2) ? prefix2 : "custom";
+  }
+  function removeTypePrefix(path) {
+    const type = inferVariableType(path);
+    if (type === "custom") return path;
+    return path.substring(type.length + 1);
+  }
   const buildVariableSyntax = (variableType, path) => {
     if (variableType === "system" || variableType === "custom") {
       return `{{${path}}}`;
@@ -142008,6 +142778,27 @@ ${code2}
       )
     }
   );
+  const AIStarIcon = ({ size = 14, className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          d: "M2.10833 12.3167V9.4M2.10833 3.56667V0.65M0.65 2.10833H3.56667M0.65 10.8583H3.56667M7.06667 1.23333L6.05506 3.8635C5.89056 4.29122 5.8083 4.50508 5.68039 4.68497C5.56703 4.8444 5.42773 4.98369 5.2683 5.09706C5.08841 5.22497 4.87455 5.30722 4.44684 5.47173L1.81667 6.48333L4.44684 7.49494C4.87455 7.65944 5.08841 7.7417 5.2683 7.86961C5.42773 7.98297 5.56703 8.12227 5.68039 8.2817C5.8083 8.46159 5.89056 8.67545 6.05506 9.10316L7.06667 11.7333L8.07827 9.10316C8.24278 8.67545 8.32503 8.46159 8.45294 8.2817C8.56631 8.12227 8.7056 7.98297 8.86503 7.86961C9.04492 7.7417 9.25878 7.65944 9.6865 7.49494L12.3167 6.48333L9.6865 5.47173C9.25878 5.30722 9.04492 5.22497 8.86503 5.09706C8.7056 4.98369 8.56631 4.8444 8.45294 4.68497C8.32503 4.50508 8.24278 4.29122 8.07827 3.8635L7.06667 1.23333Z",
+          stroke: "currentColor",
+          strokeWidth: "1.3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
   const CATEGORY_ICON_MAP = {
     agents: AgentsIcon,
     tools: ToolsIcon,
@@ -142884,7 +143675,7 @@ ${code2}
         setCurrentPath(parsedQuery.path);
       }
     }, [parsedQuery.category, parsedQuery.path, activeCategory]);
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       if (!menuRef.current) return;
       const menuRect = menuRef.current.getBoundingClientRect();
       const viewportWidth = window.innerWidth;
@@ -142905,7 +143696,7 @@ ${code2}
         newTop = padding;
       }
       setAdjustedPosition({ top: newTop, left: newLeft });
-    }, [position]);
+    }, [position, activeCategory, currentPath.length, query]);
     const categories = [
       { id: "env", label: "Environment Variables", icon: VariableIcon, variables: envVariables },
       { id: "memory", label: "Memory", icon: MemoryIcon, variables: memoryVariables },
@@ -142980,13 +143771,21 @@ ${code2}
       }
     }, [editorControlled]);
     React.useEffect(() => {
+      const isEventInsideMenu = (event) => {
+        if (!menuRef.current) return false;
+        const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+        if (path.length > 0) {
+          return path.includes(menuRef.current);
+        }
+        return menuRef.current.contains(event.target);
+      };
       const handleClickOutside = (e) => {
-        if (menuRef.current && !menuRef.current.contains(e.target)) {
+        if (!isEventInsideMenu(e)) {
           onClose();
         }
       };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
+      document.addEventListener("mousedown", handleClickOutside, true);
+      return () => document.removeEventListener("mousedown", handleClickOutside, true);
     }, [onClose]);
     React.useEffect(() => {
       const handleKeyDown2 = (e) => {
@@ -143073,6 +143872,10 @@ ${code2}
               "button",
               {
                 type: "button",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
                 onClick: handleBack,
                 className: "flex items-center justify-center w-[24px] h-[24px] p-0 border-0 bg-[#F9FAFB] rounded-[4px] cursor-pointer text-[#667085] hover:bg-[#F2F4F7]",
                 "aria-label": "Go back",
@@ -143098,7 +143901,7 @@ ${code2}
             )
           ] }) }),
           !activeCategory && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-[8px] pb-[4px] px-[12px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] leading-[16px] font-normal text-[#667085]", children: "Type to search or choose from:" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: items.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[16px] text-center text-[#667085] text-[14px]", children: "No items found" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items.map((item, index) => {
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: items.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[16px] text-center text-[#667085] text-[14px]", children: "No items found" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items.map((item, index) => {
             var _a;
             const isCategory = "variables" in item;
             const Icon = isCategory ? item.icon : getIconForType(item.type);
@@ -143107,7 +143910,11 @@ ${code2}
               "button",
               {
                 type: "button",
-                onClick: () => handleItemClick(item),
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleItemClick(item);
+                },
                 className: `flex items-center gap-[8px] w-full px-[12px] py-[8px] border-0 rounded-[4px] text-left cursor-pointer transition-colors duration-100 ${index === selectedIndex ? "bg-[#F9FAFB]" : "bg-transparent hover:bg-[#F9FAFB]"}`,
                 onMouseEnter: () => setSelectedIndex(index),
                 "data-test-id": `md-editor-variable-item-${isCategory ? item.id : item.id}`,
@@ -143683,7 +144490,9 @@ ${code2}
     theme = "light",
     disabled = false,
     containerRef,
-    followSelection = false
+    followSelection = false,
+    showDesignWithAI = false,
+    onDesignWithAI
   }) => {
     const [position, setPosition] = React.useState(null);
     const [isAtSelection, setIsAtSelection] = React.useState(false);
@@ -144041,7 +144850,30 @@ ${code2}
             )
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarDivider$2, {}),
-          showAIButton && onAIAction && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: aiDropdownRef, className: "relative shrink-0", children: [
+          showDesignWithAI && onDesignWithAI && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onDesignWithAI();
+              },
+              disabled,
+              className: `
+            flex items-center justify-center gap-1 px-3 py-1 rounded-[4px]
+            text-[12px] leading-[16px] font-medium transition-colors duration-150 whitespace-nowrap
+            border border-[#6A11CB] text-[#004EEB] hover:bg-[#EFF4FF]
+            ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+          `,
+              "data-id": "toolbar-design-with-ai",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(AIStarIcon, { size: 14, className: "text-[#155EEF]" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Design with AI" })
+              ]
+            }
+          ),
+          showAIButton && onAIAction && !showDesignWithAI && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: aiDropdownRef, className: "relative shrink-0", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "button",
               {
@@ -144156,7 +144988,8 @@ ${code2}
     "make-shorter": "Make Shorter",
     "make-longer": "Make Longer",
     "convert-to-yaml": "Convert to YAML",
-    "custom": "Custom Modify"
+    "custom": "Custom Modify",
+    "generate": "Generate"
   };
   function calculateTextSimilarity(text1, text2) {
     if (text1 === text2) return 1;
@@ -144190,7 +145023,7 @@ ${code2}
     sessionState,
     sessionActions
   }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const useSessionMode = !!sessionState && !!sessionActions;
     const [messages, setMessages] = React.useState([]);
     const [inputValue, setInputValue] = React.useState("");
@@ -144206,6 +145039,36 @@ ${code2}
     const modificationReason = useSessionMode ? sessionState.modificationReason : selectionModifiedReason;
     const currentGeneratedContent = useSessionMode ? (_b = sessionState.session) == null ? void 0 : _b.lastGeneratedContent : generatedContent;
     const displayMessages = useSessionMode ? convertSessionHistoryToMessages(sessionState) : messages;
+    const [appliedFeedback, setAppliedFeedback] = React.useState(null);
+    const [copiedFeedback, setCopiedFeedback] = React.useState(false);
+    const [pendingApplyMode, setPendingApplyMode] = React.useState(null);
+    const [autocopiedOnFail, setAutocopiedOnFail] = React.useState(false);
+    const appliedTimerRef = React.useRef(null);
+    const copiedTimerRef = React.useRef(null);
+    const lastAssistantMsgId = React.useMemo(() => {
+      const assistantMsgs = displayMessages.filter(
+        (m) => m.type === "assistant" && !m.isGenerating && !m.isError
+      );
+      return assistantMsgs.length > 0 ? assistantMsgs[assistantMsgs.length - 1].id : null;
+    }, [displayMessages]);
+    const showInsertButton = isSelectionMode;
+    const cursorInsertActive = useSessionMode && sessionState.cursorInsertPosition !== null;
+    const replaceTooltip = isSelectionMode ? "Replace selection" : "Replace all";
+    const insertTooltip = cursorInsertActive ? "Insert at cursor" : "Insert below selection";
+    React.useEffect(() => {
+      return () => {
+        if (appliedTimerRef.current) clearTimeout(appliedTimerRef.current);
+        if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+      };
+    }, []);
+    React.useEffect(() => {
+      if (isCurrentlyGenerating) {
+        setAppliedFeedback(null);
+        setCopiedFeedback(false);
+        setPendingApplyMode(null);
+        setAutocopiedOnFail(false);
+      }
+    }, [isCurrentlyGenerating]);
     React.useEffect(() => {
       var _a2;
       (_a2 = messagesEndRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
@@ -144309,8 +145172,9 @@ ${code2}
         setGeneratedContent(response.refinedText);
         onContentGenerated == null ? void 0 : onContentGenerated(true);
       } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : "Failed to generate. Please try again.";
         setMessages((prev) => prev.map(
-          (msg) => msg.id === aiMsgId ? { ...msg, content: "Failed to generate. Please try again.", isGenerating: false, isError: true } : msg
+          (msg) => msg.id === aiMsgId ? { ...msg, content: errorMsg, isGenerating: false, isError: true } : msg
         ));
       } finally {
         setIsGenerating(false);
@@ -144352,8 +145216,9 @@ ${code2}
           setGeneratedContent(response.refinedText);
           onContentGenerated == null ? void 0 : onContentGenerated(true);
         } catch (error) {
+          const errorMsg = error instanceof Error ? error.message : "Failed to generate. Please try again.";
           setMessages((prev) => prev.map(
-            (msg) => msg.id === aiMsgId ? { ...msg, content: "Failed to generate. Please try again.", isGenerating: false, isError: true } : msg
+            (msg) => msg.id === aiMsgId ? { ...msg, content: errorMsg, isGenerating: false, isError: true } : msg
           ));
         } finally {
           setIsGenerating(false);
@@ -144388,6 +145253,52 @@ ${code2}
         };
       }
     }, [useSessionMode, sessionActions, generatedContent, onReplace, isSelectionMode]);
+    const handleCopy = React.useCallback(async () => {
+      var _a2;
+      const content = useSessionMode ? (_a2 = sessionState == null ? void 0 : sessionState.session) == null ? void 0 : _a2.lastGeneratedContent : generatedContent;
+      if (content) {
+        await navigator.clipboard.writeText(content);
+        setCopiedFeedback(true);
+        if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+        copiedTimerRef.current = setTimeout(() => setCopiedFeedback(false), 2e3);
+      }
+    }, [useSessionMode, sessionState, generatedContent]);
+    const handleInsertWithFeedback = React.useCallback(() => {
+      setPendingApplyMode("insert");
+      setAutocopiedOnFail(false);
+      handleInsert();
+    }, [handleInsert]);
+    const handleReplaceWithFeedback = React.useCallback(() => {
+      setPendingApplyMode("replace");
+      setAutocopiedOnFail(false);
+      handleReplace();
+    }, [handleReplace]);
+    React.useEffect(() => {
+      var _a2;
+      if (!pendingApplyMode) return;
+      if (useSessionMode) {
+        if (sessionState.status === "applied") {
+          setAppliedFeedback(pendingApplyMode);
+          setPendingApplyMode(null);
+          if (appliedTimerRef.current) clearTimeout(appliedTimerRef.current);
+          appliedTimerRef.current = setTimeout(() => setAppliedFeedback(null), 2500);
+        } else if (sessionState.isOriginalModified) {
+          const content = (_a2 = sessionState.session) == null ? void 0 : _a2.lastGeneratedContent;
+          if (content) {
+            navigator.clipboard.writeText(content).catch(() => {
+            });
+            setAutocopiedOnFail(true);
+          }
+          setAppliedFeedback(null);
+          setPendingApplyMode(null);
+        }
+      } else {
+        setAppliedFeedback(pendingApplyMode);
+        setPendingApplyMode(null);
+        if (appliedTimerRef.current) clearTimeout(appliedTimerRef.current);
+        appliedTimerRef.current = setTimeout(() => setAppliedFeedback(null), 2500);
+      }
+    }, [pendingApplyMode, useSessionMode, sessionState == null ? void 0 : sessionState.status, sessionState == null ? void 0 : sessionState.isOriginalModified, (_c = sessionState == null ? void 0 : sessionState.session) == null ? void 0 : _c.lastGeneratedContent]);
     const handleStop = React.useCallback(() => {
       if (useSessionMode) {
         return;
@@ -144487,34 +145398,71 @@ ${code2}
                 // Result - gray background bubble
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#F2F4F7] rounded-xl p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-[#101828] leading-relaxed whitespace-pre-wrap", children: message.content }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: handleInsert,
-                        disabled: isModified,
-                        title: isModified ? modificationReason || "Selected text has been modified" : void 0,
-                        className: `px-2.5 py-0.5 text-sm font-medium rounded-full border transition-colors ${isModified ? "text-[#98A2B3] bg-[#F9FAFB] border-[#EAECF0] cursor-not-allowed" : "text-[#344054] bg-white border-[#EAECF0] hover:bg-gray-50 cursor-pointer"}`,
-                        children: "Insert"
-                      }
-                    ),
-                    (onReplace || useSessionMode) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: handleReplace,
-                        disabled: isModified,
-                        title: isModified ? modificationReason || "Selected text has been modified" : void 0,
-                        className: `px-2.5 py-0.5 text-sm font-medium rounded-full border transition-colors ${isModified ? "text-[#98A2B3] bg-[#F9FAFB] border-[#EAECF0] cursor-not-allowed" : "text-[#344054] bg-white border-[#EAECF0] hover:bg-gray-50 cursor-pointer"}`,
-                        children: "Replace"
-                      }
-                    )
-                  ] }),
-                  isModified && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-[#F79009] mt-1.5 flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 4V6M6 8H6.005M10.5 6C10.5 8.48528 8.48528 10.5 6 10.5C3.51472 10.5 1.5 8.48528 1.5 6C1.5 3.51472 3.51472 1.5 6 1.5C8.48528 1.5 10.5 3.51472 10.5 6Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-                    modificationReason || "Original text was modified"
-                  ] })
+                  message.id === lastAssistantMsgId && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: appliedFeedback ? (
+                    /* Success feedback */
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 mt-2 text-[#12B76A] animate-[fadeIn_0.2s_ease-out]", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { size: 14, strokeWidth: 2.5 }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: appliedFeedback === "replace" ? "Replaced" : "Inserted" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-[#667085] ml-1", children: [
+                        navigator.platform.includes("Mac") ? "⌘Z" : "Ctrl+Z",
+                        " to undo"
+                      ] })
+                    ] })
+                  ) : isModified ? (
+                    /* Recovery UI -- original text was modified, apply would fail */
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 animate-[fadeIn_0.2s_ease-out]", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: handleCopy,
+                          className: "px-2.5 py-0.5 text-sm font-medium rounded-full border transition-colors text-[#344054] bg-white border-[#EAECF0] hover:bg-gray-50 cursor-pointer flex items-center gap-1.5",
+                          children: copiedFeedback || autocopiedOnFail ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { size: 12, className: "text-[#12B76A]" }),
+                            " Copied"
+                          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { size: 12 }),
+                            " Copy content"
+                          ] })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-[#667085] mt-1.5", children: autocopiedOnFail ? "Content saved to clipboard. Paste manually or re-select text to try again." : `${modificationReason || "Original text changed"}. Copy content and paste manually, or re-select text.` })
+                    ] })
+                  ) : (
+                    /* Normal action buttons */
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+                      (onReplace || useSessionMode) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: handleReplaceWithFeedback,
+                          title: replaceTooltip,
+                          className: "px-2.5 py-0.5 text-sm font-medium rounded-full border transition-colors text-white bg-[#155EEF] border-[#155EEF] hover:bg-[#1849D6] cursor-pointer",
+                          children: "Replace"
+                        }
+                      ),
+                      showInsertButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: handleInsertWithFeedback,
+                          title: insertTooltip,
+                          className: "px-2.5 py-0.5 text-sm font-medium rounded-full border transition-colors text-[#344054] bg-white border-[#EAECF0] hover:bg-gray-50 cursor-pointer",
+                          children: "Insert"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: handleCopy,
+                          title: copiedFeedback ? "Copied!" : "Copy to clipboard",
+                          className: "p-1 text-[#667085] hover:text-[#344054] hover:bg-gray-100 rounded transition-colors cursor-pointer",
+                          children: copiedFeedback ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { size: 14, className: "text-[#12B76A]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { size: 14 })
+                        }
+                      )
+                    ] })
+                  ) })
                 ] })
               ) })
             ) }, message.id)),
@@ -144597,6 +145545,32 @@ ${code2}
     }
     return messages;
   }
+  const EmptyStatePlaceholder = ({
+    placeholder = "Write your agent definition here or type '/' to insert variables, agents, tools, memory & more",
+    example,
+    isFocused = false
+  }) => {
+    if (isFocused) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "absolute inset-0 pointer-events-none px-[32px] py-[24px] overflow-hidden",
+        "data-id": "md-editor-empty-state",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[14px] leading-[20px] text-[#98A2B3] mb-[8px]", children: placeholder }),
+          example && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[14px] leading-[20px] text-[#98A2B3]", children: example })
+        ]
+      }
+    );
+  };
+  const AgentDefinitionExample = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-[14px]", children: "e.g., You are a meeting scheduler agent who coordinate sales meetings by checking team availability, matching prospect needs with appropriate sales specialists, and sending prep materials." }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: "list-disc ml-[21px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "mb-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "leading-[20px]", children: "Match prospect needs with sales expertise" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "mb-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "leading-[20px]", children: "Find optimal meeting times across calendars" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "leading-[20px]", children: "Distribute meeting agenda and materials" }) })
+    ] })
+  ] });
   function hashString(str) {
     let hash2 = 5381;
     for (let i2 = 0; i2 < str.length; i2++) {
@@ -144806,7 +145780,8 @@ ${code2}
     modificationReason: "",
     pendingSelection: null,
     showSwitchBanner: false,
-    error: null
+    error: null,
+    cursorInsertPosition: null
   };
   function refinementReducer(state, action) {
     switch (action.type) {
@@ -144917,7 +145892,7 @@ ${code2}
       }
       case "APPLY_CONTENT": {
         if (!state.session) return state;
-        const { appliedContent } = action.payload;
+        const { appliedContent, newFingerprint } = action.payload;
         return {
           ...state,
           status: "applied",
@@ -144925,8 +145900,11 @@ ${code2}
             ...state.session,
             appliedContent,
             applyCount: state.session.applyCount + 1,
-            workingContent: appliedContent
+            workingContent: appliedContent,
             // For subsequent refinements
+            // Update fingerprint to track the newly applied content's position
+            // This enables subsequent iterations to work on the replaced content
+            fingerprint: newFingerprint || state.session.fingerprint
           },
           isOriginalModified: false,
           modificationReason: ""
@@ -144934,9 +145912,9 @@ ${code2}
       }
       case "SELECTION_CHANGED": {
         if (!state.session) return state;
-        const { fingerprint } = action.payload;
-        const isFullDocument = fingerprint.contextBefore === "" && fingerprint.contextAfter === "";
-        const newMode = isFullDocument ? "full-document" : "selection";
+        const { fingerprint, explicitMode } = action.payload;
+        const inferredMode = fingerprint.contextBefore === "" && fingerprint.contextAfter === "" ? "full-document" : "selection";
+        const newMode = explicitMode ?? inferredMode;
         return {
           ...state,
           session: {
@@ -144944,8 +145922,10 @@ ${code2}
             mode: newMode,
             fingerprint,
             workingContent: fingerprint.selectedMarkdown,
-            // Reset applied content since selection changed
-            appliedContent: null
+            // Reset apply state since selection changed -- previous apply context is irrelevant
+            appliedContent: null,
+            applyCount: 0,
+            lastGeneratedContent: null
           },
           // Clear modification state since we have a fresh selection
           isOriginalModified: false,
@@ -144953,7 +145933,8 @@ ${code2}
           // Only show switch banner if there was content and this is user-initiated selection change
           // For now, keep it simple - don't show banner, just update context
           pendingSelection: null,
-          showSwitchBanner: false
+          showSwitchBanner: false,
+          cursorInsertPosition: null
         };
       }
       case "CONFIRM_SWITCH": {
@@ -145022,6 +146003,11 @@ ${code2}
           }
         };
       }
+      case "SET_CURSOR_INSERT_POSITION":
+        return {
+          ...state,
+          cursorInsertPosition: action.payload.position
+        };
       default:
         return state;
     }
@@ -145031,7 +146017,8 @@ ${code2}
     onRefine,
     editorContent,
     promptType,
-    agentContext
+    agentContext,
+    onContentApplied
   }) {
     const [state, dispatch] = React.useReducer(refinementReducer, initialState);
     const hasGeneratedContentRef = React.useRef(false);
@@ -145050,14 +146037,18 @@ ${code2}
       });
       if (editor) {
         let fingerprint;
-        if (range2 && range2.from !== range2.to) {
+        const isSelection = !!range2 && range2.from !== range2.to;
+        if (isSelection) {
           fingerprint = createSelectionFingerprint(editor, range2.from, range2.to);
         } else {
           fingerprint = createFullDocumentFingerprint(editor);
         }
         dispatch({
           type: "SELECTION_CHANGED",
-          payload: { fingerprint }
+          payload: {
+            fingerprint,
+            explicitMode: isSelection ? "selection" : "full-document"
+          }
         });
       }
     }, [editor]);
@@ -145067,13 +146058,24 @@ ${code2}
     }, []);
     const startGeneration = React.useCallback(async (action, instruction) => {
       if (!onRefine || !state.session) return;
-      const contextText = state.session.applyCount > 0 ? state.session.appliedContent || state.session.workingContent : state.session.lastGeneratedContent || state.session.workingContent;
+      let contextText;
+      if (state.session.mode === "full-document" && state.session.applyCount > 0) {
+        contextText = editorContent || state.session.appliedContent || state.session.workingContent;
+      } else if (state.session.applyCount > 0) {
+        contextText = state.session.appliedContent || state.session.workingContent;
+      } else {
+        contextText = state.session.lastGeneratedContent || state.session.workingContent;
+      }
+      if (!contextText) {
+        contextText = editorContent;
+      }
       const actionLabels = {
         "improve": "Improve",
         "make-shorter": "Make Shorter",
         "make-longer": "Make Longer",
         "convert-to-yaml": "Convert to YAML",
-        "custom": instruction || "Custom"
+        "custom": instruction || "Custom",
+        "generate": "Generate new content"
       };
       const displayMessage = instruction || actionLabels[action] || action;
       const isFirstMessage = state.session.conversationHistory.length === 0;
@@ -145133,7 +146135,7 @@ ${code2}
             "custom": instruction || "Custom"
           };
           const displayMessage = instruction || actionLabels[action] || action;
-          const contentForAI = ((_a = state.session.fingerprint) == null ? void 0 : _a.selectedMarkdown) || state.session.workingContent;
+          const contentForAI = ((_a = state.session.fingerprint) == null ? void 0 : _a.selectedMarkdown) || state.session.workingContent || editorContent;
           const quotedText = contentForAI.length > 100 ? `${contentForAI.substring(0, 100)}...` : contentForAI;
           dispatch({
             type: "START_GENERATION",
@@ -145177,11 +146179,13 @@ ${code2}
       if (!editor || !state.session || !state.session.lastGeneratedContent) return;
       const refinedText = state.session.lastGeneratedContent;
       let result;
+      let newFingerprint;
       if (state.session.mode === "full-document") {
         try {
           const parsed = markdownToEditorJson(refinedText);
           editor.commands.setContent(parsed);
           result = { success: true };
+          newFingerprint = createFullDocumentFingerprint(editor);
         } catch (error) {
           result = {
             success: false,
@@ -145201,10 +146205,17 @@ ${code2}
           } else {
             try {
               const parsedContent = markdownToEditorJson(refinedText);
+              const insertionStart = matchedRange.from;
               if (mode === "replace") {
                 editor.chain().focus().setTextSelection(matchedRange).deleteSelection().insertContent(parsedContent).run();
+                const newEndPos = editor.state.selection.to;
+                newFingerprint = createSelectionFingerprint(editor, insertionStart, newEndPos);
               } else {
-                editor.chain().focus().setTextSelection({ from: matchedRange.to, to: matchedRange.to }).insertContent("\n\n").insertContent(parsedContent).run();
+                const useCursorPos = state.cursorInsertPosition !== null && state.cursorInsertPosition !== matchedRange.to;
+                const insertPos = useCursorPos ? state.cursorInsertPosition : matchedRange.to;
+                editor.chain().focus().setTextSelection({ from: insertPos, to: insertPos }).insertContent("\n\n").insertContent(parsedContent).run();
+                const newEndPos = editor.state.selection.to;
+                newFingerprint = createSelectionFingerprint(editor, insertPos + 2, newEndPos);
               }
               result = { success: true };
             } catch (error) {
@@ -145219,8 +146230,12 @@ ${code2}
       if (result.success) {
         dispatch({
           type: "APPLY_CONTENT",
-          payload: { mode, appliedContent: refinedText }
+          payload: { mode, appliedContent: refinedText, newFingerprint }
         });
+        if (onContentApplied && editor) {
+          const fullMarkdown = state.session.mode === "full-document" ? refinedText : editorJsonToMarkdown(editor.getJSON());
+          onContentApplied(fullMarkdown);
+        }
       } else {
         dispatch({
           type: "SET_MODIFIED",
@@ -145230,7 +146245,7 @@ ${code2}
           }
         });
       }
-    }, [editor, state.session]);
+    }, [editor, state.session, state.cursorInsertPosition, onContentApplied]);
     const handleSelectionChange = React.useCallback((from, to, _text) => {
       if (!editor || !state.session) return;
       if (from === to) return;
@@ -145242,7 +146257,7 @@ ${code2}
       }
       dispatch({
         type: "SELECTION_CHANGED",
-        payload: { fingerprint: newFingerprint }
+        payload: { fingerprint: newFingerprint, explicitMode: "selection" }
       });
     }, [editor, state.session]);
     const confirmSwitch = React.useCallback(() => {
@@ -145281,19 +146296,31 @@ ${code2}
     React.useEffect(() => {
       if (!editor || state.status === "idle") return;
       const handleSelectionUpdate = () => {
+        var _a, _b;
         const { from, to } = editor.state.selection;
         const hasSelection2 = from !== to;
-        if (!hasSelection2 || !hasGeneratedContentRef.current) {
-          return;
+        if (hasSelection2) {
+          if (hasGeneratedContentRef.current) {
+            const selectedText = editor.state.doc.textBetween(from, to, " ", "\n");
+            handleSelectionChange(from, to, selectedText);
+          }
+          if (state.cursorInsertPosition !== null) {
+            dispatch({ type: "SET_CURSOR_INSERT_POSITION", payload: { position: null } });
+          }
+        } else if (((_a = state.session) == null ? void 0 : _a.mode) === "selection" && ((_b = state.session) == null ? void 0 : _b.fingerprint) && hasGeneratedContentRef.current) {
+          const fp = state.session.fingerprint;
+          const isOutside = from < fp.originalRange.from || from > fp.originalRange.to;
+          const newPos = isOutside ? from : null;
+          if (newPos !== state.cursorInsertPosition) {
+            dispatch({ type: "SET_CURSOR_INSERT_POSITION", payload: { position: newPos } });
+          }
         }
-        const selectedText = editor.state.doc.textBetween(from, to, " ", "\n");
-        handleSelectionChange(from, to, selectedText);
       };
       editor.on("selectionUpdate", handleSelectionUpdate);
       return () => {
         editor.off("selectionUpdate", handleSelectionUpdate);
       };
-    }, [editor, state.status, handleSelectionChange]);
+    }, [editor, state.status, state.session, state.cursorInsertPosition, handleSelectionChange]);
     const actions = {
       openPanel,
       closePanel,
@@ -145360,7 +146387,12 @@ ${code2}
         onFocus,
         onBlur,
         onLoadSuggestions,
-        suggestionsLoading: propSuggestionsLoading = false
+        suggestionsLoading: propSuggestionsLoading = false,
+        // Empty state props
+        emptyStatePlaceholder,
+        emptyStateExample,
+        showDesignWithAI = false,
+        onDesignWithAI
       } = props;
       const mergedSlashConfig = { ...DEFAULT_SLASH_COMMAND_CONFIG, ...slashCommandConfig };
       const mergedAIConfig = { ...DEFAULT_AI_CONFIG, ...aiConfig };
@@ -145368,13 +146400,16 @@ ${code2}
       const lastEmittedMarkdownRef = React.useRef("");
       const isInternalUpdateRef = React.useRef(false);
       const editorContainerRef = React.useRef(null);
+      const skipRawSyncRef = React.useRef(false);
+      const skipEditorSyncRef = React.useRef(false);
       const [asyncSuggestions, setAsyncSuggestions] = React.useState(null);
       const [suggestionsLoading, setSuggestionsLoading] = React.useState(false);
       const [variableMenuOpen, setVariableMenuOpen] = React.useState(false);
       const [variableMenuPosition, setVariableMenuPosition] = React.useState({ top: 0, left: 0 });
       const [variableMenuQuery, setVariableMenuQuery] = React.useState("");
-      const [editingVariableChip, setEditingVariableChip] = React.useState(null);
       const variableTriggerPosRef = React.useRef(null);
+      const hasVariableSuggestionsRef = React.useRef(false);
+      const variableMenuOpenRef = React.useRef(false);
       const [editorMode, setEditorMode] = React.useState("editor");
       const [rawMarkdown, setRawMarkdown] = React.useState("");
       const isRawMode = editorMode === "preview";
@@ -145418,12 +146453,7 @@ ${code2}
         contentVariables: mergedContentVariables,
         loading: finalSuggestionsLoading
       };
-      console.log("MDEditor render: suggestionsRef updated with:", {
-        agentsCount: mergedAgents.length,
-        toolsCount: mergedTools.length,
-        knowledgeCount: mergedKnowledge.length,
-        hasAsyncSuggestions: !!asyncSuggestions
-      });
+      hasVariableSuggestionsRef.current = mergedEnvVariables.length > 0 || mergedMemoryVariables.length > 0 || mergedSystemVariables.length > 0 || mergedContentVariables.length > 0;
       const defaultCategories = React.useMemo(() => {
         const categories = [];
         if (mergedAgents.length > 0) {
@@ -145488,21 +146518,6 @@ ${code2}
         (variable, triggerPos) => {
           if (!editorRef.current) return;
           const editor2 = editorRef.current;
-          if (editingVariableChip) {
-            const { position, nodeSize: nodeSize2 } = editingVariableChip;
-            editor2.chain().focus().deleteRange({ from: position, to: position + nodeSize2 }).insertContentAt(position, {
-              type: "variableChip",
-              attrs: {
-                variableType: variable.type,
-                path: variable.path,
-                displayName: variable.name
-              }
-            }).run();
-            setEditingVariableChip(null);
-            setVariableMenuOpen(false);
-            setVariableMenuQuery("");
-            return;
-          }
           const deleteFrom = triggerPos ?? variableTriggerPosRef.current;
           if (deleteFrom !== null) {
             const { from } = editor2.state.selection;
@@ -145515,6 +146530,10 @@ ${code2}
                 displayName: variable.name
               }
             }).insertContent(" ").run();
+            const posAfter = editor2.state.selection.from;
+            if (posAfter + 2 <= editor2.state.doc.content.size && editor2.state.doc.textBetween(posAfter, posAfter + 2) === "}}") {
+              editor2.chain().focus().deleteRange({ from: posAfter, to: posAfter + 2 }).run();
+            }
           } else {
             editor2.chain().focus().insertContent({
               type: "variableChip",
@@ -145529,7 +146548,19 @@ ${code2}
           setVariableMenuQuery("");
           variableTriggerPosRef.current = null;
         },
-        [editingVariableChip]
+        []
+      );
+      const handleVariableQueryChange = React.useCallback(
+        (newQuery) => {
+          setVariableMenuQuery(newQuery);
+          if (!editorRef.current || variableTriggerPosRef.current === null) return;
+          const editor2 = editorRef.current;
+          const triggerPos = variableTriggerPosRef.current;
+          const insertFrom = triggerPos + 2;
+          const { from } = editor2.state.selection;
+          editor2.chain().focus().deleteRange({ from: insertFrom, to: from }).insertContentAt(insertFrom, newQuery).run();
+        },
+        []
       );
       const insertMention = React.useCallback(
         (mention) => {
@@ -145564,14 +146595,23 @@ ${code2}
           const json = editorRef.current.getJSON();
           const markdown = editorJsonToMarkdown(json);
           setRawMarkdown(markdown);
+          lastEmittedMarkdownRef.current = markdown;
+          skipRawSyncRef.current = true;
         }
         if (currentMode === "preview" && newMode === "editor") {
           const parsedContent = markdownToEditorJson(rawMarkdown);
+          isInternalUpdateRef.current = true;
           editorRef.current.commands.setContent(parsedContent);
           lastEmittedMarkdownRef.current = rawMarkdown;
+          skipEditorSyncRef.current = true;
+          onMarkdownChange == null ? void 0 : onMarkdownChange(rawMarkdown);
+          if (onChange) {
+            const doc2 = editorJsonToDocument(parsedContent);
+            onChange(doc2, rawMarkdown);
+          }
         }
         setEditorMode(newMode);
-      }, [editorMode, rawMarkdown]);
+      }, [editorMode, rawMarkdown, onChange, onMarkdownChange]);
       const toggleRawMode = React.useCallback(() => {
         handleModeChange(isRawMode ? "editor" : "preview");
       }, [handleModeChange, isRawMode]);
@@ -145586,13 +146626,17 @@ ${code2}
             dropcursor: false
           }),
           Placeholder.configure({
-            placeholder: ({ node }) => {
+            placeholder: ({ node, editor: placeholderEditor }) => {
+              if (emptyStatePlaceholder && placeholderEditor.isEmpty) {
+                return "";
+              }
               if (node.type.name === "heading") {
                 const level = node.attrs["level"];
                 return `Heading ${level}`;
               }
               if (node.type.name === "paragraph") {
-                return placeholder;
+                const focusPlaceholder = "Type here or '/' to insert variables, agents, tools, memory & more";
+                return placeholderEditor.isEmpty ? placeholder : focusPlaceholder;
               }
               return "";
             },
@@ -145662,7 +146706,7 @@ ${code2}
           );
         }
         return exts;
-      }, [mergedFeatures, placeholder, defaultCategories, handleSlashCommandSelect, mergedSlashConfig.highlightMentions]);
+      }, [mergedFeatures, placeholder, emptyStatePlaceholder, defaultCategories, handleSlashCommandSelect, mergedSlashConfig.highlightMentions]);
       const editorRef = React.useRef(null);
       const editor = useEditor({
         extensions,
@@ -145696,12 +146740,24 @@ ${code2}
         editorRef.current = editor;
       }, [editor]);
       const editorContent = editor ? editorJsonToMarkdown(editor.getJSON()) : "";
+      const handleAIContentApplied = React.useCallback((markdown) => {
+        lastEmittedMarkdownRef.current = markdown;
+        if (onMarkdownChange) {
+          onMarkdownChange(markdown);
+        }
+        if (onChange) {
+          const json = markdownToEditorJson(markdown);
+          const doc2 = editorJsonToDocument(json);
+          onChange(doc2, markdown);
+        }
+      }, [onMarkdownChange, onChange]);
       const { state: aiSessionState, actions: aiSessionActions, isOpen: aiPanelOpen } = useAIRefinementSession({
         editor,
         onRefine: onAIRefine,
         editorContent,
         promptType: props.promptType,
-        agentContext: props.agentContext
+        agentContext: props.agentContext,
+        onContentApplied: handleAIContentApplied
       });
       const openAIRefine = React.useCallback(
         (_type = "selection") => {
@@ -145728,6 +146784,22 @@ ${code2}
           // autoGenerate
         );
       }, [aiSessionActions]);
+      const handleDesignWithAI = React.useCallback(() => {
+        aiSessionActions.openPanel(
+          "generate",
+          "",
+          // Empty text since we're generating from scratch
+          void 0,
+          // No selection range
+          void 0,
+          // No custom prompt - AI will use context
+          true
+          // autoGenerate - start generation immediately
+        );
+        if (onDesignWithAI) {
+          onDesignWithAI();
+        }
+      }, [aiSessionActions, onDesignWithAI]);
       const handleCloseAIPanel = React.useCallback(() => {
         if (editorRef.current) {
           editorRef.current.setEditable(!readOnly);
@@ -145762,11 +146834,27 @@ ${code2}
             from
           );
           if (textAfterTrigger.includes("}}")) {
+            const pathRaw = textAfterTrigger.split("}}")[0].trim();
+            if (pathRaw) {
+              const varType = inferVariableType(pathRaw);
+              const cleanPath = removeTypePrefix(pathRaw);
+              const displayName = cleanPath.split(".").pop() || cleanPath;
+              editor.chain().focus().deleteRange({ from: triggerPos, to: from }).insertContent({
+                type: "variableChip",
+                attrs: {
+                  variableType: varType,
+                  path: cleanPath,
+                  displayName
+                }
+              }).insertContent(" ").run();
+            }
             setVariableMenuOpen(false);
             variableTriggerPosRef.current = null;
             return;
           }
           setVariableMenuQuery(textAfterTrigger);
+          const coords = editor.view.coordsAtPos(from);
+          setVariableMenuPosition({ top: coords.bottom + 8, left: coords.left });
         };
         const editorElement = editor.view.dom;
         editorElement.addEventListener("keydown", handleKeyDown2);
@@ -145776,12 +146864,36 @@ ${code2}
           editorElement.removeEventListener("input", handleInput);
         };
       }, [editor, mergedFeatures.variableChips, variableMenuOpen]);
+      React.useEffect(() => {
+        variableMenuOpenRef.current = variableMenuOpen;
+      }, [variableMenuOpen]);
+      React.useEffect(() => {
+        if (!editor || !mergedFeatures.variableChips) return;
+        const detectVariableContext = () => {
+          if (variableMenuOpenRef.current) return;
+          if (!hasVariableSuggestionsRef.current) return;
+          const { from } = editor.state.selection;
+          const context = getVariableContextAtPosition(editor, from);
+          if (context) {
+            variableTriggerPosRef.current = context.triggerFrom;
+            setVariableMenuQuery(context.query);
+            const coords = editor.view.coordsAtPos(from);
+            setVariableMenuPosition({ top: coords.bottom + 8, left: coords.left });
+            setVariableMenuOpen(true);
+          }
+        };
+        editor.on("focus", detectVariableContext);
+        editor.on("selectionUpdate", detectVariableContext);
+        return () => {
+          editor.off("focus", detectVariableContext);
+          editor.off("selectionUpdate", detectVariableContext);
+        };
+      }, [editor, mergedFeatures.variableChips]);
       React.useEffect(() => {
         if (!variableMenuOpen) return;
         const handleKeyDown2 = (event) => {
           if (event.key === "Escape") {
             setVariableMenuOpen(false);
-            setEditingVariableChip(null);
             variableTriggerPosRef.current = null;
             editor == null ? void 0 : editor.chain().focus().run();
           }
@@ -145794,19 +146906,11 @@ ${code2}
         const handleVariableChipEdit = (event) => {
           const customEvent = event;
           const { variableType, path, position, nodeSize: nodeSize2 } = customEvent.detail;
-          const coords = editor.view.coordsAtPos(position);
-          setEditingVariableChip({
-            position,
-            nodeSize: nodeSize2,
-            variableType,
-            path
-          });
-          setVariableMenuPosition({
-            top: coords.bottom + 8,
-            left: coords.left
-          });
-          setVariableMenuQuery("");
-          setVariableMenuOpen(true);
+          const innerPath = variableType === "system" || variableType === "custom" ? path : `${variableType}.${path}`;
+          const fullText = `{{${innerPath}}}`;
+          editor.chain().focus().deleteRange({ from: position, to: position + nodeSize2 }).insertContentAt(position, fullText).run();
+          const cursorPos = position + 2 + innerPath.length;
+          editor.chain().focus().setTextSelection(cursorPos).run();
         };
         const editorElement = editor.view.dom;
         editorElement.addEventListener("variable-chip-edit", handleVariableChipEdit);
@@ -145815,6 +146919,10 @@ ${code2}
         };
       }, [editor]);
       React.useEffect(() => {
+        if (skipEditorSyncRef.current) {
+          skipEditorSyncRef.current = false;
+          return;
+        }
         if (!editor || isInternalUpdateRef.current) {
           isInternalUpdateRef.current = false;
           return;
@@ -145846,6 +146954,10 @@ ${code2}
         return () => clearTimeout(timer);
       }, [rawMarkdown, isRawMode, onMarkdownChange, onChange]);
       React.useEffect(() => {
+        if (skipRawSyncRef.current) {
+          skipRawSyncRef.current = false;
+          return;
+        }
         if (isRawMode && markdownValue !== void 0 && markdownValue !== lastEmittedMarkdownRef.current) {
           setRawMarkdown(markdownValue);
         }
@@ -145986,6 +147098,13 @@ ${code2}
                         editor,
                         className: "k-md-editor__content w-full h-full"
                       }
+                    ),
+                    (editor == null ? void 0 : editor.isEmpty) && emptyStatePlaceholder && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      EmptyStatePlaceholder,
+                      {
+                        placeholder: emptyStatePlaceholder,
+                        example: emptyStateExample
+                      }
                     )
                   ] })
                 ) }),
@@ -145994,20 +147113,18 @@ ${code2}
                   {
                     position: variableMenuPosition,
                     query: variableMenuQuery,
-                    onQueryChange: setVariableMenuQuery,
+                    onQueryChange: handleVariableQueryChange,
                     onSelect: (variable) => insertVariable(variable),
                     onClose: () => {
                       setVariableMenuOpen(false);
                       setVariableMenuQuery("");
-                      setEditingVariableChip(null);
                       variableTriggerPosRef.current = null;
                     },
                     envVariables: mergedEnvVariables,
                     memoryVariables: mergedMemoryVariables,
                     systemVariables: mergedSystemVariables,
                     contentVariables: mergedContentVariables,
-                    editorControlled: !editingVariableChip,
-                    isEditMode: !!editingVariableChip
+                    editorControlled: true
                   }
                 )
               ] }),
@@ -146021,7 +147138,9 @@ ${code2}
                   onAIAction: isAIEnabled ? handleAIToolbarAction : void 0,
                   theme: theme === "dark" || theme.includes("dark") ? "dark" : "light",
                   disabled: readOnly,
-                  containerRef: editorContainerRef
+                  containerRef: editorContainerRef,
+                  showDesignWithAI: showDesignWithAI && (editor == null ? void 0 : editor.isEmpty),
+                  onDesignWithAI: isAIEnabled ? handleDesignWithAI : onDesignWithAI
                 }
               )
             ] }),
@@ -149563,6 +150682,7 @@ export class AnalyticsDashboardComponent implements OnInit, AfterViewInit, OnDes
   exports2.AIRefineDropdown = AIRefineDropdown;
   exports2.AIRefineExtension = AIRefineExtension;
   exports2.AIRefinePanel = AIRefinePanel;
+  exports2.AgentDefinitionExample = AgentDefinitionExample;
   exports2.AgentListView = AgentListView;
   exports2.AnalyticsChart = AnalyticsChart;
   exports2.AnalyticsTable = AnalyticsTable;
@@ -149588,6 +150708,7 @@ export class AnalyticsDashboardComponent implements OnInit, AfterViewInit, OnDes
   exports2.DetailPage = DetailPage;
   exports2.DetailPageService = DetailPageService;
   exports2.EmptyState = EmptyState;
+  exports2.EmptyStatePlaceholder = EmptyStatePlaceholder;
   exports2.EndpointsConfigService = EndpointsConfigService;
   exports2.EnvironmentContext = EnvironmentContext;
   exports2.EnvironmentProvider = EnvironmentProvider;