@paymanai/payman-ask-sdk 4.0.26 → 4.0.28

package/dist/index.js

@@ -1155,6 +1155,9 @@ function getUserActionSecondsLeft(prompt) {
   return void 0;
 }
 var EMPTY_USER_ACTION_STATE2 = { prompts: [], notifications: [] };
+function promptSlotKey(p) {
+  return p.toolCallId || p.userActionId;
+}
 function upsertPrompt(prompts, req) {
   const idx = prompts.findIndex(
     (p) => req.toolCallId ? p.toolCallId === req.toolCallId : p.userActionId === req.userActionId
@@ -1201,6 +1204,7 @@ function useChatV2(config, callbacks = {}) {
   configRef.current = config;
   const messagesRef = React.useRef(messages);
   messagesRef.current = messages;
+  const pendingSubmissionsRef = React.useRef(/* @__PURE__ */ new Map());
   const storeAwareSetMessages = React.useCallback(
     (updater) => {
       const streamUserId = streamUserIdRef.current;
@@ -1235,6 +1239,8 @@ function useChatV2(config, callbacks = {}) {
     if (!config.userId) return EMPTY_USER_ACTION_STATE2;
     return activeStreamStore.get(config.userId)?.userActionState ?? EMPTY_USER_ACTION_STATE2;
   });
+  const userActionStateRef = React.useRef(userActionState);
+  userActionStateRef.current = userActionState;
   const storeAwareSetUserActionState = React.useCallback(
     (updater) => {
       const streamUserId = streamUserIdRef.current;
@@ -1262,6 +1268,12 @@ function useChatV2(config, callbacks = {}) {
     onExecutionTraceClick: (data) => callbacksRef.current.onExecutionTraceClick?.(data),
     onSessionIdChange: (sessionId) => callbacksRef.current.onSessionIdChange?.(sessionId),
     onUserActionRequired: (request) => {
+      const requestSlotKey = promptSlotKey(request);
+      for (const [pendingId, slotKey] of pendingSubmissionsRef.current) {
+        if (slotKey === requestSlotKey) {
+          pendingSubmissionsRef.current.delete(pendingId);
+        }
+      }
       storeAwareSetUserActionState((prev) => ({
         ...prev,
         prompts: upsertPrompt(prev.prompts, request)
@@ -1273,6 +1285,28 @@ function useChatV2(config, callbacks = {}) {
         (prev) => prev.notifications.some((n) => n.id === notification.id) ? prev : { ...prev, notifications: [...prev.notifications, notification] }
       );
       callbacksRef.current.onUserNotification?.(notification);
+    },
+    // A submitted-but-unconfirmed prompt (see `submitUserAction`) is only
+    // safe to drop once the stream has demonstrably moved on. `onEvent`
+    // in useStreamManagerV2 calls `onStepsUpdate` for *every* processed
+    // stream event, unconditionally — so the first time this fires
+    // after a submission, the event in hand is either the rejection
+    // retry (a fresh `USER_ACTION_REQUIRED`, which the handler above
+    // already deleted this pending entry for, earlier in the very same
+    // event) or genuine forward progress (RUN_IN_PROGRESS, a tool call,
+    // content deltas, RUN_COMPLETED, ...). Anything still pending by
+    // the time we get here therefore means the run resumed normally —
+    // clear it.
+    onStepsUpdate: (steps) => {
+      if (pendingSubmissionsRef.current.size > 0) {
+        const resolved = [...pendingSubmissionsRef.current.keys()];
+        pendingSubmissionsRef.current.clear();
+        storeAwareSetUserActionState((prev) => ({
+          ...prev,
+          prompts: prev.prompts.filter((p) => !resolved.includes(p.userActionId))
+        }));
+      }
+      callbacksRef.current.onStepsUpdate?.(steps);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), []);
@@ -1408,6 +1442,7 @@ function useChatV2(config, callbacks = {}) {
     [storeAwareSetUserActionState]
   );
   const removePrompt = React.useCallback((userActionId) => {
+    pendingSubmissionsRef.current.delete(userActionId);
     storeAwareSetUserActionState((prev) => ({
       ...prev,
       prompts: prev.prompts.filter((p) => p.userActionId !== userActionId)
@@ -1418,7 +1453,10 @@ function useChatV2(config, callbacks = {}) {
       setPromptStatus(userActionId, "submitting");
       try {
         await submitUserAction(configRef.current, userActionId, content);
-        removePrompt(userActionId);
+        const prompt = userActionStateRef.current.prompts.find(
+          (p) => p.userActionId === userActionId
+        );
+        pendingSubmissionsRef.current.set(userActionId, prompt ? promptSlotKey(prompt) : userActionId);
       } catch (error) {
         if (error instanceof UserActionStaleError) {
           setPromptStatus(userActionId, "stale");
@@ -1429,7 +1467,7 @@ function useChatV2(config, callbacks = {}) {
         throw error;
       }
     },
-    [removePrompt, setPromptStatus]
+    [setPromptStatus]
   );
   const cancelUserAction2 = React.useCallback(
     async (userActionId) => {
@@ -1783,6 +1821,284 @@ function useVoice(config = {}, callbacks = {}) {
     reset
   };
 }
+var DEFAULT_PAGE_SIZE = 20;
+var DEFAULT_MESSAGES_PAGE_SIZE = 100;
+function defaultParseSessions(json) {
+  const body = json;
+  const rows = Array.isArray(body?.data) ? body.data : [];
+  const data = rows.map((row) => ({ ...row, title: row.title ?? row.sessionTitle ?? null }));
+  return { data, total: body?.total };
+}
+function defaultParseMessages(json) {
+  const body = json;
+  return { data: Array.isArray(body?.data) ? body.data : [] };
+}
+function withQuery(path, params) {
+  const qs = Object.entries(params).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`).join("&");
+  if (!qs) return path;
+  return `${path}${path.includes("?") ? "&" : "?"}${qs}`;
+}
+function toFeedbackState(feedback) {
+  const value = feedback?.feedback;
+  if (!value) return null;
+  return value === "POSITIVE" ? "up" : "down";
+}
+function toMessageDisplay(rows, sessionId) {
+  return rows.flatMap((row) => {
+    const timestamp = row.startTime || row.endTime || (/* @__PURE__ */ new Date()).toISOString();
+    const out = [
+      {
+        id: `${row.id}:user`,
+        sessionId,
+        role: "user",
+        content: row.sessionUserIntent,
+        timestamp
+      }
+    ];
+    if (row.agentResponse) {
+      out.push({
+        id: `${row.id}:assistant`,
+        sessionId,
+        role: "assistant",
+        content: row.agentResponse,
+        timestamp: row.endTime || timestamp,
+        executionId: row.id,
+        isError: row.status === "FAILED",
+        feedback: toFeedbackState(row.feedback)
+      });
+    }
+    return out;
+  });
+}
+function useChatSessions({
+  api,
+  sessions,
+  initialSessionId
+}) {
+  const enabled = sessions?.enabled === true;
+  const listEndpoint = sessions?.listEndpoint ?? "/api/conversations/sessions";
+  const messagesEndpointTemplate = sessions?.messagesEndpoint ?? "/api/conversations/sessions/{sessionId}/messages";
+  const pageSize = sessions?.pageSize ?? DEFAULT_PAGE_SIZE;
+  const messagesPageSize = sessions?.messagesPageSize ?? DEFAULT_MESSAGES_PAGE_SIZE;
+  const parseSessionsResponse = sessions?.parseSessionsResponse ?? defaultParseSessions;
+  const parseMessagesResponse = sessions?.parseMessagesResponse ?? defaultParseMessages;
+  const [sessionsList, setSessionsList] = React.useState([]);
+  const [isLoadingList, setIsLoadingList] = React.useState(enabled);
+  const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+  const [listError, setListError] = React.useState(null);
+  const hasLoadedOnceRef = React.useRef(false);
+  const [page, setPage] = React.useState(0);
+  const [total, setTotal] = React.useState(null);
+  const [lastPageFull, setLastPageFull] = React.useState(false);
+  const [selectedSessionId, setSelectedSessionId] = React.useState(
+    initialSessionId ?? null
+  );
+  const [draftSessionId, setDraftSessionId] = React.useState(generateId);
+  const [selectedMessages, setSelectedMessages] = React.useState([]);
+  const [isLoadingMessages, setIsLoadingMessages] = React.useState(
+    enabled && initialSessionId != null
+  );
+  const [messagesError, setMessagesError] = React.useState(null);
+  const [refetchTick, setRefetchTick] = React.useState(0);
+  const baseUrl = (api.baseUrl || "").replace(/\/+$/, "");
+  const apiHeaders = api.headers;
+  const authToken = api.authToken;
+  const headersKey = JSON.stringify(apiHeaders ?? {});
+  const requestHeaders = React.useMemo(() => {
+    const headers = { Accept: "application/json", ...apiHeaders ?? {} };
+    if (authToken && !headers.Authorization) headers.Authorization = `Bearer ${authToken}`;
+    return headers;
+  }, [headersKey, authToken]);
+  const hasMore = total != null ? sessionsList.length < total : lastPageFull;
+  React.useEffect(() => {
+    setPage(0);
+    hasLoadedOnceRef.current = false;
+  }, [enabled, baseUrl, listEndpoint, pageSize, requestHeaders]);
+  React.useEffect(() => {
+    setPage(0);
+  }, [refetchTick]);
+  React.useEffect(() => {
+    if (!enabled) return;
+    const ctrl = new AbortController();
+    const isFirstPage = page === 0;
+    if (isFirstPage && !hasLoadedOnceRef.current) setIsLoadingList(true);
+    else if (!isFirstPage) setIsLoadingMore(true);
+    setListError(null);
+    fetch(withQuery(`${baseUrl}${listEndpoint}`, { page, limit: pageSize }), {
+      method: "GET",
+      headers: requestHeaders,
+      signal: ctrl.signal
+    }).then(async (res) => {
+      if (!res.ok) throw new Error(`Failed to load chats (${res.status})`);
+      return res.json();
+    }).then((json) => {
+      const parsed = parseSessionsResponse(json);
+      setSessionsList((prev) => isFirstPage ? parsed.data : [...prev, ...parsed.data]);
+      setTotal(parsed.total ?? null);
+      setLastPageFull(parsed.data.length >= pageSize);
+      hasLoadedOnceRef.current = true;
+    }).catch((e) => {
+      if (e.name === "AbortError") return;
+      setListError(e instanceof Error ? e.message : "Failed to load chats");
+    }).finally(() => {
+      setIsLoadingList(false);
+      setIsLoadingMore(false);
+    });
+    return () => ctrl.abort();
+  }, [enabled, baseUrl, listEndpoint, pageSize, requestHeaders, refetchTick, page]);
+  React.useEffect(() => {
+    if (!enabled || !selectedSessionId) {
+      setSelectedMessages([]);
+      return;
+    }
+    const ctrl = new AbortController();
+    setIsLoadingMessages(true);
+    setMessagesError(null);
+    const path = messagesEndpointTemplate.replace(
+      "{sessionId}",
+      encodeURIComponent(selectedSessionId)
+    );
+    fetch(withQuery(`${baseUrl}${path}`, { limit: messagesPageSize }), {
+      method: "GET",
+      headers: requestHeaders,
+      signal: ctrl.signal
+    }).then(async (res) => {
+      if (!res.ok) throw new Error(`Failed to load messages (${res.status})`);
+      return res.json();
+    }).then(
+      (json) => setSelectedMessages(
+        toMessageDisplay(parseMessagesResponse(json).data, selectedSessionId)
+      )
+    ).catch((e) => {
+      if (e.name === "AbortError") return;
+      setMessagesError(e instanceof Error ? e.message : "Failed to load messages");
+      setSelectedMessages([]);
+    }).finally(() => setIsLoadingMessages(false));
+    return () => ctrl.abort();
+  }, [enabled, selectedSessionId, baseUrl, messagesEndpointTemplate, messagesPageSize, requestHeaders]);
+  const loadMore = React.useCallback(() => {
+    setPage((prev) => {
+      if (isLoadingList || isLoadingMore || !hasMore) return prev;
+      return prev + 1;
+    });
+  }, [isLoadingList, isLoadingMore, hasMore]);
+  const selectSession = React.useCallback((sessionId) => {
+    setSelectedSessionId(sessionId);
+    setSelectedMessages([]);
+  }, []);
+  const startNewSession = React.useCallback(() => {
+    setSelectedSessionId(null);
+    setDraftSessionId(generateId());
+    setSelectedMessages([]);
+  }, []);
+  const refetch = React.useCallback(() => setRefetchTick((tick) => tick + 1), []);
+  const noteSentMessage = React.useCallback(
+    (text) => {
+      const id = selectedSessionId ?? draftSessionId;
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const trimmed = text.trim();
+      setSessionsList((prev) => {
+        const idx = prev.findIndex((s) => s.sessionId === id);
+        if (idx >= 0) {
+          const existing = prev[idx];
+          const bumped = {
+            ...existing,
+            lastMessageAt: now,
+            messageCount: (existing.messageCount ?? 0) + 1,
+            title: existing.title?.trim() ? existing.title : trimmed
+          };
+          return [bumped, ...prev.slice(0, idx), ...prev.slice(idx + 1)];
+        }
+        const fresh = {
+          sessionId: id,
+          title: trimmed,
+          messageCount: 1,
+          lastMessageAt: now,
+          status: "PROCESSING"
+        };
+        return [fresh, ...prev];
+      });
+    },
+    [selectedSessionId, draftSessionId]
+  );
+  return {
+    enabled,
+    sessionsList,
+    isLoadingList,
+    listError,
+    total,
+    hasMore,
+    isLoadingMore,
+    loadMore,
+    noteSentMessage,
+    selectedSessionId,
+    activeSessionId: selectedSessionId ?? draftSessionId,
+    selectSession,
+    startNewSession,
+    selectedMessages,
+    isLoadingMessages,
+    messagesError,
+    refetch
+  };
+}
+function deriveStatus(enabled, blocked) {
+  if (blocked === true) return "blocked";
+  if (enabled === false) return "disabled";
+  if (enabled === true) return "available";
+  return "unknown";
+}
+function defaultParse(json) {
+  const body = json;
+  return {
+    available: body?.enabled === true && body?.blocked !== true,
+    status: deriveStatus(body?.enabled, body?.blocked),
+    config: body ?? void 0
+  };
+}
+function useAgentConfig({ api, availability }) {
+  const enabled = availability?.enabled === true;
+  const endpoint = availability?.endpoint ?? "/api/agent/config";
+  const parseResponse = availability?.parseResponse ?? defaultParse;
+  const [available, setAvailable] = React.useState(null);
+  const [status, setStatus] = React.useState("unknown");
+  const [config, setConfig] = React.useState(void 0);
+  const [isLoading, setIsLoading] = React.useState(enabled);
+  const [error, setError] = React.useState(null);
+  const [refetchTick, setRefetchTick] = React.useState(0);
+  const baseUrl = (api.baseUrl || "").replace(/\/+$/, "");
+  const apiHeaders = api.headers;
+  const authToken = api.authToken;
+  const requestHeaders = React.useMemo(() => {
+    const headers = { Accept: "application/json", ...apiHeaders ?? {} };
+    if (authToken && !headers.Authorization) headers.Authorization = `Bearer ${authToken}`;
+    return headers;
+  }, [apiHeaders, authToken]);
+  React.useEffect(() => {
+    if (!enabled) return;
+    const ctrl = new AbortController();
+    setIsLoading(true);
+    setError(null);
+    fetch(`${baseUrl}${endpoint}`, {
+      method: "GET",
+      headers: requestHeaders,
+      signal: ctrl.signal
+    }).then(async (res) => {
+      if (!res.ok) throw new Error(`Failed to check availability (${res.status})`);
+      return res.json();
+    }).then((json) => {
+      const parsed = parseResponse(json);
+      setAvailable(parsed.available);
+      setStatus(parsed.status ?? deriveStatus(parsed.available, void 0));
+      setConfig(parsed.config);
+    }).catch((e) => {
+      if (e.name === "AbortError") return;
+      setError(e instanceof Error ? e.message : "Failed to check availability");
+    }).finally(() => setIsLoading(false));
+    return () => ctrl.abort();
+  }, [enabled, baseUrl, endpoint, requestHeaders, refetchTick]);
+  const refetch = React.useCallback(() => setRefetchTick((tick) => tick + 1), []);
+  return { enabled, available, status, config, isLoading, error, refetch };
+}
 function classifyField(field) {
   if (!field) return "text";
   if (Array.isArray(field.oneOf) && field.oneOf.length > 0) return "select";
@@ -3239,11 +3555,10 @@ function UserMessageV2({
             ),
             style: { borderRadius: 9999 },
             children: [
-              toast.tone === "success" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5", style: { color: "#059669" } }) : /* @__PURE__ */ jsxRuntime.jsx(
+              toast.tone === "success" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { style: { width: 14, height: 14, color: "#059669" } }) : /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.AlertCircle,
                 {
-                  className: "h-3.5 w-3.5",
-                  style: { color: "#ef4444" }
+                  style: { width: 14, height: 14, color: "#ef4444" }
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: toast.label })
@@ -3267,8 +3582,13 @@ function UserMessageV2({
           /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.AlertCircle,
             {
-              className: "h-3.5 w-3.5 shrink-0",
-              style: { color: "rgba(239, 68, 68, 0.7)", marginTop: "2px" }
+              style: {
+                width: 14,
+                height: 14,
+                flexShrink: 0,
+                color: "rgba(239, 68, 68, 0.7)",
+                marginTop: "2px"
+              }
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payman-v2-user-msg-error-text", children: resolvedError })
@@ -3286,10 +3606,9 @@ function UserMessageV2({
             children: copied ? /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.Check,
               {
-                className: "h-3.5 w-3.5",
-                style: { color: "#059669" }
+                style: { width: 14, height: 14, color: "#059669" }
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
+            ) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { style: { width: 14, height: 14 } })
           }
         ) }),
         showEditAction && onEdit && /* @__PURE__ */ jsxRuntime.jsx(ActionTooltipV2, { label: "Edit", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3299,7 +3618,7 @@ function UserMessageV2({
             onClick: () => onEdit(message.id),
             className: "payman-v2-user-msg-action-btn",
             "aria-label": "Edit message",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { style: { width: 14, height: 14 } })
           }
         ) }),
         showRetryAction && onRetry && /* @__PURE__ */ jsxRuntime.jsx(ActionTooltipV2, { label: "Retry", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3310,7 +3629,7 @@ function UserMessageV2({
             disabled: retryDisabled,
             className: "payman-v2-user-msg-action-btn",
             "aria-label": "Retry message",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { style: { width: 14, height: 14 } })
           }
         ) })
       ] })
@@ -4109,6 +4428,8 @@ function AssistantMessageV2({
     void 0,
     typingSpeed
   );
+  const displayContentPending = Boolean(rawResponseContent) && !displayContent;
+  const showThinkingBlock = isThinkingStreaming || displayContentPending;
   const stickyLabel = (() => {
     const steps = message.steps;
     if (!steps || steps.length === 0) return void 0;
@@ -4222,14 +4543,12 @@ function AssistantMessageV2({
               toast.tone === "success" ? /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.Check,
                 {
-                  className: "h-3.5 w-3.5",
-                  style: { color: "#059669" }
+                  style: { width: 14, height: 14, color: "#059669" }
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.AlertCircle,
                 {
-                  className: "h-3.5 w-3.5",
-                  style: { color: "#ef4444" }
+                  style: { width: 14, height: 14, color: "#ef4444" }
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: toast.label })
@@ -4243,7 +4562,7 @@ function AssistantMessageV2({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     toastPortal,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-assistant-msg payman-v2-fade-in", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isThinkingStreaming && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showThinkingBlock && /* @__PURE__ */ jsxRuntime.jsx(
         framerMotion.motion.div,
         {
           initial: { opacity: 0, height: 0 },
@@ -4273,6 +4592,10 @@ function AssistantMessageV2({
           isResolvingImages: message.isResolvingImages,
           onImageClick
         }
+      ) : displayContentPending ? (
+        // The intent/status line above is still bridging this
+        // gap (see `showThinkingBlock`) — nothing to add here.
+        null
       ) : !isThinkingStreaming ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-assistant-msg-placeholder", children: "..." }) : null }),
       /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTrailingProgress && /* @__PURE__ */ jsxRuntime.jsx(
         framerMotion.motion.div,
@@ -4393,6 +4716,112 @@ function AssistantMessageV2({
     )
   ] });
 }
+var CHAR_VARIANTS = {
+  fade: {
+    initial: { opacity: 0, scale: 0.7 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.7 },
+    transition: { duration: 0.14, ease: "easeOut" },
+    overflow: "hidden"
+  },
+  blur: {
+    initial: { opacity: 0, filter: "blur(8px)", y: -8 },
+    animate: { opacity: 1, filter: "blur(0px)", y: 0 },
+    exit: { opacity: 0, filter: "blur(8px)", y: 8 },
+    transition: { duration: 0.18, ease: "easeOut" },
+    overflow: "visible"
+  }
+};
+function CharSlot({
+  char,
+  charKey,
+  effect
+}) {
+  if (!/\d/.test(char)) return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block" }, children: char });
+  const v = CHAR_VARIANTS[effect];
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", display: "inline-block", overflow: v.overflow }, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.span,
+    {
+      initial: v.initial,
+      animate: v.animate,
+      exit: v.exit,
+      transition: v.transition,
+      style: { display: "inline-block" },
+      children: char
+    },
+    charKey
+  ) }) });
+}
+function CountUp({
+  to,
+  from = 0,
+  duration = 2,
+  delay = 0,
+  digitEffect = "none",
+  className,
+  startWhen = true,
+  separator = ""
+}) {
+  const ref = React.useRef(null);
+  const motionValue = framerMotion.useMotionValue(from);
+  const damping = 20 + 40 * (1 / duration);
+  const stiffness = 100 * (1 / duration);
+  const springValue = framerMotion.useSpring(motionValue, { damping, stiffness });
+  const isInView = framerMotion.useInView(ref, { once: true, margin: "0px" });
+  const decimals = React.useMemo(() => {
+    const d = (n) => {
+      const s = n.toString();
+      return s.includes(".") ? s.split(".")[1].length : 0;
+    };
+    return Math.max(d(from), d(to));
+  }, [from, to]);
+  const formatValue = React.useCallback(
+    (latest) => {
+      const formatted = Intl.NumberFormat("en-US", {
+        useGrouping: !!separator,
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+      }).format(latest);
+      return separator ? formatted.replace(/,/g, separator) : formatted;
+    },
+    [decimals, separator]
+  );
+  const [chars, setChars] = React.useState(formatValue(from).split(""));
+  React.useEffect(() => {
+    if (isInView && startWhen) {
+      const t = setTimeout(() => motionValue.set(to), delay * 1e3);
+      return () => clearTimeout(t);
+    }
+  }, [isInView, startWhen, motionValue, to, delay]);
+  React.useEffect(() => {
+    const unsub = springValue.on("change", (latest) => {
+      if (digitEffect === "none") {
+        if (ref.current) ref.current.textContent = formatValue(latest);
+      } else {
+        setChars(formatValue(latest).split(""));
+      }
+    });
+    return () => unsub();
+  }, [springValue, formatValue, digitEffect]);
+  if (digitEffect === "none") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn(className), children: formatValue(from) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("inline-flex items-center", className), children: chars.map((char, i) => /* @__PURE__ */ jsxRuntime.jsx(CharSlot, { char, charKey: `${i}-${char}`, effect: digitEffect }, i)) });
+}
+function AnimatedDuration({ seconds, className }) {
+  const total = Math.max(0, seconds);
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("tabular-nums", className), children: [
+    m > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CountUp, { to: m, duration: 0.9, digitEffect: "blur", className: "tabular-nums" }),
+      "m",
+      " "
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CountUp, { to: s, duration: 0.9, digitEffect: "blur", className: "tabular-nums" }),
+    "s"
+  ] });
+}
 var DEFAULT_MAX_LENGTH = 6;
 var MAX_SUPPORTED_LENGTH = 12;
 var AUTO_FOCUS_DELAY_MS = 250;
@@ -4519,7 +4948,6 @@ function VerificationInline({
   React.useEffect(() => {
     if (prompt.subAction === "SubmissionInvalid") {
       setErrored(true);
-      setCode("");
       lastSubmittedRef.current = null;
     }
   }, [prompt.subAction, prompt.userActionId]);
@@ -4598,7 +5026,7 @@ function VerificationInline({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-ua-head", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "payman-v2-ua-icon", size: 15, strokeWidth: 1.75, "aria-hidden": true }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-ua-title", children: "Verification required" }),
-      typeof secondsLeft === "number" && !stale && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-ua-timer", children: expired ? "Expired" : `${secondsLeft}s` })
+      typeof secondsLeft === "number" && !stale && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-ua-timer", children: expired ? "Expired" : /* @__PURE__ */ jsxRuntime.jsx(AnimatedDuration, { seconds: secondsLeft }) })
     ] }),
     renderMarkdown ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-ua-markdown", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRendererV2, { content: description }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payman-v2-ua-desc", children: description }),
     stale ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payman-v2-ua-stale", children: "This request is no longer available." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -4670,6 +5098,228 @@ function VerificationInline({
     ] })
   ] });
 }
+function AmountFieldV2({
+  id,
+  value,
+  onChange,
+  disabled,
+  className,
+  onEnter
+}) {
+  const inputRef = React.useRef(null);
+  const digits = digitsFromValue(value);
+  const display = formatDigits(digits);
+  React.useLayoutEffect(() => {
+    const el = inputRef.current;
+    if (el && document.activeElement === el) {
+      el.setSelectionRange(el.value.length, el.value.length);
+    }
+  }, [display]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: inputRef,
+      id,
+      type: "text",
+      inputMode: "decimal",
+      autoComplete: "off",
+      className,
+      value: display,
+      placeholder: "0.00",
+      disabled,
+      onChange: (e) => {
+        onChange(valueFromDigits(digitsFromDisplay(e.target.value)));
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          onEnter?.();
+        }
+      },
+      onFocus: (e) => {
+        const el = e.currentTarget;
+        requestAnimationFrame(() => el.setSelectionRange(el.value.length, el.value.length));
+      }
+    }
+  );
+}
+function digitsFromDisplay(raw) {
+  return raw.replace(/[^0-9]/g, "").replace(/^0+(?=\d)/, "").slice(-9);
+}
+function digitsFromValue(value) {
+  const num = Number(value);
+  if (!value || !Number.isFinite(num) || num <= 0) return "";
+  return String(Math.round(num * 100));
+}
+function formatDigits(digits) {
+  if (!digits) return "";
+  const padded = digits.padStart(3, "0");
+  const cents = padded.slice(-2);
+  const whole = padded.slice(0, -2).replace(/^0+(?=\d)/, "") || "0";
+  const grouped = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return `${grouped}.${cents}`;
+}
+function valueFromDigits(digits) {
+  if (!digits) return "";
+  return (Number(digits) / 100).toString();
+}
+function findRootClassName(el) {
+  const root = el?.closest(".payman-v2-root");
+  return root instanceof HTMLElement ? root.className : "";
+}
+var MENU_MAX_HEIGHT = 240;
+var OPTION_HEIGHT = 34;
+var VIEWPORT_MARGIN = 8;
+function SelectFieldV2({
+  id,
+  value,
+  options,
+  onChange,
+  disabled,
+  error,
+  placeholder = "Select\u2026"
+}) {
+  const triggerRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const [rect, setRect] = React.useState(null);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const [rootClassName, setRootClassName] = React.useState("");
+  const selected = options.find((o) => o.const === value);
+  React.useLayoutEffect(() => {
+    if (!open) return;
+    const place = () => {
+      const el = triggerRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const viewportH = window.innerHeight;
+      const estimatedMenuH = Math.min(
+        options.length * OPTION_HEIGHT + VIEWPORT_MARGIN,
+        MENU_MAX_HEIGHT
+      );
+      const spaceBelow = viewportH - r.bottom;
+      const spaceAbove = r.top;
+      const openUp = spaceBelow < estimatedMenuH && spaceAbove > spaceBelow;
+      setRect({ top: r.bottom, bottom: viewportH - r.top, left: r.left, width: r.width, openUp });
+      setRootClassName(findRootClassName(el));
+    };
+    place();
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [open, options.length]);
+  React.useEffect(() => {
+    if (!open) return;
+    setActiveIndex(Math.max(0, options.findIndex((o) => o.const === value)));
+    listRef.current?.focus();
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDocDown = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || listRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocDown);
+    return () => document.removeEventListener("mousedown", onDocDown);
+  }, [open]);
+  const commit = (opt) => {
+    onChange(opt.const);
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        id,
+        type: "button",
+        disabled,
+        className: cn("payman-v2-ua-select-trigger", error && "payman-v2-ua-input-error"),
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "payman-v2-ua-select-value",
+                !selected && "payman-v2-ua-select-placeholder"
+              ),
+              children: selected ? selected.title || selected.const : placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14, className: "payman-v2-ua-select-chevron", "aria-hidden": true })
+        ]
+      }
+    ),
+    open && rect && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: listRef,
+          role: "listbox",
+          className: cn(rootClassName, "payman-v2-ua-select-menu"),
+          tabIndex: -1,
+          style: {
+            position: "fixed",
+            left: rect.left,
+            width: rect.width,
+            height: "fit-content",
+            maxHeight: MENU_MAX_HEIGHT,
+            ...rect.openUp ? { bottom: rect.bottom } : { top: rect.top }
+          },
+          onKeyDown: (e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              setActiveIndex((i) => Math.min(options.length - 1, i + 1));
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              setActiveIndex((i) => Math.max(0, i - 1));
+            } else if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              if (activeIndex >= 0) commit(options[activeIndex]);
+            } else if (e.key === "Escape" || e.key === "Tab") {
+              setOpen(false);
+              triggerRef.current?.focus();
+            }
+          },
+          children: options.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "option",
+              "aria-selected": opt.const === value,
+              className: cn(
+                "payman-v2-ua-select-option",
+                i === activeIndex && "payman-v2-ua-select-option-active",
+                opt.const === value && "payman-v2-ua-select-option-selected"
+              ),
+              onMouseEnter: () => setActiveIndex(i),
+              onClick: () => commit(opt),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: opt.title || opt.const }),
+                opt.const === value && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 13, "aria-hidden": true })
+              ]
+            },
+            opt.const
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 function SchemaFormInline({
   prompt,
   secondsLeft,
@@ -4715,7 +5365,7 @@ function SchemaFormInline({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-ua-head", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "payman-v2-ua-icon", size: 14, strokeWidth: 1.75, "aria-hidden": true }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-ua-title", children: "Action required" }),
-      typeof secondsLeft === "number" && !stale && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-ua-timer", children: expired ? "Expired" : `${secondsLeft}s` })
+      typeof secondsLeft === "number" && !stale && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-ua-timer", children: expired ? "Expired" : /* @__PURE__ */ jsxRuntime.jsx(AnimatedDuration, { seconds: secondsLeft }) })
     ] }),
     prompt.message?.trim() && (renderMarkdown ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-ua-markdown", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRendererV2, { content: prompt.message }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payman-v2-ua-desc", children: prompt.message })),
     stale ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payman-v2-ua-stale", children: "This request is no longer available." }) : fields.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-ua-form", children: fields.map(([key, field]) => {
@@ -4747,26 +5397,33 @@ function SchemaFormInline({
           required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-ua-req", children: "*" })
         ] }),
         field.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-ua-hint", children: field.description }),
-        widget === "select" ? /* @__PURE__ */ jsxRuntime.jsxs(
-          "select",
+        widget === "select" ? /* @__PURE__ */ jsxRuntime.jsx(
+          SelectFieldV2,
           {
             id: fieldId,
-            className: cn("payman-v2-ua-input", err && "payman-v2-ua-input-error"),
             value: String(values[key] ?? ""),
+            options: getOptions(field),
             disabled: locked,
-            onChange: (e) => setValue(key, e.target.value),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select\u2026" }),
-              getOptions(field).map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.const, children: opt.title || opt.const }, opt.const))
-            ]
+            error: Boolean(err),
+            onChange: (v) => setValue(key, v)
+          }
+        ) : widget === "decimal" ? /* @__PURE__ */ jsxRuntime.jsx(
+          AmountFieldV2,
+          {
+            id: fieldId,
+            value: String(values[key] ?? ""),
+            disabled: locked,
+            className: cn("payman-v2-ua-input", err && "payman-v2-ua-input-error"),
+            onChange: (v) => setValue(key, v),
+            onEnter: handleSubmit
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             id: fieldId,
-            type: widget === "integer" || widget === "decimal" ? "number" : "text",
-            inputMode: widget === "integer" ? "numeric" : widget === "decimal" ? "decimal" : void 0,
-            step: widget === "decimal" ? "any" : widget === "integer" ? "1" : void 0,
+            type: widget === "integer" ? "number" : "text",
+            inputMode: widget === "integer" ? "numeric" : void 0,
+            step: widget === "integer" ? "1" : void 0,
             className: cn("payman-v2-ua-input", err && "payman-v2-ua-input-error"),
             value: String(values[key] ?? ""),
             disabled: locked,
@@ -4863,12 +5520,16 @@ function UserActionInline({
   onSubmit,
   onCancel,
   onResend,
-  onExpired
+  onExpired,
+  suppressExpiredNote
 }) {
   const [secondsLeft, expired] = useExpiryCountdown(prompt);
   React.useEffect(() => {
     if (expired && prompt.kind !== "notification") onExpired?.();
   }, [expired, onExpired, prompt.kind]);
+  if (expired && prompt.kind !== "notification" && suppressExpiredNote) {
+    return null;
+  }
   let body;
   if (expired && prompt.kind !== "notification") {
     const note = {
@@ -4929,6 +5590,9 @@ function getPromptViewKey(prompt) {
     prompt.message ?? ""
   ].join(PROMPT_KEY_SEPARATOR);
 }
+function getPromptMountKey(prompt) {
+  return [getPromptSlotKey(prompt), prompt.userActionId].join(PROMPT_KEY_SEPARATOR);
+}
 var MessageListV2 = React.forwardRef(
   function MessageListV22({
     messages,
@@ -4940,6 +5604,7 @@ var MessageListV2 = React.forwardRef(
     messageActions,
     retryDisabled = false,
     userActionPrompts,
+    dockedUserActionId,
     notifications,
     onSubmitUserAction,
     onCancelUserAction,
@@ -5048,10 +5713,11 @@ var MessageListV2 = React.forwardRef(
     }, [userActionPrompts]);
     const visibleUserActionPrompts = React.useMemo(
       () => userActionPrompts?.filter((prompt) => {
+        if (prompt.userActionId === dockedUserActionId) return false;
         const promptKey = getPromptViewKey(prompt);
         return !expiredPromptViewState[promptKey]?.hidden;
       }),
-      [expiredPromptViewState, userActionPrompts]
+      [dockedUserActionId, expiredPromptViewState, userActionPrompts]
     );
     const pinToBottom = React.useCallback((behavior = "instant") => {
       const el = scrollRef.current;
@@ -5200,7 +5866,7 @@ var MessageListV2 = React.forwardRef(
                       onResend: onResendUserAction ?? noop,
                       onExpired: () => handleUserActionExpired(promptKey, prompt.userActionId)
                     },
-                    promptKey
+                    getPromptMountKey(prompt)
                   );
                 })
               ]
@@ -5232,6 +5898,62 @@ var MessageListV2 = React.forwardRef(
     ] });
   }
 );
+function IconNewChat({ size = 16, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className, style, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M11.9991 14.25V12M11.9991 12V9.75M11.9991 12H9.74936M11.9991 12H14.2489M20.9983 12C20.9983 13.2938 20.7253 14.5238 20.2338 15.6356L21 20.9991L16.4039 19.85C15.1019 20.5823 13.5993 21 11.9991 21C7.02906 21 3 16.9706 3 12C3 7.02944 7.02906 3 11.9991 3C16.9692 3 20.9983 7.02944 20.9983 12Z",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function IconPlus({ size = 16, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className, style, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M12.0001 4.7998L12 19.1998M19.2 11.9998L4.80005 11.9998",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function IconMic({ size = 18, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className, style, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M2.49292 13.3764C2.82536 15.6606 3.96908 17.7487 5.71484 19.2588C7.4606 20.7688 9.69168 21.5999 11.9999 21.5999C14.3082 21.5999 16.5393 20.7688 18.285 19.2588C20.0308 17.7487 21.1745 15.6606 21.5069 13.3764M12.0013 2.3999C10.9096 2.3999 9.86265 2.83357 9.09072 3.6055C8.31878 4.37744 7.88512 5.4244 7.88512 6.51608V12.0043C7.88512 13.096 8.31878 14.143 9.09072 14.9149C9.86265 15.6868 10.9096 16.1205 12.0013 16.1205C13.093 16.1205 14.1399 15.6868 14.9119 14.9149C15.6838 14.143 16.1175 13.096 16.1175 12.0043V6.51608C16.1175 5.4244 15.6838 4.37744 14.9119 3.6055C14.1399 2.83357 13.093 2.3999 12.0013 2.3999Z",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function IconClock({ size = 12, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 25 24", fill: "none", className, style, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M15.5588 15.1987C16.0827 15.3733 16.649 15.0902 16.8237 14.5662C16.9983 14.0423 16.7152 13.476 16.1912 13.3013L15.5588 15.1987ZM12.5 13.125H11.5C11.5 13.5554 11.7754 13.9376 12.1838 14.0737L12.5 13.125ZM13.5 8.42087C13.5 7.86858 13.0523 7.42087 12.5 7.42087C11.9477 7.42087 11.5 7.86858 11.5 8.42087H13.5ZM16.1912 13.3013L12.8162 12.1763L12.1838 14.0737L15.5588 15.1987L16.1912 13.3013ZM13.5 13.125V8.42087H11.5V13.125H13.5ZM20.5 12C20.5 16.4183 16.9183 20 12.5 20V22C18.0228 22 22.5 17.5228 22.5 12H20.5ZM12.5 20C8.08172 20 4.5 16.4183 4.5 12H2.5C2.5 17.5228 6.97715 22 12.5 22V20ZM4.5 12C4.5 7.58172 8.08172 4 12.5 4V2C6.97715 2 2.5 6.47715 2.5 12H4.5ZM12.5 4C16.9183 4 20.5 7.58172 20.5 12H22.5C22.5 6.47715 18.0228 2 12.5 2V4Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function IconMessage({ size = 12, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className, style, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M8.39917 8.40002H15.5992M8.39917 13.2H12.5992M21.5992 12C21.5992 13.3801 21.308 14.6921 20.7837 15.878L21.601 21.5991L16.6981 20.3734C15.3091 21.1545 13.7062 21.6 11.9992 21.6C6.69724 21.6 2.39917 17.302 2.39917 12C2.39917 6.69809 6.69724 2.40002 11.9992 2.40002C17.3011 2.40002 21.5992 6.69809 21.5992 12Z",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 var ChatInputV2 = React.forwardRef(
   function ChatInputV22({
     onSend,
@@ -5622,12 +6344,7 @@ var ChatInputV2 = React.forwardRef(
                         showActions && "payman-v2-input-attach-btn-active"
                       ),
                       "aria-label": "Attach",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        lucideReact.Plus,
-                        {
-                          style: { width: 20, height: 20, strokeWidth: 2 }
-                        }
-                      )
+                      children: /* @__PURE__ */ jsxRuntime.jsx(IconPlus, { size: 20 })
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showActions && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5710,7 +6427,7 @@ var ChatInputV2 = React.forwardRef(
                       ),
                       "aria-label": isRecording ? "Stop recording" : "Voice input",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { style: { width: 18, height: 18 } }),
+                        /* @__PURE__ */ jsxRuntime.jsx(IconMic, { size: 18 }),
                         isRecording && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-input-mic-indicator" })
                       ]
                     }
@@ -5746,67 +6463,578 @@ var ChatInputV2 = React.forwardRef(
     ] });
   }
 );
-
-// src/assets/thinking-atom.lottie
-var thinking_atom_default = "data:application/zip;base64,UEsDBBQAAAAIAMWrkFzFrMWzUgAAAF4AAAANAAAAbWFuaWZlc3QuanNvbqtWKkstKs7Mz1OyUjJS0lFKT81LLUosyS8C8h1S8kty8ktKMlP14SzdrGIHQz0zPZDaxLzM3MQSoN5iJavoaqXMFKAe38TMPIXgZKApSrWxtQBQSwMEFAAAAAgAxauQXLRghFpXBAAA1RwAABEAAABhL01haW4gU2NlbmUuanNvbu1YWW/jNhD+KwafJVWkqMtPbdEDfdiiQIq+GMZCcei1GvmApLRdGP7v/YYiddqbGNumR4wcomZGHM7B76N0ZLstm7N3Wb6b3a3UTjGHPTw8sLnvsA2bCx/X3811q+qMzY/sAx74stjXda7WeaGqL1alyup9OeNeEnmcnRxWZB9VWbH54sjqj2weOI2bH5+KYibhoirZnONSa0f7AzykGOQYkGP4X2dFpbq13ONx0mTVu6x6bNXZXosf4erI9OLwjwRw7Tv4WWLSP+ALa7I2Rs0RkvkzRhEZQdWz8iHCms48Z54RMEAs2gABkcGRYVFHBqXv8Sh2GBKgRzDNW00SIClag1GzugVNShk5OUd9zxMj4cI/2UhoSdUwVBJpn53EGPMTOd0hh8hAUwuodC1UoVZ1ud+9UjWog+jvb6hIv9D9egxT8aK8kfte5tD5kiTYCfpaqvUPyABb7beH9/57zlUi4zBwE+FnrsyUdDOfC/c+iNVqzVOVKoH06vwLLDsr1Y6q+VZLgX7+dxQDW29SDGmKsVNPr1iLSyB1Bkui0CDGAEdkEmmpeXghQwe/Td0slnRzyDQ5NwdH8L05htXHLGFqIWk0fQ+YPhc9P3+3VpvsoDrSYR9KFNHWpKvWdgfdV998/e3sF2w70Nb35f7pAFNdfn0z49QpNLHDVnqh0FL9IUXU1kG1eZmDO1rYzB06+imrN30/hNG9JmkiPLIVm9flE2ZFuRZoFzf0hIyXzkJfqXcgtLJGCSHyi1SR/URF9pNJYP8b2adeaEwwoqc6AQ2XS+obXTi7bdi6eGmWs8MmXyEN3+UFPaOzQGOdBcQ52BeeDGXqgB3jRNIlirBe7Vs2TYNkXeiGsFtcTS0w3XLPAp8x0MQ86uluEVPse66t9R4ZdbVd88Vw4tNpqTcZIZekEUrFQi/2fAS3hqPIwBMXSIqBp6yqVN1shjHH5NejpvUyOtdZzNyX93lNVfwPn+vGrHjDpiuxSXAvFIHDhSdFRNghvcSPnMQLhKRbo3dbg0bvNgYWsZ4xcz7txuIYrGOfOzz0/JiTUZB4acwdVwiNa43abfVGrbVnMA79fCXG3WGvPdLLlM5nc6czWiBpKFXxq07ptqBOudg7hDI49vRUOAJYuJggZiQDrqFSxA6CMgj2/8PCNqDty6oCjqlViaL8XOb0iC4JjWfU51Xb6CiLunz8CiPop0cnnIb6Ryd7YGpf4bqTUmhPSpSSYXxuSsBtk3ztGkQwPAJS7QevkWdOa2SLNLSn378smfqMTZF0yRzV8Ez4SToNf4i5drmWByfHdk1B5PxGQW+Xgix5jMlhTB5jchlS0CeNOiK74GREQROOGVLQhKFuFHSjoH+CgkSELwM3CrqCgjDJGQoKbhT0pikIH0oE+CAMgOmpF3HAof580grxHaWRdt9opjr9wWUyj6UWHnvSD4yZ1N9pBiIXshuF3Cjktd9izmHo61CIxeSAPpWd/gRQSwECFAAUAAAACADFq5BcxazFs1IAAABeAAAADQAAAAAAAAAAAAAAAAAAAAAAbWFuaWZlc3QuanNvblBLAQIUABQAAAAIAMWrkFy0YIRaVwQAANUcAAARAAAAAAAAAAAAAAAAAH0AAABhL01haW4gU2NlbmUuanNvblBLBQYAAAAAAgACAHoAAAADBQAAAAA=";
-var DEFAULT_SIZE = 36;
-function useElapsedSeconds(isStreaming) {
-  const [elapsed, setElapsed] = React.useState(0);
-  const startRef = React.useRef(null);
-  React.useEffect(() => {
-    if (!isStreaming) {
-      startRef.current = null;
-      setElapsed(0);
-      return;
-    }
-    startRef.current = performance.now();
-    setElapsed(0);
-    const id = setInterval(() => {
-      if (startRef.current == null) return;
-      const secs = Math.floor((performance.now() - startRef.current) / 1e3);
-      setElapsed(secs);
-    }, 100);
-    return () => clearInterval(id);
-  }, [isStreaming]);
-  return elapsed;
+function dockKey(prompt) {
+  return `${prompt.toolCallId || prompt.userActionId}:${prompt.userActionId}`;
 }
-function StreamingIndicatorV2({
-  isStreaming,
-  loadingAnimation
+function UserActionDock({
+  prompt,
+  onSubmit,
+  onCancel,
+  onResend,
+  onExpired,
+  children
 }) {
-  const size = loadingAnimation?.size ?? DEFAULT_SIZE;
-  const elapsed = useElapsedSeconds(isStreaming);
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isStreaming && /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-ua-dock", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { layout: "size", transition: { duration: 0.3, ease: [0.2, 0, 0, 1] }, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: prompt ? /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
-      className: "payman-v2-streaming-indicator",
-      initial: { opacity: 0, y: 4 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: 4 },
-      transition: { duration: 0.2 },
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "payman-v2-streaming-indicator-glyph",
-            style: { width: size, height: size },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              dotlottieReact.DotLottieReact,
-              {
-                src: loadingAnimation?.src ?? thinking_atom_default,
-                loop: true,
-                autoplay: true,
-                style: { width: "100%", height: "100%" }
-              }
-            )
-          }
-        ),
-        elapsed > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-streaming-indicator-elapsed", children: [
-          elapsed,
-          "s"
-        ] })
-      ]
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.15 },
+      className: "payman-v2-ua-dock-panel",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        UserActionInline,
+        {
+          prompt,
+          onSubmit,
+          onCancel,
+          onResend,
+          onExpired: () => onExpired?.(prompt.userActionId),
+          suppressExpiredNote: true
+        }
+      )
+    },
+    dockKey(prompt)
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.15 },
+      children
+    },
+    "composer"
+  ) }) }) });
+}
+function clamp(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function ensureFrameSize(frame, rows, cols) {
+  const result = [];
+  for (let r = 0; r < rows; r++) {
+    const row = frame[r] || [];
+    result.push([]);
+    for (let c = 0; c < cols; c++) {
+      result[r][c] = row[c] ?? 0;
+    }
+  }
+  return result;
+}
+function useAnimation(frames, options) {
+  const [frameIndex, setFrameIndex] = React.useState(0);
+  const [isPlaying, setIsPlaying] = React.useState(options.autoplay);
+  const frameIdRef = React.useRef(void 0);
+  const lastTimeRef = React.useRef(0);
+  const accumulatorRef = React.useRef(0);
+  React.useEffect(() => {
+    if (!frames || frames.length === 0 || !isPlaying) {
+      return;
+    }
+    const frameInterval = 1e3 / options.fps;
+    const animate = (currentTime) => {
+      if (lastTimeRef.current === 0) {
+        lastTimeRef.current = currentTime;
+      }
+      const deltaTime = currentTime - lastTimeRef.current;
+      lastTimeRef.current = currentTime;
+      accumulatorRef.current += deltaTime;
+      if (accumulatorRef.current >= frameInterval) {
+        accumulatorRef.current -= frameInterval;
+        setFrameIndex((prev) => {
+          const next = prev + 1;
+          if (next >= frames.length) {
+            if (options.loop) {
+              options.onFrame?.(0);
+              return 0;
+            } else {
+              setIsPlaying(false);
+              return prev;
+            }
+          }
+          options.onFrame?.(next);
+          return next;
+        });
+      }
+      frameIdRef.current = requestAnimationFrame(animate);
+    };
+    frameIdRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (frameIdRef.current) {
+        cancelAnimationFrame(frameIdRef.current);
+      }
+    };
+  }, [frames, isPlaying, options.fps, options.loop, options.onFrame]);
+  React.useEffect(() => {
+    setFrameIndex(0);
+    setIsPlaying(options.autoplay);
+    lastTimeRef.current = 0;
+    accumulatorRef.current = 0;
+  }, [frames, options.autoplay]);
+  return { frameIndex, isPlaying };
+}
+function emptyFrame(rows, cols) {
+  return Array.from({ length: rows }, () => Array(cols).fill(0));
+}
+function setPixel(frame, row, col, value) {
+  if (row >= 0 && row < frame.length && col >= 0 && col < frame[0].length) {
+    frame[row][col] = value;
+  }
+}
+var loader = (() => {
+  const frames = [];
+  const size = 7;
+  const center = 3;
+  const radius = 2.5;
+  for (let frame = 0; frame < 12; frame++) {
+    const f = emptyFrame(size, size);
+    for (let i = 0; i < 8; i++) {
+      const angle = frame / 12 * Math.PI * 2 + i / 8 * Math.PI * 2;
+      const x = Math.round(center + Math.cos(angle) * radius);
+      const y = Math.round(center + Math.sin(angle) * radius);
+      const brightness = 1 - i / 10;
+      setPixel(f, y, x, Math.max(0.2, brightness));
+    }
+    frames.push(f);
+  }
+  return frames;
+})();
+var pulse = (() => {
+  const frames = [];
+  const size = 7;
+  const center = 3;
+  for (let frame = 0; frame < 16; frame++) {
+    const f = emptyFrame(size, size);
+    const phase = frame / 16 * Math.PI * 2;
+    const intensity = (Math.sin(phase) + 1) / 2;
+    setPixel(f, center, center, 1);
+    const radius = Math.floor((1 - intensity) * 3) + 1;
+    for (let dy = -radius; dy <= radius; dy++) {
+      for (let dx = -radius; dx <= radius; dx++) {
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (Math.abs(dist - radius) < 0.7) {
+          setPixel(f, center + dy, center + dx, intensity * 0.6);
+        }
+      }
+    }
+    frames.push(f);
+  }
+  return frames;
+})();
+function vu(columns, levels) {
+  const rows = 7;
+  const frame = emptyFrame(rows, columns);
+  for (let col = 0; col < Math.min(columns, levels.length); col++) {
+    const level = Math.max(0, Math.min(1, levels[col]));
+    const height = Math.floor(level * rows);
+    for (let row = 0; row < rows; row++) {
+      const rowFromBottom = rows - 1 - row;
+      if (rowFromBottom < height) {
+        let brightness = 1;
+        if (row < rows * 0.3) {
+          brightness = 1;
+        } else if (row < rows * 0.6) {
+          brightness = 0.8;
+        } else {
+          brightness = 0.6;
+        }
+        frame[row][col] = brightness;
+      }
+    }
+  }
+  return frame;
+}
+var wave = (() => {
+  const frames = [];
+  const rows = 7;
+  const cols = 7;
+  for (let frame = 0; frame < 24; frame++) {
+    const f = emptyFrame(rows, cols);
+    const phase = frame / 24 * Math.PI * 2;
+    for (let col = 0; col < cols; col++) {
+      const colPhase = col / cols * Math.PI * 2;
+      const height = Math.sin(phase + colPhase) * 2.5 + 3.5;
+      const row = Math.floor(height);
+      if (row >= 0 && row < rows) {
+        setPixel(f, row, col, 1);
+        const frac = height - row;
+        if (row > 0) setPixel(f, row - 1, col, 1 - frac);
+        if (row < rows - 1) setPixel(f, row + 1, col, frac);
+      }
+    }
+    frames.push(f);
+  }
+  return frames;
+})();
+var snake = (() => {
+  const frames = [];
+  const rows = 7;
+  const cols = 7;
+  const path = [];
+  let x = 0;
+  let y = 0;
+  let dx = 1;
+  let dy = 0;
+  const visited = /* @__PURE__ */ new Set();
+  while (path.length < rows * cols) {
+    path.push([y, x]);
+    visited.add(`${y},${x}`);
+    const nextX = x + dx;
+    const nextY = y + dy;
+    if (nextX >= 0 && nextX < cols && nextY >= 0 && nextY < rows && !visited.has(`${nextY},${nextX}`)) {
+      x = nextX;
+      y = nextY;
+    } else {
+      const newDx = -dy;
+      const newDy = dx;
+      dx = newDx;
+      dy = newDy;
+      const nextX2 = x + dx;
+      const nextY2 = y + dy;
+      if (nextX2 >= 0 && nextX2 < cols && nextY2 >= 0 && nextY2 < rows && !visited.has(`${nextY2},${nextX2}`)) {
+        x = nextX2;
+        y = nextY2;
+      } else {
+        break;
+      }
+    }
+  }
+  const snakeLength = 5;
+  for (let frame = 0; frame < path.length; frame++) {
+    const f = emptyFrame(rows, cols);
+    for (let i = 0; i < snakeLength; i++) {
+      const idx = frame - i;
+      if (idx >= 0 && idx < path.length) {
+        const [y2, x2] = path[idx];
+        const brightness = 1 - i / snakeLength;
+        setPixel(f, y2, x2, brightness);
+      }
+    }
+    frames.push(f);
+  }
+  return frames;
+})();
+var Matrix = React__namespace.forwardRef(
+  ({
+    rows,
+    cols,
+    pattern,
+    frames,
+    fps = 12,
+    autoplay = true,
+    loop = true,
+    size = 10,
+    gap = 2,
+    palette = {
+      on: "currentColor",
+      off: "var(--muted-foreground)"
+    },
+    brightness = 1,
+    ariaLabel,
+    onFrame,
+    mode = "default",
+    levels,
+    className,
+    ...props
+  }, ref) => {
+    const { frameIndex } = useAnimation(frames, {
+      fps,
+      autoplay: autoplay && !pattern,
+      loop,
+      onFrame
+    });
+    const currentFrame = React.useMemo(() => {
+      if (mode === "vu" && levels && levels.length > 0) {
+        return ensureFrameSize(vu(cols, levels), rows, cols);
+      }
+      if (pattern) {
+        return ensureFrameSize(pattern, rows, cols);
+      }
+      if (frames && frames.length > 0) {
+        return ensureFrameSize(frames[frameIndex] || frames[0], rows, cols);
+      }
+      return ensureFrameSize([], rows, cols);
+    }, [pattern, frames, frameIndex, rows, cols, mode, levels]);
+    const cellPositions = React.useMemo(() => {
+      const positions = [];
+      for (let row = 0; row < rows; row++) {
+        positions[row] = [];
+        for (let col = 0; col < cols; col++) {
+          positions[row][col] = {
+            x: col * (size + gap),
+            y: row * (size + gap)
+          };
+        }
+      }
+      return positions;
+    }, [rows, cols, size, gap]);
+    const svgDimensions = React.useMemo(() => {
+      return {
+        width: cols * (size + gap) - gap,
+        height: rows * (size + gap) - gap
+      };
+    }, [rows, cols, size, gap]);
+    const isAnimating = !pattern && frames && frames.length > 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "img",
+        "aria-label": ariaLabel ?? "matrix display",
+        "aria-live": isAnimating ? "polite" : void 0,
+        className: cn("relative inline-block", className),
+        style: {
+          "--matrix-on": palette.on,
+          "--matrix-off": palette.off,
+          "--matrix-gap": `${gap}px`,
+          "--matrix-size": `${size}px`
+        },
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: svgDimensions.width,
+            height: svgDimensions.height,
+            viewBox: `0 0 ${svgDimensions.width} ${svgDimensions.height}`,
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "block",
+            style: { overflow: "visible" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: "matrix-pixel-on", cx: "50%", cy: "50%", r: "50%", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--matrix-on)", stopOpacity: "1" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "stop",
+                    {
+                      offset: "70%",
+                      stopColor: "var(--matrix-on)",
+                      stopOpacity: "0.85"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      stopColor: "var(--matrix-on)",
+                      stopOpacity: "0.6"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: "matrix-pixel-off", cx: "50%", cy: "50%", r: "50%", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: "var(--muted-foreground)",
+                      stopOpacity: "1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      stopColor: "var(--muted-foreground)",
+                      stopOpacity: "0.7"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "filter",
+                  {
+                    id: "matrix-glow",
+                    x: "-50%",
+                    y: "-50%",
+                    width: "200%",
+                    height: "200%",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "2", result: "blur" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in: "SourceGraphic", in2: "blur", operator: "over" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+              .matrix-pixel {
+                transition: opacity 300ms ease-out, transform 150ms ease-out;
+                transform-origin: center;
+                transform-box: fill-box;
+              }
+              .matrix-pixel-active {
+                filter: url(#matrix-glow);
+              }
+            ` }),
+              currentFrame.map(
+                (row, rowIndex) => row.map((value, colIndex) => {
+                  const pos = cellPositions[rowIndex]?.[colIndex];
+                  if (!pos) return null;
+                  const opacity = clamp(brightness * value);
+                  const isActive = opacity > 0.5;
+                  const isOn = opacity > 0.05;
+                  const fill = isOn ? "url(#matrix-pixel-on)" : "url(#matrix-pixel-off)";
+                  const scale = isActive ? 1.1 : 1;
+                  const radius = size / 2 * 0.9;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      className: cn(
+                        "matrix-pixel",
+                        isActive && "matrix-pixel-active",
+                        !isOn && "opacity-20 dark:opacity-[0.1]"
+                      ),
+                      cx: pos.x + size / 2,
+                      cy: pos.y + size / 2,
+                      r: radius,
+                      fill,
+                      opacity: isOn ? opacity : 0.1,
+                      style: {
+                        transform: `scale(${scale})`
+                      }
+                    },
+                    `${rowIndex}-${colIndex}`
+                  );
+                })
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Matrix.displayName = "Matrix";
+var DEFAULT_SIZE = 22;
+var MATRIX_GRID = 7;
+var MATRIX_ON = "var(--payman-v2-matrix-color)";
+var MATRIX_PRESETS = [
+  { frames: loader, fps: 8 },
+  { frames: wave, fps: 14 },
+  { frames: snake, fps: 16 },
+  { frames: pulse, fps: 12 }
+];
+var PRESET_ROTATE_MS = 1e4;
+function useElapsedSeconds(isStreaming) {
+  const [elapsed, setElapsed] = React.useState(0);
+  const startRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!isStreaming) {
+      startRef.current = null;
+      setElapsed(0);
+      return;
+    }
+    startRef.current = performance.now();
+    setElapsed(0);
+    const id = setInterval(() => {
+      if (startRef.current == null) return;
+      const secs = Math.floor((performance.now() - startRef.current) / 1e3);
+      setElapsed(secs);
+    }, 100);
+    return () => clearInterval(id);
+  }, [isStreaming]);
+  return elapsed;
+}
+function useMatrixPresetIndex(isStreaming) {
+  const [index, setIndex] = React.useState(0);
+  React.useEffect(() => {
+    if (!isStreaming) return;
+    setIndex(0);
+    const id = setInterval(() => {
+      setIndex((prev) => (prev + 1) % MATRIX_PRESETS.length);
+    }, PRESET_ROTATE_MS);
+    return () => clearInterval(id);
+  }, [isStreaming]);
+  return index;
+}
+function formatElapsed(totalSeconds) {
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds}s`;
+}
+function StreamingIndicatorV2({
+  isStreaming,
+  loadingAnimation
+}) {
+  const size = loadingAnimation?.size ?? DEFAULT_SIZE;
+  const elapsed = useElapsedSeconds(isStreaming);
+  const presetIndex = useMatrixPresetIndex(isStreaming);
+  const preset = MATRIX_PRESETS[presetIndex];
+  const gap = 1;
+  const cell = React.useMemo(
+    () => Math.max(2, Math.round((size - (MATRIX_GRID - 1) * gap) / MATRIX_GRID)),
+    [size]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isStreaming && /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.div,
+    {
+      className: "payman-v2-streaming-indicator",
+      initial: { opacity: 0, y: 4 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 4 },
+      transition: { duration: 0.2 },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "payman-v2-streaming-indicator-glyph",
+            style: { width: size, height: size },
+            children: loadingAnimation?.src ? (
+              // Consumer override: render their Lottie animation.
+              /* @__PURE__ */ jsxRuntime.jsx(
+                dotlottieReact.DotLottieReact,
+                {
+                  src: loadingAnimation.src,
+                  loop: true,
+                  autoplay: true,
+                  style: { width: "100%", height: "100%" }
+                }
+              )
+            ) : (
+              // Default: dot-matrix glyph, cycling presets +
+              // Payman brand tint. Each preset lives in its own
+              // keyed motion layer so swapping presets crossfades
+              // (old scales/fades out while the new scales/fades
+              // in) instead of hard-cutting. Keying the layer on
+              // `presetIndex` also remounts the Matrix, restarting
+              // its frame counter cleanly at frame 0.
+              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.div,
+                {
+                  className: "payman-v2-streaming-indicator-matrix",
+                  initial: { opacity: 0, scale: 0.8 },
+                  animate: { opacity: 1, scale: 1 },
+                  exit: { opacity: 0, scale: 0.8 },
+                  transition: { duration: 0.45, ease: [0.2, 0, 0, 1] },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Matrix,
+                    {
+                      rows: MATRIX_GRID,
+                      cols: MATRIX_GRID,
+                      frames: preset.frames,
+                      fps: preset.fps,
+                      size: cell,
+                      gap,
+                      palette: {
+                        on: MATRIX_ON,
+                        // Unlit dots use the v2 theme's own muted-text
+                        // token (light/dark-aware), not the bare
+                        // `--muted-foreground` the vendored Matrix
+                        // component falls back to internally — that
+                        // variable isn't defined under `.payman-v2-root`
+                        // and would otherwise resolve to black.
+                        off: "var(--payman-v2-matrix-dot-off)"
+                      },
+                      ariaLabel: "Working\u2026"
+                    }
+                  )
+                },
+                presetIndex
+              ) })
+            )
+          }
+        ),
+        elapsed > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-streaming-indicator-elapsed", children: formatElapsed(elapsed) })
+      ]
     },
     "streaming-indicator"
   ) });
@@ -6181,82 +7409,660 @@ function TimelineBars({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              style: {
-                height: "100%",
-                width: `${Math.max(widthPct, 0.3)}%`,
-                background: stepColor(step2),
-                transition: "width 0.2s ease"
-              }
+              style: {
+                height: "100%",
+                width: `${Math.max(widthPct, 0.3)}%`,
+                background: stepColor(step2),
+                transition: "width 0.2s ease"
+              }
+            }
+          )
+        }
+      )
+    ] }, `${step2.step}-${step2.startTime}`);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    bars,
+    unaccountedMs > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            fontSize: 12,
+            marginBottom: 4,
+            fontFamily: "ui-monospace, SFMono-Regular, monospace",
+            opacity: 0.7
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "(unaccounted)" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatMs(unaccountedMs) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            height: 8,
+            background: "rgba(255,255,255,0.06)",
+            borderRadius: 4,
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { children: [
+            trace.pipelineSteps.length,
+            " step",
+            trace.pipelineSteps.length === 1 ? "" : "s"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace" }, children: [
+            "total: ",
+            formatMs(totalMs)
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var MIN_SIDEBAR_WIDTH = 240;
+var MAX_SIDEBAR_WIDTH = 520;
+var DEFAULT_SIDEBAR_WIDTH = 264;
+var WIDTH_STORAGE_KEY = "payman-v2-sessions-width";
+function readStoredWidth() {
+  if (typeof window === "undefined") return DEFAULT_SIDEBAR_WIDTH;
+  const raw = Number(window.localStorage?.getItem(WIDTH_STORAGE_KEY));
+  if (Number.isFinite(raw) && raw >= MIN_SIDEBAR_WIDTH && raw <= MAX_SIDEBAR_WIDTH) return raw;
+  return DEFAULT_SIDEBAR_WIDTH;
+}
+function formatRelativeTime(iso) {
+  if (!iso) return "";
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  const diffSec = Math.round((Date.now() - date.getTime()) / 1e3);
+  if (diffSec < 60) return "just now";
+  const diffMin = Math.round(diffSec / 60);
+  if (diffMin < 60) return `${diffMin} minute${diffMin === 1 ? "" : "s"} ago`;
+  const diffHr = Math.round(diffMin / 60);
+  if (diffHr < 24) return `${diffHr} hour${diffHr === 1 ? "" : "s"} ago`;
+  const diffDay = Math.round(diffHr / 24);
+  if (diffDay < 7) return `${diffDay} day${diffDay === 1 ? "" : "s"} ago`;
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+function SessionsSidebarV2({
+  open,
+  onClose,
+  title,
+  newChatLabel,
+  sessions,
+  isLoading,
+  error,
+  onRetry,
+  selectedSessionId,
+  onSelectSession,
+  onNewSession,
+  actions,
+  hasMore,
+  isLoadingMore,
+  onLoadMore
+}) {
+  const [width, setWidth] = React.useState(readStoredWidth);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const dragState = React.useRef(null);
+  const onResizeMove = React.useCallback((event) => {
+    if (!dragState.current) return;
+    const delta = event.clientX - dragState.current.startX;
+    const next = Math.min(
+      MAX_SIDEBAR_WIDTH,
+      Math.max(MIN_SIDEBAR_WIDTH, dragState.current.startWidth + delta)
+    );
+    setWidth(next);
+  }, []);
+  const onResizeEnd = React.useCallback(() => {
+    dragState.current = null;
+    setIsResizing(false);
+    document.removeEventListener("mousemove", onResizeMove);
+    document.removeEventListener("mouseup", onResizeEnd);
+    document.body.style.removeProperty("user-select");
+    setWidth((w) => {
+      if (typeof window !== "undefined") window.localStorage?.setItem(WIDTH_STORAGE_KEY, String(w));
+      return w;
+    });
+  }, [onResizeMove]);
+  const onResizeStart = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      dragState.current = { startX: event.clientX, startWidth: width };
+      setIsResizing(true);
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", onResizeMove);
+      document.addEventListener("mouseup", onResizeEnd);
+    },
+    [width, onResizeMove, onResizeEnd]
+  );
+  React.useEffect(
+    () => () => {
+      document.removeEventListener("mousemove", onResizeMove);
+      document.removeEventListener("mouseup", onResizeEnd);
+    },
+    [onResizeMove, onResizeEnd]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "payman-v2-sessions-sidebar",
+        !open && "payman-v2-sessions-sidebar-collapsed",
+        isResizing && "payman-v2-sessions-sidebar-resizing"
+      ),
+      role: "complementary",
+      "aria-label": title,
+      "aria-hidden": !open,
+      style: { "--payman-v2-sessions-width": `${width}px` },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-sessions-sidebar-inner", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-sessions-header", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-sessions-title", children: title }),
+            onClose && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "payman-v2-sessions-close",
+                onClick: onClose,
+                "aria-label": "Close chats panel",
+                tabIndex: open ? 0 : -1,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "payman-v2-sessions-new-btn",
+              onClick: onNewSession,
+              tabIndex: open ? 0 : -1,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconNewChat, { size: 16 }),
+                newChatLabel
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-sessions-divider" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SessionsListBody,
+            {
+              sessions,
+              isLoading,
+              error,
+              onRetry,
+              selectedSessionId,
+              onSelectSession,
+              actions,
+              hasMore,
+              isLoadingMore,
+              onLoadMore
+            }
+          )
+        ] }),
+        open && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "payman-v2-sessions-resizer",
+            onMouseDown: onResizeStart,
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": "Resize chats panel"
+          }
+        )
+      ]
+    }
+  );
+}
+function SessionsListBody({
+  sessions,
+  isLoading,
+  error,
+  onRetry,
+  selectedSessionId,
+  onSelectSession,
+  actions,
+  compact = false,
+  hasMore,
+  isLoadingMore,
+  onLoadMore
+}) {
+  const [openMenuId, setOpenMenuId] = React.useState(null);
+  const listRef = React.useRef(null);
+  const [shadow, setShadow] = React.useState({ top: false, bottom: false });
+  const updateShadow = React.useCallback(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const top = el.scrollTop > 1;
+    const bottom = Math.ceil(el.scrollTop + el.clientHeight) < el.scrollHeight - 1;
+    setShadow((s) => s.top === top && s.bottom === bottom ? s : { top, bottom });
+  }, []);
+  React.useEffect(() => {
+    updateShadow();
+    const el = listRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(updateShadow);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [sessions, isLoading, updateShadow]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "payman-v2-sessions-list-wrap",
+        shadow.top && "payman-v2-scroll-shadow-top",
+        shadow.bottom && "payman-v2-scroll-shadow-bottom"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: listRef,
+          onScroll: updateShadow,
+          className: cn("payman-v2-sessions-list", compact && "payman-v2-sessions-list-compact"),
+          children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SessionsListSkeleton, {}) : error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-sessions-error", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 18 }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }),
+            onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "payman-v2-sessions-retry-btn", onClick: onRetry, children: "Try again" })
+          ] }) : sessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-sessions-empty", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconMessage, { size: 20 }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No chats yet" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            sessions.map((session) => /* @__PURE__ */ jsxRuntime.jsx(
+              SessionRow,
+              {
+                session,
+                isSelected: session.sessionId === selectedSessionId,
+                isMenuOpen: openMenuId === session.sessionId,
+                onSelect: () => onSelectSession(session.sessionId),
+                onToggleMenu: () => setOpenMenuId((id) => id === session.sessionId ? null : session.sessionId),
+                onCloseMenu: () => setOpenMenuId(null),
+                actions
+              },
+              session.sessionId
+            )),
+            hasMore && onLoadMore && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "payman-v2-sessions-load-more-btn",
+                onClick: onLoadMore,
+                disabled: isLoadingMore,
+                children: isLoadingMore ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-spinner payman-v2-spinner-sm" }) : "Load more"
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+function SessionsListSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "payman-v2-sessions-skeleton", children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-sessions-skeleton-row", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "payman-v2-sessions-skeleton-line payman-v2-sessions-skeleton-line-title",
+        style: { animationDelay: `${i * 90}ms`, width: `${60 + i * 13 % 30}%` }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-sessions-skeleton-meta", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "payman-v2-sessions-skeleton-line payman-v2-sessions-skeleton-pill",
+          style: { animationDelay: `${i * 90 + 60}ms` }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "payman-v2-sessions-skeleton-line payman-v2-sessions-skeleton-pill",
+          style: { animationDelay: `${i * 90 + 120}ms` }
+        }
+      )
+    ] })
+  ] }, i)) });
+}
+function SessionRow({
+  session,
+  isSelected,
+  isMenuOpen,
+  onSelect,
+  onToggleMenu,
+  onCloseMenu,
+  actions
+}) {
+  const menuRef = React.useRef(null);
+  const clipRef = React.useRef(null);
+  const textRef = React.useRef(null);
+  const [overflowPx, setOverflowPx] = React.useState(0);
+  const [scrolling, setScrolling] = React.useState(false);
+  React.useEffect(() => {
+    if (!isMenuOpen) return;
+    const handlePointerDown = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        onCloseMenu();
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => document.removeEventListener("mousedown", handlePointerDown);
+  }, [isMenuOpen, onCloseMenu]);
+  React.useEffect(() => {
+    const clip = clipRef.current;
+    const text = textRef.current;
+    if (!clip || !text) return;
+    const measure = () => setOverflowPx(Math.max(0, text.scrollWidth - clip.clientWidth));
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(clip);
+    return () => ro.disconnect();
+  }, [session.title]);
+  const truncated = overflowPx > 2;
+  const messageCount = session.messageCount ?? 0;
+  const title = session.title?.trim() || "New chat";
+  const relativeTime = formatRelativeTime(session.lastMessageAt);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "payman-v2-session-row",
+        isSelected && "payman-v2-session-row-selected"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "payman-v2-session-row-main",
+            onClick: onSelect,
+            title,
+            onMouseEnter: () => truncated && setScrolling(true),
+            onMouseLeave: () => setScrolling(false),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  ref: clipRef,
+                  className: "payman-v2-session-row-title",
+                  "data-truncated": truncated ? "true" : void 0,
+                  "data-scrolling": scrolling ? "true" : void 0,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      ref: textRef,
+                      className: "payman-v2-session-row-title-text",
+                      style: scrolling ? {
+                        // +16 so the last chars clear the right-edge fade mask.
+                        transform: `translateX(-${overflowPx + 16}px)`,
+                        // Constant reading pace (~38px/s), so it moves at the same
+                        // speed from start to end rather than easing in/out.
+                        transitionDuration: `${Math.max(0.9, (overflowPx + 16) / 38)}s`
+                      } : void 0,
+                      children: title
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-session-row-meta", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-session-row-meta-item", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconMessage, { size: 12 }),
+                  messageCount,
+                  " ",
+                  messageCount === 1 ? "message" : "messages"
+                ] }),
+                relativeTime && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-v2-session-row-meta-item", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconClock, { size: 12 }),
+                  relativeTime
+                ] })
+              ] })
+            ]
+          }
+        ),
+        actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-session-row-menu-wrap", ref: menuRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "payman-v2-session-row-menu-btn",
+                isMenuOpen && "payman-v2-session-row-menu-btn-active"
+              ),
+              onClick: onToggleMenu,
+              "aria-label": "Chat options",
+              "aria-expanded": isMenuOpen,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 14 })
+            }
+          ),
+          isMenuOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-session-row-menu", role: "menu", children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: cn(
+                "payman-v2-session-row-menu-item",
+                action.destructive && "payman-v2-session-row-menu-item-destructive"
+              ),
+              onClick: () => {
+                onCloseMenu();
+                void action.onSelect(session);
+              },
+              children: action.label
+            },
+            action.key
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+var CLOSE_DELAY_MS = 150;
+var HOVER_OPEN_DELAY_MS = 500;
+function SessionsPeekPopoverV2({
+  title,
+  newChatLabel,
+  sessions,
+  isLoading,
+  error,
+  onRetry,
+  selectedSessionId,
+  onSelectSession,
+  onNewSession,
+  onExpand,
+  actions
+}) {
+  const [open, setOpen] = React.useState(false);
+  const closeTimerRef = React.useRef(null);
+  const openTimerRef = React.useRef(null);
+  const cancelClose = React.useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  const cancelOpen = React.useCallback(() => {
+    if (openTimerRef.current) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  }, []);
+  const scheduleClose = React.useCallback(() => {
+    cancelOpen();
+    cancelClose();
+    closeTimerRef.current = setTimeout(() => setOpen(false), CLOSE_DELAY_MS);
+  }, [cancelOpen, cancelClose]);
+  const handleEnter = React.useCallback(() => {
+    cancelClose();
+    cancelOpen();
+    openTimerRef.current = setTimeout(() => setOpen(true), HOVER_OPEN_DELAY_MS);
+  }, [cancelClose, cancelOpen]);
+  React.useEffect(
+    () => () => {
+      cancelOpen();
+      cancelClose();
+    },
+    [cancelOpen, cancelClose]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "payman-v2-sessions-peek-anchor",
+      onMouseEnter: handleEnter,
+      onMouseLeave: scheduleClose,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "payman-v2-sessions-reopen-btn",
+            onClick: onExpand,
+            "aria-label": "Show chats",
+            title: "Show chats",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { size: 16 })
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-sessions-peek", role: "dialog", "aria-label": title, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-sessions-peek-header", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-sessions-peek-title", children: title }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "payman-v2-sessions-new-btn payman-v2-sessions-peek-new-btn",
+              onClick: () => {
+                onNewSession();
+                setOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconNewChat, { size: 14 }),
+                newChatLabel
+              ]
             }
-          )
-        }
-      )
-    ] }, `${step2.step}-${step2.startTime}`);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    bars,
-    unaccountedMs > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 8 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            justifyContent: "space-between",
-            fontSize: 12,
-            marginBottom: 4,
-            fontFamily: "ui-monospace, SFMono-Regular, monospace",
-            opacity: 0.7
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "(unaccounted)" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatMs(unaccountedMs) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          style: {
-            height: 8,
-            background: "rgba(255,255,255,0.06)",
-            borderRadius: 4,
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-sessions-divider" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SessionsListBody,
             {
-              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)"
-              }
+              sessions,
+              isLoading,
+              error,
+              onRetry,
+              selectedSessionId,
+              onSelectSession: (sessionId) => {
+                onSelectSession(sessionId);
+                setOpen(false);
+              },
+              actions,
+              compact: true
             }
           )
-        }
-      )
-    ] }),
+        ] })
+      ]
+    }
+  );
+}
+function SessionsBottomSheetV2({
+  title,
+  newChatLabel,
+  sessions,
+  isLoading,
+  error,
+  onRetry,
+  selectedSessionId,
+  onSelectSession,
+  onNewSession,
+  onClose,
+  actions,
+  hasMore,
+  isLoadingMore,
+  onLoadMore
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        className: "payman-v2-sessions-sheet-backdrop",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2 },
+        onClick: onClose
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      framerMotion.motion.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
-        },
+        className: "payman-v2-sessions-sheet",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        initial: { y: "100%" },
+        animate: { y: 0 },
+        exit: { y: "100%" },
+        transition: { type: "spring", damping: 32, stiffness: 320 },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            trace.pipelineSteps.length,
-            " step",
-            trace.pipelineSteps.length === 1 ? "" : "s"
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-sessions-sheet-grabber", "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-sessions-header", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-sessions-title", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "payman-v2-sessions-close",
+                onClick: onClose,
+                "aria-label": "Close chats panel",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace" }, children: [
-            "total: ",
-            formatMs(totalMs)
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "payman-v2-sessions-new-btn", onClick: onNewSession, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconNewChat, { size: 16 }),
+            newChatLabel
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-sessions-divider" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SessionsListBody,
+            {
+              sessions,
+              isLoading,
+              error,
+              onRetry,
+              selectedSessionId,
+              onSelectSession,
+              actions,
+              hasMore,
+              isLoadingMore,
+              onLoadMore
+            }
+          )
         ]
       }
     )
@@ -6356,7 +8162,8 @@ var PaymanChatInner = React.forwardRef(function PaymanChatInner2({
   onLoadMoreMessages,
   isLoadingMoreMessages = false,
   hasMoreMessages = false,
-  chat
+  chat,
+  sessionsPanel
 }, ref) {
   const [inputValue, setInputValue] = React.useState("");
   const prevInputValueRef = React.useRef(inputValue);
@@ -6369,6 +8176,25 @@ var PaymanChatInner = React.forwardRef(function PaymanChatInner2({
   const chatInputV2Ref = React.useRef(null);
   const messageListV2Ref = React.useRef(null);
   const resetToEmptyStateRef = React.useRef(false);
+  const rootRef = React.useRef(null);
+  const [isCompact, setIsCompact] = React.useState(false);
+  React.useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width;
+      if (width != null) setIsCompact(width < COMPACT_BREAKPOINT_PX);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const wasCompactRef = React.useRef(isCompact);
+  React.useEffect(() => {
+    if (isCompact && !wasCompactRef.current && sessionsPanel?.open) {
+      sessionsPanel.onToggle();
+    }
+    wasCompactRef.current = isCompact;
+  }, [isCompact, sessionsPanel]);
   React.useEffect(() => {
     if (config.sentryDsn) {
       initSentryIfNeeded(config.sentryDsn);
@@ -6413,6 +8239,15 @@ var PaymanChatInner = React.forwardRef(function PaymanChatInner2({
   const expireUserAction2 = chat.expireUserAction ?? NOOP_ASYNC;
   const dismissNotification = chat.dismissNotification ?? NOOP;
   const isUserActionSupported = typeof chat.submitUserAction === "function" && typeof chat.cancelUserAction === "function" && typeof chat.resendUserAction === "function";
+  const expiredUserActionIdsRef = React.useRef(/* @__PURE__ */ new Set());
+  const expireUserActionOnce = React.useCallback(
+    (userActionId) => {
+      if (expiredUserActionIdsRef.current.has(userActionId)) return;
+      expiredUserActionIdsRef.current.add(userActionId);
+      void expireUserAction2(userActionId);
+    },
+    [expireUserAction2]
+  );
   const {
     transcribedText,
     isAvailable: voiceAvailable,
@@ -6514,13 +8349,20 @@ var PaymanChatInner = React.forwardRef(function PaymanChatInner2({
     if (isRecording) {
       stopRecording();
     }
-    resetSession();
+    if (sessionsPanel?.onNewSession) {
+      sessionsPanel.onNewSession();
+      if (isCompact && sessionsPanel.open) sessionsPanel.onToggle();
+    } else {
+      resetSession();
+    }
     onResetSession?.();
   }, [
     clearTranscript,
     isRecording,
+    isCompact,
     onResetSession,
     resetSession,
+    sessionsPanel,
     stopRecording
   ]);
   const requestResetSession = React.useCallback(() => {
@@ -6534,8 +8376,9 @@ var PaymanChatInner = React.forwardRef(function PaymanChatInner2({
     clearMessages,
     cancelStream,
     getSessionId,
-    getMessages
-  }), [performResetSession, clearMessages, cancelStream, getSessionId, getMessages]);
+    getMessages,
+    refreshSessions: sessionsPanel?.refetch ?? NOOP
+  }), [performResetSession, clearMessages, cancelStream, getSessionId, getMessages, sessionsPanel?.refetch]);
   const {
     placeholder = "Type your message...",
     emptyStateText = "What can I help with?",
@@ -6655,6 +8498,13 @@ var PaymanChatInner = React.forwardRef(function PaymanChatInner2({
   };
   const userActionPrompts = isUserActionSupported ? userActionState.prompts : void 0;
   const notifications = userActionState.notifications;
+  const dockableUserActionPrompts = userActionPrompts?.filter(
+    (prompt) => prompt.kind !== "notification" && (prompt.status === "pending" || prompt.status === "submitting" || prompt.status === "stale")
+  );
+  const dockedPendingPrompts = dockableUserActionPrompts?.filter(
+    (prompt) => prompt.status === "pending"
+  );
+  const dockedPrompt = dockedPendingPrompts?.[dockedPendingPrompts.length - 1] ?? dockableUserActionPrompts?.[dockableUserActionPrompts.length - 1];
   const handleV2Send = (text) => {
     if (isRecording) stopRecording();
     if (text.trim() && !disableInput && isSessionParamsConfigured) {
@@ -6703,160 +8553,236 @@ var PaymanChatInner = React.forwardRef(function PaymanChatInner2({
   return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref: rootRef,
       className: cn("payman-v2-root", className),
       style,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isEmpty && !hasEverSentMessage ? /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
-          {
-            initial: { opacity: 1 },
-            exit: { opacity: 0 },
-            transition: { duration: 0.3 },
-            className: "payman-v2-chat-layout",
-            style: { justifyContent: "center", alignItems: "center" },
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1, width: "100%" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                MessageList,
-                {
-                  messages,
-                  isLoading: false,
-                  emptyStateText,
-                  showEmptyStateIcon,
-                  emptyStateComponent,
-                  layout,
-                  showTimestamps,
-                  stage: config.stage || "DEVELOPMENT",
-                  animated,
-                  showAgentName,
-                  agentName,
-                  showAvatars,
-                  showUserAvatar,
-                  showAssistantAvatar,
-                  showExecutionSteps,
-                  showStreamingDot,
-                  streamingStepsText,
-                  completedStepsText,
-                  onExecutionTraceClick,
-                  onLoadMoreMessages,
-                  isLoadingMoreMessages,
-                  hasMoreMessages
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.div,
-                {
-                  initial: { opacity: 0, y: 12 },
-                  animate: { opacity: 1, y: 0 },
-                  transition: { delay: 0.2, duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] },
-                  style: { width: "100%" },
-                  children: hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(
-                    ChatInputV2,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-body", children: [
+          sessionsPanel && !isCompact && /* @__PURE__ */ jsxRuntime.jsx(
+            SessionsSidebarV2,
+            {
+              open: sessionsPanel.open,
+              onClose: sessionsPanel.onToggle,
+              title: sessionsPanel.title,
+              newChatLabel: sessionsPanel.newChatLabel,
+              sessions: sessionsPanel.sessionsList,
+              isLoading: sessionsPanel.isLoadingList,
+              error: sessionsPanel.listError,
+              onRetry: sessionsPanel.refetch,
+              selectedSessionId: sessionsPanel.activeSessionId,
+              onSelectSession: sessionsPanel.onSelectSession,
+              onNewSession: requestResetSession,
+              actions: sessionsPanel.actions,
+              hasMore: sessionsPanel.hasMore,
+              isLoadingMore: sessionsPanel.isLoadingMore,
+              onLoadMore: sessionsPanel.onLoadMore
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: sessionsPanel && isCompact && sessionsPanel.open && /* @__PURE__ */ jsxRuntime.jsx(
+            SessionsBottomSheetV2,
+            {
+              title: sessionsPanel.title,
+              newChatLabel: sessionsPanel.newChatLabel,
+              sessions: sessionsPanel.sessionsList,
+              isLoading: sessionsPanel.isLoadingList,
+              error: sessionsPanel.listError,
+              onRetry: sessionsPanel.refetch,
+              selectedSessionId: sessionsPanel.activeSessionId,
+              onSelectSession: (sessionId) => {
+                sessionsPanel.onSelectSession(sessionId);
+                sessionsPanel.onToggle();
+              },
+              onNewSession: requestResetSession,
+              onClose: sessionsPanel.onToggle,
+              actions: sessionsPanel.actions,
+              hasMore: sessionsPanel.hasMore,
+              isLoadingMore: sessionsPanel.isLoadingMore,
+              onLoadMore: sessionsPanel.onLoadMore
+            },
+            "sessions-bottom-sheet"
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-v2-chat-column", children: [
+            sessionsPanel?.isLoadingMessages && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-messages-loading-overlay", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-spinner" }) }),
+            sessionsPanel && !sessionsPanel.open && /* @__PURE__ */ jsxRuntime.jsx(
+              SessionsPeekPopoverV2,
+              {
+                title: sessionsPanel.title,
+                newChatLabel: sessionsPanel.newChatLabel,
+                sessions: sessionsPanel.sessionsList,
+                isLoading: sessionsPanel.isLoadingList,
+                error: sessionsPanel.listError,
+                onRetry: sessionsPanel.refetch,
+                selectedSessionId: sessionsPanel.activeSessionId,
+                onSelectSession: sessionsPanel.onSelectSession,
+                onNewSession: requestResetSession,
+                onExpand: sessionsPanel.onToggle,
+                actions: sessionsPanel.actions
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isEmpty && !hasEverSentMessage ? /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                initial: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: { duration: 0.3 },
+                className: "payman-v2-chat-layout",
+                style: { justifyContent: "center", alignItems: "center" },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1, width: "100%" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    MessageList,
+                    {
+                      messages,
+                      isLoading: false,
+                      emptyStateText,
+                      showEmptyStateIcon,
+                      emptyStateComponent,
+                      layout,
+                      showTimestamps,
+                      stage: config.stage || "DEVELOPMENT",
+                      animated,
+                      showAgentName,
+                      agentName,
+                      showAvatars,
+                      showUserAvatar,
+                      showAssistantAvatar,
+                      showExecutionSteps,
+                      showStreamingDot,
+                      streamingStepsText,
+                      completedStepsText,
+                      onExecutionTraceClick,
+                      onLoadMoreMessages,
+                      isLoadingMoreMessages,
+                      hasMoreMessages
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    framerMotion.motion.div,
+                    {
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      transition: { duration: 0.18 },
+                      style: { width: "100%" },
+                      children: hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(
+                        ChatInputV2,
+                        {
+                          ref: chatInputV2Ref,
+                          onSend: handleV2Send,
+                          onCancel: cancelStream,
+                          disabled: isV2InputDisabled,
+                          isStreaming: isWaitingForResponse,
+                          placeholder: isRecording ? "Listening..." : placeholder,
+                          enableVoice: config.enableVoice === true,
+                          transcribedText: config.enableVoice === true ? transcribedText : "",
+                          voiceAvailable: config.enableVoice === true && voiceAvailable,
+                          isRecording,
+                          onVoicePress: config.enableVoice === true ? handleVoicePress : void 0,
+                          onCancelRecording: handleCancelRecording,
+                          onConfirmRecording: handleConfirmRecording,
+                          showResetSession,
+                          onResetSession: requestResetSession,
+                          showAttachmentButton,
+                          showUploadImageButton,
+                          showAttachFileButton,
+                          onUploadImageClick,
+                          onAttachFileClick,
+                          editingMessageId,
+                          onClearEditing: handleClearEditing,
+                          analysisMode: enableDeepModeToggle ? analysisMode : void 0,
+                          onAnalysisModeChange: enableDeepModeToggle ? setAnalysisMode : void 0,
+                          slashCommands
+                        }
+                      )
+                    }
+                  )
+                ] })
+              },
+              "v2-empty"
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              framerMotion.motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { duration: 0.25 },
+                className: "payman-v2-chat-layout",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    MessageListV2,
+                    {
+                      ref: messageListV2Ref,
+                      messages,
+                      isStreaming: isWaitingForResponse,
+                      onEditUserMessage: handleEditMessageDraft,
+                      onRetryUserMessage: handleRetryUserMessage,
+                      onImageClick: handleImageClick,
+                      onExecutionTraceClick,
+                      messageActions,
+                      retryDisabled: isWaitingForResponse,
+                      typingSpeed: config.typingSpeed ?? 4,
+                      userActionPrompts,
+                      dockedUserActionId: dockedPrompt?.userActionId,
+                      notifications,
+                      onSubmitUserAction: isUserActionSupported ? submitUserAction2 : void 0,
+                      onCancelUserAction: isUserActionSupported ? cancelUserAction2 : void 0,
+                      onResendUserAction: isUserActionSupported ? resendUserAction2 : void 0,
+                      onExpireUserAction: isUserActionSupported ? async (id) => expireUserActionOnce(id) : void 0,
+                      onDismissNotification: dismissNotification,
+                      onSubmitFeedback: handleSubmitFeedback
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    StreamingIndicatorV2,
                     {
-                      ref: chatInputV2Ref,
-                      onSend: handleV2Send,
-                      onCancel: cancelStream,
-                      disabled: isV2InputDisabled,
                       isStreaming: isWaitingForResponse,
-                      placeholder: isRecording ? "Listening..." : placeholder,
-                      enableVoice: config.enableVoice === true,
-                      transcribedText: config.enableVoice === true ? transcribedText : "",
-                      voiceAvailable: config.enableVoice === true && voiceAvailable,
-                      isRecording,
-                      onVoicePress: config.enableVoice === true ? handleVoicePress : void 0,
-                      onCancelRecording: handleCancelRecording,
-                      onConfirmRecording: handleConfirmRecording,
-                      showResetSession,
-                      onResetSession: requestResetSession,
-                      showAttachmentButton,
-                      showUploadImageButton,
-                      showAttachFileButton,
-                      onUploadImageClick,
-                      onAttachFileClick,
-                      editingMessageId,
-                      onClearEditing: handleClearEditing,
-                      analysisMode: enableDeepModeToggle ? analysisMode : void 0,
-                      onAnalysisModeChange: enableDeepModeToggle ? setAnalysisMode : void 0,
-                      slashCommands
+                      loadingAnimation: config.loadingAnimation
+                    }
+                  ),
+                  hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(
+                    UserActionDock,
+                    {
+                      prompt: isUserActionSupported ? dockedPrompt : void 0,
+                      onSubmit: submitUserAction2,
+                      onCancel: cancelUserAction2,
+                      onResend: resendUserAction2,
+                      onExpired: expireUserActionOnce,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        ChatInputV2,
+                        {
+                          ref: chatInputV2Ref,
+                          onSend: handleV2Send,
+                          onCancel: cancelStream,
+                          disabled: isV2InputDisabled,
+                          isStreaming: isWaitingForResponse,
+                          placeholder: isRecording ? "Listening..." : placeholder,
+                          enableVoice: config.enableVoice === true,
+                          transcribedText: config.enableVoice === true ? transcribedText : "",
+                          voiceAvailable: config.enableVoice === true && voiceAvailable,
+                          isRecording,
+                          onVoicePress: config.enableVoice === true ? handleVoicePress : void 0,
+                          onCancelRecording: handleCancelRecording,
+                          onConfirmRecording: handleConfirmRecording,
+                          showResetSession,
+                          onResetSession: requestResetSession,
+                          showAttachmentButton,
+                          showUploadImageButton,
+                          showAttachFileButton,
+                          onUploadImageClick,
+                          onAttachFileClick,
+                          editingMessageId,
+                          onClearEditing: handleClearEditing,
+                          analysisMode: enableDeepModeToggle ? analysisMode : void 0,
+                          onAnalysisModeChange: enableDeepModeToggle ? setAnalysisMode : void 0,
+                          slashCommands
+                        }
+                      )
                     }
                   )
-                }
-              )
-            ] })
-          },
-          "v2-empty"
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(
-          framerMotion.motion.div,
-          {
-            initial: hasEverSentMessage ? { opacity: 0 } : false,
-            animate: { opacity: 1 },
-            transition: { duration: 0.3 },
-            className: "payman-v2-chat-layout",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                MessageListV2,
-                {
-                  ref: messageListV2Ref,
-                  messages,
-                  isStreaming: isWaitingForResponse,
-                  onEditUserMessage: handleEditMessageDraft,
-                  onRetryUserMessage: handleRetryUserMessage,
-                  onImageClick: handleImageClick,
-                  onExecutionTraceClick,
-                  messageActions,
-                  retryDisabled: isWaitingForResponse,
-                  typingSpeed: config.typingSpeed ?? 4,
-                  userActionPrompts,
-                  notifications,
-                  onSubmitUserAction: isUserActionSupported ? submitUserAction2 : void 0,
-                  onCancelUserAction: isUserActionSupported ? cancelUserAction2 : void 0,
-                  onResendUserAction: isUserActionSupported ? resendUserAction2 : void 0,
-                  onExpireUserAction: isUserActionSupported ? expireUserAction2 : void 0,
-                  onDismissNotification: dismissNotification,
-                  onSubmitFeedback: handleSubmitFeedback
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                StreamingIndicatorV2,
-                {
-                  isStreaming: isWaitingForResponse,
-                  loadingAnimation: config.loadingAnimation
-                }
-              ),
-              hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(
-                ChatInputV2,
-                {
-                  ref: chatInputV2Ref,
-                  onSend: handleV2Send,
-                  onCancel: cancelStream,
-                  disabled: isV2InputDisabled,
-                  isStreaming: isWaitingForResponse,
-                  placeholder: isRecording ? "Listening..." : placeholder,
-                  enableVoice: config.enableVoice === true,
-                  transcribedText: config.enableVoice === true ? transcribedText : "",
-                  voiceAvailable: config.enableVoice === true && voiceAvailable,
-                  isRecording,
-                  onVoicePress: config.enableVoice === true ? handleVoicePress : void 0,
-                  onCancelRecording: handleCancelRecording,
-                  onConfirmRecording: handleConfirmRecording,
-                  showResetSession,
-                  onResetSession: requestResetSession,
-                  showAttachmentButton,
-                  showUploadImageButton,
-                  showAttachFileButton,
-                  onUploadImageClick,
-                  onAttachFileClick,
-                  editingMessageId,
-                  onClearEditing: handleClearEditing,
-                  analysisMode: enableDeepModeToggle ? analysisMode : void 0,
-                  onAnalysisModeChange: enableDeepModeToggle ? setAnalysisMode : void 0,
-                  slashCommands
-                }
-              )
-            ]
-          },
-          "v2-chat"
-        ) }),
+                ]
+              },
+              "v2-chat"
+            ) })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           ImageLightboxV2,
           {
@@ -6887,13 +8813,162 @@ var PaymanChatInner = React.forwardRef(function PaymanChatInner2({
     }
   ) });
 });
-var PaymanChat = React.forwardRef(
-  function PaymanChat2(props, ref) {
+var PaymanChatWithChat = React.forwardRef(
+  function PaymanChatWithChat2(props, ref) {
     const mergedCallbacks = useSentryChatCallbacks(props.callbacks, props.config);
     const chat = useChatV2(props.config, mergedCallbacks);
     return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatInner, { ...props, chat, ref });
   }
 );
+function AvailabilityNotice({ message }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground text-sm", children: message }) }) });
+}
+var DEFAULT_AGENT_DISABLED_MESSAGE = "Chat is currently unavailable. Please try again later.";
+var DEFAULT_USER_BLOCKED_MESSAGE = "Chat isn't available for your account right now.";
+var COMPACT_BREAKPOINT_PX = 640;
+var PaymanChat = React.forwardRef(
+  function PaymanChat2(props, ref) {
+    const { config } = props;
+    const sessionsConfig = config.sessions;
+    const availabilityData = useAgentConfig({
+      api: config.api,
+      availability: config.availability
+    });
+    const agentUnavailable = availabilityData.enabled && availabilityData.available === false;
+    const availabilityStatus = availabilityData.status;
+    const availabilityGateOpen = !availabilityData.enabled || availabilityData.available === true || availabilityData.available === null && !availabilityData.isLoading;
+    const gatedSessionsConfig = React.useMemo(
+      () => sessionsConfig ? {
+        ...sessionsConfig,
+        enabled: sessionsConfig.enabled === true && availabilityGateOpen
+      } : sessionsConfig,
+      [sessionsConfig, availabilityGateOpen]
+    );
+    const sessionsData = useChatSessions({
+      api: config.api,
+      sessions: gatedSessionsConfig,
+      initialSessionId: config.initialSessionId
+    });
+    const [sidebarOpen, setSidebarOpen] = React.useState(
+      sessionsConfig?.defaultOpen !== false
+    );
+    const toggleSidebar = React.useCallback(() => setSidebarOpen((open) => !open), []);
+    const effectiveConfig = React.useMemo(() => {
+      if (!sessionsData.enabled) return config;
+      return {
+        ...config,
+        initialSessionId: sessionsData.activeSessionId,
+        initialMessages: sessionsData.selectedMessages,
+        autoGenerateSessionId: false,
+        // Scope the message store per active session. The base userId alone
+        // is shared across every session, so its chatStore entry would leak
+        // the previous chat's messages into a newly-selected or brand-new
+        // session (getStoredOrInitialMessages prefers the store over
+        // initialMessages). Per-session keys give each chat a clean slate.
+        userId: config.userId ? `${config.userId}::${sessionsData.activeSessionId}` : void 0
+      };
+    }, [
+      config,
+      sessionsData.enabled,
+      sessionsData.activeSessionId,
+      sessionsData.selectedMessages
+    ]);
+    const sessionsPanel = React.useMemo(() => {
+      if (!sessionsData.enabled) return void 0;
+      return {
+        open: sidebarOpen,
+        onToggle: toggleSidebar,
+        title: sessionsConfig?.title ?? "Chats",
+        newChatLabel: sessionsConfig?.newChatLabel ?? "Start New Chat",
+        sessionsList: sessionsData.sessionsList,
+        isLoadingList: sessionsData.isLoadingList,
+        listError: sessionsData.listError,
+        activeSessionId: sessionsData.activeSessionId,
+        onSelectSession: sessionsData.selectSession,
+        onNewSession: sessionsData.startNewSession,
+        actions: sessionsConfig?.actions,
+        refetch: sessionsData.refetch,
+        hasMore: sessionsData.hasMore,
+        isLoadingMore: sessionsData.isLoadingMore,
+        onLoadMore: sessionsData.loadMore,
+        isLoadingMessages: sessionsData.isLoadingMessages
+      };
+    }, [
+      sessionsData.enabled,
+      sessionsData.sessionsList,
+      sessionsData.isLoadingList,
+      sessionsData.listError,
+      sessionsData.activeSessionId,
+      sessionsData.selectSession,
+      sessionsData.startNewSession,
+      sessionsData.refetch,
+      sessionsData.hasMore,
+      sessionsData.isLoadingMore,
+      sessionsData.loadMore,
+      sessionsData.isLoadingMessages,
+      sidebarOpen,
+      toggleSidebar,
+      sessionsConfig?.title,
+      sessionsConfig?.newChatLabel,
+      sessionsConfig?.actions
+    ]);
+    const callbacksWithSessionsRefresh = React.useMemo(() => {
+      if (!sessionsData.enabled) return props.callbacks;
+      return {
+        ...props.callbacks,
+        // Reflect the message in the sidebar the instant it's sent, before
+        // the server round-trip — the refetch below reconciles on complete.
+        onMessageSent: (message) => {
+          props.callbacks?.onMessageSent?.(message);
+          sessionsData.noteSentMessage(message);
+        },
+        onStreamComplete: (message) => {
+          props.callbacks?.onStreamComplete?.(message);
+          sessionsData.refetch();
+        }
+      };
+    }, [sessionsData.enabled, props.callbacks, sessionsData.refetch, sessionsData.noteSentMessage]);
+    const availabilityPending = availabilityData.enabled && availabilityData.isLoading && availabilityData.available === null;
+    if (availabilityPending) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("bg-background overflow-hidden flex flex-col flex-[4]", props.className),
+          style: props.style,
+          children: [
+            props.children,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-v2-chat-loading", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-v2-spinner" }) })
+          ]
+        }
+      );
+    }
+    if (agentUnavailable) {
+      const disabledBody = availabilityStatus === "blocked" ? config.availability?.blockedComponent ?? /* @__PURE__ */ jsxRuntime.jsx(AvailabilityNotice, { message: DEFAULT_USER_BLOCKED_MESSAGE }) : config.availability?.disabledComponent ?? /* @__PURE__ */ jsxRuntime.jsx(AvailabilityNotice, { message: DEFAULT_AGENT_DISABLED_MESSAGE });
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("bg-background overflow-hidden flex flex-col flex-[4]", props.className),
+          style: props.style,
+          children: [
+            props.children,
+            disabledBody
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PaymanChatWithChat,
+      {
+        ...props,
+        config: effectiveConfig,
+        callbacks: callbacksWithSessionsRefresh,
+        sessionsPanel,
+        ref
+      },
+      sessionsData.enabled ? sessionsData.activeSessionId : void 0
+    );
+  }
+);
 
 exports.PaymanChat = PaymanChat;
 exports.PaymanChatContext = PaymanChatContext;
@@ -6904,6 +8979,7 @@ exports.cn = cn;
 exports.formatDate = formatDate;
 exports.resendUserAction = resendUserAction;
 exports.submitUserAction = submitUserAction;
+exports.useAgentConfig = useAgentConfig;
 exports.useChatV2 = useChatV2;
 exports.usePaymanChat = usePaymanChat;
 exports.useVoice = useVoice;