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

package/dist/index.js

@@ -30860,7 +30860,7 @@ class DashboardApiService {
     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
@@ -35509,6 +35509,31 @@ class TracingApiService {
       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
@@ -36582,6 +36607,140 @@ function TokenBreakdownTooltip(props) {
     ] }) })
   ] });
 }
+const CopyButton$1 = ({
+  text,
+  className = "",
+  iconClassName = "",
+  iconStyle,
+  title = "Copy to clipboard",
+  onCopySuccess,
+  onCopyError,
+  tooltipText = "Copied!",
+  tooltipPosition = "bottom",
+  size = "md"
+}) => {
+  const [showTooltip, setShowTooltip] = 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 = useCallback(() => {
+    setShowTooltip(true);
+    setTimeout(() => setShowTooltip(false), 1e3);
+  }, []);
+  const copyToClipboard2 = 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: (e3) => {
+          e3.stopPropagation();
+          e3.preventDefault();
+        },
+        onMouseDown: (e3) => e3.stopPropagation(),
+        onMouseUp: (e3) => e3.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 });
 }
@@ -104592,6 +104751,9 @@ function TracingTable(props) {
   }, [columns]);
   const handleRowClick = 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);
       }
@@ -104688,9 +104850,10 @@ function TracingTable(props) {
             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(
@@ -104699,12 +104862,13 @@ function TracingTable(props) {
             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",
@@ -104717,9 +104881,10 @@ function TracingTable(props) {
             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(
@@ -104728,13 +104893,14 @@ function TracingTable(props) {
             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",
@@ -104762,9 +104928,12 @@ function TracingListHeader(props) {
     timeRangePresetLabel,
     onTimeRangeChange,
     filters,
+    filterColumns: filterColumnsProp,
     onFiltersClick,
     onModifyColumnsClick,
     showModifyColumns = true,
+    onClearFilters,
+    onRemoveFilter,
     onRefresh,
     isRefreshing = false
   } = props;
@@ -104809,6 +104978,50 @@ function TracingListHeader(props) {
     }
     return `Searches in ${fields}.`;
   };
+  const activeFilters = filters.filter(TracingUtils.isFilterActive);
+  const [filtersExpanded, setFiltersExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const chipsContainerRef = useRef(null);
+  const checkOverflow = useCallback(() => {
+    const el = chipsContainerRef.current;
+    if (!el) return;
+    setIsOverflowing(el.scrollHeight > el.clientHeight);
+  }, []);
+  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((c3) => c3.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;
@@ -104961,7 +105174,66 @@ function TracingListHeader(props) {
           }
         )
       ] })
-    ] })
+    ] }),
+    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) {
@@ -105448,6 +105720,8 @@ function FilterPanel(props) {
     ] })
   ] });
 }
+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
@@ -105620,43 +105894,205 @@ class TraceTreeService {
     });
   }
   /**
-   * 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 c3 = kwargs["content"];
+      if (c3 !== void 0 && c3 !== null) {
+        return c3;
+      }
+    }
+    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
    */
@@ -105666,7 +106102,9 @@ class TraceTreeService {
     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();
@@ -105689,7 +106127,15 @@ class TraceTreeService {
     );
     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 };
@@ -105836,6 +106282,7 @@ const observationFilterConfig = {
       "toolNode",
       "agent_toolNode",
       "PreProcessor",
+      "PostProcessor",
       "MergerNode"
     ]
   }
@@ -106095,6 +106542,7 @@ class DetailPageService {
    * Transform API trace response to TraceDetailData
    */
   transformToTraceDetailData(trace) {
+    const piiDisplay = TraceTreeService.extractPiiDisplayFromApiTrace(trace);
     return {
       id: trace.id,
       name: trace.name || "",
@@ -106107,6 +106555,8 @@ class DetailPageService {
       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,
@@ -106168,6 +106618,8 @@ class DetailPageService {
       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,
@@ -106321,6 +106773,19 @@ function getObservationIconProps(observation) {
     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" })
@@ -106382,7 +106847,11 @@ function ObservationNode({
     return observation.name || observation.type || "";
   };
   const displayName = getDisplayName3();
-  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 = useMemo(() => {
+    if (!isSupervisorOrAgent) return 0;
+    return getAggregatedTotalTokens(node);
+  }, [node, isSupervisorOrAgent]);
   const handleRowClick = () => {
     if (hasChildren) {
       onToggle(observation.id);
@@ -106429,34 +106898,43 @@ function ObservationNode({
               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, {}) })
           ] })
         ]
       }
@@ -106494,8 +106972,10 @@ function TraceTree({
   onNodeSelect,
   onExpandToggle,
   showTraceId = true,
+  onTraceIdClick,
   isLoading = false,
-  defaultExpandedNodeIds
+  defaultExpandedNodeIds,
+  runHeaderInputMode = "display"
 }) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const [expandedNodeIds, setExpandedNodeIds] = useState(
@@ -106513,11 +106993,20 @@ function TraceTree({
     return TraceTreeService.buildObservationTree(observations);
   }, [observations]);
   const userMessage = 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 = 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 = useMemo(() => {
+    return TraceTreeService.calculateTraceMetrics(trace, observations);
+  }, [trace, observations]);
   const handleTraceToggle = useCallback(() => {
     setIsExpanded((prev) => !prev);
     onExpandToggle == null ? void 0 : onExpandToggle();
@@ -106544,7 +107033,16 @@ function TraceTree({
   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",
         {
@@ -106619,10 +107117,18 @@ function TraceTree({
         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),
           "...",
@@ -106655,114 +107161,6 @@ function TraceTree({
     ] })
   ] });
 }
-const CopyButton$1 = ({
-  text,
-  className = "",
-  iconClassName = "",
-  iconStyle,
-  title = "Copy to clipboard",
-  onCopySuccess,
-  onCopyError,
-  tooltipText = "Copied!",
-  tooltipPosition = "bottom",
-  size = "md"
-}) => {
-  const [showTooltip, setShowTooltip] = 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 = useCallback(() => {
-    setShowTooltip(true);
-    setTimeout(() => setShowTooltip(false), 1e3);
-  }, []);
-  const copyToClipboard2 = 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) {
@@ -107927,21 +108325,35 @@ const DataModal = ({
         )
       ] })
     ] }),
-    /* @__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 = ({
@@ -108309,6 +108721,23 @@ function formatUnknownValue(value) {
 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,
@@ -108357,7 +108786,7 @@ function SectionHeader({ title }) {
     /* @__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] = useState(false);
   const messages = useMemo(() => {
     if (!input || typeof input !== "object") return null;
@@ -108389,15 +108818,6 @@ function PreviewContent({ input, output, metadata, statusMessage, isLoading = fa
     }
     return String(output);
   }, [output]);
-  const modelName = 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: [
@@ -108411,29 +108831,6 @@ function PreviewContent({ input, output, metadata, statusMessage, isLoading = fa
     ] });
   }
   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(
@@ -108520,14 +108917,21 @@ function CodeEditorSection({
         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] = useState("preview");
   const [showTokenTooltip, setShowTokenTooltip] = useState(false);
   const tooltipTimeoutRef = useRef(null);
@@ -108614,6 +109018,7 @@ function NodeDetailPanel({ node, nodeType: _nodeType, apiConfig }) {
     }
     return TraceTreeService.extractUserMessage(displayNode.input);
   }, [displayNode]);
+  const summaryInputLine = generationSummaryInputOverride !== null && generationSummaryInputOverride.length > 0 ? generationSummaryInputOverride : inputText;
   const isGeneration = useMemo(() => {
     return node !== null && isObservation(node) && node.type === "GENERATION";
   }, [node]);
@@ -108697,7 +109102,7 @@ function NodeDetailPanel({ node, nodeType: _nodeType, apiConfig }) {
       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,
@@ -108717,11 +109122,17 @@ function NodeDetailPanel({ node, nodeType: _nodeType, apiConfig }) {
     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 = 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",
     {
@@ -108814,10 +109225,10 @@ function NodeDetailPanel({ node, nodeType: _nodeType, apiConfig }) {
           ] })
         ),
         /* @__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, {})
         ] }),
@@ -108833,6 +109244,37 @@ function NodeDetailPanel({ node, nodeType: _nodeType, apiConfig }) {
             ] })
           ] }),
           /* @__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, {})
         ] })
       ] })
     ] }),
@@ -108860,7 +109302,8 @@ function DetailPage({
   selectedObservationId,
   batchSize = DEFAULT_BATCH_SIZE,
   initialTraceCount,
-  initialSessionData
+  initialSessionData,
+  runHeaderInputMode = "display"
 }) {
   const [currentMode, setCurrentMode] = useState(initialMode);
   const [currentSessionId, setCurrentSessionId] = useState(initialSessionId);
@@ -109101,12 +109544,52 @@ function DetailPage({
   }, [mode, sessionData, traceData, sessionId, traceId, initialSessionData]);
   const traces = useMemo(() => {
     if (mode === "session" && sessionData) {
-      return sessionData.traces.map((t2) => service.transformToTraceData(t2));
+      const sorted = [...sessionData.traces].sort((a4, b2) => {
+        const tA = a4.timestamp ? new Date(a4.timestamp).getTime() : 0;
+        const tB = b2.timestamp ? new Date(b2.timestamp).getTime() : 0;
+        return tA - tB;
+      });
+      return sorted.map((t2) => service.transformToTraceData(t2));
     } else if (mode === "trace" && traceData) {
       return [service.transformToTraceData(traceData)];
     }
     return [];
   }, [mode, sessionData, traceData, service]);
+  const generationSummaryInputOverride = 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((t2) => t2.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 = useCallback((node) => {
     setSelectedNode(node);
   }, []);
@@ -109155,6 +109638,23 @@ function DetailPage({
       firstTraceId: null
     });
   }, []);
+  const handleNavigateToTrace = 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: [
@@ -109323,8 +109823,10 @@ function DetailPage({
               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
           );
@@ -109344,7 +109846,15 @@ function DetailPage({
           );
         }) })
       ] }) }),
-      !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
+        }
+      )
     ] })
   ] });
 }
@@ -109759,22 +110269,25 @@ function EnvironmentNameCell$1({ envId }) {
   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] = useState(null);
+  const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId } = props;
+  const { environments, resolveEnvironmentName } = useEnvironment();
+  const [selectedSessionId, setSelectedSessionId] = useState(() => initialSessionId ?? null);
   const [selectedSessionData, setSelectedSessionData] = useState(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(() => !!initialSessionId);
   const [sessions, setSessions] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
   const [loading, setLoading] = useState(true);
   const [hasInitiallyLoaded, setHasInitiallyLoaded] = useState(false);
+  const [appVersionOptions, setAppVersionOptions] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
   const initialFilters = 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] = useState(initialFilters);
   const [showFilterPanel, setShowFilterPanel] = useState(false);
   const [showColumnCustomization, setShowColumnCustomization] = useState(false);
@@ -109783,6 +110296,32 @@ function SessionsListContent(props) {
   const [pagination, setPagination] = useState({ page: 0, limit: 50 });
   const [orderBy, setOrderBy] = useState({ column: "createdAt", order: "DESC" });
   const apiService = useMemo(() => new TracingApiService(apiConfig), [apiConfig]);
+  useEffect(() => {
+    if (initialSessionId) {
+      setSelectedSessionId(initialSessionId);
+      setIsModalOpen(true);
+    }
+  }, [initialSessionId]);
+  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;
@@ -109844,7 +110383,6 @@ function SessionsListContent(props) {
       });
     }
     const allFilters = [...timeFilters, ...filters];
-    if (apiConfig.projectId) ;
     return allFilters;
   }, [timeRange, filters]);
   const fetchSessions = useCallback(async () => {
@@ -109904,6 +110442,28 @@ function SessionsListContent(props) {
   useEffect(() => {
     fetchSessions();
   }, [fetchSessions]);
+  const filteredSessions = 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 = useMemo(
     () => [
       {
@@ -109912,8 +110472,7 @@ function SessionsListContent(props) {
         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",
@@ -110040,6 +110599,20 @@ function SessionsListContent(props) {
         disabled: true,
         valueFormatter: (params) => TracingUtils.formatTokens(params.value),
         cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", children: TracingUtils.formatTokens(params.value) })
+      },
+      {
+        field: "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',
@@ -110159,8 +110732,9 @@ function SessionsListContent(props) {
         // 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",
@@ -110212,10 +110786,27 @@ function SessionsListContent(props) {
         // 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 = useCallback((term) => {
+    setSearchTerm(term);
+  }, []);
   const handleTimeRangeChange = (value, presetLabel) => {
     console.log("🗓️ SessionsList: Time range change requested:", value, presetLabel);
     setTimeRange(value);
@@ -110257,6 +110848,7 @@ function SessionsListContent(props) {
   };
   const handleClearFilters = () => {
     setFilters([]);
+    setSearchTerm("");
     setTimeRange("24 hours");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col w-full ${className}`, children: [
@@ -110265,11 +110857,19 @@ function SessionsListContent(props) {
       {
         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,
@@ -110320,10 +110920,10 @@ function SessionsListContent(props) {
     /* @__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,
@@ -110370,24 +110970,26 @@ function TracesListContent(props) {
     onTraceClick,
     className = "",
     defaultFilters = [],
-    sessionId
+    sessionId,
+    initialTraceId
   } = props;
   const { environments } = useEnvironment();
-  const [selectedTraceId, setSelectedTraceId] = useState(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedTraceId, setSelectedTraceId] = useState(() => initialTraceId ?? null);
+  const [isModalOpen, setIsModalOpen] = useState(() => !!initialTraceId);
   const [traces, setTraces] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
   const [loading, setLoading] = useState(true);
   const [hasInitiallyLoaded, setHasInitiallyLoaded] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
-  const [searchType, setSearchType] = useState(["id"]);
+  const [searchType, setSearchType] = useState(["id", "content"]);
   const initialFilters = 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] = useState(initialFilters);
   const [showFilterPanel, setShowFilterPanel] = useState(false);
   const [showColumnCustomization, setShowColumnCustomization] = useState(false);
@@ -110396,6 +110998,12 @@ function TracesListContent(props) {
   const [pagination, setPagination] = useState({ page: 0, limit: 50 });
   const [orderBy, setOrderBy] = useState({ column: "timestamp", order: "DESC" });
   const [detailedTraceData, setDetailedTraceData] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (initialTraceId) {
+      setSelectedTraceId(initialTraceId);
+      setIsModalOpen(true);
+    }
+  }, [initialTraceId]);
   const apiService = useMemo(() => new TracingApiService(apiConfig), [apiConfig]);
   const convertPresetToDateRange = (preset) => {
     const now2 = /* @__PURE__ */ new Date();
@@ -110481,18 +111089,24 @@ function TracesListContent(props) {
         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((t2) => t2.id);
         try {
@@ -110527,7 +111141,7 @@ function TracesListContent(props) {
       } else {
         setTraces([]);
       }
-      setTotalCount(basicTraces.length);
+      setTotalCount(countResponse.totalCount);
     } catch (error) {
       console.error("❌ Error fetching traces:", error);
       setTraces([]);
@@ -110556,11 +111170,13 @@ function TracesListContent(props) {
             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"]
@@ -110597,8 +111213,7 @@ function TracesListContent(props) {
           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 })
         }
       ];
       {
@@ -110609,11 +111224,13 @@ function TracesListContent(props) {
           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 });
           }
         });
       }
@@ -110642,11 +111259,13 @@ function TracesListContent(props) {
           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 });
           }
         });
       }
@@ -110709,11 +111328,9 @@ function TracesListContent(props) {
         // },
         {
           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() : "-" })
         },
         {
@@ -110788,6 +111405,20 @@ function TracesListContent(props) {
             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",
@@ -110964,10 +111595,9 @@ function TracesListContent(props) {
         },
         {
           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: [">=", "<=", "="]
         },
@@ -111058,6 +111688,20 @@ function TracesListContent(props) {
           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;
@@ -111124,6 +111768,7 @@ function TracesListContent(props) {
         timeRangePresetLabel,
         onTimeRangeChange: handleTimeRangeChange,
         filters,
+        filterColumns,
         onFiltersClick: () => setShowFilterPanel(!showFilterPanel),
         onModifyColumnsClick: () => setShowColumnCustomization(true),
         onExportClick: handleExport,
@@ -112175,12 +112820,12 @@ class TreeBuilder {
    * 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((a4, b2) => new Date(a4.startTime).getTime() - new Date(b2.startTime).getTime());
@@ -112206,11 +112851,11 @@ class TreeBuilder {
   /**
    * 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, {});
       }
@@ -112237,7 +112882,7 @@ class TreeBuilder {
     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,
@@ -112256,11 +112901,12 @@ class TreeBuilder {
    * 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;
@@ -112274,7 +112920,8 @@ class TreeBuilder {
     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,
@@ -112433,12 +113080,22 @@ class TreeBuilder {
   /**
    * 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(
       (e3) => e3.type === "node_started" && e3.data.type === "llm"
     ).sort((a4, b2) => new Date(a4.data.timestamp).getTime() - new Date(b2.data.timestamp).getTime());
     if (llmEvents.length > 0) {
       const firstLlmEvent = llmEvents[0];
+      if (preferDisplay && firstLlmEvent.data.displayInput !== void 0 && firstLlmEvent.data.displayInput !== null) {
+        const d3 = firstLlmEvent.data.displayInput;
+        if (typeof d3 === "string") {
+          return d3;
+        }
+        if (typeof d3 === "object") {
+          return JSON.stringify(d3);
+        }
+      }
       if (firstLlmEvent.data.input) {
         if (typeof firstLlmEvent.data.input === "string") {
           return firstLlmEvent.data.input;
@@ -112506,6 +113163,22 @@ class TreeBuilder {
    */
   static extractFinalOutput(events) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const postProcessorEvents = events.filter(
+      (e3) => {
+        var _a2;
+        return e3.type === "node_completed" && e3.data.type === "tool" && ((_a2 = e3.data.metadata) == null ? void 0 : _a2.type) === "PostProcessor" && e3.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(
       (e3) => e3.type === "node_completed" && e3.data.error && (e3.data.status === "errored" || e3.data.status === "failed")
     );
@@ -112632,8 +113305,8 @@ class TreeBuilder {
   /**
    * 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
@@ -112985,7 +113658,7 @@ class ApiService {
       nodeId,
       totalObservations: observations.length
     });
-    const matchedObservation = observations.find((obs) => {
+    const matchingObservations = observations.filter((obs) => {
       let metadata = obs.metadata;
       if (typeof metadata === "string") {
         try {
@@ -113006,6 +113679,7 @@ class ApiService {
       });
       return nodeId === observationNodeId;
     });
+    const matchedObservation = matchingObservations.find((obs) => obs.type === "GENERATION") || matchingObservations[0] || null;
     if (!matchedObservation) {
       const parts = nodeId.split("_");
       if (parts.length === 2) {
@@ -113147,6 +113821,36 @@ class ApiService {
     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,
@@ -113158,9 +113862,12 @@ function DebugCard({
   projectId,
   nodeIndex = 0
 }) {
+  var _a;
+  const callTypeTestId = useMemo(() => getDebuggerCallTypeTestId(node), [node.type, node.name]);
+  const cardTestId = useMemo(() => `${callTypeTestId}_${node.id}`, [callTypeTestId, node.id]);
   const isGuardrailsNode = 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 = useMemo(() => {
     switch (node.type) {
@@ -113337,7 +114044,7 @@ function DebugCard({
     }
   };
   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",
@@ -113372,7 +114079,7 @@ function DebugCard({
         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
       }
@@ -113396,7 +114103,7 @@ function DebugCard({
     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(
@@ -113418,7 +114125,7 @@ function DebugCard({
             /* @__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 })
         ] })
@@ -113445,14 +114152,14 @@ function DebugCard({
     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);
@@ -113549,7 +114256,7 @@ function DebugCard({
     ] });
   };
   const renderTabContent = () => {
-    var _a;
+    var _a2;
     switch (activeTab) {
       case "summary":
         if (isGuardrailsNode) {
@@ -113740,7 +114447,7 @@ function DebugCard({
         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,
@@ -113753,15 +114460,15 @@ function DebugCard({
   };
   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",
               {
@@ -113775,7 +114482,7 @@ function DebugCard({
                   }
                 },
                 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,
                   {
@@ -113784,28 +114491,28 @@ function DebugCard({
                 )
               }
             ),
-            /* @__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
                       }
                     );
@@ -113813,7 +114520,7 @@ function DebugCard({
                   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");
@@ -113835,10 +114542,10 @@ function DebugCard({
                       "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"
@@ -113848,34 +114555,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,
           {
@@ -113911,6 +114618,7 @@ const DebugPanel = forwardRef(({
     expansionMode = "none",
     showExpansionControls = false,
     defaultDetailView = true,
+    runHeaderInputMode = "display",
     apiConfig
   } = config2;
   console.log("🔧 DebugPanel - Config received:", {
@@ -113971,10 +114679,12 @@ const DebugPanel = forwardRef(({
     }
   }), []);
   const sessionTree = 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) => {
@@ -114382,16 +115092,25 @@ const DebugPanel = forwardRef(({
           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;
                     }
                   }
@@ -114401,7 +115120,7 @@ const DebugPanel = forwardRef(({
                     (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;
@@ -114412,9 +115131,9 @@ const DebugPanel = forwardRef(({
                   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) {
@@ -114429,7 +115148,7 @@ const DebugPanel = forwardRef(({
               }
             };
             traverse(nodes);
-            return routeToUserOutput || lastOutput;
+            return postProcessorOutput || routeToUserOutput || lastOutput;
           };
           const outputFromNodes = run2.rootNodes ? findFinalOutput(run2.rootNodes) : void 0;
           const finalOutput = outputFromNodes || run2.finalOutput;
@@ -141250,6 +141969,57 @@ function nodeContentToInline(content) {
     };
   });
 }
+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}}}`;
@@ -141968,6 +142738,27 @@ const ChevronRightIcon = ({ size = 16, className }) => /* @__PURE__ */ jsxRuntim
     )
   }
 );
+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,
@@ -142844,7 +143635,7 @@ const VariableMenu = ({
       setCurrentPath(parsedQuery.path);
     }
   }, [parsedQuery.category, parsedQuery.path, activeCategory]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!menuRef.current) return;
     const menuRect = menuRef.current.getBoundingClientRect();
     const viewportWidth = window.innerWidth;
@@ -142865,7 +143656,7 @@ const VariableMenu = ({
       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 },
@@ -142940,13 +143731,21 @@ const VariableMenu = ({
     }
   }, [editorControlled]);
   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 = (e3) => {
-      if (menuRef.current && !menuRef.current.contains(e3.target)) {
+      if (!isEventInsideMenu(e3)) {
         onClose();
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside, true);
+    return () => document.removeEventListener("mousedown", handleClickOutside, true);
   }, [onClose]);
   useEffect(() => {
     const handleKeyDown2 = (e3) => {
@@ -143033,6 +143832,10 @@ const VariableMenu = ({
             "button",
             {
               type: "button",
+              onMouseDown: (e3) => {
+                e3.preventDefault();
+                e3.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",
@@ -143058,7 +143861,7 @@ const VariableMenu = ({
           )
         ] }) }),
         !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);
@@ -143067,7 +143870,11 @@ const VariableMenu = ({
             "button",
             {
               type: "button",
-              onClick: () => handleItemClick(item),
+              onMouseDown: (e3) => {
+                e3.preventDefault();
+                e3.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}`,
@@ -143643,7 +144450,9 @@ const UnifiedToolbar = ({
   theme = "light",
   disabled = false,
   containerRef,
-  followSelection = false
+  followSelection = false,
+  showDesignWithAI = false,
+  onDesignWithAI
 }) => {
   const [position, setPosition] = useState(null);
   const [isAtSelection, setIsAtSelection] = useState(false);
@@ -144001,7 +144810,30 @@ const UnifiedToolbar = ({
           )
         ] }),
         /* @__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: (e3) => {
+              e3.preventDefault();
+              e3.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",
             {
@@ -144116,7 +144948,8 @@ const ACTION_LABELS = {
   "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;
@@ -144150,7 +144983,7 @@ const AIDesignPanel = ({
   sessionState,
   sessionActions
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const useSessionMode = !!sessionState && !!sessionActions;
   const [messages, setMessages] = useState([]);
   const [inputValue, setInputValue] = useState("");
@@ -144166,6 +144999,36 @@ const AIDesignPanel = ({
   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] = useState(null);
+  const [copiedFeedback, setCopiedFeedback] = useState(false);
+  const [pendingApplyMode, setPendingApplyMode] = useState(null);
+  const [autocopiedOnFail, setAutocopiedOnFail] = useState(false);
+  const appliedTimerRef = useRef(null);
+  const copiedTimerRef = useRef(null);
+  const lastAssistantMsgId = useMemo(() => {
+    const assistantMsgs = displayMessages.filter(
+      (m3) => m3.type === "assistant" && !m3.isGenerating && !m3.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";
+  useEffect(() => {
+    return () => {
+      if (appliedTimerRef.current) clearTimeout(appliedTimerRef.current);
+      if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (isCurrentlyGenerating) {
+      setAppliedFeedback(null);
+      setCopiedFeedback(false);
+      setPendingApplyMode(null);
+      setAutocopiedOnFail(false);
+    }
+  }, [isCurrentlyGenerating]);
   useEffect(() => {
     var _a2;
     (_a2 = messagesEndRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
@@ -144269,8 +145132,9 @@ const AIDesignPanel = ({
       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);
@@ -144312,8 +145176,9 @@ const AIDesignPanel = ({
         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);
@@ -144348,6 +145213,52 @@ const AIDesignPanel = ({
       };
     }
   }, [useSessionMode, sessionActions, generatedContent, onReplace, isSelectionMode]);
+  const handleCopy = 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 = useCallback(() => {
+    setPendingApplyMode("insert");
+    setAutocopiedOnFail(false);
+    handleInsert();
+  }, [handleInsert]);
+  const handleReplaceWithFeedback = useCallback(() => {
+    setPendingApplyMode("replace");
+    setAutocopiedOnFail(false);
+    handleReplace();
+  }, [handleReplace]);
+  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 = useCallback(() => {
     if (useSessionMode) {
       return;
@@ -144447,34 +145358,71 @@ const AIDesignPanel = ({
               // 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)),
@@ -144557,6 +145505,32 @@ function convertSessionHistoryToMessages(sessionState) {
   }
   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++) {
@@ -144766,7 +145740,8 @@ const initialState = {
   modificationReason: "",
   pendingSelection: null,
   showSwitchBanner: false,
-  error: null
+  error: null,
+  cursorInsertPosition: null
 };
 function refinementReducer(state, action) {
   switch (action.type) {
@@ -144877,7 +145852,7 @@ function refinementReducer(state, action) {
     }
     case "APPLY_CONTENT": {
       if (!state.session) return state;
-      const { appliedContent } = action.payload;
+      const { appliedContent, newFingerprint } = action.payload;
       return {
         ...state,
         status: "applied",
@@ -144885,8 +145860,11 @@ function refinementReducer(state, action) {
           ...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: ""
@@ -144894,9 +145872,9 @@ function refinementReducer(state, action) {
     }
     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: {
@@ -144904,8 +145882,10 @@ function refinementReducer(state, action) {
           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,
@@ -144913,7 +145893,8 @@ function refinementReducer(state, action) {
         // 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": {
@@ -144982,6 +145963,11 @@ function refinementReducer(state, action) {
         }
       };
     }
+    case "SET_CURSOR_INSERT_POSITION":
+      return {
+        ...state,
+        cursorInsertPosition: action.payload.position
+      };
     default:
       return state;
   }
@@ -144991,7 +145977,8 @@ function useAIRefinementSession({
   onRefine,
   editorContent,
   promptType,
-  agentContext
+  agentContext,
+  onContentApplied
 }) {
   const [state, dispatch] = useReducer(refinementReducer, initialState);
   const hasGeneratedContentRef = useRef(false);
@@ -145010,14 +145997,18 @@ function useAIRefinementSession({
     });
     if (editor) {
       let fingerprint;
-      if (range3 && range3.from !== range3.to) {
+      const isSelection = !!range3 && range3.from !== range3.to;
+      if (isSelection) {
         fingerprint = createSelectionFingerprint(editor, range3.from, range3.to);
       } else {
         fingerprint = createFullDocumentFingerprint(editor);
       }
       dispatch({
         type: "SELECTION_CHANGED",
-        payload: { fingerprint }
+        payload: {
+          fingerprint,
+          explicitMode: isSelection ? "selection" : "full-document"
+        }
       });
     }
   }, [editor]);
@@ -145027,13 +146018,24 @@ function useAIRefinementSession({
   }, []);
   const startGeneration = 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;
@@ -145093,7 +146095,7 @@ function useAIRefinementSession({
           "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",
@@ -145137,11 +146139,13 @@ function useAIRefinementSession({
     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,
@@ -145161,10 +146165,17 @@ function useAIRefinementSession({
         } 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) {
@@ -145179,8 +146190,12 @@ function useAIRefinementSession({
     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",
@@ -145190,7 +146205,7 @@ function useAIRefinementSession({
         }
       });
     }
-  }, [editor, state.session]);
+  }, [editor, state.session, state.cursorInsertPosition, onContentApplied]);
   const handleSelectionChange = useCallback((from2, to, _text) => {
     if (!editor || !state.session) return;
     if (from2 === to) return;
@@ -145202,7 +146217,7 @@ function useAIRefinementSession({
     }
     dispatch({
       type: "SELECTION_CHANGED",
-      payload: { fingerprint: newFingerprint }
+      payload: { fingerprint: newFingerprint, explicitMode: "selection" }
     });
   }, [editor, state.session]);
   const confirmSwitch = useCallback(() => {
@@ -145241,19 +146256,31 @@ function useAIRefinementSession({
   useEffect(() => {
     if (!editor || state.status === "idle") return;
     const handleSelectionUpdate = () => {
+      var _a, _b;
       const { from: from2, to } = editor.state.selection;
       const hasSelection2 = from2 !== to;
-      if (!hasSelection2 || !hasGeneratedContentRef.current) {
-        return;
+      if (hasSelection2) {
+        if (hasGeneratedContentRef.current) {
+          const selectedText = editor.state.doc.textBetween(from2, to, " ", "\n");
+          handleSelectionChange(from2, 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 = from2 < fp.originalRange.from || from2 > fp.originalRange.to;
+        const newPos = isOutside ? from2 : null;
+        if (newPos !== state.cursorInsertPosition) {
+          dispatch({ type: "SET_CURSOR_INSERT_POSITION", payload: { position: newPos } });
+        }
       }
-      const selectedText = editor.state.doc.textBetween(from2, to, " ", "\n");
-      handleSelectionChange(from2, 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,
@@ -145320,7 +146347,12 @@ const MDEditor = forwardRef(
       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 };
@@ -145328,13 +146360,16 @@ const MDEditor = forwardRef(
     const lastEmittedMarkdownRef = useRef("");
     const isInternalUpdateRef = useRef(false);
     const editorContainerRef = useRef(null);
+    const skipRawSyncRef = useRef(false);
+    const skipEditorSyncRef = useRef(false);
     const [asyncSuggestions, setAsyncSuggestions] = useState(null);
     const [suggestionsLoading, setSuggestionsLoading] = useState(false);
     const [variableMenuOpen, setVariableMenuOpen] = useState(false);
     const [variableMenuPosition, setVariableMenuPosition] = useState({ top: 0, left: 0 });
     const [variableMenuQuery, setVariableMenuQuery] = useState("");
-    const [editingVariableChip, setEditingVariableChip] = useState(null);
     const variableTriggerPosRef = useRef(null);
+    const hasVariableSuggestionsRef = useRef(false);
+    const variableMenuOpenRef = useRef(false);
     const [editorMode, setEditorMode] = useState("editor");
     const [rawMarkdown, setRawMarkdown] = useState("");
     const isRawMode = editorMode === "preview";
@@ -145378,12 +146413,7 @@ const MDEditor = forwardRef(
       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 = useMemo(() => {
       const categories = [];
       if (mergedAgents.length > 0) {
@@ -145448,21 +146478,6 @@ const MDEditor = forwardRef(
       (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: from2 } = editor2.state.selection;
@@ -145475,6 +146490,10 @@ const MDEditor = forwardRef(
               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",
@@ -145489,7 +146508,19 @@ const MDEditor = forwardRef(
         setVariableMenuQuery("");
         variableTriggerPosRef.current = null;
       },
-      [editingVariableChip]
+      []
+    );
+    const handleVariableQueryChange = 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: from2 } = editor2.state.selection;
+        editor2.chain().focus().deleteRange({ from: insertFrom, to: from2 }).insertContentAt(insertFrom, newQuery).run();
+      },
+      []
     );
     const insertMention = useCallback(
       (mention) => {
@@ -145524,14 +146555,23 @@ const MDEditor = forwardRef(
         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 = useCallback(() => {
       handleModeChange(isRawMode ? "editor" : "preview");
     }, [handleModeChange, isRawMode]);
@@ -145546,13 +146586,17 @@ const MDEditor = forwardRef(
           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 "";
           },
@@ -145622,7 +146666,7 @@ const MDEditor = forwardRef(
         );
       }
       return exts;
-    }, [mergedFeatures, placeholder, defaultCategories, handleSlashCommandSelect, mergedSlashConfig.highlightMentions]);
+    }, [mergedFeatures, placeholder, emptyStatePlaceholder, defaultCategories, handleSlashCommandSelect, mergedSlashConfig.highlightMentions]);
     const editorRef = useRef(null);
     const editor = useEditor({
       extensions,
@@ -145656,12 +146700,24 @@ const MDEditor = forwardRef(
       editorRef.current = editor;
     }, [editor]);
     const editorContent = editor ? editorJsonToMarkdown(editor.getJSON()) : "";
+    const handleAIContentApplied = 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 = useCallback(
       (_type = "selection") => {
@@ -145688,6 +146744,22 @@ const MDEditor = forwardRef(
         // autoGenerate
       );
     }, [aiSessionActions]);
+    const handleDesignWithAI = 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 = useCallback(() => {
       if (editorRef.current) {
         editorRef.current.setEditable(!readOnly);
@@ -145722,11 +146794,27 @@ const MDEditor = forwardRef(
           from2
         );
         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: from2 }).insertContent({
+              type: "variableChip",
+              attrs: {
+                variableType: varType,
+                path: cleanPath,
+                displayName
+              }
+            }).insertContent(" ").run();
+          }
           setVariableMenuOpen(false);
           variableTriggerPosRef.current = null;
           return;
         }
         setVariableMenuQuery(textAfterTrigger);
+        const coords = editor.view.coordsAtPos(from2);
+        setVariableMenuPosition({ top: coords.bottom + 8, left: coords.left });
       };
       const editorElement = editor.view.dom;
       editorElement.addEventListener("keydown", handleKeyDown2);
@@ -145736,12 +146824,36 @@ const MDEditor = forwardRef(
         editorElement.removeEventListener("input", handleInput);
       };
     }, [editor, mergedFeatures.variableChips, variableMenuOpen]);
+    useEffect(() => {
+      variableMenuOpenRef.current = variableMenuOpen;
+    }, [variableMenuOpen]);
+    useEffect(() => {
+      if (!editor || !mergedFeatures.variableChips) return;
+      const detectVariableContext = () => {
+        if (variableMenuOpenRef.current) return;
+        if (!hasVariableSuggestionsRef.current) return;
+        const { from: from2 } = editor.state.selection;
+        const context = getVariableContextAtPosition(editor, from2);
+        if (context) {
+          variableTriggerPosRef.current = context.triggerFrom;
+          setVariableMenuQuery(context.query);
+          const coords = editor.view.coordsAtPos(from2);
+          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]);
     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();
         }
@@ -145754,19 +146866,11 @@ const MDEditor = forwardRef(
       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);
@@ -145775,6 +146879,10 @@ const MDEditor = forwardRef(
       };
     }, [editor]);
     useEffect(() => {
+      if (skipEditorSyncRef.current) {
+        skipEditorSyncRef.current = false;
+        return;
+      }
       if (!editor || isInternalUpdateRef.current) {
         isInternalUpdateRef.current = false;
         return;
@@ -145806,6 +146914,10 @@ const MDEditor = forwardRef(
       return () => clearTimeout(timer);
     }, [rawMarkdown, isRawMode, onMarkdownChange, onChange]);
     useEffect(() => {
+      if (skipRawSyncRef.current) {
+        skipRawSyncRef.current = false;
+        return;
+      }
       if (isRawMode && markdownValue !== void 0 && markdownValue !== lastEmittedMarkdownRef.current) {
         setRawMarkdown(markdownValue);
       }
@@ -145946,6 +147058,13 @@ const MDEditor = forwardRef(
                       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
+                    }
                   )
                 ] })
               ) }),
@@ -145954,20 +147073,18 @@ const MDEditor = forwardRef(
                 {
                   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
                 }
               )
             ] }),
@@ -145981,7 +147098,9 @@ const MDEditor = forwardRef(
                 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
               }
             )
           ] }),
@@ -149524,6 +150643,7 @@ export {
   AIRefineDropdown,
   AIRefineExtension,
   AIRefinePanel,
+  AgentDefinitionExample,
   AgentListView,
   AnalyticsChart,
   AnalyticsTable,
@@ -149549,6 +150669,7 @@ export {
   DetailPage,
   DetailPageService,
   EmptyState,
+  EmptyStatePlaceholder,
   EndpointsConfigService,
   EnvironmentContext,
   EnvironmentProvider,