@paymanai/payman-ask-sdk 4.0.5 → 4.0.7

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { createContext, forwardRef, useRef, useState, useCallback, useImperative
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as Sentry from '@sentry/react';
-import { ArrowDown, Pencil, X, RotateCcw, Telescope, Zap, Plus, ImagePlus, Paperclip, Mic, ArrowUp, Check, AlertCircle, Copy, WifiOff, ThumbsUp, ThumbsDown, Binoculars, ShieldCheck, Download, Loader2, User, Clock, Sparkles, ImageOff, Eye, ChevronDown, ChevronRight } from 'lucide-react';
+import { ArrowDown, Pencil, X, RotateCcw, Telescope, Zap, Plus, ImagePlus, Paperclip, Mic, ArrowUp, Check, AlertCircle, Copy, WifiOff, ThumbsUp, ThumbsDown, Binoculars, ShieldCheck, Download, Loader2, ChevronDown, User, Clock, Sparkles, ImageOff, Eye, ChevronRight } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { createPortal } from 'react-dom';
@@ -131,11 +131,17 @@ var DEFAULT_SLASH_COMMANDS = [
     requiredAnyPermissions: ["vault:author", "vault:publish"]
   }
 ];
+function hasCommandPermission(granted, requiredPermission) {
+  if (granted.has("*") || granted.has(requiredPermission)) return true;
+  if (!requiredPermission.includes(".")) return false;
+  const wildcard = requiredPermission.substring(0, requiredPermission.lastIndexOf(".")) + ".*";
+  return granted.has(wildcard);
+}
 function filterSlashCommands(commands, permissions) {
   const granted = new Set(permissions ?? []);
   return commands.filter((command) => {
     const required = command.requiredAnyPermissions ?? [];
-    return required.length === 0 || required.some((permission) => granted.has(permission));
+    return required.length === 0 || required.some((permission) => hasCommandPermission(granted, permission));
   });
 }
 function parseSlashCommand(content) {
@@ -148,9 +154,19 @@ function parseSlashCommand(content) {
     body: match[2] ?? ""
   };
 }
-function slashCommandBodyIsEmpty(content) {
+function getSlashCommandValidationHint(content) {
   const parsed = parseSlashCommand(content);
-  return parsed?.command === "/draft-knowledge" && parsed.body.trim().length === 0;
+  if (parsed?.command !== "/draft-knowledge") return null;
+  const lines = parsed.body.split(/\r?\n/);
+  const title = lines[0]?.trim() ?? "";
+  const markdownContent = lines.slice(1).join("\n").trim();
+  if (!title) {
+    return "Add a title after /draft-knowledge, then add markdown content on the next line.";
+  }
+  if (!markdownContent) {
+    return "Add markdown content on a new line below the title.";
+  }
+  return null;
 }
 
 // src/utils/errorMessages.ts
@@ -205,6 +221,53 @@ function initSentryIfNeeded(dsn) {
     }
   });
 }
+
+// src/utils/feedbackClient.ts
+var NEGATIVE_FEEDBACK_REASONS = [
+  { value: "NOT_FACTUALLY_CORRECT", label: "Not factually correct" },
+  { value: "INCOMPLETE_RESPONSE", label: "Incomplete response" },
+  { value: "DID_NOT_FOLLOW_REQUEST", label: "Did not follow my request" },
+  { value: "OVERACTIVE_REFUSAL", label: "Refused unnecessarily" },
+  { value: "ISSUE_WITH_THOUGHT_PROCESS", label: "Issue with reasoning" },
+  { value: "REPORT_CONTENT", label: "Report content" },
+  { value: "OTHER", label: "Other" }
+];
+var DEFAULT_STREAM_ENDPOINT = "/api/playground/ask/stream";
+async function submitFeedback({
+  baseUrl,
+  streamEndpoint,
+  headers,
+  authToken,
+  stage,
+  stageQueryParam,
+  executionId,
+  feedback,
+  details,
+  signal
+}) {
+  const base = baseUrl.replace(/\/+$/, "");
+  const endpointPath = (streamEndpoint || DEFAULT_STREAM_ENDPOINT).split("?")[0].replace(/\/+$/, "");
+  const basePath = endpointPath.endsWith("/stream") ? endpointPath.slice(0, -"/stream".length) : endpointPath;
+  const query = new URLSearchParams();
+  if (stage) query.set(stageQueryParam ?? "stage", stage);
+  const qs = query.toString() ? `?${query.toString()}` : "";
+  const url = `${base}${basePath}/executions/${encodeURIComponent(executionId)}/feedback${qs}`;
+  const requestHeaders = {
+    "Content-Type": "application/json",
+    Accept: "application/json",
+    ...headers ?? {}
+  };
+  if (authToken) requestHeaders.Authorization = `Bearer ${authToken}`;
+  const resp = await fetch(url, {
+    method: "POST",
+    headers: requestHeaders,
+    body: JSON.stringify(details ? { feedback, details } : { feedback }),
+    signal
+  });
+  if (!resp.ok) {
+    throw new Error(`Feedback failed: ${resp.status} ${resp.statusText}`);
+  }
+}
 function ImageLightbox({
   src,
   alt = "",
@@ -1667,6 +1730,221 @@ function ThinkingBlockV2({
     ) }) })
   ] });
 }
+var MAX_DETAILS_CHARS = 2e3;
+function FeedbackReasonModal({
+  open,
+  onClose,
+  onSubmit
+}) {
+  const [reason, setReason] = useState(
+    NEGATIVE_FEEDBACK_REASONS[0].value
+  );
+  const [details, setDetails] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const [reasonOpen, setReasonOpen] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setReason(NEGATIVE_FEEDBACK_REASONS[0].value);
+      setDetails("");
+      setError(null);
+      setSubmitting(false);
+      setReasonOpen(false);
+    }
+  }, [open]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key !== "Escape") return;
+      if (reasonOpen) {
+        setReasonOpen(false);
+        return;
+      }
+      onClose();
+    },
+    [onClose, reasonOpen]
+  );
+  useEffect(() => {
+    if (!open || typeof document === "undefined") return;
+    document.addEventListener("keydown", handleKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [handleKeyDown, open]);
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    setError(null);
+    setReasonOpen(false);
+    try {
+      await onSubmit(reason, details.trim() ? details.trim() : void 0);
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not send feedback");
+      setSubmitting(false);
+    }
+  };
+  const selectedReason = NEGATIVE_FEEDBACK_REASONS.find((item) => item.value === reason) ?? NEGATIVE_FEEDBACK_REASONS[0];
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "payman-v2-feedback-modal-backdrop",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.18 },
+      onClick: onClose,
+      role: "presentation",
+      children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: { opacity: 0, y: 12, scale: 0.98 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: 8, scale: 0.98 },
+          transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+          className: "payman-v2-feedback-modal-dialog",
+          onClick: (event) => event.stopPropagation(),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "payman-v2-feedback-title",
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                disabled: submitting,
+                className: "payman-v2-feedback-modal-close",
+                "aria-label": "Close feedback modal",
+                children: /* @__PURE__ */ jsx(X, { size: 18, strokeWidth: 2 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                id: "payman-v2-feedback-title",
+                className: "payman-v2-feedback-modal-title",
+                children: "Tell us what went wrong"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                className: "payman-v2-feedback-modal-label",
+                htmlFor: "payman-v2-feedback-reason",
+                children: "What was the issue?"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                id: "payman-v2-feedback-reason",
+                className: "payman-v2-feedback-modal-reason",
+                onBlur: (event) => {
+                  const nextTarget = event.relatedTarget;
+                  if (!nextTarget || !event.currentTarget.contains(nextTarget)) {
+                    setReasonOpen(false);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "payman-v2-feedback-modal-reason-trigger",
+                      "aria-haspopup": "listbox",
+                      "aria-expanded": reasonOpen,
+                      "aria-controls": "payman-v2-feedback-reason-options",
+                      disabled: submitting,
+                      onClick: () => setReasonOpen((current) => !current),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: selectedReason.label }),
+                        /* @__PURE__ */ jsx(
+                          ChevronDown,
+                          {
+                            size: 17,
+                            strokeWidth: 2,
+                            className: reasonOpen ? "payman-v2-feedback-modal-reason-chevron payman-v2-feedback-modal-reason-chevron-open" : "payman-v2-feedback-modal-reason-chevron"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  reasonOpen ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: "payman-v2-feedback-reason-options",
+                      className: "payman-v2-feedback-modal-reason-menu",
+                      role: "listbox",
+                      "aria-label": "Feedback issue",
+                      tabIndex: -1,
+                      children: NEGATIVE_FEEDBACK_REASONS.map((item) => {
+                        const isSelected = item.value === reason;
+                        return /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            className: isSelected ? "payman-v2-feedback-modal-reason-option payman-v2-feedback-modal-reason-option-selected" : "payman-v2-feedback-modal-reason-option",
+                            role: "option",
+                            "aria-selected": isSelected,
+                            onClick: () => {
+                              setReason(item.value);
+                              setReasonOpen(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { children: item.label }),
+                              isSelected ? /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 2 }) : null
+                            ]
+                          },
+                          item.value
+                        );
+                      })
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                className: "payman-v2-feedback-modal-textarea",
+                placeholder: "Add details (optional)",
+                value: details,
+                maxLength: MAX_DETAILS_CHARS,
+                onChange: (e) => setDetails(e.target.value),
+                disabled: submitting
+              }
+            ),
+            error ? /* @__PURE__ */ jsx("p", { className: "payman-v2-feedback-modal-error", children: error }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "payman-v2-feedback-modal-actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  disabled: submitting,
+                  className: "payman-v2-feedback-modal-btn payman-v2-feedback-modal-btn-secondary",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleSubmit,
+                  disabled: submitting,
+                  className: "payman-v2-feedback-modal-btn payman-v2-feedback-modal-btn-primary",
+                  children: submitting ? "Sending\u2026" : "Submit"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  ) : null });
+}
 var RESPONSE_SPEED = {
   normal: [2, 4],
   fast: 1,
@@ -1749,12 +2027,26 @@ function AssistantMessageV2({
   message,
   onImageClick,
   onExecutionTraceClick,
-  onFeedback,
+  onSubmitFeedback,
   actions,
   typingSpeed = 4
 }) {
   const [copied, setCopied] = useState(false);
   const [activeFeedback, setActiveFeedback] = useState(null);
+  const [reasonModalOpen, setReasonModalOpen] = useState(false);
+  const canSubmitFeedback = !!onSubmitFeedback && !!message.executionId;
+  const handlePositiveFeedback = () => {
+    if (!canSubmitFeedback || activeFeedback === "up") return;
+    const previous = activeFeedback;
+    setActiveFeedback("up");
+    Promise.resolve(
+      onSubmitFeedback?.({
+        messageId: message.id,
+        executionId: message.executionId,
+        feedback: "POSITIVE"
+      })
+    ).catch(() => setActiveFeedback(previous));
+  };
   const [toast, setToast] = useState(null);
   const copyResetTimerRef = useRef(null);
   const toastTimerRef = useRef(null);
@@ -1784,34 +2076,6 @@ function AssistantMessageV2({
     void 0,
     typingSpeed
   );
-  const elapsedMs = (() => {
-    const fromServer = message.totalElapsedMs;
-    if (typeof fromServer === "number" && Number.isFinite(fromServer) && fromServer > 0) {
-      return fromServer;
-    }
-    const steps = message.steps;
-    if (!steps || steps.length === 0) return void 0;
-    let earliest = Number.POSITIVE_INFINITY;
-    let latest = Number.NEGATIVE_INFINITY;
-    for (const s of steps) {
-      if (!s.timestamp) continue;
-      if (s.timestamp < earliest) earliest = s.timestamp;
-      const end = s.timestamp + (s.elapsedMs ?? 0);
-      if (end > latest) latest = end;
-    }
-    if (!Number.isFinite(earliest) || !Number.isFinite(latest)) {
-      const total = steps.reduce((sum, s) => sum + (s.elapsedMs || 0), 0);
-      return total > 0 ? total : void 0;
-    }
-    const diff = latest - earliest;
-    return diff > 0 ? diff : void 0;
-  })();
-  function formatElapsed(ms) {
-    if (ms === void 0) return void 0;
-    if (ms < 1e3) return `${Math.round(ms)}ms`;
-    return `${(ms / 1e3).toFixed(1)}s`;
-  }
-  const totalElapsedLabel = formatElapsed(elapsedMs);
   const stickyLabel = (() => {
     const steps = message.steps;
     if (!steps || steps.length === 0) return void 0;
@@ -1994,14 +2258,10 @@ function AssistantMessageV2({
             children: copied ? /* @__PURE__ */ jsx(Check, { style: { width: 16, height: 16 } }) : /* @__PURE__ */ jsx(Copy, { style: { width: 16, height: 16 } })
           }
         ) }),
-        showThumbsUp && /* @__PURE__ */ jsx(ActionTooltipV2, { label: "Good response", children: /* @__PURE__ */ jsx(
+        showThumbsUp && canSubmitFeedback && /* @__PURE__ */ jsx(ActionTooltipV2, { label: "Good response", children: /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => {
-              const next = activeFeedback === "up" ? null : "up";
-              setActiveFeedback(next);
-              if (next) onFeedback?.({ messageId: message.id, feedback: "up" });
-            },
+            onClick: handlePositiveFeedback,
             className: cn(
               "payman-v2-assistant-msg-action-btn",
               activeFeedback === "up" && "payman-v2-assistant-msg-action-btn-active"
@@ -2010,14 +2270,10 @@ function AssistantMessageV2({
             children: /* @__PURE__ */ jsx(ThumbsUp, { style: { width: 15, height: 15 } })
           }
         ) }),
-        showThumbsDown && /* @__PURE__ */ jsx(ActionTooltipV2, { label: "Bad response", children: /* @__PURE__ */ jsx(
+        showThumbsDown && canSubmitFeedback && /* @__PURE__ */ jsx(ActionTooltipV2, { label: "Bad response", children: /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => {
-              const next = activeFeedback === "down" ? null : "down";
-              setActiveFeedback(next);
-              if (next) onFeedback?.({ messageId: message.id, feedback: "down" });
-            },
+            onClick: () => setReasonModalOpen(true),
             className: cn(
               "payman-v2-assistant-msg-action-btn",
               activeFeedback === "down" && "payman-v2-assistant-msg-action-btn-active"
@@ -2034,10 +2290,25 @@ function AssistantMessageV2({
             "aria-label": "Trace response",
             children: /* @__PURE__ */ jsx(Binoculars, { style: { width: 16, height: 16 } })
           }
-        ) }),
-        totalElapsedLabel && /* @__PURE__ */ jsx("span", { className: "payman-v2-assistant-msg-elapsed", children: totalElapsedLabel })
+        ) })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      FeedbackReasonModal,
+      {
+        open: reasonModalOpen,
+        onClose: () => setReasonModalOpen(false),
+        onSubmit: async (reason, details) => {
+          await onSubmitFeedback?.({
+            messageId: message.id,
+            executionId: message.executionId,
+            feedback: reason,
+            details
+          });
+          setActiveFeedback("down");
+        }
+      }
+    )
   ] });
 }
 var DEFAULT_MAX_LENGTH = 6;
@@ -2318,7 +2589,7 @@ var MessageListV2 = forwardRef(
     onApproveAction,
     onRejectAction,
     onResendAction,
-    onMessageFeedback,
+    onSubmitFeedback,
     typingSpeed = 4
   }, ref) {
     const scrollRef = useRef(null);
@@ -2458,7 +2729,7 @@ var MessageListV2 = forwardRef(
                     message,
                     onImageClick,
                     onExecutionTraceClick,
-                    onFeedback: onMessageFeedback,
+                    onSubmitFeedback,
                     actions: messageActions?.assistantMessageActions,
                     typingSpeed
                   }
@@ -2622,8 +2893,9 @@ var ChatInputV2 = forwardRef(
     }, [isRecording, transcribedText]);
     const handleSend = useCallback(() => {
       if (!value.trim() || disabled) return;
-      if (slashCommandBodyIsEmpty(value)) {
-        setInlineHint("Add markdown content below the command line.");
+      const commandHint = getSlashCommandValidationHint(value);
+      if (commandHint) {
+        setInlineHint(commandHint);
         return;
       }
       voiceDraftSyncActiveRef.current = false;
@@ -3225,6 +3497,316 @@ function ImageLightboxV2({ src, alt, onClose }) {
     document.body
   );
 }
+var PRE_PIPELINE_STEPS = /* @__PURE__ */ new Set([
+  "record_execution",
+  "resolve_provider",
+  "resolve_mcp_servers",
+  "build_pipeline",
+  "load_skill_index"
+]);
+function stepColor(step) {
+  if (step.status === "failed") return "#ef4444";
+  if (PRE_PIPELINE_STEPS.has(step.step)) return "#f59e0b";
+  return "#3b82f6";
+}
+function formatMs(ms) {
+  if (ms == null) return "\u2014";
+  if (ms < 1e3) return `${ms} ms`;
+  return `${(ms / 1e3).toFixed(2)} s`;
+}
+function TraceTimelineModal({
+  open,
+  onClose,
+  executionId,
+  apiBaseUrl,
+  apiHeaders
+}) {
+  const [trace, setTrace] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!open || !executionId) return;
+    const ctrl = new AbortController();
+    setLoading(true);
+    setError(null);
+    setTrace(null);
+    const base = apiBaseUrl.replace(/\/+$/, "");
+    fetch(`${base}/api/ask/executions/${encodeURIComponent(executionId)}/trace`, {
+      method: "GET",
+      headers: { Accept: "application/json", ...apiHeaders },
+      signal: ctrl.signal
+    }).then(async (resp) => {
+      if (!resp.ok) {
+        throw new Error(`Trace fetch failed: ${resp.status} ${resp.statusText}`);
+      }
+      return resp.json();
+    }).then((data) => setTrace(data)).catch((e) => {
+      if (e.name === "AbortError") return;
+      setError(e instanceof Error ? e.message : "Trace fetch failed");
+    }).finally(() => setLoading(false));
+    return () => ctrl.abort();
+  }, [open, executionId, apiBaseUrl, apiHeaders]);
+  const totalMs = useMemo(() => {
+    if (!trace) return 0;
+    const meta = trace.runMetadata?.totalTimeMs;
+    if (typeof meta === "number" && meta > 0) return meta;
+    const starts = trace.pipelineSteps.map((s) => s.startTime);
+    const ends = trace.pipelineSteps.map((s) => s.endTime ?? s.startTime).filter((t) => typeof t === "number");
+    if (starts.length === 0 || ends.length === 0) return 0;
+    return Math.max(...ends) - Math.min(...starts);
+  }, [trace]);
+  const accountedMs = useMemo(
+    () => (trace?.pipelineSteps ?? []).reduce(
+      (sum, s) => sum + (s.durationMs ?? 0),
+      0
+    ),
+    [trace]
+  );
+  const unaccountedMs = Math.max(totalMs - accountedMs, 0);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.15 },
+        onClick: onClose,
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.45)",
+          zIndex: 9999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 24
+        },
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { y: 12, opacity: 0 },
+            animate: { y: 0, opacity: 1 },
+            exit: { y: 12, opacity: 0 },
+            transition: { duration: 0.18 },
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              background: "#0b1220",
+              color: "#e5e7eb",
+              borderRadius: 12,
+              width: "100%",
+              maxWidth: 760,
+              maxHeight: "85vh",
+              overflow: "auto",
+              boxShadow: "0 20px 60px rgba(0,0,0,0.45)",
+              fontFamily: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "header",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "14px 18px",
+                    borderBottom: "1px solid rgba(255,255,255,0.08)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 600 }, children: "Execution trace" }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 11,
+                            opacity: 0.6,
+                            marginTop: 2,
+                            fontFamily: "ui-monospace, SFMono-Regular, monospace"
+                          },
+                          children: executionId ?? ""
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        "aria-label": "Close",
+                        style: {
+                          background: "transparent",
+                          border: 0,
+                          color: "#e5e7eb",
+                          cursor: "pointer",
+                          padding: 6,
+                          borderRadius: 6
+                        },
+                        children: /* @__PURE__ */ jsx(X, { style: { width: 18, height: 18 } })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { padding: 18 }, children: [
+                loading && /* @__PURE__ */ jsx("div", { style: { opacity: 0.7, fontSize: 13 }, children: "Loading trace\u2026" }),
+                error && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      color: "#fca5a5",
+                      fontSize: 13,
+                      whiteSpace: "pre-wrap"
+                    },
+                    children: error
+                  }
+                ),
+                trace && !loading && !error && /* @__PURE__ */ jsx(
+                  TimelineBars,
+                  {
+                    trace,
+                    totalMs,
+                    unaccountedMs
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ) }),
+    document.body
+  );
+}
+function TimelineBars({
+  trace,
+  totalMs,
+  unaccountedMs
+}) {
+  const bars = trace.pipelineSteps.map((step) => {
+    const duration = step.durationMs ?? 0;
+    const widthPct = totalMs > 0 ? duration / totalMs * 100 : 0;
+    const llmMs = step.llmCall?.durationMs ?? null;
+    return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            fontSize: 12,
+            marginBottom: 4,
+            fontFamily: "ui-monospace, SFMono-Regular, monospace"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              step.step,
+              step.status === "failed" && /* @__PURE__ */ jsx("span", { style: { color: "#fca5a5", marginLeft: 6 }, children: "(failed)" })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { style: { opacity: 0.75 }, children: [
+              formatMs(duration),
+              llmMs != null && /* @__PURE__ */ jsxs("span", { style: { marginLeft: 8, opacity: 0.6 }, children: [
+                "(LLM ",
+                formatMs(llmMs),
+                ")"
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            height: 8,
+            background: "rgba(255,255,255,0.06)",
+            borderRadius: 4,
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: "100%",
+                width: `${Math.max(widthPct, 0.3)}%`,
+                background: stepColor(step),
+                transition: "width 0.2s ease"
+              }
+            }
+          )
+        }
+      )
+    ] }, `${step.step}-${step.startTime}`);
+  });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    bars,
+    unaccountedMs > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            fontSize: 12,
+            marginBottom: 4,
+            fontFamily: "ui-monospace, SFMono-Regular, monospace",
+            opacity: 0.7
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children: "(unaccounted)" }),
+            /* @__PURE__ */ jsx("span", { children: formatMs(unaccountedMs) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            height: 8,
+            background: "rgba(255,255,255,0.06)",
+            borderRadius: 4,
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: "100%",
+                width: `${unaccountedMs / Math.max(totalMs, 1) * 100}%`,
+                background: "repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 4px, transparent 4px 8px)"
+              }
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          marginTop: 14,
+          paddingTop: 12,
+          borderTop: "1px solid rgba(255,255,255,0.08)",
+          fontSize: 12,
+          display: "flex",
+          justifyContent: "space-between",
+          opacity: 0.85
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            trace.pipelineSteps.length,
+            " step",
+            trace.pipelineSteps.length === 1 ? "" : "s"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace" }, children: [
+            "total: ",
+            formatMs(totalMs)
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 var DEFAULT_USER_ACTION_STATE = {
   request: null,
   result: null};
@@ -3415,12 +3997,51 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
     ]
   );
   const {
-    onExecutionTraceClick,
+    onExecutionTraceClick: rawOnExecutionTraceClick,
     onResetSession,
     onUploadImageClick,
     onAttachFileClick,
     onMessageFeedback
   } = callbacks;
+  const [debugTraceExecutionId, setDebugTraceExecutionId] = useState(null);
+  const handleSubmitFeedback = useCallback(
+    async ({ messageId, executionId, feedback, details }) => {
+      if (!executionId) {
+        throw new Error("Cannot submit feedback before the response completes");
+      }
+      await submitFeedback({
+        baseUrl: config.api.baseUrl,
+        streamEndpoint: config.api.streamEndpoint,
+        headers: config.api.headers,
+        authToken: config.api.authToken,
+        stage: config.stage,
+        stageQueryParam: config.stageQueryParam,
+        executionId,
+        feedback,
+        details
+      });
+      onMessageFeedback?.({
+        messageId,
+        feedback: feedback === "POSITIVE" ? "up" : "down"
+      });
+    },
+    [
+      config.api.baseUrl,
+      config.api.streamEndpoint,
+      config.api.headers,
+      config.api.authToken,
+      config.stage,
+      config.stageQueryParam,
+      onMessageFeedback
+    ]
+  );
+  const onExecutionTraceClick = useMemo(() => {
+    if (!config.debug) return rawOnExecutionTraceClick;
+    return (data) => {
+      rawOnExecutionTraceClick?.(data);
+      if (data.executionId) setDebugTraceExecutionId(data.executionId);
+    };
+  }, [config.debug, rawOnExecutionTraceClick]);
   const performResetSession = useCallback(() => {
     resetToEmptyStateRef.current = true;
     setEditingMessageId(null);
@@ -3478,6 +4099,7 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
     showEmptyStateIcon = true,
     emptyStateComponent,
     showResetSession = false,
+    enableDeepModeToggle = true,
     showAttachmentButton = true,
     showUploadImageButton = true,
     showAttachFileButton = true,
@@ -3533,6 +4155,7 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
     stopRecording();
   };
   const isV2InputDisabled = !isSessionParamsConfigured || disableInput;
+  const effectiveAnalysisMode = enableDeepModeToggle ? analysisMode : "fast";
   const isEmpty = messages.length === 0;
   if (isChatDisabled) {
     if (disabledComponent) {
@@ -3591,7 +4214,7 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
     if (isRecording) stopRecording();
     if (text.trim() && !disableInput && isSessionParamsConfigured) {
       setEditingMessageId(null);
-      void sendMessage(text.trim(), { analysisMode });
+      void sendMessage(text.trim(), { analysisMode: effectiveAnalysisMode });
     }
   };
   const handleVoicePress = useCallback(async () => {
@@ -3618,7 +4241,9 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
       (message) => message.id === messageId && message.role === "user"
     );
     if (!targetMessage?.content.trim()) return;
-    void sendMessage(targetMessage.content.trim(), { analysisMode });
+    void sendMessage(targetMessage.content.trim(), {
+      analysisMode: effectiveAnalysisMode
+    });
     const bump = () => messageListV2Ref.current?.scrollToBottom("instant");
     requestAnimationFrame(() => {
       bump();
@@ -3626,7 +4251,7 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
         window.setTimeout(bump, 120);
       });
     });
-  }, [isWaitingForResponse, messages, sendMessage, analysisMode]);
+  }, [isWaitingForResponse, messages, sendMessage, effectiveAnalysisMode]);
   const handleClearEditing = useCallback(() => {
     setEditingMessageId(null);
   }, []);
@@ -3705,8 +4330,8 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
                       onAttachFileClick,
                       editingMessageId,
                       onClearEditing: handleClearEditing,
-                      analysisMode,
-                      onAnalysisModeChange: setAnalysisMode,
+                      analysisMode: enableDeepModeToggle ? analysisMode : void 0,
+                      onAnalysisModeChange: enableDeepModeToggle ? setAnalysisMode : void 0,
                       slashCommands
                     }
                   )
@@ -3746,7 +4371,7 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
                   onResendAction: isUserActionSupported ? async () => {
                     await resendOtp();
                   } : void 0,
-                  onMessageFeedback
+                  onSubmitFeedback: handleSubmitFeedback
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -3781,8 +4406,8 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
                   onAttachFileClick,
                   editingMessageId,
                   onClearEditing: handleClearEditing,
-                  analysisMode,
-                  onAnalysisModeChange: setAnalysisMode,
+                  analysisMode: enableDeepModeToggle ? analysisMode : void 0,
+                  onAnalysisModeChange: enableDeepModeToggle ? setAnalysisMode : void 0,
                   slashCommands
                 }
               )
@@ -3805,6 +4430,16 @@ var PaymanChatInner = forwardRef(function PaymanChatInner2({
             onClose: closeResetSessionConfirm,
             onConfirm: performResetSession
           }
+        ),
+        config.debug && /* @__PURE__ */ jsx(
+          TraceTimelineModal,
+          {
+            open: debugTraceExecutionId !== null,
+            onClose: () => setDebugTraceExecutionId(null),
+            executionId: debugTraceExecutionId,
+            apiBaseUrl: config.api.baseUrl,
+            apiHeaders: config.api.headers
+          }
         )
       ]
     }