@ottocode/web-sdk 0.1.295 → 0.1.296

package/dist/components/index.js

@@ -1336,6 +1336,8 @@ import {
   getSessionQueue as apiGetSessionQueue,
   removeFromQueue as apiRemoveFromQueue,
   retryMessage as apiRetryMessage,
+  createSessionHandoff as apiCreateSessionHandoff,
+  sendQueuedMessageNow as apiSendQueuedMessageNow,
   buildSessionStreamUrl
 } from "@ottocode/api";
 
@@ -1482,7 +1484,8 @@ function convertSession(apiSession) {
     title: apiSession.title ?? null,
     createdAt: typeof apiSession.createdAt === "string" ? new Date(apiSession.createdAt).getTime() : apiSession.createdAt,
     lastActiveAt: typeof apiSession.lastActiveAt === "string" ? new Date(apiSession.lastActiveAt).getTime() : apiSession.lastActiveAt,
-    lastViewedAt: typeof apiSession.lastViewedAt === "string" ? new Date(apiSession.lastViewedAt).getTime() : apiSession.lastViewedAt
+    lastViewedAt: typeof apiSession.lastViewedAt === "string" ? new Date(apiSession.lastViewedAt).getTime() : apiSession.lastViewedAt,
+    pinnedAt: typeof apiSession.pinnedAt === "string" ? new Date(apiSession.pinnedAt).getTime() : apiSession.pinnedAt
   };
 }
 function convertMessage(apiMessage) {
@@ -1545,10 +1548,10 @@ var sessionsMixin = {
     return response.data;
   },
   async createHandoff(sessionId) {
-    const response = await fetch(`${getBaseUrl()}/v1/sessions/${encodeURIComponent(sessionId)}/handoff`, { method: "POST" });
-    const data = await response.json().catch(() => null);
-    if (!response.ok)
-      throw new Error(extractErrorMessage(data));
+    const response = await apiCreateSessionHandoff({ path: { sessionId } });
+    if (response.error)
+      throw new Error(extractErrorMessage(response.error));
+    const data = response.data;
     if (!data?.session || !data?.sessionId) {
       throw new Error("No data returned from handoff");
     }
@@ -1560,14 +1563,18 @@ var sessionsMixin = {
     };
   },
   async abortSession(sessionId) {
-    const response = await apiAbortSession({ path: { sessionId } });
+    const response = await apiAbortSession({
+      path: { sessionId },
+      body: {}
+    });
     if (response.error)
       throw new Error(extractErrorMessage(response.error));
     return response.data;
   },
   async abortMessage(sessionId, _messageId) {
     const response = await apiAbortSession({
-      path: { sessionId }
+      path: { sessionId },
+      body: {}
     });
     if (response.error)
       throw new Error("Failed to abort message");
@@ -1588,11 +1595,12 @@ var sessionsMixin = {
     return response.data;
   },
   async sendQueuedMessageNow(sessionId, messageId) {
-    const response = await fetch(`${getBaseUrl()}/v1/sessions/${encodeURIComponent(sessionId)}/queue/${encodeURIComponent(messageId)}/send-now`, { method: "POST" });
-    const data = await response.json().catch(() => null);
-    if (!response.ok)
-      throw new Error(extractErrorMessage(data));
-    return data;
+    const response = await apiSendQueuedMessageNow({
+      path: { sessionId, messageId }
+    });
+    if (response.error)
+      throw new Error(extractErrorMessage(response.error));
+    return response.data;
   },
   async getMessages(sessionId) {
     const response = await apiListMessages({ path: { id: sessionId } });
@@ -2430,32 +2438,36 @@ var dictationMixin = {
 };
 
 // src/lib/api-client/secure-input.ts
+import {
+  listPendingSecureInputs as apiListPendingSecureInputs,
+  resolveSecureInput as apiResolveSecureInput
+} from "@ottocode/api";
 var secureInputMixin = {
   async submitSecureInput(sessionId, promptId, value) {
-    const response = await fetch(`${getBaseUrl()}/v1/sessions/${encodeURIComponent(sessionId)}/secure-input`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ promptId, value })
+    const response = await apiResolveSecureInput({
+      path: { id: sessionId },
+      body: { promptId, value }
     });
-    if (!response.ok)
+    if (response.error)
       throw new Error("Failed to submit secure input");
-    return response.json();
+    return response.data;
   },
   async cancelSecureInput(sessionId, promptId) {
-    const response = await fetch(`${getBaseUrl()}/v1/sessions/${encodeURIComponent(sessionId)}/secure-input`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ promptId, cancelled: true })
+    const response = await apiResolveSecureInput({
+      path: { id: sessionId },
+      body: { promptId, cancelled: true }
     });
-    if (!response.ok)
+    if (response.error)
       throw new Error("Failed to cancel secure input");
-    return response.json();
+    return response.data;
   },
   async getPendingSecureInputs(sessionId) {
-    const response = await fetch(`${getBaseUrl()}/v1/sessions/${encodeURIComponent(sessionId)}/secure-input/pending`);
-    if (!response.ok)
+    const response = await apiListPendingSecureInputs({
+      path: { id: sessionId }
+    });
+    if (response.error)
       throw new Error("Failed to get pending secure inputs");
-    return response.json();
+    return response.data;
   }
 };
 
@@ -5989,6 +6001,32 @@ function useUpdateSession(sessionId) {
     }
   });
 }
+function useSetSessionPinned() {
+  const queryClient = useQueryClient3();
+  return useMutation3({
+    mutationFn: ({
+      sessionId,
+      isPinned
+    }) => apiClient.updateSession(sessionId, { isPinned }),
+    onSuccess: async (updatedSession) => {
+      queryClient.setQueryData(sessionsQueryKey, (old) => {
+        if (!old)
+          return old;
+        return {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            items: page.items.map((session) => session.id === updatedSession.id ? { ...session, ...updatedSession } : session)
+          }))
+        };
+      });
+      await queryClient.invalidateQueries({ queryKey: sessionsQueryKey });
+      await queryClient.invalidateQueries({
+        queryKey: ["session", updatedSession.id]
+      });
+    }
+  });
+}
 function useMarkSessionViewed() {
   const queryClient = useQueryClient3();
   return useMutation3({
@@ -8149,6 +8187,7 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect15
 } from "react";
+import { uploadAttachment } from "@ottocode/api";
 var IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 var PDF_TYPES = ["application/pdf"];
 var TEXT_TYPES = [
@@ -8253,19 +8292,16 @@ async function fileToPreview(file) {
   });
 }
 async function uploadOriginalFile(file, sessionId) {
-  const form = new FormData;
-  form.set("file", file);
-  if (sessionId)
-    form.set("sessionId", sessionId);
-  const response = await fetch(`${getBaseUrl()}/v1/attachments`, {
-    method: "POST",
-    body: form
+  const response = await uploadAttachment({
+    body: {
+      file,
+      ...sessionId ? { sessionId } : {}
+    }
   });
-  const data = await response.json().catch(() => null);
-  if (!response.ok) {
-    throw new Error(extractErrorMessage(data));
+  if (response.error) {
+    throw new Error(extractErrorMessage(response.error));
   }
-  return data;
+  return response.data;
 }
 function useFileUpload(options = {}) {
   const {
@@ -10115,13 +10151,28 @@ var NewSessionLanding = memo11(forwardRef9(function NewSessionLanding2({ onSessi
   });
 }));
 // src/components/messages/MessageThread.tsx
-import { useEffect as useEffect31, useRef as useRef20, useState as useState37, useMemo as useMemo20, memo as memo19, useCallback as useCallback23 } from "react";
+import {
+  useEffect as useEffect32,
+  useRef as useRef20,
+  useState as useState37,
+  useMemo as useMemo20,
+  memo as memo19,
+  useCallback as useCallback23,
+  useLayoutEffect as useLayoutEffect4
+} from "react";
 import { ArrowDown } from "lucide-react";
 import { useQueryClient as useQueryClient12 } from "@tanstack/react-query";
+import { Virtuoso } from "react-virtuoso";
 
 // src/components/messages/AssistantMessageGroup.tsx
 import { AnimatePresence, motion as motion2 } from "motion/react";
-import { memo as memo14, useState as useState32, useCallback as useCallback19, useMemo as useMemo16 } from "react";
+import {
+  memo as memo14,
+  useState as useState32,
+  useCallback as useCallback19,
+  useMemo as useMemo16,
+  useEffect as useEffect27
+} from "react";
 import {
   Sparkles as Sparkles4,
   GitBranch as GitBranch5,
@@ -16701,6 +16752,7 @@ function CompactActivityGroup({
   const summaryText = [summaryTitle, ...summary.details].join(" · ");
   const hasReasoning = entries.some((e) => e.toolName === "reasoning");
   const lastEntry = entries.length > 0 ? entries[entries.length - 1] : null;
+  const shouldRenderLiveEntries = !showSummary;
   useEffect25(() => {
     if (!collapsed) {
       setLatched(false);
@@ -16839,7 +16891,7 @@ function CompactActivityGroup({
                   onMouseLeave: () => {
                     hoveredRef.current = false;
                   },
-                  children: /* @__PURE__ */ jsx70("div", {
+                  children: shouldRenderLiveEntries && /* @__PURE__ */ jsx70("div", {
                     ref: contentMeasureRef,
                     className: "pt-2.5",
                     children: entries.map((entry, i) => {
@@ -17665,7 +17717,7 @@ function BranchModal({
 }
 
 // src/components/messages/AssistantMessageGroup.tsx
-import { jsx as jsx73, jsxs as jsxs62, Fragment as Fragment32 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs62, Fragment as Fragment33 } from "react/jsx-runtime";
 var loadingMessages = [
   "Generating...",
   "Cooking up something...",
@@ -17685,9 +17737,106 @@ var STATUS_LINE_TOOL_NAMES = new Set([
   "update_status",
   "update_todos"
 ]);
+var AUTO_COMPACT_COMPLETED_PART_THRESHOLD = 60;
+var PART_WINDOW_RENDER_THRESHOLD = 90;
+var PART_WINDOW_HEAD_COUNT = 20;
+var PART_WINDOW_TAIL_COUNT = 48;
 function isStatusLineTool(toolName) {
   return STATUS_LINE_TOOL_NAMES.has(toolName || "");
 }
+function compareMessageParts(a, b) {
+  const indexDiff = (a.index ?? 0) - (b.index ?? 0);
+  if (indexDiff !== 0)
+    return indexDiff;
+  const stepDiff = (a.stepIndex ?? 0) - (b.stepIndex ?? 0);
+  if (stepDiff !== 0)
+    return stepDiff;
+  return (a.startedAt ?? 0) - (b.startedAt ?? 0);
+}
+function areMessagePartsOrdered(parts) {
+  for (let index = 1;index < parts.length; index++) {
+    if (compareMessageParts(parts[index - 1], parts[index]) > 0) {
+      return false;
+    }
+  }
+  return true;
+}
+function getVisibleRenderItems(renderItems, showAllParts, messageStatus) {
+  if (showAllParts || messageStatus === "pending" || renderItems.length <= PART_WINDOW_RENDER_THRESHOLD) {
+    return {
+      visibleRenderItems: renderItems.map((item, renderIndex) => ({
+        item,
+        renderIndex
+      })),
+      omittedRenderItemCount: 0
+    };
+  }
+  const tailStart = Math.max(PART_WINDOW_HEAD_COUNT, renderItems.length - PART_WINDOW_TAIL_COUNT);
+  const visibleRenderItems = [];
+  for (let renderIndex = 0;renderIndex < PART_WINDOW_HEAD_COUNT; renderIndex++) {
+    const item = renderItems[renderIndex];
+    if (item)
+      visibleRenderItems.push({ item, renderIndex });
+  }
+  for (let renderIndex = tailStart;renderIndex < renderItems.length; renderIndex++) {
+    const item = renderItems[renderIndex];
+    if (item)
+      visibleRenderItems.push({ item, renderIndex });
+  }
+  return {
+    visibleRenderItems,
+    omittedRenderItemCount: Math.max(0, tailStart - PART_WINDOW_HEAD_COUNT)
+  };
+}
+function getRenderItemKey(item) {
+  return item.kind === "group" ? item.id : item.part.id;
+}
+function HiddenAssistantStepsRow({
+  count,
+  onShowAll,
+  compact
+}) {
+  const isCompactThread = useIsCompactThread();
+  const isCompact = Boolean(compact || isCompactThread);
+  return /* @__PURE__ */ jsxs62("div", {
+    className: `flex ${isCompact ? "gap-1.5" : "gap-3"} pb-1.5 relative max-w-full overflow-hidden`,
+    children: [
+      /* @__PURE__ */ jsx73("div", {
+        className: `flex-shrink-0 ${isCompact ? "w-4" : "w-6"} flex items-start justify-center relative`,
+        children: /* @__PURE__ */ jsx73("div", {
+          className: "absolute left-1/2 top-0 bottom-[-0.375rem] -translate-x-1/2 w-[2px] bg-border z-0",
+          "aria-hidden": "true"
+        })
+      }),
+      /* @__PURE__ */ jsx73("div", {
+        className: "flex-1 min-w-0",
+        children: /* @__PURE__ */ jsxs62("button", {
+          type: "button",
+          onClick: onShowAll,
+          className: "inline-flex max-w-full items-center gap-1.5 py-0.5 text-xs text-muted-foreground/75 transition-colors hover:text-foreground",
+          title: `Show ${count} hidden assistant steps`,
+          children: [
+            /* @__PURE__ */ jsx73("span", {
+              className: "text-muted-foreground/45",
+              children: "⋯"
+            }),
+            /* @__PURE__ */ jsxs62("span", {
+              className: "truncate leading-5",
+              children: [
+                count,
+                " earlier assistant steps collapsed"
+              ]
+            }),
+            /* @__PURE__ */ jsx73("span", {
+              className: "text-foreground/80 underline decoration-border underline-offset-2",
+              children: "Show"
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
 var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
   sessionId,
   message,
@@ -17698,14 +17847,22 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
   showBranchButton = true,
   onNavigateToSession,
   onRetry,
-  onCompact
+  onCompact,
+  isThreadScrolling = false
 }) {
   const { isQueued } = useMessageQueuePosition(sessionId, message.id);
   const isCompactDensity = useIsCompactThread();
   const isCompactThread = Boolean(compact || isCompactDensity);
   const [isHovered, setIsHovered] = useState32(false);
+  const effectiveHovered = isHovered && !isThreadScrolling;
   const [showBranchModal, setShowBranchModal] = useState32(false);
   const [copied, setCopied] = useState32(false);
+  const [showAllParts, setShowAllParts] = useState32(false);
+  useEffect27(() => {
+    if (!message.id)
+      return;
+    setShowAllParts(false);
+  }, [message.id]);
   const { pendingApprovals, removePendingApproval } = useToolApprovalStore();
   const handleApprove = useCallback19(async (callId) => {
     if (!sessionId)
@@ -17744,16 +17901,10 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
   }, [sessionId, messagePendingApprovals, removePendingApproval]);
   const parts = useMemo16(() => {
     const rawParts = message.parts || [];
-    return [...rawParts].sort((a, b) => {
-      const indexDiff = (a.index ?? 0) - (b.index ?? 0);
-      if (indexDiff !== 0)
-        return indexDiff;
-      const stepDiff = (a.stepIndex ?? 0) - (b.stepIndex ?? 0);
-      if (stepDiff !== 0)
-        return stepDiff;
-      return (a.startedAt ?? 0) - (b.startedAt ?? 0);
-    });
+    return areMessagePartsOrdered(rawParts) ? rawParts : [...rawParts].sort(compareMessageParts);
   }, [message.parts]);
+  const autoCompactActivity = message.status !== "pending" && parts.length >= AUTO_COMPACT_COMPLETED_PART_THRESHOLD;
+  const shouldCompactActivity = Boolean(compact || autoCompactActivity);
   const hasFinish = parts.some((part) => part.toolName === "finish");
   const latestProgressUpdateIndex = parts.reduce((lastIndex, part, index) => part.type === "tool_result" && part.toolName === "progress_update" ? index : lastIndex, -1);
   const latestProgressUpdatePart = latestProgressUpdateIndex >= 0 ? parts[latestProgressUpdateIndex] : null;
@@ -17826,7 +17977,7 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
         flushCompactBuffer();
         continue;
       }
-      if (compact && isCompactActivityPart(part)) {
+      if (shouldCompactActivity && isCompactActivityPart(part)) {
         if (compactBuffer.length === 0) {
           bufferStartIndex = index;
         }
@@ -17838,7 +17989,8 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
     }
     flushCompactBuffer();
     return items;
-  }, [parts, compact]);
+  }, [parts, shouldCompactActivity]);
+  const { visibleRenderItems, omittedRenderItemCount } = useMemo16(() => getVisibleRenderItems(renderItems, showAllParts, message.status), [renderItems, showAllParts, message.status]);
   const hasVisibleNonProgressParts = renderItems.length > 0;
   const firstVisiblePartIndex = parts.findIndex((part) => !isStatusLineTool(part.toolName));
   const shouldShowStatusLineToolCall = message.status === "pending" && !hasFinish && Boolean(latestStatusLineToolCallPart);
@@ -17878,12 +18030,67 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
     exit: { opacity: 0, y: -6, filter: "blur(2px)" },
     transition: { duration: 0.16, ease: "easeOut" }
   };
+  const renderAssistantRenderItem = (item, renderIndex) => {
+    const hasFollowingContent = renderIndex < renderItems.length - 1 || hasNextAssistantMessage || shouldShowStatusLineToolCall || shouldShowProgressUpdate || shouldShowLoadingFallback;
+    if (item.kind === "group") {
+      return /* @__PURE__ */ jsx73(CompactActivityGroup, {
+        entries: item.entries,
+        titleOverride: item.titleOverride,
+        showLine: hasFollowingContent,
+        collapsed: message.status !== "pending" || renderIndex < renderItems.length - 1,
+        compact: compact || autoCompactActivity
+      });
+    }
+    const { part, index } = item;
+    const isLastPart = index === parts.length - 1;
+    const isActionTool = part.ephemeral && (part.type === "tool_call" || part.type === "tool_result") && [
+      "shell",
+      "bash",
+      "edit",
+      "multiedit",
+      "write",
+      "copy_into",
+      "apply_patch",
+      "terminal"
+    ].includes(part.toolName || "");
+    if (isActionTool) {
+      return /* @__PURE__ */ jsx73(ActionToolBox, {
+        part,
+        showLine: hasFollowingContent,
+        compact
+      });
+    }
+    const pendingApproval = part.type === "tool_call" && part.toolCallId ? pendingApprovals.find((a) => a.callId === part.toolCallId) ?? null : null;
+    if (part.type === "tool_result" && part.toolCallId && liveActionToolCallIds.has(part.toolCallId)) {
+      return null;
+    }
+    const isFinishTool = part.type === "tool_result" && part.toolName === "finish";
+    const showLine = hasFollowingContent && !isFinishTool;
+    const isLastToolCall = part.type === "tool_call" && isLastPart;
+    return /* @__PURE__ */ jsx73(MessagePartItem, {
+      part,
+      showLine,
+      isFirstPart: index === firstVisiblePartIndex && !showHeader,
+      isLastToolCall,
+      onNavigateToSession,
+      compact,
+      pendingApproval,
+      onApprove: handleApprove,
+      onReject: handleReject,
+      sessionId,
+      onRetry,
+      onCompact
+    });
+  };
   if (isQueued) {
     return null;
   }
   return /* @__PURE__ */ jsxs62("div", {
     className: "relative group",
-    onMouseEnter: () => setIsHovered(true),
+    onMouseEnter: () => {
+      if (!isThreadScrolling)
+        setIsHovered(true);
+    },
     onMouseLeave: () => setIsHovered(false),
     children: [
       showHeader && /* @__PURE__ */ jsxs62("div", {
@@ -17906,7 +18113,7 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
                     title: message.agent,
                     children: message.agent
                   }),
-                  message.provider && /* @__PURE__ */ jsxs62(Fragment32, {
+                  message.provider && /* @__PURE__ */ jsxs62(Fragment33, {
                     children: [
                       message.agent && /* @__PURE__ */ jsx73("span", {
                         className: "text-muted-foreground/50",
@@ -17919,7 +18126,7 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
                       })
                     ]
                   }),
-                  message.model && /* @__PURE__ */ jsxs62(Fragment32, {
+                  message.model && /* @__PURE__ */ jsxs62(Fragment33, {
                     children: [
                       /* @__PURE__ */ jsx73("span", {
                         className: "hidden md:inline text-muted-foreground/50",
@@ -17932,7 +18139,7 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
                       })
                     ]
                   }),
-                  message.createdAt && /* @__PURE__ */ jsxs62(Fragment32, {
+                  message.createdAt && /* @__PURE__ */ jsxs62(Fragment33, {
                     children: [
                       /* @__PURE__ */ jsx73("span", {
                         className: "text-muted-foreground/50",
@@ -17948,7 +18155,7 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
               })
             ]
           }),
-          isHovered && isComplete && sessionId && showBranchButton && /* @__PURE__ */ jsx73("button", {
+          effectiveHovered && isComplete && sessionId && showBranchButton && /* @__PURE__ */ jsx73("button", {
             type: "button",
             onClick: handleBranchClick,
             className: "ml-4 p-1.5 text-muted-foreground hover:text-primary transition-colors flex-shrink-0",
@@ -17962,57 +18169,18 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
       /* @__PURE__ */ jsxs62("div", {
         className: "relative ml-1",
         children: [
-          renderItems.map((item, renderIndex) => {
-            const hasFollowingContent = renderIndex < renderItems.length - 1 || hasNextAssistantMessage || shouldShowStatusLineToolCall || shouldShowProgressUpdate || shouldShowLoadingFallback;
-            if (item.kind === "group") {
-              return /* @__PURE__ */ jsx73(CompactActivityGroup, {
-                entries: item.entries,
-                titleOverride: item.titleOverride,
-                showLine: hasFollowingContent,
-                collapsed: message.status !== "pending" || renderIndex < renderItems.length - 1,
-                compact
-              }, item.id);
-            }
-            const { part, index } = item;
-            const isLastPart = index === parts.length - 1;
-            const isActionTool = part.ephemeral && (part.type === "tool_call" || part.type === "tool_result") && [
-              "shell",
-              "bash",
-              "edit",
-              "multiedit",
-              "write",
-              "copy_into",
-              "apply_patch",
-              "terminal"
-            ].includes(part.toolName || "");
-            if (isActionTool) {
-              return /* @__PURE__ */ jsx73(ActionToolBox, {
-                part,
-                showLine: hasFollowingContent,
-                compact
-              }, part.id);
-            }
-            const pendingApproval = part.type === "tool_call" && part.toolCallId ? pendingApprovals.find((a) => a.callId === part.toolCallId) ?? null : null;
-            if (part.type === "tool_result" && part.toolCallId && liveActionToolCallIds.has(part.toolCallId)) {
-              return null;
-            }
-            const isFinishTool = part.type === "tool_result" && part.toolName === "finish";
-            const showLine = hasFollowingContent && !isFinishTool;
-            const isLastToolCall = part.type === "tool_call" && isLastPart;
-            return /* @__PURE__ */ jsx73(MessagePartItem, {
-              part,
-              showLine,
-              isFirstPart: index === firstVisiblePartIndex && !showHeader,
-              isLastToolCall,
-              onNavigateToSession,
-              compact,
-              pendingApproval,
-              onApprove: handleApprove,
-              onReject: handleReject,
-              sessionId,
-              onRetry,
-              onCompact
-            }, part.id);
+          visibleRenderItems.map(({ item, renderIndex }, visibleIndex) => {
+            const showPartWindowGap = omittedRenderItemCount > 0 && visibleIndex === PART_WINDOW_HEAD_COUNT;
+            return /* @__PURE__ */ jsxs62(Fragment33, {
+              children: [
+                showPartWindowGap && /* @__PURE__ */ jsx73(HiddenAssistantStepsRow, {
+                  count: omittedRenderItemCount,
+                  onShowAll: () => setShowAllParts(true),
+                  compact
+                }),
+                renderAssistantRenderItem(item, renderIndex)
+              ]
+            }, getRenderItemKey(item));
           }),
           messagePendingApprovals.length > 1 && /* @__PURE__ */ jsxs62("div", {
             className: "flex items-center gap-3 py-2 px-3 my-2 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg",
@@ -18106,7 +18274,7 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
       }),
       isComplete && sessionId && /* @__PURE__ */ jsx73("div", {
         className: "grid ml-7 transition-[grid-template-rows] duration-200 ease-out",
-        style: { gridTemplateRows: isHovered ? "1fr" : "0fr" },
+        style: { gridTemplateRows: effectiveHovered ? "1fr" : "0fr" },
         children: /* @__PURE__ */ jsx73("div", {
           className: "overflow-hidden",
           children: /* @__PURE__ */ jsxs62("div", {
@@ -18127,14 +18295,14 @@ var AssistantMessageGroup = memo14(function AssistantMessageGroup2({
                 type: "button",
                 onClick: handleCopy,
                 className: "flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded transition-colors",
-                children: copied ? /* @__PURE__ */ jsxs62(Fragment32, {
+                children: copied ? /* @__PURE__ */ jsxs62(Fragment33, {
                   children: [
                     /* @__PURE__ */ jsx73(Check10, {
                       className: "h-3 w-3 text-green-500"
                     }),
                     "Copied"
                   ]
-                }) : /* @__PURE__ */ jsxs62(Fragment32, {
+                }) : /* @__PURE__ */ jsxs62(Fragment33, {
                   children: [
                     /* @__PURE__ */ jsx73(Copy2, {
                       className: "h-3 w-3"
@@ -18202,7 +18370,7 @@ function linkifyExplicitSkillMentions(content, skills) {
 }
 
 // src/components/messages/UserMessageGroup.tsx
-import { jsx as jsx74, jsxs as jsxs63, Fragment as Fragment33 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs63, Fragment as Fragment34 } from "react/jsx-runtime";
 var UserMessageGroup = memo15(function UserMessageGroup2({
   sessionId,
   message,
@@ -18307,7 +18475,7 @@ var UserMessageGroup = memo15(function UserMessageGroup2({
       console.error("Failed to delete queued message:", err);
     }
   };
-  return /* @__PURE__ */ jsxs63(Fragment33, {
+  return /* @__PURE__ */ jsxs63(Fragment34, {
     children: [
       /* @__PURE__ */ jsx74("div", {
         className: "relative pb-8 pt-6",
@@ -18324,7 +18492,7 @@ var UserMessageGroup = memo15(function UserMessageGroup2({
                       className: "font-medium text-emerald-700 dark:text-emerald-300 whitespace-nowrap",
                       children: "You"
                     }),
-                    message.createdAt && /* @__PURE__ */ jsxs63(Fragment33, {
+                    message.createdAt && /* @__PURE__ */ jsxs63(Fragment34, {
                       children: [
                         /* @__PURE__ */ jsx74("span", {
                           className: "text-muted-foreground/50",
@@ -18336,7 +18504,7 @@ var UserMessageGroup = memo15(function UserMessageGroup2({
                         })
                       ]
                     }),
-                    isQueued && /* @__PURE__ */ jsxs63(Fragment33, {
+                    isQueued && /* @__PURE__ */ jsxs63(Fragment34, {
                       children: [
                         /* @__PURE__ */ jsx74("span", {
                           className: "text-muted-foreground/50",
@@ -18545,10 +18713,10 @@ import {
 } from "lucide-react";
 
 // src/hooks/useContainerWidth.ts
-import { useEffect as useEffect27, useState as useState34 } from "react";
+import { useEffect as useEffect28, useState as useState34 } from "react";
 function useContainerWidth(ref) {
   const [width, setWidth] = useState34(0);
-  useEffect27(() => {
+  useEffect28(() => {
     const el = ref.current;
     if (!el)
       return;
@@ -18582,7 +18750,7 @@ function ToolActivityToggle({
 }
 
 // src/components/sessions/EditableTitle.tsx
-import { useState as useState35, useRef as useRef16, useEffect as useEffect28, useCallback as useCallback20 } from "react";
+import { useState as useState35, useRef as useRef16, useEffect as useEffect29, useCallback as useCallback20 } from "react";
 import { Pencil as Pencil2 } from "lucide-react";
 import { jsx as jsx76, jsxs as jsxs64 } from "react/jsx-runtime";
 function EditableTitle({
@@ -18594,13 +18762,13 @@ function EditableTitle({
   const [draft, setDraft] = useState35(title || "");
   const inputRef = useRef16(null);
   const { mutate: updateSession } = useUpdateSession(sessionId);
-  useEffect28(() => {
+  useEffect29(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
     }
   }, [isEditing]);
-  useEffect28(() => {
+  useEffect29(() => {
     setDraft(title || "");
   }, [title]);
   const save = useCallback20(() => {
@@ -18648,7 +18816,7 @@ function EditableTitle({
 }
 
 // src/components/sessions/SessionHeader.tsx
-import { jsx as jsx77, jsxs as jsxs65, Fragment as Fragment34 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs65, Fragment as Fragment35 } from "react/jsx-runtime";
 function SessionHeader({
   session,
   isGenerating,
@@ -18732,7 +18900,7 @@ function SessionHeader({
               className: "text-violet-600 dark:text-violet-400 font-medium",
               children: "Branch"
             }),
-            parentSession && /* @__PURE__ */ jsxs65(Fragment34, {
+            parentSession && /* @__PURE__ */ jsxs65(Fragment35, {
               children: [
                 /* @__PURE__ */ jsx77("span", {
                   className: "text-muted-foreground",
@@ -19163,7 +19331,7 @@ var UsageModal = memo17(function UsageModal2() {
 });
 
 // src/hooks/useProviderUsage.ts
-import { useEffect as useEffect29, useCallback as useCallback21, useRef as useRef18 } from "react";
+import { useEffect as useEffect30, useCallback as useCallback21, useRef as useRef18 } from "react";
 var POLL_INTERVAL = 60000;
 var STALE_THRESHOLD = 60000;
 var inflight = new Set;
@@ -19196,12 +19364,12 @@ function useProviderUsage(provider, authType) {
   }, [provider, isOAuthProvider, setUsage, setLoading, setLastFetched]);
   const fetchRef = useRef18(fetchUsage);
   fetchRef.current = fetchUsage;
-  useEffect29(() => {
+  useEffect30(() => {
     if (!provider || !isOAuthProvider)
       return;
     fetchRef.current();
   }, [isOAuthProvider, provider]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (!provider || !isOAuthProvider || !isModalOpen || modalProvider !== provider) {
       return;
     }
@@ -19217,7 +19385,7 @@ function useProviderUsage(provider, authType) {
 }
 
 // src/hooks/useOttoRouterBalance.ts
-import { useEffect as useEffect30, useCallback as useCallback22 } from "react";
+import { useEffect as useEffect31, useCallback as useCallback22 } from "react";
 function useOttoRouterBalance(providerName) {
   const setBalance = useOttoRouterStore((s) => s.setBalance);
   const setUsdcBalance = useOttoRouterStore((s) => s.setUsdcBalance);
@@ -19294,7 +19462,7 @@ function useOttoRouterBalance(providerName) {
     setUsage
   ]);
   const needsUsageWindows = subscription?.active && !subscription.usageWindows;
-  useEffect30(() => {
+  useEffect31(() => {
     if (providerName === "ottorouter" && (balance === null || usdcBalance === null || needsUsageWindows)) {
       fetchBalance();
     }
@@ -19305,7 +19473,7 @@ function useOttoRouterBalance(providerName) {
 }
 
 // src/components/sessions/LeanHeader.tsx
-import { jsx as jsx80, jsxs as jsxs68, Fragment as Fragment35 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs68, Fragment as Fragment36 } from "react/jsx-runtime";
 function LeanHeader({
   session,
   isVisible,
@@ -19364,7 +19532,7 @@ function LeanHeader({
   const rootRef = useRef19(null);
   const width = useContainerWidth(rootRef);
   const isCompact = width > 0 && width < 640;
-  return /* @__PURE__ */ jsxs68(Fragment35, {
+  return /* @__PURE__ */ jsxs68(Fragment36, {
     children: [
       /* @__PURE__ */ jsx80("div", {
         ref: rootRef,
@@ -19404,7 +19572,7 @@ function LeanHeader({
                     })
                   ]
                 }),
-                isBranch && parentSession && /* @__PURE__ */ jsxs68(Fragment35, {
+                isBranch && parentSession && /* @__PURE__ */ jsxs68(Fragment36, {
                   children: [
                     !isCompact && /* @__PURE__ */ jsx80("span", {
                       className: "text-muted-foreground",
@@ -19681,6 +19849,8 @@ var TODO_TOOL_NAMES = new Set([
   "UpdateTodos",
   "UpdatePlan"
 ]);
+var TODO_SNAPSHOT_SCAN_MESSAGE_LIMIT = 12;
+var TODO_SNAPSHOT_SCAN_PART_LIMIT = 500;
 function parseToolResultContent(part) {
   if (part.contentJson && typeof part.contentJson === "object") {
     return part.contentJson;
@@ -19761,7 +19931,8 @@ function findLatestTodoSnapshot(messages, queuedMessageIds) {
       hasNewerUserMessage = true;
     }
     const parts = message?.parts ?? [];
-    for (let partIndex = parts.length - 1;partIndex >= 0; partIndex--) {
+    const firstPartIndex = Math.max(0, parts.length - TODO_SNAPSHOT_SCAN_PART_LIMIT);
+    for (let partIndex = parts.length - 1;partIndex >= firstPartIndex; partIndex--) {
       const part = parts[partIndex];
       if (part.type !== "tool_result")
         continue;
@@ -19781,6 +19952,136 @@ function findLatestTodoSnapshot(messages, queuedMessageIds) {
   }
   return null;
 }
+function getTodoSnapshotScanWindow(messages) {
+  if (messages.length <= TODO_SNAPSHOT_SCAN_MESSAGE_LIMIT)
+    return messages;
+  return messages.slice(-TODO_SNAPSHOT_SCAN_MESSAGE_LIMIT);
+}
+function isVisibleThreadMessage(message) {
+  return message.role !== "system" && !(message.role === "assistant" && message.status === "complete" && (message.parts?.length ?? 0) === 0);
+}
+function isPendingEmptyAssistant(message, currentMessageId) {
+  return message.role === "assistant" && message.status === "pending" && (message.parts?.length ?? 0) === 0 && message.id !== currentMessageId;
+}
+function isActiveAssistantMessage(message, currentMessageId, queuedMessageIds) {
+  return message.role === "assistant" && (message.id === currentMessageId || message.status === "pending" && !queuedMessageIds.has(message.id));
+}
+function filterThreadMessages(messages, currentMessageId, queueLength, queuedMessageIds) {
+  const visibleMessages = messages.filter(isVisibleThreadMessage);
+  const queueBusy = Boolean(currentMessageId) || queueLength > 0;
+  if (!queueBusy)
+    return visibleMessages;
+  const nextAssistantByIndex = new Array(visibleMessages.length);
+  let nextAssistant;
+  for (let index = visibleMessages.length - 1;index >= 0; index--) {
+    nextAssistantByIndex[index] = nextAssistant;
+    const message = visibleMessages[index];
+    if (message?.role === "assistant") {
+      nextAssistant = message;
+    }
+  }
+  const hasEarlierActiveAssistantByIndex = new Array(visibleMessages.length);
+  let hasEarlierActiveAssistant = false;
+  for (let index = 0;index < visibleMessages.length; index++) {
+    hasEarlierActiveAssistantByIndex[index] = hasEarlierActiveAssistant;
+    const message = visibleMessages[index];
+    if (message && isActiveAssistantMessage(message, currentMessageId, queuedMessageIds)) {
+      hasEarlierActiveAssistant = true;
+    }
+  }
+  return visibleMessages.filter((message, index) => {
+    if (message.role === "assistant") {
+      return !isPendingEmptyAssistant(message, currentMessageId);
+    }
+    if (message.role !== "user")
+      return true;
+    const nextAssistant2 = nextAssistantByIndex[index];
+    if (nextAssistant2) {
+      const nextAssistantIsQueued = queuedMessageIds.has(nextAssistant2.id) || isPendingEmptyAssistant(nextAssistant2, currentMessageId);
+      return !nextAssistantIsQueued;
+    }
+    return !hasEarlierActiveAssistantByIndex[index];
+  });
+}
+var ThreadMessageRow = memo19(function ThreadMessageRow2({
+  sessionId,
+  message,
+  previousMessage,
+  nextMessage,
+  isFirst,
+  isLastMessage,
+  currentMessageId,
+  queueLength,
+  compact,
+  isThreadScrolling,
+  onSelectSession,
+  createRetryHandler,
+  onCompact
+}) {
+  const nextAssistantMessage = nextMessage && nextMessage.role === "assistant" ? nextMessage : undefined;
+  const hasQueuedOrRunningLaterTurn = Boolean(currentMessageId && currentMessageId !== message.id);
+  const canRetryTurn = message.role === "assistant" && isLastMessage && !hasQueuedOrRunningLaterTurn && queueLength === 0;
+  const retryHandler = useMemo20(() => canRetryTurn ? createRetryHandler(message.id) : undefined, [canRetryTurn, createRetryHandler, message.id]);
+  if (message.role === "user") {
+    return /* @__PURE__ */ jsx82(UserMessageGroup, {
+      sessionId,
+      message,
+      isFirst,
+      nextAssistantMessageId: nextAssistantMessage?.id
+    });
+  }
+  if (message.role === "assistant") {
+    const showHeader = !previousMessage || previousMessage.role !== "assistant";
+    const nextIsAssistant = Boolean(nextAssistantMessage);
+    return /* @__PURE__ */ jsx82(AssistantMessageGroup, {
+      sessionId,
+      message,
+      showHeader,
+      hasNextAssistantMessage: nextIsAssistant,
+      isLastMessage,
+      onBranchCreated: onSelectSession,
+      onNavigateToSession: onSelectSession,
+      onRetry: retryHandler,
+      compact,
+      onCompact: isLastMessage ? onCompact : undefined,
+      isThreadScrolling
+    });
+  }
+  return null;
+});
+function ThreadVirtuosoHeader({ context }) {
+  return /* @__PURE__ */ jsx82("div", {
+    ref: context.sessionHeaderRef,
+    children: context.session && /* @__PURE__ */ jsx82(SessionHeader, {
+      session: context.session,
+      isGenerating: context.isGenerating,
+      onNavigateToSession: context.onSelectSession
+    })
+  });
+}
+function ThreadVirtuosoFooter({ context }) {
+  return /* @__PURE__ */ jsx82("div", {
+    className: context.footerBottomPaddingClass,
+    children: context.showTopupApproval && context.pendingTopup && /* @__PURE__ */ jsx82("div", {
+      className: context.rowOuterClass,
+      children: /* @__PURE__ */ jsx82("div", {
+        className: context.contentWidthClass,
+        children: /* @__PURE__ */ jsx82("div", {
+          className: "py-4",
+          children: /* @__PURE__ */ jsx82(TopupApprovalCard, {
+            pendingTopup: context.pendingTopup,
+            onMethodSelected: () => context.clearPendingTopup(),
+            onCancel: () => context.clearPendingTopup()
+          })
+        })
+      })
+    })
+  });
+}
+var THREAD_VIRTUOSO_COMPONENTS = {
+  Header: ThreadVirtuosoHeader,
+  Footer: ThreadVirtuosoFooter
+};
 var MessageThread = memo19(function MessageThread2({
   messages,
   session,
@@ -19792,21 +20093,21 @@ var MessageThread = memo19(function MessageThread2({
 }) {
   const queryClient = useQueryClient12();
   const { preferences } = usePreferences();
-  const bottomRef = useRef20(null);
+  const virtuosoRef = useRef20(null);
   const scrollContainerRef = useRef20(null);
   const sessionHeaderRef = useRef20(null);
   const threadRootRef = useRef20(null);
   const threadWidth = useContainerWidth(threadRootRef);
   const density = threadWidth > 0 && threadWidth < 640 ? "compact" : "normal";
   const [autoScroll, setAutoScroll] = useState37(true);
+  const [isThreadScrolling, setIsThreadScrolling] = useState37(false);
   const autoScrollRef = useRef20(true);
   const [showLeanHeader, setShowLeanHeader] = useState37(false);
   const userScrollingRef = useRef20(false);
   const userScrollTimeoutRef = useRef20(undefined);
-  const targetScrollRef = useRef20(0);
   const animationFrameRef = useRef20(undefined);
   const initialScrollDoneRef = useRef20(false);
-  const lastSessionIdRef = useRef20(session?.id);
+  const lastSessionIdRef = useRef20(sessionId);
   const prevMessagesLengthRef = useRef20(messages.length);
   const prevIsGeneratingRef = useRef20(isGenerating);
   const lastScrollHeightRef = useRef20(0);
@@ -19817,18 +20118,29 @@ var MessageThread = memo19(function MessageThread2({
   const queueState = useQueueState(sessionId);
   const queuedMessageIds = useMemo20(() => new Set(queueState.queuedMessages.map((item) => item.messageId)), [queueState.queuedMessages]);
   const showTopupApproval = pendingTopup && pendingTopup.sessionId === sessionId;
-  useEffect31(() => {
+  const todoSnapshotScanMessages = useMemo20(() => getTodoSnapshotScanWindow(messages), [messages]);
+  const latestTodoSnapshot = useMemo20(() => findLatestTodoSnapshot(todoSnapshotScanMessages, queuedMessageIds), [todoSnapshotScanMessages, queuedMessageIds]);
+  const filteredMessages = useMemo20(() => {
+    return filterThreadMessages(messages, queueState.currentMessageId, queueState.queueLength, queuedMessageIds);
+  }, [
+    messages,
+    queueState.currentMessageId,
+    queueState.queueLength,
+    queuedMessageIds
+  ]);
+  useEffect32(() => {
     if (!sessionId)
       return;
-    setSessionTodos(sessionId, findLatestTodoSnapshot(messages, queuedMessageIds));
-  }, [messages, queuedMessageIds, sessionId, setSessionTodos]);
+    if (latestTodoSnapshot || messages.length <= TODO_SNAPSHOT_SCAN_MESSAGE_LIMIT) {
+      setSessionTodos(sessionId, latestTodoSnapshot);
+    }
+  }, [latestTodoSnapshot, messages.length, sessionId, setSessionTodos]);
   const handleScroll = useCallback23(() => {
     const container = scrollContainerRef.current;
     if (!container)
       return;
     const { scrollTop, scrollHeight, clientHeight } = container;
     const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-    const scrollHeightIncreased = scrollHeight > lastScrollHeightRef.current;
     const userScrolledUp = scrollTop < lastScrollTopRef.current - 5;
     lastScrollHeightRef.current = scrollHeight;
     lastScrollTopRef.current = scrollTop;
@@ -19839,9 +20151,6 @@ var MessageThread = memo19(function MessageThread2({
       autoScrollRef.current = false;
       setAutoScroll(false);
       userScrollingRef.current = true;
-    } else if (!scrollHeightIncreased && autoScrollRef.current) {
-      autoScrollRef.current = false;
-      setAutoScroll(false);
     }
     if (userScrolledUp || !autoScrollRef.current && distanceFromBottom >= 100) {
       if (userScrollTimeoutRef.current) {
@@ -19858,23 +20167,54 @@ var MessageThread = memo19(function MessageThread2({
       setShowLeanHeader(headerRect.bottom < containerRect.top);
     }
   }, []);
-  useEffect31(() => {
+  const scrollToThreadBottom = useCallback23((behavior = "auto") => {
+    virtuosoRef.current?.scrollTo({
+      top: Number.MAX_SAFE_INTEGER,
+      behavior
+    });
+  }, []);
+  const scheduleScrollToThreadBottom = useCallback23((behavior = "auto", frames = 2) => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
+    let remainingFrames = Math.max(1, frames);
+    const tick = () => {
+      scrollToThreadBottom(behavior);
+      remainingFrames -= 1;
+      if (remainingFrames > 0) {
+        animationFrameRef.current = requestAnimationFrame(tick);
+        return;
+      }
+      animationFrameRef.current = undefined;
+    };
+    animationFrameRef.current = requestAnimationFrame(tick);
+  }, [scrollToThreadBottom]);
+  useLayoutEffect4(() => {
     if (disableAutoScroll)
       return;
-    const sessionChanged = session?.id !== lastSessionIdRef.current;
-    lastSessionIdRef.current = session?.id;
+    const sessionChanged = sessionId !== lastSessionIdRef.current;
+    lastSessionIdRef.current = sessionId;
     if (sessionChanged) {
       initialScrollDoneRef.current = false;
+      userScrollingRef.current = false;
+      setIsThreadScrolling(false);
+      lastScrollHeightRef.current = 0;
+      lastScrollTopRef.current = 0;
+      setShowLeanHeader(false);
     }
-    if (!initialScrollDoneRef.current && messages.length > 0) {
+    if (!initialScrollDoneRef.current && filteredMessages.length > 0) {
       initialScrollDoneRef.current = true;
-      const container = scrollContainerRef.current;
-      if (container) {
-        container.scrollTop = container.scrollHeight;
-      }
+      autoScrollRef.current = true;
+      setAutoScroll(true);
+      scheduleScrollToThreadBottom("auto", 6);
     }
-  }, [messages.length, session?.id, disableAutoScroll]);
-  useEffect31(() => {
+  }, [
+    filteredMessages.length,
+    sessionId,
+    disableAutoScroll,
+    scheduleScrollToThreadBottom
+  ]);
+  useEffect32(() => {
     if (disableAutoScroll)
       return;
     const justStartedGenerating = isGenerating && !prevIsGeneratingRef.current;
@@ -19885,50 +20225,26 @@ var MessageThread = memo19(function MessageThread2({
       userScrollingRef.current = false;
       autoScrollRef.current = true;
       setAutoScroll(true);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          const container = scrollContainerRef.current;
-          if (container) {
-            container.scrollTop = container.scrollHeight;
-          }
-        });
-      });
+      scheduleScrollToThreadBottom("auto", 4);
     } else if (messagesAdded && !userScrollingRef.current && !isGenerating) {
       autoScrollRef.current = true;
       setAutoScroll(true);
+      scheduleScrollToThreadBottom("auto", 2);
     }
-  }, [messages.length, isGenerating, disableAutoScroll]);
-  useEffect31(() => {
+  }, [
+    messages.length,
+    isGenerating,
+    disableAutoScroll,
+    scheduleScrollToThreadBottom
+  ]);
+  useLayoutEffect4(() => {
     if (disableAutoScroll)
       return;
-    const container = scrollContainerRef.current;
-    if (!container || !autoScroll || userScrollingRef.current)
+    if (!autoScrollRef.current || userScrollingRef.current)
       return;
-    targetScrollRef.current = container.scrollHeight - container.clientHeight;
-    const animate = () => {
-      const el = scrollContainerRef.current;
-      if (!el || userScrollingRef.current)
-        return;
-      const current = el.scrollTop;
-      const target = el.scrollHeight - el.clientHeight;
-      const diff = target - current;
-      if (Math.abs(diff) < 1) {
-        el.scrollTop = el.scrollHeight - el.clientHeight;
-        return;
-      }
-      if (Math.abs(diff) < 10) {
-        el.scrollTop = el.scrollHeight - el.clientHeight;
-        return;
-      }
-      el.scrollTop = current + diff * 0.15;
-      animationFrameRef.current = requestAnimationFrame(animate);
-    };
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-    animationFrameRef.current = requestAnimationFrame(animate);
-  }, [messages, autoScroll]);
-  useEffect31(() => {
+    scheduleScrollToThreadBottom("auto", 1);
+  }, [messages, disableAutoScroll, scheduleScrollToThreadBottom]);
+  useEffect32(() => {
     return () => {
       if (userScrollTimeoutRef.current) {
         clearTimeout(userScrollTimeoutRef.current);
@@ -19942,38 +20258,34 @@ var MessageThread = memo19(function MessageThread2({
     userScrollingRef.current = false;
     autoScrollRef.current = true;
     setAutoScroll(true);
-    const container = scrollContainerRef.current;
-    if (container) {
-      container.scrollTop = container.scrollHeight;
-    }
+    scheduleScrollToThreadBottom("auto", 3);
   };
-  const filteredMessages = useMemo20(() => {
-    const visibleMessages = messages.filter((message) => message.role !== "system" && !(message.role === "assistant" && message.status === "complete" && (message.parts?.length ?? 0) === 0));
-    const queueBusy = Boolean(queueState.currentMessageId) || queueState.queueLength > 0;
-    if (!queueBusy)
-      return visibleMessages;
-    return visibleMessages.filter((message, index) => {
-      if (message.role === "assistant") {
-        const isPendingEmptyAssistant = message.status === "pending" && (message.parts?.length ?? 0) === 0 && message.id !== queueState.currentMessageId;
-        return !isPendingEmptyAssistant;
-      }
-      if (message.role !== "user")
-        return true;
-      const nextAssistant = visibleMessages.slice(index + 1).find((candidate) => candidate.role === "assistant");
-      if (nextAssistant) {
-        const nextAssistantIsQueued = queuedMessageIds.has(nextAssistant.id) || nextAssistant.status === "pending" && (nextAssistant.parts?.length ?? 0) === 0 && nextAssistant.id !== queueState.currentMessageId;
-        return !nextAssistantIsQueued;
-      }
-      const hasEarlierActiveAssistant = visibleMessages.slice(0, index).some((candidate) => candidate.role === "assistant" && (candidate.id === queueState.currentMessageId || candidate.status === "pending" && !queuedMessageIds.has(candidate.id)));
-      return !hasEarlierActiveAssistant;
-    });
-  }, [
-    messages,
-    queueState.currentMessageId,
-    queueState.queueLength,
-    queuedMessageIds
-  ]);
   const contentWidthClass = preferences.fullWidthContent ? compact ? "w-full space-y-4" : "w-full space-y-6" : compact ? "max-w-3xl mx-auto space-y-4" : "max-w-3xl mx-auto space-y-6";
+  const rowOuterClass = density === "compact" ? "px-2 pb-3" : compact ? "px-4 pb-4" : "px-6 pb-6";
+  const firstRowTopClass = density === "compact" ? "pt-3" : compact ? "pt-4" : "pt-6";
+  const footerBottomPaddingClass = density === "compact" || compact ? "pb-80" : "pb-96";
+  const virtuosoContext = useMemo20(() => ({
+    session,
+    isGenerating,
+    onSelectSession,
+    sessionHeaderRef,
+    footerBottomPaddingClass,
+    showTopupApproval: Boolean(showTopupApproval),
+    pendingTopup,
+    clearPendingTopup,
+    rowOuterClass,
+    contentWidthClass
+  }), [
+    session,
+    isGenerating,
+    onSelectSession,
+    footerBottomPaddingClass,
+    showTopupApproval,
+    pendingTopup,
+    clearPendingTopup,
+    rowOuterClass,
+    contentWidthClass
+  ]);
   const createRetryHandler = useCallback23((messageId) => {
     return async () => {
       if (!sessionId)
@@ -20035,72 +20347,47 @@ var MessageThread = memo19(function MessageThread2({
           isGenerating,
           onNavigateToSession: onSelectSession
         }),
-        /* @__PURE__ */ jsxs70("div", {
-          ref: scrollContainerRef,
-          className: "flex-1 overflow-y-auto scrollbar-hide",
+        /* @__PURE__ */ jsx82(Virtuoso, {
+          ref: virtuosoRef,
+          className: "flex-1 scrollbar-hide",
+          data: filteredMessages,
+          atBottomThreshold: 100,
+          increaseViewportBy: { top: 2400, bottom: 1600 },
+          minOverscanItemCount: { top: 4, bottom: 3 },
+          initialTopMostItemIndex: {
+            index: Math.max(0, filteredMessages.length - 1),
+            align: "end"
+          },
+          followOutput: (isAtBottom) => autoScrollRef.current && isAtBottom ? "auto" : false,
+          scrollerRef: (ref) => {
+            scrollContainerRef.current = ref instanceof HTMLElement ? ref : null;
+          },
           onScroll: handleScroll,
-          children: [
-            /* @__PURE__ */ jsx82("div", {
-              ref: sessionHeaderRef,
-              children: session && /* @__PURE__ */ jsx82(SessionHeader, {
-                session,
-                isGenerating,
-                onNavigateToSession: onSelectSession
-              })
-            }),
-            /* @__PURE__ */ jsx82("div", {
-              className: density === "compact" ? "px-2 pt-3 pb-80" : compact ? "p-4 pb-80" : "p-6 pb-96",
-              children: /* @__PURE__ */ jsxs70("div", {
-                className: contentWidthClass,
-                children: [
-                  filteredMessages.map((message, idx) => {
-                    const prevMessage = filteredMessages[idx - 1];
-                    const nextMessage = filteredMessages[idx + 1];
-                    const isLastMessage = idx === filteredMessages.length - 1;
-                    if (message.role === "user") {
-                      const nextAssistantMessage = nextMessage && nextMessage.role === "assistant" ? nextMessage : undefined;
-                      return /* @__PURE__ */ jsx82(UserMessageGroup, {
-                        sessionId,
-                        message,
-                        isFirst: idx === 0,
-                        nextAssistantMessageId: nextAssistantMessage?.id
-                      }, message.id);
-                    }
-                    if (message.role === "assistant") {
-                      const showHeader = !prevMessage || prevMessage.role !== "assistant";
-                      const nextIsAssistant = nextMessage && nextMessage.role === "assistant";
-                      const hasQueuedOrRunningLaterTurn = Boolean(queueState.currentMessageId && queueState.currentMessageId !== message.id);
-                      const canRetryTurn = isLastMessage && !hasQueuedOrRunningLaterTurn && queueState.queueLength === 0;
-                      return /* @__PURE__ */ jsx82(AssistantMessageGroup, {
-                        sessionId,
-                        message,
-                        showHeader,
-                        hasNextAssistantMessage: nextIsAssistant,
-                        isLastMessage,
-                        onBranchCreated: onSelectSession,
-                        onNavigateToSession: onSelectSession,
-                        onRetry: canRetryTurn ? createRetryHandler(message.id) : undefined,
-                        compact,
-                        onCompact: isLastMessage ? handleCompact : undefined
-                      }, message.id);
-                    }
-                    return null;
-                  }),
-                  showTopupApproval && pendingTopup && /* @__PURE__ */ jsx82("div", {
-                    className: "py-4",
-                    children: /* @__PURE__ */ jsx82(TopupApprovalCard, {
-                      pendingTopup,
-                      onMethodSelected: () => clearPendingTopup(),
-                      onCancel: () => clearPendingTopup()
-                    })
-                  }),
-                  /* @__PURE__ */ jsx82("div", {
-                    ref: bottomRef
-                  })
-                ]
+          isScrolling: setIsThreadScrolling,
+          computeItemKey: (_, message) => message.id,
+          components: THREAD_VIRTUOSO_COMPONENTS,
+          context: virtuosoContext,
+          itemContent: (idx, message) => /* @__PURE__ */ jsx82("div", {
+            className: `${rowOuterClass} ${idx === 0 ? firstRowTopClass : ""}`,
+            children: /* @__PURE__ */ jsx82("div", {
+              className: contentWidthClass,
+              children: /* @__PURE__ */ jsx82(ThreadMessageRow, {
+                sessionId,
+                message,
+                previousMessage: filteredMessages[idx - 1],
+                nextMessage: filteredMessages[idx + 1],
+                isFirst: idx === 0,
+                isLastMessage: idx === filteredMessages.length - 1,
+                currentMessageId: queueState.currentMessageId,
+                queueLength: queueState.queueLength,
+                compact,
+                isThreadScrolling,
+                onSelectSession,
+                createRetryHandler,
+                onCompact: handleCompact
               })
             })
-          ]
+          })
         }),
         !autoScroll && /* @__PURE__ */ jsxs70("button", {
           type: "button",
@@ -20120,11 +20407,11 @@ var MessageThread = memo19(function MessageThread2({
   });
 });
 // src/components/messages/MessageThreadContainer.tsx
-import { memo as memo22, useEffect as useEffect35, useMemo as useMemo21 } from "react";
+import { memo as memo22, useEffect as useEffect36, useMemo as useMemo21 } from "react";
 import { useQueryClient as useQueryClient14 } from "@tanstack/react-query";
 
 // src/hooks/useSessionStream.ts
-import { useEffect as useEffect32, useRef as useRef21 } from "react";
+import { useEffect as useEffect33, useRef as useRef21 } from "react";
 import { useQueryClient as useQueryClient13 } from "@tanstack/react-query";
 
 // src/lib/sse-client.ts
@@ -20263,7 +20550,7 @@ function useSessionStream(sessionId, enabled = true) {
     setPendingApprovals
   } = useToolApprovalStore();
   const { addPendingInput, removePendingInput, setPendingInputs } = useSecureInputStore();
-  useEffect32(() => {
+  useEffect33(() => {
     if (!sessionId || !enabled) {
       return;
     }
@@ -21629,7 +21916,7 @@ ${bestEffortUnescapeJsonString(rawTail)}`;
 }
 
 // src/hooks/useToolApprovalShortcuts.ts
-import { useEffect as useEffect33, useCallback as useCallback24 } from "react";
+import { useEffect as useEffect34, useCallback as useCallback24 } from "react";
 function useToolApprovalShortcuts(sessionId) {
   const { pendingApprovals, removePendingApproval } = useToolApprovalStore();
   const sessionPendingApprovals = pendingApprovals;
@@ -21665,7 +21952,7 @@ function useToolApprovalShortcuts(sessionId) {
       console.error("Failed to approve all tool calls:", error);
     }
   }, [sessionId, sessionPendingApprovals, removePendingApproval]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!sessionId || sessionPendingApprovals.length === 0)
       return;
     const handleKeyDown = (e) => {
@@ -21696,7 +21983,7 @@ function useToolApprovalShortcuts(sessionId) {
 }
 
 // src/components/settings/OttoRouterTopupModal.tsx
-import { memo as memo21, useState as useState38, useEffect as useEffect34, useCallback as useCallback25, useRef as useRef22 } from "react";
+import { memo as memo21, useState as useState38, useEffect as useEffect35, useCallback as useCallback25, useRef as useRef22 } from "react";
 import { CreditCard as CreditCard3, Wallet as Wallet2, ExternalLink as ExternalLink7, RefreshCw as RefreshCw5 } from "lucide-react";
 
 // src/components/common/StatusIndicator.tsx
@@ -21822,7 +22109,7 @@ var StatusIndicator = memo20(function StatusIndicator2({
 });
 
 // src/components/settings/OttoRouterTopupModal.tsx
-import { jsx as jsx84, jsxs as jsxs72, Fragment as Fragment36 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs72, Fragment as Fragment37 } from "react/jsx-runtime";
 var PRESET_AMOUNTS = [10, 25, 50, 100];
 var MIN_AMOUNT = 5;
 var MIN_AMOUNT_RAZORPAY = 2;
@@ -21938,7 +22225,7 @@ var OttoRouterTopupModalContent = memo21(function OttoRouterTopupModalContent2()
       setIsLoadingEstimate(false);
     }
   }, [gateway, minAmount]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (effectiveAmount >= minAmount && view === "amount") {
       const timeout = setTimeout(() => fetchEstimate(effectiveAmount), 300);
       return () => clearTimeout(timeout);
@@ -21951,7 +22238,7 @@ var OttoRouterTopupModalContent = memo21(function OttoRouterTopupModalContent2()
     }
     setIsPolling(false);
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     return () => stopPolling();
   }, [stopPolling]);
   const startPolling = useCallback25((checkoutId) => {
@@ -22126,7 +22413,7 @@ var OttoRouterTopupModalContent = memo21(function OttoRouterTopupModalContent2()
     children: /* @__PURE__ */ jsxs72("div", {
       className: "space-y-6",
       children: [
-        view === "confirmed" && /* @__PURE__ */ jsxs72(Fragment36, {
+        view === "confirmed" && /* @__PURE__ */ jsxs72(Fragment37, {
           children: [
             /* @__PURE__ */ jsx84("div", {
               className: "py-4",
@@ -22152,7 +22439,7 @@ var OttoRouterTopupModalContent = memo21(function OttoRouterTopupModalContent2()
             sublabel: "Do not close this page"
           })
         }),
-        view === "checkout" && checkoutInfo && /* @__PURE__ */ jsxs72(Fragment36, {
+        view === "checkout" && checkoutInfo && /* @__PURE__ */ jsxs72(Fragment37, {
           children: [
             /* @__PURE__ */ jsxs72("div", {
               className: "py-4",
@@ -22212,7 +22499,7 @@ var OttoRouterTopupModalContent = memo21(function OttoRouterTopupModalContent2()
             })
           ]
         }),
-        view === "amount" && /* @__PURE__ */ jsxs72(Fragment36, {
+        view === "amount" && /* @__PURE__ */ jsxs72(Fragment37, {
           children: [
             hasGoPlan && /* @__PURE__ */ jsx84("div", {
               className: "text-xs text-muted-foreground bg-muted/30 border border-border rounded-lg px-3 py-2",
@@ -22304,7 +22591,7 @@ var OttoRouterTopupModalContent = memo21(function OttoRouterTopupModalContent2()
                 className: "overflow-hidden",
                 children: /* @__PURE__ */ jsx84("div", {
                   className: "space-y-3 py-4 border-t border-border",
-                  children: isLoadingEstimate ? /* @__PURE__ */ jsxs72(Fragment36, {
+                  children: isLoadingEstimate ? /* @__PURE__ */ jsxs72(Fragment37, {
                     children: [
                       /* @__PURE__ */ jsxs72("div", {
                         className: "flex justify-between items-center",
@@ -22343,7 +22630,7 @@ var OttoRouterTopupModalContent = memo21(function OttoRouterTopupModalContent2()
                         ]
                       })
                     ]
-                  }) : gateway === "polar" && estimate ? /* @__PURE__ */ jsxs72(Fragment36, {
+                  }) : gateway === "polar" && estimate ? /* @__PURE__ */ jsxs72(Fragment37, {
                     children: [
                       /* @__PURE__ */ jsxs72("div", {
                         className: "flex justify-between items-center",
@@ -22394,7 +22681,7 @@ var OttoRouterTopupModalContent = memo21(function OttoRouterTopupModalContent2()
                         ]
                       })
                     ]
-                  }) : gateway === "razorpay" && razorpayEstimate ? /* @__PURE__ */ jsxs72(Fragment36, {
+                  }) : gateway === "razorpay" && razorpayEstimate ? /* @__PURE__ */ jsxs72(Fragment37, {
                     children: [
                       /* @__PURE__ */ jsxs72("div", {
                         className: "flex justify-between items-center",
@@ -22532,12 +22819,12 @@ var OttoRouterTopupModalContent = memo21(function OttoRouterTopupModalContent2()
 });
 
 // src/components/messages/MessageThreadContainer.tsx
-import { jsx as jsx85, jsxs as jsxs73, Fragment as Fragment37 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs73, Fragment as Fragment38 } from "react/jsx-runtime";
 var MessageThreadContainer = memo22(function MessageThreadContainer2({
   sessionId,
   onSelectSession
 }) {
-  return /* @__PURE__ */ jsxs73(Fragment37, {
+  return /* @__PURE__ */ jsxs73(Fragment38, {
     children: [
       /* @__PURE__ */ jsx85(SessionStreamController, {
         sessionId
@@ -22556,7 +22843,7 @@ var MessageThreadContainer = memo22(function MessageThreadContainer2({
 function SessionStreamController({ sessionId }) {
   const queryClient = useQueryClient14();
   useSessionStream(sessionId);
-  useEffect35(() => {
+  useEffect36(() => {
     queryClient.invalidateQueries({ queryKey: ["messages", sessionId] });
     queryClient.invalidateQueries({ queryKey: ["queueState", sessionId] });
     queryClient.invalidateQueries({ queryKey: sessionsQueryKey });
@@ -22596,7 +22883,7 @@ var MessageThreadData = memo22(function MessageThreadData2({
 });
 // src/components/sessions/SessionItem.tsx
 import { memo as memo23 } from "react";
-import { CircleCheck } from "lucide-react";
+import { CircleCheck, Pin } from "lucide-react";
 
 // src/components/sessions/session-time.ts
 var DAY_IN_MS = 24 * 60 * 60 * 1000;
@@ -22645,10 +22932,12 @@ import { jsx as jsx86, jsxs as jsxs74 } from "react/jsx-runtime";
 var SessionItem = memo23(function SessionItem2({
   session,
   isActive,
-  onClick
+  onClick,
+  onTogglePinned
 }) {
   const title = session.title || `Session ${session.id.slice(0, 8)}`;
   const isRunning = session.isRunning ?? false;
+  const isPinned = session.pinnedAt != null;
   const lastUpdatedAt = session.lastActiveAt ?? session.createdAt;
   const isReadyForReview = !isRunning && lastUpdatedAt > (session.lastViewedAt ?? 0);
   const metadata = formatRelativeSessionTime(lastUpdatedAt);
@@ -22661,9 +22950,7 @@ var SessionItem = memo23(function SessionItem2({
   }) : isReadyForReview ? /* @__PURE__ */ jsx86(CircleCheck, {
     className: "h-4 w-4"
   }) : null;
-  return /* @__PURE__ */ jsxs74("button", {
-    type: "button",
-    onClick,
+  return /* @__PURE__ */ jsxs74("div", {
     className: `group flex w-full items-start gap-2 px-4 py-3 text-left transition-colors duration-150 ${isActive ? "bg-black/[0.08] text-sidebar-foreground dark:bg-white/[0.08]" : "text-sidebar-foreground hover:bg-black/[0.05] dark:hover:bg-white/[0.055]"}`,
     title: `${title} — ${metadata}`,
     children: [
@@ -22674,12 +22961,31 @@ var SessionItem = memo23(function SessionItem2({
       /* @__PURE__ */ jsxs74("span", {
         className: "block min-w-0 flex-1",
         children: [
-          /* @__PURE__ */ jsx86("span", {
-            className: `block min-w-0 truncate text-[13px] leading-5 ${isActive ? "font-medium" : "font-normal"}`,
-            children: title
-          }),
           /* @__PURE__ */ jsxs74("span", {
-            className: "mt-0.5 flex items-center justify-between gap-3 text-[11px] leading-4 text-sidebar-muted-foreground",
+            className: "flex min-w-0 items-center",
+            children: [
+              /* @__PURE__ */ jsx86("button", {
+                type: "button",
+                onClick,
+                className: `block min-w-0 flex-1 truncate text-left text-[13px] leading-5 ${isActive ? "font-medium" : "font-normal"}`,
+                children: title
+              }),
+              /* @__PURE__ */ jsx86("button", {
+                type: "button",
+                onClick: onTogglePinned,
+                className: `flex h-5 shrink-0 items-center justify-center overflow-hidden rounded text-sidebar-muted-foreground transition-all duration-150 ease-out hover:text-sidebar-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sidebar-ring/50 ${isPinned ? "ml-1 w-5 translate-x-0 opacity-100 text-sidebar-foreground" : "ml-0 w-0 translate-x-1 opacity-0 group-hover:ml-1 group-hover:w-5 group-hover:translate-x-0 group-hover:opacity-100 group-focus-within:ml-1 group-focus-within:w-5 group-focus-within:translate-x-0 group-focus-within:opacity-100"}`,
+                "aria-label": isPinned ? "Unpin session" : "Pin session",
+                title: isPinned ? "Unpin session" : "Pin session",
+                children: /* @__PURE__ */ jsx86(Pin, {
+                  className: `h-3.5 w-3.5 ${isPinned ? "fill-current" : ""}`
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs74("button", {
+            type: "button",
+            onClick,
+            className: "mt-0.5 flex w-full items-center justify-between gap-3 text-left text-[11px] leading-4 text-sidebar-muted-foreground",
             children: [
               /* @__PURE__ */ jsx86("span", {
                 className: "min-w-0 flex-1 truncate",
@@ -22704,7 +23010,7 @@ var SessionItem = memo23(function SessionItem2({
   });
 });
 // src/components/sessions/SessionListContainer.tsx
-import { memo as memo24, useMemo as useMemo22, useCallback as useCallback26, useEffect as useEffect36, useRef as useRef23 } from "react";
+import { memo as memo24, useMemo as useMemo22, useCallback as useCallback26, useEffect as useEffect37, useRef as useRef23 } from "react";
 
 // src/stores/focusStore.ts
 import { create as create21 } from "zustand";
@@ -22727,6 +23033,7 @@ var SessionListRow = memo24(function SessionListRow2({
   snapshot,
   isActive,
   onSelectSession,
+  onTogglePinned,
   registerItem
 }) {
   const setRef = useCallback26((element) => {
@@ -22735,12 +23042,16 @@ var SessionListRow = memo24(function SessionListRow2({
   const handleClick = useCallback26(() => {
     onSelectSession(snapshot.id);
   }, [onSelectSession, snapshot.id]);
+  const handleTogglePinned = useCallback26(() => {
+    onTogglePinned(snapshot.id, snapshot.pinnedAt == null);
+  }, [onTogglePinned, snapshot.id, snapshot.pinnedAt]);
   return /* @__PURE__ */ jsx87("div", {
     ref: setRef,
     children: /* @__PURE__ */ jsx87(SessionItem, {
       session,
       isActive,
-      onClick: handleClick
+      onClick: handleClick,
+      onTogglePinned: handleTogglePinned
     })
   });
 });
@@ -22751,7 +23062,7 @@ function SessionFocusController({
   const currentFocus = useFocusStore((state) => state.currentFocus);
   const sessionIndex = useFocusStore((state) => state.sessionIndex);
   const previousFocusedSessionId = useRef23(null);
-  useEffect36(() => {
+  useEffect37(() => {
     const previousId = previousFocusedSessionId.current;
     if (previousId) {
       const previousElement = itemRefs.current?.get(previousId);
@@ -22792,6 +23103,7 @@ var SessionListContainer = memo24(function SessionListContainer2({
   const previousActiveSessionId = useRef23(activeSessionId);
   const runningOrderRef = useRef23([]);
   const markSessionViewed = useMarkSessionViewed();
+  const setSessionPinned = useSetSessionPinned();
   const handleSessionClick = useCallback26((sessionId) => {
     lastScrolledSessionId.current = sessionId;
     onSelectSession(sessionId);
@@ -22802,6 +23114,9 @@ var SessionListContainer = memo24(function SessionListContainer2({
     else
       itemRefs.current.delete(sessionId);
   }, []);
+  const handleTogglePinned = useCallback26((sessionId, isPinned) => {
+    setSessionPinned.mutate({ sessionId, isPinned });
+  }, [setSessionPinned]);
   const sessionSnapshot = useMemo22(() => {
     return sessions.map((s, index) => ({
       id: s.id,
@@ -22812,22 +23127,27 @@ var SessionListContainer = memo24(function SessionListContainer2({
       createdAt: s.createdAt,
       lastActiveAt: s.lastActiveAt,
       lastViewedAt: s.lastViewedAt ?? null,
+      pinnedAt: s.pinnedAt ?? null,
       activityAt: s.lastActiveAt ?? s.createdAt
     }));
   }, [sessions]);
   const sessionMap = useMemo22(() => new Map(sessions.map((session) => [session.id, session])), [sessions]);
   const sessionSnapshotMap = useMemo22(() => new Map(sessionSnapshot.map((session) => [session.id, session])), [sessionSnapshot]);
   const runningSessions = useMemo22(() => {
-    const runningSessionMap = new Map(sessionSnapshot.filter((session) => session.isRunning).map((session) => [session.id, session]));
+    const runningSessionMap = new Map(sessionSnapshot.filter((session) => session.isRunning && session.pinnedAt == null).map((session) => [session.id, session]));
     runningOrderRef.current = runningOrderRef.current.filter((id) => runningSessionMap.has(id));
     for (const session of sessionSnapshot) {
-      if (session.isRunning && !runningOrderRef.current.includes(session.id)) {
+      if (session.isRunning && session.pinnedAt == null && !runningOrderRef.current.includes(session.id)) {
         runningOrderRef.current.push(session.id);
       }
     }
     return runningOrderRef.current.map((id) => runningSessionMap.get(id)).filter((session) => Boolean(session));
   }, [sessionSnapshot]);
   const runningSessionIds = useMemo22(() => new Set(runningSessions.map((session) => session.id)), [runningSessions]);
+  const pinnedGroups = useMemo22(() => {
+    const pinnedSessions = sessionSnapshot.filter((session) => session.pinnedAt != null);
+    return pinnedSessions.length > 0 ? [{ label: "Pinned", sessions: pinnedSessions }] : [];
+  }, [sessionSnapshot]);
   const statusGroups = useMemo22(() => [
     ...runningSessions.length > 0 ? [
       {
@@ -22839,6 +23159,8 @@ var SessionListContainer = memo24(function SessionListContainer2({
   const recentGroups = useMemo22(() => {
     const groups = new Map;
     for (const session of sessionSnapshot) {
+      if (session.pinnedAt != null)
+        continue;
       if (runningSessionIds.has(session.id))
         continue;
       const label = getSessionGroupLabel(session.activityAt);
@@ -22865,14 +23187,14 @@ var SessionListContainer = memo24(function SessionListContainer2({
       onError: () => markedViewedRef.current.delete(session.id)
     });
   }, [markSessionViewed, sessionSnapshotMap]);
-  useEffect36(() => {
+  useEffect37(() => {
     const previousId = previousActiveSessionId.current;
     if (previousId && previousId !== activeSessionId) {
       markViewedIfReady(previousId);
     }
     previousActiveSessionId.current = activeSessionId;
   }, [activeSessionId, markViewedIfReady]);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!activeSessionId || lastScrolledSessionId.current === activeSessionId || sessionSnapshot.length === 0)
       return;
     const activeSession = sessionSnapshotMap.get(activeSessionId);
@@ -22894,7 +23216,7 @@ var SessionListContainer = memo24(function SessionListContainer2({
     hasNextPage,
     fetchNextPage
   ]);
-  useEffect36(() => {
+  useEffect37(() => {
     const container = scrollContainerRef.current;
     if (!container)
       return;
@@ -22915,7 +23237,7 @@ var SessionListContainer = memo24(function SessionListContainer2({
     container.addEventListener("scroll", handleScroll, { passive: true });
     return () => container.removeEventListener("scroll", handleScroll);
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
-  useEffect36(() => {
+  useEffect37(() => {
     const container = scrollContainerRef.current;
     const sentinel = paginationSentinelRef.current;
     if (!container || !sentinel || typeof IntersectionObserver === "undefined") {
@@ -22965,6 +23287,7 @@ var SessionListContainer = memo24(function SessionListContainer2({
       snapshot: session,
       isActive: session.id === activeSessionId,
       onSelectSession: handleSessionClick,
+      onTogglePinned: handleTogglePinned,
       registerItem
     }, session.id);
   };
@@ -23005,6 +23328,7 @@ var SessionListContainer = memo24(function SessionListContainer2({
         children: /* @__PURE__ */ jsxs75("div", {
           className: "space-y-4",
           children: [
+            pinnedGroups.map((group) => renderGroup(group)),
             statusGroups.map((group) => renderGroup(group)),
             recentGroups.map((group) => renderGroup(group))
           ]
@@ -23060,7 +23384,7 @@ import {
   lineNumbers
 } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
-import { useCallback as useCallback27, useEffect as useEffect37, useMemo as useMemo23, useRef as useRef24 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect38, useMemo as useMemo23, useRef as useRef24 } from "react";
 import { jsx as jsx88 } from "react/jsx-runtime";
 var viewerTheme = EditorView.theme({
   "&": {
@@ -23334,7 +23658,7 @@ function CodeMirrorViewer({
       decorationsCompartmentRef.current.of(decorationsExtension)
     ]
   }), [lineNumberExtension, languageExtension, decorationsExtension]);
-  useEffect37(() => {
+  useEffect38(() => {
     const host = hostRef.current;
     if (!host)
       return;
@@ -23361,7 +23685,7 @@ function CodeMirrorViewer({
       viewRef.current = null;
     };
   }, []);
-  useEffect37(() => {
+  useEffect38(() => {
     const view = viewRef.current;
     if (!view)
       return;
@@ -23373,7 +23697,7 @@ function CodeMirrorViewer({
       view.setState(createEditorState(contentRef.current));
     }
   }, [lineNumberExtension, createEditorState]);
-  useEffect37(() => {
+  useEffect38(() => {
     const view = viewRef.current;
     if (!view)
       return;
@@ -23385,7 +23709,7 @@ function CodeMirrorViewer({
       view.setState(createEditorState(contentRef.current));
     }
   }, [languageExtension, createEditorState]);
-  useEffect37(() => {
+  useEffect38(() => {
     const view = viewRef.current;
     if (!view)
       return;
@@ -23397,7 +23721,7 @@ function CodeMirrorViewer({
       view.setState(createEditorState(contentRef.current));
     }
   }, [decorationsExtension, createEditorState]);
-  useEffect37(() => {
+  useEffect38(() => {
     const view = viewRef.current;
     if (!view)
       return;
@@ -23413,7 +23737,7 @@ function CodeMirrorViewer({
     }
     contentRef.current = content;
   }, [content, createEditorState]);
-  useEffect37(() => {
+  useEffect38(() => {
     const view = viewRef.current;
     if (!view || !scrollToLine || scrollToLine < 1)
       return;
@@ -23426,7 +23750,7 @@ function CodeMirrorViewer({
       view.setState(createEditorState(contentRef.current));
     }
   }, [scrollToLine, createEditorState]);
-  useEffect37(() => {
+  useEffect38(() => {
     const view = viewRef.current;
     if (!view || scrollToEndSignal === undefined)
       return;
@@ -23606,7 +23930,7 @@ import { GitCommit as GitCommit3, CheckSquare, AlertTriangle as AlertTriangle2 }
 // src/components/git/GitFileTree.tsx
 import {
   useCallback as useCallback28,
-  useEffect as useEffect38,
+  useEffect as useEffect39,
   useMemo as useMemo24,
   useState as useState40
 } from "react";
@@ -24005,7 +24329,7 @@ function GitFileTree({
   const gitFileIndex = useFocusStore((state) => state.gitFileIndex);
   const gitTreeRows = useGitStore((state) => state.gitTreeRows);
   const setGitTreeSectionRows = useGitStore((state) => state.setGitTreeSectionRows);
-  useEffect38(() => {
+  useEffect39(() => {
     const folderPaths = getInitialExpanded(tree);
     setExpanded((prev) => {
       const hasNewFolder = [...folderPaths].some((path) => !prev.has(path));
@@ -24023,7 +24347,7 @@ function GitFileTree({
     });
   }, []);
   const visibleRows = useMemo24(() => collectVisibleRows(tree, sectionId, staged, expanded, toggleExpanded), [tree, sectionId, staged, expanded, toggleExpanded]);
-  useEffect38(() => {
+  useEffect39(() => {
     setGitTreeSectionRows(sectionId, visibleRows);
     return () => setGitTreeSectionRows(sectionId, []);
   }, [sectionId, visibleRows, setGitTreeSectionRows]);
@@ -24262,7 +24586,7 @@ function GitFileList({ status }) {
   });
 }
 // src/components/git/GitSidebar.tsx
-import { memo as memo25, useCallback as useCallback30, useEffect as useEffect41, useState as useState43 } from "react";
+import { memo as memo25, useCallback as useCallback30, useEffect as useEffect42, useState as useState43 } from "react";
 import {
   FolderGit2,
   ChevronRight as ChevronRight13,
@@ -24281,7 +24605,7 @@ import { useQueryClient as useQueryClient15 } from "@tanstack/react-query";
 
 // src/components/git/GitBranchSwitcher.tsx
 import {
-  useEffect as useEffect40,
+  useEffect as useEffect41,
   useId as useId3,
   useMemo as useMemo26,
   useRef as useRef26,
@@ -24291,9 +24615,9 @@ import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/r
 import { Check as Check12, GitBranch as GitBranch9, Plus as Plus3, RefreshCw as RefreshCw6, Search as Search7 } from "lucide-react";
 
 // src/components/git/GitCreateBranchModal.tsx
-import { useEffect as useEffect39, useId as useId2, useRef as useRef25, useState as useState41 } from "react";
+import { useEffect as useEffect40, useId as useId2, useRef as useRef25, useState as useState41 } from "react";
 import { GitBranch as GitBranch8 } from "lucide-react";
-import { jsx as jsx93, jsxs as jsxs80, Fragment as Fragment38 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs80, Fragment as Fragment39 } from "react/jsx-runtime";
 var INVALID_BRANCH_PATTERN = /[\s~^:?*[\]\\]/;
 function sanitizeBranchName(name) {
   return name.trim();
@@ -24324,7 +24648,7 @@ function GitCreateBranchModal({
   const [checkout, setCheckout] = useState41(true);
   const [error, setError] = useState41(null);
   const inputRef = useRef25(null);
-  useEffect39(() => {
+  useEffect40(() => {
     if (isOpen) {
       setName(defaultName);
       setCheckout(true);
@@ -24444,7 +24768,7 @@ function GitCreateBranchModal({
               onClick: handleSubmit,
               disabled: !valid || createBranch.isPending,
               className: "gap-1.5",
-              children: createBranch.isPending ? /* @__PURE__ */ jsxs80(Fragment38, {
+              children: createBranch.isPending ? /* @__PURE__ */ jsxs80(Fragment39, {
                 children: [
                   /* @__PURE__ */ jsx93(StableSpinner, {
                     size: "sm",
@@ -24452,7 +24776,7 @@ function GitCreateBranchModal({
                   }),
                   "Creating..."
                 ]
-              }) : /* @__PURE__ */ jsxs80(Fragment38, {
+              }) : /* @__PURE__ */ jsxs80(Fragment39, {
                 children: [
                   /* @__PURE__ */ jsx93(GitBranch8, {
                     className: "h-3.5 w-3.5"
@@ -24520,10 +24844,10 @@ function GitBranchSwitcher({
       return rows;
     return rows.filter((row) => row.displayName.toLowerCase().includes(q) || row.branch.name.toLowerCase().includes(q));
   }, [rows, query]);
-  useEffect40(() => {
+  useEffect41(() => {
     setActiveIndex(0);
   }, [query]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!isOpen)
       return;
     const handleClickOutside = (e) => {
@@ -24537,7 +24861,7 @@ function GitBranchSwitcher({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!isOpen) {
       setQuery("");
       setActionError(null);
@@ -24545,7 +24869,7 @@ function GitBranchSwitcher({
       requestAnimationFrame(() => searchInputRef.current?.focus());
     }
   }, [isOpen]);
-  useEffect40(() => {
+  useEffect41(() => {
     const node = itemRefs.current.get(activeIndex);
     node?.scrollIntoView({ block: "nearest" });
   }, [activeIndex]);
@@ -24744,7 +25068,7 @@ function GitBranchSwitcher({
 }
 
 // src/components/git/GitSidebar.tsx
-import { jsx as jsx95, jsxs as jsxs82, Fragment as Fragment39 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs82, Fragment as Fragment40 } from "react/jsx-runtime";
 var PANEL_KEY = "git";
 var DEFAULT_WIDTH = 320;
 var MIN_WIDTH = 320;
@@ -24777,7 +25101,7 @@ var GitSidebarContent = memo25(function GitSidebarContent2({
   const [remoteName, setRemoteName] = useState43("origin");
   const [remoteUrl, setRemoteUrl] = useState43("");
   const [confirmRemoveRemote, setConfirmRemoveRemote] = useState43(null);
-  useEffect41(() => {
+  useEffect42(() => {
     queryClient.invalidateQueries({ queryKey: ["git", "status"] });
   }, [queryClient]);
   const handleRefresh = () => {
@@ -24894,7 +25218,7 @@ Please help me fix this.`;
             icon: /* @__PURE__ */ jsx95(GitBranch10, {
               className: "size-[15px]"
             }),
-            title: /* @__PURE__ */ jsxs82(Fragment39, {
+            title: /* @__PURE__ */ jsxs82(Fragment40, {
               children: [
                 "Git Changes",
                 totalChanges > 0 && /* @__PURE__ */ jsxs82("span", {
@@ -25245,7 +25569,7 @@ Please help me fix this.`;
                     currentBranch: status.branch,
                     isDetached: status.isDetached,
                     shortHeadSha: status.shortHeadSha
-                  }) : /* @__PURE__ */ jsxs82(Fragment39, {
+                  }) : /* @__PURE__ */ jsxs82(Fragment40, {
                     children: [
                       /* @__PURE__ */ jsx95(GitBranch10, {
                         className: "w-3 h-3 flex-shrink-0"
@@ -25295,11 +25619,11 @@ import { GitBranch as GitBranch11 } from "lucide-react";
 import { memo as memo26 } from "react";
 
 // src/hooks/useShortcutHintsVisible.ts
-import { useEffect as useEffect42, useState as useState44 } from "react";
+import { useEffect as useEffect43, useState as useState44 } from "react";
 var SHORTCUT_HINT_MODIFIERS = new Set(["Control", "Meta"]);
 function useShortcutHintsVisible() {
   const [isVisible, setIsVisible] = useState44(false);
-  useEffect42(() => {
+  useEffect43(() => {
     const handleKeyDown = (event) => {
       if (SHORTCUT_HINT_MODIFIERS.has(event.key) || event.ctrlKey || event.metaKey) {
         setIsVisible(true);
@@ -25365,7 +25689,7 @@ var GitSidebarToggle = memo27(function GitSidebarToggle2() {
   });
 });
 // src/components/git/GitDiffPanel.tsx
-import { useEffect as useEffect43, memo as memo28, useState as useState45 } from "react";
+import { useEffect as useEffect44, memo as memo28, useState as useState45 } from "react";
 import { X as X16, Maximize2, Minimize2 as Minimize22 } from "lucide-react";
 
 // src/hooks/useFileBrowser.ts
@@ -25420,11 +25744,11 @@ var GitDiffPanel = memo28(function GitDiffPanel2({
   const { data: fullFileDiff, isLoading: fullFileLoading } = useGitDiffFullFile(selectedFile, selectedFileStaged, showFullFile);
   const activeDiff = showFullFile && fullFileDiff ? fullFileDiff : diff2;
   const activeLoading = showFullFile ? fullFileLoading : isLoading;
-  useEffect43(() => {
+  useEffect44(() => {
     if (!isDiffOpen)
       setShowFullFile(false);
   }, [isDiffOpen]);
-  useEffect43(() => {
+  useEffect44(() => {
     const handleEscape = (e) => {
       const target = e.target;
       const isInInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
@@ -25528,9 +25852,9 @@ ${activeDiff?.absPath || ""}`,
   });
 });
 // src/components/git/GitCommitModal.tsx
-import { useState as useState46, useId as useId4, useEffect as useEffect44, useCallback as useCallback31 } from "react";
+import { useState as useState46, useId as useId4, useEffect as useEffect45, useCallback as useCallback31 } from "react";
 import { GitCommit as GitCommit4, Sparkles as Sparkles6 } from "lucide-react";
-import { jsx as jsx99, jsxs as jsxs85, Fragment as Fragment40 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs85, Fragment as Fragment41 } from "react/jsx-runtime";
 function GitCommitModal() {
   const isCommitModalOpen = useGitStore((state) => state.isCommitModalOpen);
   return isCommitModalOpen ? /* @__PURE__ */ jsx99(GitCommitModalContent, {}) : null;
@@ -25565,7 +25889,7 @@ function GitCommitModalContent() {
       console.error("Failed to generate commit message:", error);
     }
   }, [generateMessage]);
-  useEffect44(() => {
+  useEffect45(() => {
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
         e.preventDefault();
@@ -25626,7 +25950,7 @@ function GitCommitModalContent() {
           onClick: handleGenerateMessage,
           className: "w-full",
           disabled: generateMessage.isPending,
-          children: generateMessage.isPending ? /* @__PURE__ */ jsxs85(Fragment40, {
+          children: generateMessage.isPending ? /* @__PURE__ */ jsxs85(Fragment41, {
             children: [
               /* @__PURE__ */ jsx99(StableSpinner, {
                 className: "mr-2",
@@ -25634,7 +25958,7 @@ function GitCommitModalContent() {
               }),
               "Generating..."
             ]
-          }) : /* @__PURE__ */ jsxs85(Fragment40, {
+          }) : /* @__PURE__ */ jsxs85(Fragment41, {
             children: [
               /* @__PURE__ */ jsx99(Sparkles6, {
                 className: "w-4 h-4 mr-2"
@@ -25672,7 +25996,7 @@ function GitCommitModalContent() {
               disabled: !message.trim() || commitChanges.isPending,
               children: commitChanges.isPending ? /* @__PURE__ */ jsx99("span", {
                 children: "Committing..."
-              }) : /* @__PURE__ */ jsxs85(Fragment40, {
+              }) : /* @__PURE__ */ jsxs85(Fragment41, {
                 children: [
                   /* @__PURE__ */ jsx99(GitCommit4, {
                     className: "w-4 h-4 mr-2"
@@ -25696,7 +26020,7 @@ function GitCommitModalContent() {
   });
 }
 // src/components/terminals/TerminalsPanel.tsx
-import { memo as memo31, useCallback as useCallback34, useRef as useRef28, useEffect as useEffect46 } from "react";
+import { memo as memo31, useCallback as useCallback34, useRef as useRef28, useEffect as useEffect47 } from "react";
 import {
   Terminal as TerminalIcon,
   Maximize2 as Maximize22,
@@ -25879,7 +26203,7 @@ var TerminalTab = memo29(function TerminalTab2({
 });
 
 // src/components/terminals/TerminalViewer.tsx
-import { memo as memo30, useEffect as useEffect45, useRef as useRef27, useState as useState47, useCallback as useCallback33 } from "react";
+import { memo as memo30, useEffect as useEffect46, useRef as useRef27, useState as useState47, useCallback as useCallback33 } from "react";
 import {
   init,
   Terminal as Terminal7,
@@ -26079,7 +26403,7 @@ var TerminalViewer = memo30(function TerminalViewer2({
       }
     };
   }, [terminalId]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (!containerRef.current || !terminalId)
       return;
     let disposed = false;
@@ -26250,7 +26574,7 @@ var TerminalViewer = memo30(function TerminalViewer2({
       fitAddonRef.current = null;
     };
   }, [terminalId, connectWebSocket]);
-  useEffect45(() => {
+  useEffect46(() => {
     const term = termRef.current;
     if (!term)
       return;
@@ -26268,7 +26592,7 @@ var TerminalViewer = memo30(function TerminalViewer2({
       }
     }
   }, [isActive, fitTerminal]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (isActive) {
       fitTerminal();
     }
@@ -26306,12 +26630,12 @@ var TerminalViewer = memo30(function TerminalViewer2({
 });
 
 // src/components/terminals/TerminalsPanel.tsx
-import { jsx as jsx102, jsxs as jsxs88, Fragment as Fragment41 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs88, Fragment as Fragment42 } from "react/jsx-runtime";
 var MIN_HEIGHT2 = 150;
 var MAX_HEIGHT_RATIO = 0.85;
 var TerminalsPanel = memo31(function TerminalsPanel2() {
   const isOpen = useTerminalStore((s) => s.isOpen);
-  return /* @__PURE__ */ jsxs88(Fragment41, {
+  return /* @__PURE__ */ jsxs88(Fragment42, {
     children: [
       /* @__PURE__ */ jsx102(TerminalPanelShortcutController, {}),
       isOpen ? /* @__PURE__ */ jsx102(TerminalsPanelContent, {}) : null
@@ -26320,7 +26644,7 @@ var TerminalsPanel = memo31(function TerminalsPanel2() {
 });
 function TerminalPanelShortcutController() {
   const togglePanel = useTerminalStore((s) => s.togglePanel);
-  useEffect46(() => {
+  useEffect47(() => {
     const handleKeyDown = (e) => {
       if (e.key === "`" && e.ctrlKey) {
         e.preventDefault();
@@ -26348,12 +26672,12 @@ var TerminalsPanelContent = memo31(function TerminalsPanelContent2() {
   const autoCreatingRef = useRef28(false);
   const terminalsListRef = useRef28(terminalsList);
   terminalsListRef.current = terminalsList;
-  useEffect46(() => {
+  useEffect47(() => {
     if (terminalsListRef.current.length > 0 && (!activeTabId || !terminalsListRef.current.find((t) => t.id === activeTabId))) {
       selectTab(terminalsListRef.current[0].id);
     }
   }, [terminalsList.length, activeTabId, selectTab]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (terminals && terminalsList.length === 0 && !autoCreatingRef.current && !createTerminal.isPending) {
       autoCreatingRef.current = true;
       createTerminal.mutateAsync({
@@ -26608,7 +26932,7 @@ function useSessionFiles(sessionId, enabled = true) {
 }
 
 // src/components/session-files/SessionFilesSidebar.tsx
-import { jsx as jsx104, jsxs as jsxs90, Fragment as Fragment42 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs90, Fragment as Fragment43 } from "react/jsx-runtime";
 var PANEL_KEY2 = "session-files";
 var DEFAULT_WIDTH2 = 320;
 var MIN_WIDTH2 = 320;
@@ -26780,7 +27104,7 @@ var SessionFilesSidebarContent = memo33(function SessionFilesSidebarContent2({
             icon: /* @__PURE__ */ jsx104(FilePen, {
               className: "size-[15px]"
             }),
-            title: /* @__PURE__ */ jsxs90(Fragment42, {
+            title: /* @__PURE__ */ jsxs90(Fragment43, {
               children: [
                 "Session Files",
                 data && data.totalFiles > 0 && /* @__PURE__ */ jsxs90("span", {
@@ -26897,7 +27221,7 @@ var SessionFilesSidebarToggle = memo34(function SessionFilesSidebarToggle2({
   });
 });
 // src/components/session-files/SessionFilesDiffPanel.tsx
-import { useEffect as useEffect47, useMemo as useMemo28, memo as memo35 } from "react";
+import { useEffect as useEffect48, useMemo as useMemo28, memo as memo35 } from "react";
 import { X as X18, ChevronLeft, ChevronRight as ChevronRight14 } from "lucide-react";
 import { jsx as jsx106, jsxs as jsxs92 } from "react/jsx-runtime";
 function transformToUnifiedDiff(patch) {
@@ -27041,7 +27365,7 @@ ${contentLines.map((line) => `+${line}`).join(`
     }
     return rawPatch;
   }, [selectedOperation, selectedFile]);
-  useEffect47(() => {
+  useEffect48(() => {
     const handleKeyDown = (e) => {
       const target = e.target;
       const isInInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
@@ -27214,7 +27538,7 @@ ${contentLines.map((line) => `+${line}`).join(`
   });
 });
 // src/components/research/ResearchSidebar.tsx
-import { memo as memo36, useState as useState48, useEffect as useEffect48, useCallback as useCallback36, useRef as useRef29, useMemo as useMemo29 } from "react";
+import { memo as memo36, useState as useState48, useEffect as useEffect49, useCallback as useCallback36, useRef as useRef29, useMemo as useMemo29 } from "react";
 import {
   FlaskConical as FlaskConical3,
   Plus as Plus6,
@@ -27346,7 +27670,7 @@ function useExportToSession() {
 
 // src/components/research/ResearchSidebar.tsx
 import { useMutation as useMutation10, useQueryClient as useQueryClient18 } from "@tanstack/react-query";
-import { jsx as jsx107, jsxs as jsxs93, Fragment as Fragment43 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs93, Fragment as Fragment44 } from "react/jsx-runtime";
 var PANEL_KEY3 = "research";
 var DEFAULT_WIDTH3 = 320;
 var MIN_WIDTH3 = 320;
@@ -27398,12 +27722,12 @@ var ResearchSidebarContent = memo36(function ResearchSidebarContent2({
       queryClient.invalidateQueries({ queryKey: ["messages", sessionId] });
     }
   });
-  useEffect48(() => {
+  useEffect49(() => {
     if (parentSessionId) {
       useResearchStore.getState().setParentSessionId(parentSessionId);
     }
   }, [parentSessionId]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (researchData?.sessions?.length) {
       const currentIsValid = researchData.sessions.some((s) => s.id === activeResearchSessionId);
       if (!currentIsValid) {
@@ -27413,7 +27737,7 @@ var ResearchSidebarContent = memo36(function ResearchSidebarContent2({
       selectResearchSession(null);
     }
   }, [researchData, activeResearchSessionId, selectResearchSession]);
-  useEffect48(() => {
+  useEffect49(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, []);
   const adjustTextareaHeight = useCallback36(() => {
@@ -27423,7 +27747,7 @@ var ResearchSidebarContent = memo36(function ResearchSidebarContent2({
     textarea.style.height = "auto";
     textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
   }, []);
-  useEffect48(() => {
+  useEffect49(() => {
     adjustTextareaHeight();
   }, [adjustTextareaHeight]);
   const handleCreateNew = useCallback36(async () => {
@@ -27653,7 +27977,7 @@ var ResearchSidebarContent = memo36(function ResearchSidebarContent2({
                 }, session.id))
               })
             ]
-          }) : /* @__PURE__ */ jsxs93(Fragment43, {
+          }) : /* @__PURE__ */ jsxs93(Fragment44, {
             children: [
               /* @__PURE__ */ jsx107("div", {
                 className: "flex-1 overflow-y-auto px-3 py-3 research-messages text-[13px]",
@@ -27915,7 +28239,7 @@ var ResearchSidebarToggle = memo37(function ResearchSidebarToggle2({
   });
 });
 // src/components/settings/SettingsSidebar.tsx
-import { memo as memo39, useState as useState50, useMemo as useMemo30, useCallback as useCallback38, useEffect as useEffect51, useRef as useRef32 } from "react";
+import { memo as memo39, useState as useState50, useMemo as useMemo30, useCallback as useCallback38, useEffect as useEffect52, useRef as useRef32 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence as AnimatePresence3, motion as motion4 } from "motion/react";
 import {
@@ -27979,7 +28303,7 @@ var useOnboardingStore = create23((set, get) => ({
 }));
 
 // src/hooks/useAuthStatus.ts
-import { useEffect as useEffect49, useCallback as useCallback37, useState as useState49, useRef as useRef30 } from "react";
+import { useEffect as useEffect50, useCallback as useCallback37, useState as useState49, useRef as useRef30 } from "react";
 import { useQueryClient as useQueryClient19 } from "@tanstack/react-query";
 var isInIframe = typeof window !== "undefined" && window.self !== window.top;
 function useAuthStatus() {
@@ -28183,7 +28507,7 @@ function useAuthStatus() {
       setLoading(false);
     }
   }, [fetchAuthStatus, setLoading, setError]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!oauthPolling || !isInIframe)
       return;
     oauthPollingRef.current = setInterval(() => {
@@ -28197,7 +28521,7 @@ function useAuthStatus() {
       clearTimeout(timeout);
     };
   }, [oauthPolling, fetchAuthStatus]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!oauthPolling || !authStatus)
       return;
     const currentConfigured = Object.entries(authStatus.providers).filter(([, p]) => p.configured);
@@ -28206,7 +28530,7 @@ function useAuthStatus() {
       setOauthPolling(false);
     }
   }, [authStatus, oauthPolling]);
-  useEffect49(() => {
+  useEffect50(() => {
     const handleOAuthMessage = (event) => {
       if (event.data?.type === "oauth-success") {
         fetchAuthStatus();
@@ -28518,14 +28842,14 @@ var DictationSettings = memo38(function DictationSettings2({
 });
 
 // src/hooks/useTopupCallback.ts
-import { useEffect as useEffect50, useRef as useRef31 } from "react";
+import { useEffect as useEffect51, useRef as useRef31 } from "react";
 var STORAGE_KEY = "pendingPolarCheckout";
 function useTopupCallback() {
   const hasHandled = useRef31(false);
   const loadingToastId = useRef31(null);
   const setBalance = useOttoRouterStore((s) => s.setBalance);
   const removeToast = useToastStore((s) => s.removeToast);
-  useEffect50(() => {
+  useEffect51(() => {
     if (hasHandled.current)
       return;
     const params = new URLSearchParams(window.location.search);
@@ -28587,7 +28911,7 @@ function useTopupCallback() {
 }
 
 // src/components/settings/SettingsSidebar.tsx
-import { jsx as jsx110, jsxs as jsxs96, Fragment as Fragment44 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs96, Fragment as Fragment45 } from "react/jsx-runtime";
 var SETTINGS_PANEL_KEY = "settings";
 var SETTINGS_DEFAULT_WIDTH = 320;
 var SETTINGS_MIN_WIDTH = 320;
@@ -28730,7 +29054,7 @@ var SelectRow = memo39(function SelectRow2({
   const [menuStyle, setMenuStyle] = useState50(null);
   const buttonRef = useRef32(null);
   const selectedOption = options.find((o) => o.id === value);
-  useEffect51(() => {
+  useEffect52(() => {
     if (!isOpen || !buttonRef.current)
       return;
     const update = () => {
@@ -28787,7 +29111,7 @@ var SelectRow = memo39(function SelectRow2({
               })
             ]
           }),
-          isOpen && menuStyle && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsxs96(Fragment44, {
+          isOpen && menuStyle && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsxs96(Fragment45, {
             children: [
               /* @__PURE__ */ jsx110("div", {
                 className: "fixed inset-0 z-[10000]",
@@ -28893,7 +29217,7 @@ var FontPickerRow = memo39(function FontPickerRow2({
                 })
               ]
             }),
-            isOpen && /* @__PURE__ */ jsxs96(Fragment44, {
+            isOpen && /* @__PURE__ */ jsxs96(Fragment45, {
               children: [
                 /* @__PURE__ */ jsx110("div", {
                   className: "fixed inset-0 z-40",
@@ -28956,7 +29280,7 @@ var NumberInputRow = memo39(function NumberInputRow2({
   disabled
 }) {
   const [draft, setDraft] = useState50(value !== null && value !== undefined ? String(value) : "");
-  useEffect51(() => {
+  useEffect52(() => {
     setDraft(value !== null && value !== undefined ? String(value) : "");
   }, [value]);
   const persistedValue = value !== null && value !== undefined ? String(value) : "";
@@ -29511,13 +29835,13 @@ function OttoRouterSubscriptionInfo() {
   const payg = useOttoRouterStore((s) => s.payg);
   if (!subscription?.active)
     return null;
-  return /* @__PURE__ */ jsxs96(Fragment44, {
+  return /* @__PURE__ */ jsxs96(Fragment45, {
     children: [
       /* @__PURE__ */ jsx110(SettingRow, {
         label: "Plan",
         value: subscription.tierName ?? "GO"
       }),
-      subscription.usageWindows && /* @__PURE__ */ jsxs96(Fragment44, {
+      subscription.usageWindows && /* @__PURE__ */ jsxs96(Fragment45, {
         children: [
           /* @__PURE__ */ jsx110(SettingRow, {
             label: "5h",
@@ -29633,7 +29957,7 @@ var OttoRouterWalletSection = memo39(function OttoRouterWalletSection2({
       })
     }),
     children: [
-      isLoaded ? /* @__PURE__ */ jsxs96(Fragment44, {
+      isLoaded ? /* @__PURE__ */ jsxs96(Fragment45, {
         children: [
           /* @__PURE__ */ jsx110("div", {
             className: "flex justify-center pb-3",
@@ -29671,7 +29995,7 @@ var OttoRouterWalletSection = memo39(function OttoRouterWalletSection2({
             ]
           }),
           /* @__PURE__ */ jsx110(OttoRouterSubscriptionInfo, {}),
-          !hasActiveSubscription && /* @__PURE__ */ jsxs96(Fragment44, {
+          !hasActiveSubscription && /* @__PURE__ */ jsxs96(Fragment45, {
             children: [
               /* @__PURE__ */ jsx110(SettingRow, {
                 label: "Balance",
@@ -29684,7 +30008,7 @@ var OttoRouterWalletSection = memo39(function OttoRouterWalletSection2({
             ]
           })
         ]
-      }) : /* @__PURE__ */ jsxs96(Fragment44, {
+      }) : /* @__PURE__ */ jsxs96(Fragment45, {
         children: [
           /* @__PURE__ */ jsx110("div", {
             className: "flex justify-center pb-3",
@@ -29869,7 +30193,7 @@ import { QRCodeSVG as QRCodeSVG2 } from "qrcode.react";
 
 // src/hooks/useTunnel.ts
 import { useQuery as useQuery14, useMutation as useMutation11, useQueryClient as useQueryClient20 } from "@tanstack/react-query";
-import { useEffect as useEffect52, useCallback as useCallback39, useRef as useRef33 } from "react";
+import { useEffect as useEffect53, useCallback as useCallback39, useRef as useRef33 } from "react";
 import {
   client as client4,
   getTunnelQr,
@@ -29912,7 +30236,7 @@ function useTunnelStatus() {
     queryFn: fetchTunnelStatus,
     refetchInterval: 3000
   });
-  useEffect52(() => {
+  useEffect53(() => {
     if (query.data) {
       setStatus(query.data.status);
       setUrl(query.data.url);
@@ -29972,7 +30296,7 @@ function useTunnelQr() {
     queryFn: fetchTunnelQr,
     enabled: !!url
   });
-  useEffect52(() => {
+  useEffect53(() => {
     if (query.data?.ok && query.data.qrCode) {
       setQrCode(query.data.qrCode);
     }
@@ -30012,7 +30336,7 @@ function useTunnelStream() {
       eventSourceRef.current = null;
     };
   }, [setStatus, setUrl, setError, setProgress]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (isExpanded) {
       const cleanup = connect();
       return cleanup;
@@ -30028,7 +30352,7 @@ function useTunnelStream() {
 }
 
 // src/components/tunnel/TunnelSidebar.tsx
-import { jsx as jsx112, jsxs as jsxs98, Fragment as Fragment45 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs98, Fragment as Fragment46 } from "react/jsx-runtime";
 function truncateUrl(url) {
   try {
     const parsed = new URL(url);
@@ -30200,7 +30524,7 @@ var TunnelSidebarContent = memo41(function TunnelSidebarContent2() {
           status === "error" && /* @__PURE__ */ jsxs98("div", {
             className: "flex flex-col items-center justify-center h-full text-center",
             children: [
-              error?.includes("Rate limited") ? /* @__PURE__ */ jsxs98(Fragment45, {
+              error?.includes("Rate limited") ? /* @__PURE__ */ jsxs98(Fragment46, {
                 children: [
                   /* @__PURE__ */ jsx112(Clock4, {
                     className: "w-8 h-8 text-yellow-500 mb-4"
@@ -30214,7 +30538,7 @@ var TunnelSidebarContent = memo41(function TunnelSidebarContent2() {
                     children: "Cloudflare limits anonymous tunnel requests. Please wait 5-10 minutes before trying again."
                   })
                 ]
-              }) : /* @__PURE__ */ jsxs98(Fragment45, {
+              }) : /* @__PURE__ */ jsxs98(Fragment46, {
                 children: [
                   /* @__PURE__ */ jsx112(AlertCircle12, {
                     className: "w-8 h-8 text-destructive mb-4"
@@ -30272,7 +30596,7 @@ var TunnelSidebarToggle = memo42(function TunnelSidebarToggle2() {
   });
 });
 // src/components/mcp/MCPSidebar.tsx
-import { memo as memo45, useState as useState53, useCallback as useCallback42, useMemo as useMemo31, useEffect as useEffect55, useRef as useRef36 } from "react";
+import { memo as memo45, useState as useState53, useCallback as useCallback42, useMemo as useMemo31, useEffect as useEffect56, useRef as useRef36 } from "react";
 import {
   ChevronDown as ChevronDown13,
   ChevronRight as ChevronRight16,
@@ -30293,7 +30617,7 @@ import { useQueryClient as useQueryClient22 } from "@tanstack/react-query";
 
 // src/hooks/useMCP.ts
 import { useQuery as useQuery15, useMutation as useMutation12, useQueryClient as useQueryClient21 } from "@tanstack/react-query";
-import { useEffect as useEffect53, useRef as useRef34, useCallback as useCallback40 } from "react";
+import { useEffect as useEffect54, useRef as useRef34, useCallback as useCallback40 } from "react";
 import {
   listMcpServers,
   startMcpServer,
@@ -30315,7 +30639,7 @@ function useMCPServers() {
     },
     refetchInterval: 1e4
   });
-  useEffect53(() => {
+  useEffect54(() => {
     if (query.data?.servers) {
       setServers(query.data.servers);
     }
@@ -30466,7 +30790,7 @@ function useCopilotDevicePoller() {
       timerRef.current = null;
     }
   }, []);
-  useEffect53(() => {
+  useEffect54(() => {
     if (!copilotDevice) {
       stopPolling();
       return;
@@ -30502,9 +30826,9 @@ function useCopilotDevicePoller() {
 }
 
 // src/components/mcp/AddMCPServerModal.tsx
-import { memo as memo43, useState as useState52, useCallback as useCallback41, useRef as useRef35, useEffect as useEffect54 } from "react";
+import { memo as memo43, useState as useState52, useCallback as useCallback41, useRef as useRef35, useEffect as useEffect55 } from "react";
 import { Globe as Globe5, Laptop, FolderDot, Terminal as Terminal9 } from "lucide-react";
-import { jsx as jsx114, jsxs as jsxs100, Fragment as Fragment46 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs100, Fragment as Fragment47 } from "react/jsx-runtime";
 function parseCommandString(input) {
   const parts = input.trim().split(/\s+/);
   return { command: parts[0] ?? "", args: parts.slice(1) };
@@ -30625,7 +30949,7 @@ var AddMCPServerModal = memo43(function AddMCPServerModal2({
   ]);
   const contentRef = useRef35(null);
   const [contentHeight, setContentHeight] = useState52(undefined);
-  useEffect54(() => {
+  useEffect55(() => {
     const el = contentRef.current;
     if (!el)
       return;
@@ -30694,7 +31018,7 @@ var AddMCPServerModal = memo43(function AddMCPServerModal2({
               })
             ]
           }),
-          serverMode === "local" ? /* @__PURE__ */ jsxs100(Fragment46, {
+          serverMode === "local" ? /* @__PURE__ */ jsxs100(Fragment47, {
             children: [
               /* @__PURE__ */ jsxs100("div", {
                 children: [
@@ -30745,7 +31069,7 @@ API_KEY=sk-xxx`,
                 ]
               })
             ]
-          }) : /* @__PURE__ */ jsxs100(Fragment46, {
+          }) : /* @__PURE__ */ jsxs100(Fragment47, {
             children: [
               /* @__PURE__ */ jsxs100("div", {
                 children: [
@@ -30883,7 +31207,7 @@ API_KEY=sk-xxx`,
                 variant: "primary",
                 onClick: handleSubmit,
                 disabled: addServer.isPending,
-                children: addServer.isPending ? /* @__PURE__ */ jsxs100(Fragment46, {
+                children: addServer.isPending ? /* @__PURE__ */ jsxs100(Fragment47, {
                   children: [
                     /* @__PURE__ */ jsx114(StableSpinner, {
                       size: "xs",
@@ -30937,7 +31261,7 @@ var ToggleSwitch = memo44(function ToggleSwitch2({
 });
 
 // src/components/mcp/MCPSidebar.tsx
-import { jsx as jsx116, jsxs as jsxs101, Fragment as Fragment47 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs101, Fragment as Fragment48 } from "react/jsx-runtime";
 var CopilotDeviceAuth = memo45(function CopilotDeviceAuth2({
   userCode,
   verificationUri
@@ -31173,7 +31497,7 @@ var MCPServerCard = memo45(function MCPServerCard2({
 function useAuthPoller(name, onAuthenticated) {
   const { data } = useMCPAuthStatus(name);
   const prevAuth = useRef36(false);
-  useEffect55(() => {
+  useEffect56(() => {
     if (data?.authenticated && !prevAuth.current) {
       onAuthenticated();
     }
@@ -31211,7 +31535,7 @@ var MCPSidebarContent = memo45(function MCPSidebarContent2() {
     }
   }, [pollingServer, setAuthUrl, queryClient]);
   useAuthPoller(pollingServer, handleAuthCompleted);
-  useEffect55(() => {
+  useEffect56(() => {
     for (const name of loading) {
       const server = servers.find((s) => s.name === name);
       if (server?.connected) {
@@ -31300,7 +31624,7 @@ var MCPSidebarContent = memo45(function MCPSidebarContent2() {
         icon: /* @__PURE__ */ jsx116(Plug4, {
           className: "size-[15px]"
         }),
-        title: /* @__PURE__ */ jsxs101(Fragment47, {
+        title: /* @__PURE__ */ jsxs101(Fragment48, {
           children: [
             "MCP Servers",
             connectedCount > 0 && /* @__PURE__ */ jsxs101("span", {
@@ -31903,7 +32227,7 @@ var SkillsSidebarToggle = memo48(function SkillsSidebarToggle2() {
   });
 });
 // src/components/skills/SkillViewerPanel.tsx
-import { memo as memo49, useEffect as useEffect56 } from "react";
+import { memo as memo49, useEffect as useEffect57 } from "react";
 import { X as X22 } from "lucide-react";
 import { jsx as jsx120, jsxs as jsxs105 } from "react/jsx-runtime";
 var SkillViewerPanel = memo49(function SkillViewerPanel2({
@@ -31927,7 +32251,7 @@ var SkillViewerPanel = memo49(function SkillViewerPanel2({
   const content = isMainFile ? skillDetail?.content : fileData?.content;
   const isLoading = isMainFile ? !skillDetail : fileLoading;
   const displayPath = isMainFile ? "SKILL.md" : viewingFile ?? "";
-  useEffect56(() => {
+  useEffect57(() => {
     const handleEscape = (e) => {
       const target = e.target;
       const isInInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
@@ -32002,7 +32326,7 @@ var SkillViewerPanel = memo49(function SkillViewerPanel2({
   });
 });
 // src/components/file-browser/FileBrowserSidebar.tsx
-import { memo as memo50, useCallback as useCallback43, useEffect as useEffect57, useRef as useRef37 } from "react";
+import { memo as memo50, useCallback as useCallback43, useEffect as useEffect58, useRef as useRef37 } from "react";
 import {
   ChevronRight as ChevronRight17,
   ChevronDown as ChevronDown14,
@@ -32213,7 +32537,7 @@ function FileTypeIcon({
 }
 
 // src/components/file-browser/FileBrowserSidebar.tsx
-import { jsx as jsx122, jsxs as jsxs106, Fragment as Fragment48 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs106, Fragment as Fragment49 } from "react/jsx-runtime";
 var PANEL_KEY4 = "file-browser";
 var DEFAULT_WIDTH4 = 320;
 var MIN_WIDTH4 = 320;
@@ -32272,7 +32596,7 @@ function TreeItem({
   const activeViewerTabPath = getViewerTabPath3(activeViewerTab);
   const isSelected = selectedFile === path || activeViewerTabPath === path;
   const itemRef = useRef37(null);
-  useEffect57(() => {
+  useEffect58(() => {
     if (isSelected) {
       itemRef.current?.scrollIntoView({ block: "nearest" });
     }
@@ -32292,7 +32616,7 @@ function TreeItem({
         onClick: handleClick,
         className: `w-full text-left flex items-center gap-1.5 px-2 py-1 text-sm hover:bg-muted/50 rounded transition-colors ${isSelected ? "bg-muted text-foreground" : "text-foreground/80"} ${gitignored || vendor ? "opacity-40" : ""}`,
         children: [
-          type === "directory" ? /* @__PURE__ */ jsxs106(Fragment48, {
+          type === "directory" ? /* @__PURE__ */ jsxs106(Fragment49, {
             children: [
               isExpanded ? /* @__PURE__ */ jsx122(ChevronDown14, {
                 className: "w-3 h-3 text-muted-foreground flex-shrink-0"
@@ -32305,7 +32629,7 @@ function TreeItem({
                 className: "w-3.5 h-3.5 text-blue-500 flex-shrink-0"
               })
             ]
-          }) : /* @__PURE__ */ jsxs106(Fragment48, {
+          }) : /* @__PURE__ */ jsxs106(Fragment49, {
             children: [
               /* @__PURE__ */ jsx122("span", {
                 className: "w-3 flex-shrink-0"
@@ -32341,7 +32665,7 @@ var FileBrowserSidebarContent = memo50(function FileBrowserSidebarContent2() {
   });
   const panelWidth = usePanelWidthStore((s) => s.widths[PANEL_KEY4] ?? DEFAULT_WIDTH4);
   const { data: rootData, isLoading, refetch } = useFileTree(".");
-  useEffect57(() => {
+  useEffect58(() => {
     if (activeFileTabPath) {
       revealFile(activeFileTabPath);
     }
@@ -32444,7 +32768,7 @@ var FileBrowserSidebarToggle = memo51(function FileBrowserSidebarToggle2() {
 // src/components/file-browser/FileViewerPanel.tsx
 import {
   memo as memo52,
-  useEffect as useEffect59,
+  useEffect as useEffect60,
   useMemo as useMemo34,
   useRef as useRef39
 } from "react";
@@ -32454,7 +32778,7 @@ import remarkGfm3 from "remark-gfm";
 
 // src/components/workspace/ToolPreviewPanel.tsx
 import { CheckCircle2 as CheckCircle22, XCircle as XCircle4 } from "lucide-react";
-import { useEffect as useEffect58, useMemo as useMemo33, useRef as useRef38 } from "react";
+import { useEffect as useEffect59, useMemo as useMemo33, useRef as useRef38 } from "react";
 import { jsx as jsx124, jsxs as jsxs108 } from "react/jsx-runtime";
 var LARGE_WRITE_PREVIEW_CHARS = 24000;
 var LARGE_WRITE_PREVIEW_LINES = 500;
@@ -33110,7 +33434,7 @@ function ToolPreviewPanel({ tab }) {
     };
   }
   const stablePatchPreview = lastPatchPreviewRef.current?.key === patchPreviewKey ? livePatchPreview ?? lastPatchPreviewRef.current.preview : livePatchPreview ?? persistedPatchPreview;
-  useEffect58(() => {
+  useEffect59(() => {
     if (tab.toolName !== "apply_patch" || !livePatchPreview)
       return;
     const baseContent = tab.baseContent ?? appliedFile?.content;
@@ -33135,11 +33459,11 @@ function ToolPreviewPanel({ tab }) {
       error: tab.error
     });
   }, [tab, appliedFile?.content, livePatchPreview]);
-  useEffect58(() => {
+  useEffect59(() => {
     if (shouldLoadAppliedFile)
       refetchAppliedFile();
   }, [shouldLoadAppliedFile, refetchAppliedFile]);
-  useEffect58(() => {
+  useEffect59(() => {
     if (scrollSignal.length === 0)
       return;
     const frame = window.requestAnimationFrame(() => {
@@ -33357,7 +33681,7 @@ var FileViewerPanel = memo52(function FileViewerPanel2({
   const closeViewer = onClose ?? storeCloseViewer;
   const selectedFileIsImage = selectedFile ? isImageFile2(selectedFile) : false;
   const { data, isLoading } = useFileContent(selectedFileIsImage ? null : selectedFile);
-  useEffect59(() => {
+  useEffect60(() => {
     const handleEscape = (e) => {
       const target = e.target;
       const isInInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
@@ -33384,7 +33708,7 @@ var FileViewerPanel = memo52(function FileViewerPanel2({
   const patchBaseContent = patchPreview ? patchPreview.baseContent ?? data?.content ?? "" : undefined;
   const livePatchPreview = useMemo34(() => selectedFile && patchPreview?.patch && patchBaseContent !== undefined ? buildLivePatchPreview(patchBaseContent, patchPreview.patch, selectedFile) : null, [selectedFile, patchPreview?.patch, patchBaseContent]);
   const activePatchPreview = patchPreview?.status === "success" ? persistedPatchPreview ?? livePatchPreview : livePatchPreview ?? persistedPatchPreview;
-  useEffect59(() => {
+  useEffect60(() => {
     if (!selectedFile || !patchPreview || !livePatchPreview)
       return;
     const baseContent = patchPreview.baseContent ?? data?.content;
@@ -33409,7 +33733,7 @@ var FileViewerPanel = memo52(function FileViewerPanel2({
       error: patchPreview.error
     });
   }, [selectedFile, data?.content, patchPreview, livePatchPreview]);
-  useEffect59(() => {
+  useEffect60(() => {
     if (!data || !effectiveHighlight?.startLine)
       return;
     const frame = window.requestAnimationFrame(() => {
@@ -33642,7 +33966,7 @@ var FileViewerPanel = memo52(function FileViewerPanel2({
   });
 });
 // src/components/file-browser/QuickFilePicker.tsx
-import { memo as memo53, useState as useState55, useEffect as useEffect60, useRef as useRef40, useCallback as useCallback44, useMemo as useMemo35 } from "react";
+import { memo as memo53, useState as useState55, useEffect as useEffect61, useRef as useRef40, useCallback as useCallback44, useMemo as useMemo35 } from "react";
 import { FileCode as FileCode3, Search as Search10 } from "lucide-react";
 
 // src/stores/filePickerStore.ts
@@ -33700,10 +34024,10 @@ var QuickFilePickerContent = memo53(function QuickFilePickerContent2() {
     const results = filesData.files.map((file) => ({ file, ...fuzzyMatch(query, file) })).filter((r) => r.match).sort((a, b) => b.score - a.score).slice(0, 50);
     return results.map((r) => r.file);
   }, [filesData?.files, query]);
-  useEffect60(() => {
+  useEffect61(() => {
     setTimeout(() => inputRef.current?.focus(), 0);
   }, []);
-  useEffect60(() => {
+  useEffect61(() => {
     const item = listRef.current?.children[selectedIndex];
     item?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
@@ -33892,7 +34216,7 @@ var BrowserPanelToggle = memo54(function BrowserPanelToggle2() {
   });
 });
 // src/components/browser/BrowserViewerPanel.tsx
-import { useCallback as useCallback45, useEffect as useEffect61, useRef as useRef41, useState as useState56 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect62, useRef as useRef41, useState as useState56 } from "react";
 import {
   ChevronLeft as ChevronLeft2,
   ChevronRight as ChevronRight18,
@@ -33906,20 +34230,35 @@ import {
 
 // src/hooks/useSimulator.ts
 import { useMutation as useMutation13, useQuery as useQuery16, useQueryClient as useQueryClient23 } from "@tanstack/react-query";
-function simulatorUrl(path) {
-  return `${API_BASE_URL.replace(/\/$/, "")}${path}`;
-}
-async function readJson(response) {
-  const data = await response.json();
-  if (!response.ok) {
-    const message = data && typeof data === "object" && "error" in data ? String(data.error) : response.statusText;
-    throw new Error(message);
+import {
+  getSimulatorStatus,
+  startSimulator as apiStartSimulator,
+  stopSimulator as apiStopSimulator
+} from "@ottocode/api";
+function getSimulatorApiErrorMessage(error, fallback) {
+  if (error && typeof error === "object") {
+    const record = error;
+    if (typeof record.error === "string" && record.error.trim()) {
+      return record.error;
+    }
   }
-  return data;
+  return fallback;
 }
 async function fetchSimulatorStatus() {
-  const response = await fetch(simulatorUrl("/v1/simulator/status"));
-  return readJson(response);
+  const response = await getSimulatorStatus();
+  if (response.error) {
+    throw new Error(getSimulatorApiErrorMessage(response.error, "Failed to get simulator status"));
+  }
+  return response.data;
+}
+async function startSimulator(port = 3200) {
+  const response = await apiStartSimulator({
+    body: { port }
+  });
+  if (response.error) {
+    throw new Error(getSimulatorApiErrorMessage(response.error, "Failed to start simulator"));
+  }
+  return response.data;
 }
 function useSimulatorStatus() {
   return useQuery16({
@@ -33928,11 +34267,39 @@ function useSimulatorStatus() {
     refetchInterval: 3000
   });
 }
+function useStartSimulator() {
+  const queryClient = useQueryClient23();
+  return useMutation13({
+    mutationFn: (port) => startSimulator(port),
+    onMutate: (port) => {
+      const previous = queryClient.getQueryData([
+        "simulator",
+        "status"
+      ]);
+      queryClient.setQueryData(["simulator", "status"], {
+        status: "starting",
+        url: previous?.url ?? null,
+        deviceName: previous?.deviceName ?? null,
+        udid: previous?.udid ?? null,
+        port: port ?? previous?.port ?? 3200,
+        error: null,
+        updatedAt: new Date().toISOString()
+      });
+    },
+    onSuccess: (result) => {
+      queryClient.setQueryData(["simulator", "status"], result);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["simulator"] });
+    }
+  });
+}
 
 // src/components/browser/BrowserViewerPanel.tsx
 import { jsx as jsx128, jsxs as jsxs111 } from "react/jsx-runtime";
 var DEFAULT_BROWSER_URL = "http://localhost:3000";
 var SIMULATOR_URL = "http://localhost:3200";
+var SIMULATOR_TAB_ID = "browser:simulator";
 var IFRAME_EMBED_TIMEOUT_MS = 6000;
 function normalizeBrowserUrl(value) {
   const trimmed = value.trim();
@@ -33971,12 +34338,23 @@ function BrowserViewerPanel({ tab }) {
   const [loadingProgress, setLoadingProgress] = useState56(() => isEmbeddableUrl(normalizeBrowserUrl(tab.url)) ? 12 : 0);
   const [embedError, setEmbedError] = useState56(null);
   const simulatorStatus = useSimulatorStatus();
+  const {
+    mutate: startSimulatorPreview,
+    isPending: isStartingSimulatorPreview,
+    error: startSimulatorError
+  } = useStartSimulator();
   const nativeBrowser = typeof window !== "undefined" ? window.OTTO_NATIVE_BROWSER : undefined;
   const normalizedUrl = normalizeBrowserUrl(tab.url);
   const canRenderUrl = isEmbeddableUrl(normalizedUrl);
   const useNativeBrowser = Boolean(nativeBrowser?.isAvailable && canRenderUrl);
   const canGoBack = historyIndex > 0;
   const canGoForward = historyIndex >= 0 && historyIndex < historyEntries.length - 1;
+  const simulatorStateStatus = simulatorStatus.data?.status;
+  const simulatorStateUrl = simulatorStatus.data?.url;
+  const isSimulatorPreview = tab.kind === "simulator";
+  const isStartingSimulator = isStartingSimulatorPreview || simulatorStateStatus === "starting";
+  const simulatorError = isSimulatorPreview && simulatorStatus.data?.status === "error" ? simulatorStatus.data.error : isSimulatorPreview ? startSimulatorError?.message : null;
+  const shouldHoldSimulatorPreview = isSimulatorPreview && !simulatorError && simulatorStateStatus !== "connected";
   const clearIframeEmbedTimeout = useCallback45(() => {
     if (iframeEmbedTimeoutRef.current) {
       clearTimeout(iframeEmbedTimeoutRef.current);
@@ -33996,13 +34374,13 @@ function BrowserViewerPanel({ tab }) {
       loadingDoneTimeoutRef.current = null;
     }, 180);
   }, [clearIframeEmbedTimeout]);
-  useEffect61(() => {
+  useEffect62(() => {
     setDraftUrl(tab.url);
   }, [tab.url]);
-  useEffect61(() => {
+  useEffect62(() => {
     isLoadingRef.current = isLoading;
   }, [isLoading]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (!isLoading)
       return;
     setLoadingProgress((progress) => progress <= 0 || progress >= 100 ? 12 : progress);
@@ -34015,17 +34393,25 @@ function BrowserViewerPanel({ tab }) {
     }, 250);
     return () => clearInterval(interval);
   }, [isLoading]);
-  useEffect61(() => () => {
+  useEffect62(() => () => {
     if (loadingDoneTimeoutRef.current) {
       clearTimeout(loadingDoneTimeoutRef.current);
     }
     clearIframeEmbedTimeout();
   }, [clearIframeEmbedTimeout]);
-  useEffect61(() => {
+  useEffect62(() => {
+    if (shouldHoldSimulatorPreview) {
+      clearIframeEmbedTimeout();
+      return;
+    }
     if (!isLoading || !canRenderUrl || useNativeBrowser) {
       clearIframeEmbedTimeout();
       return;
     }
+    if (isSimulatorPreview) {
+      clearIframeEmbedTimeout();
+      return;
+    }
     clearIframeEmbedTimeout();
     iframeEmbedTimeoutRef.current = setTimeout(() => {
       setEmbedError("This site may block embedding in Otto, or it took too long to load.");
@@ -34033,13 +34419,34 @@ function BrowserViewerPanel({ tab }) {
       setLoadingProgress(0);
     }, IFRAME_EMBED_TIMEOUT_MS);
     return clearIframeEmbedTimeout;
-  }, [canRenderUrl, clearIframeEmbedTimeout, isLoading, useNativeBrowser]);
-  useEffect61(() => () => {
+  }, [
+    canRenderUrl,
+    clearIframeEmbedTimeout,
+    isSimulatorPreview,
+    isLoading,
+    shouldHoldSimulatorPreview,
+    useNativeBrowser
+  ]);
+  useEffect62(() => {
+    if (!shouldHoldSimulatorPreview)
+      return;
+    setEmbedError(null);
+    setIsLoading(true);
+    setLoadingProgress((progress) => progress <= 0 || progress >= 100 ? 12 : progress);
+  }, [shouldHoldSimulatorPreview]);
+  useEffect62(() => {
+    if (!isSimulatorPreview || simulatorStateStatus !== "connected")
+      return;
+    setEmbedError(null);
+    setIsLoading(true);
+    setLoadingProgress(12);
+  }, [isSimulatorPreview, simulatorStateStatus]);
+  useEffect62(() => () => {
     if (nativeBrowser?.isAvailable) {
       nativeBrowser.unmount(tab.id);
     }
   }, [nativeBrowser, tab.id]);
-  useEffect61(() => {
+  useEffect62(() => {
     const nextUrl = normalizeBrowserUrl(tab.url);
     if (!nextUrl)
       return;
@@ -34053,7 +34460,7 @@ function BrowserViewerPanel({ tab }) {
       return nextEntries;
     });
   }, [tab.url, historyIndex]);
-  useEffect61(() => {
+  useEffect62(() => {
     const url = simulatorStatus.data?.url ?? SIMULATOR_URL;
     if (tab.kind === "simulator" && simulatorStatus.data?.status === "connected" && url !== tab.url) {
       openBrowserTab(url, {
@@ -34062,7 +34469,7 @@ function BrowserViewerPanel({ tab }) {
       });
     }
   }, [openBrowserTab, simulatorStatus.data, tab.kind, tab.url]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (!useNativeBrowser || !nativeBrowser?.isAvailable)
       return;
     const content = contentRef.current;
@@ -34155,7 +34562,32 @@ function BrowserViewerPanel({ tab }) {
       nativeBrowser.setVisible(tab.id, false);
     }
   };
-  const simulatorError = tab.kind === "simulator" && simulatorStatus.data?.status === "error" ? simulatorStatus.data.error : null;
+  const openSimulatorPreview = useCallback45(() => {
+    const previewUrl = simulatorStateUrl ?? SIMULATOR_URL;
+    openBrowserTab(previewUrl, {
+      kind: "simulator",
+      title: "Simulator"
+    });
+    if (simulatorStateStatus === "connected" || simulatorStateStatus === "starting" || isStartingSimulatorPreview) {
+      return;
+    }
+    startSimulatorPreview(3200, {
+      onSuccess: (result) => {
+        openBrowserTab(result.url ?? SIMULATOR_URL, {
+          kind: "simulator",
+          title: "Simulator"
+        });
+        reloadBrowserTab(SIMULATOR_TAB_ID);
+      }
+    });
+  }, [
+    isStartingSimulatorPreview,
+    openBrowserTab,
+    reloadBrowserTab,
+    simulatorStateStatus,
+    simulatorStateUrl,
+    startSimulatorPreview
+  ]);
   return /* @__PURE__ */ jsxs111("div", {
     className: "h-full w-full min-w-0 bg-background flex flex-col",
     children: [
@@ -34227,40 +34659,43 @@ function BrowserViewerPanel({ tab }) {
                 ]
               })
             }),
-            /* @__PURE__ */ jsx128("button", {
-              type: "button",
-              onClick: () => window.open(normalizedUrl, "_blank", "noopener,noreferrer"),
-              disabled: !canRenderUrl,
-              title: "Open externally",
-              className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground/40 disabled:hover:bg-transparent",
-              children: /* @__PURE__ */ jsx128(ExternalLink11, {
-                className: "h-4 w-4"
-              })
-            }),
-            /* @__PURE__ */ jsx128("button", {
-              type: "button",
-              onClick: () => openBrowserTab("", {
-                kind: "browser",
-                title: "Browser",
-                newTab: true
-              }),
-              title: "New browser preview",
-              className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground",
-              children: /* @__PURE__ */ jsx128(Plus9, {
-                className: "h-4 w-4"
-              })
-            }),
-            /* @__PURE__ */ jsx128("button", {
-              type: "button",
-              onClick: () => openBrowserTab(SIMULATOR_URL, {
-                kind: "simulator",
-                title: "Simulator"
-              }),
-              title: "Simulator preview",
-              className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground",
-              children: /* @__PURE__ */ jsx128(Smartphone, {
-                className: "h-4 w-4"
-              })
+            /* @__PURE__ */ jsxs111("div", {
+              className: "flex shrink-0 items-center gap-1",
+              "data-smart-edge-ignore": "right",
+              children: [
+                /* @__PURE__ */ jsx128("button", {
+                  type: "button",
+                  onClick: () => window.open(normalizedUrl, "_blank", "noopener,noreferrer"),
+                  disabled: !canRenderUrl,
+                  title: "Open externally",
+                  className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground/40 disabled:hover:bg-transparent",
+                  children: /* @__PURE__ */ jsx128(ExternalLink11, {
+                    className: "h-4 w-4"
+                  })
+                }),
+                /* @__PURE__ */ jsx128("button", {
+                  type: "button",
+                  onClick: () => openBrowserTab("", {
+                    kind: "browser",
+                    title: "Browser",
+                    newTab: true
+                  }),
+                  title: "New browser preview",
+                  className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground",
+                  children: /* @__PURE__ */ jsx128(Plus9, {
+                    className: "h-4 w-4"
+                  })
+                }),
+                /* @__PURE__ */ jsx128("button", {
+                  type: "button",
+                  onClick: openSimulatorPreview,
+                  title: isStartingSimulator ? "Starting simulator preview" : "Start simulator preview",
+                  className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground",
+                  children: /* @__PURE__ */ jsx128(Smartphone, {
+                    className: `h-4 w-4 ${isStartingSimulator ? "animate-pulse" : ""}`
+                  })
+                })
+              ]
             })
           ]
         })
@@ -34272,7 +34707,32 @@ function BrowserViewerPanel({ tab }) {
       /* @__PURE__ */ jsx128("div", {
         ref: contentRef,
         className: "min-h-0 flex-1 bg-muted/20",
-        children: useNativeBrowser && canRenderUrl ? /* @__PURE__ */ jsx128("div", {
+        children: shouldHoldSimulatorPreview ? /* @__PURE__ */ jsx128("div", {
+          className: "h-full w-full flex items-center justify-center p-6 text-center",
+          children: /* @__PURE__ */ jsxs111("div", {
+            className: "max-w-md rounded-lg border border-border bg-background p-6 shadow-sm",
+            children: [
+              /* @__PURE__ */ jsx128(Smartphone, {
+                className: "mx-auto mb-3 h-8 w-8 animate-pulse text-violet-500"
+              }),
+              /* @__PURE__ */ jsx128("h2", {
+                className: "mb-2 text-sm font-semibold text-foreground",
+                children: isStartingSimulator || simulatorStatus.isLoading ? "Starting simulator preview" : "Simulator preview is not running"
+              }),
+              /* @__PURE__ */ jsx128("p", {
+                className: "mb-4 text-xs leading-relaxed text-muted-foreground",
+                children: isStartingSimulator || simulatorStatus.isLoading ? "Otto is waiting for serve-sim to publish a preview URL." : "Start serve-sim before loading the simulator web preview."
+              }),
+              !isStartingSimulator && !simulatorStatus.isLoading && /* @__PURE__ */ jsx128(Button, {
+                type: "button",
+                variant: "secondary",
+                size: "sm",
+                onClick: openSimulatorPreview,
+                children: "Start simulator"
+              })
+            ]
+          })
+        }) : useNativeBrowser && canRenderUrl ? /* @__PURE__ */ jsx128("div", {
           className: "h-full w-full bg-background"
         }) : canRenderUrl && !embedError ? /* @__PURE__ */ jsx128("iframe", {
           ref: iframeRef,
@@ -34364,7 +34824,7 @@ function BrowserViewerPanel({ tab }) {
   });
 }
 // src/components/workspace/ViewerTabs.tsx
-import { memo as memo55, useEffect as useEffect62 } from "react";
+import { memo as memo55, useEffect as useEffect63 } from "react";
 import { Code2, GitCommit as GitCommit5, Globe2 as Globe24, Smartphone as Smartphone2, X as X25 } from "lucide-react";
 import { jsx as jsx129, jsxs as jsxs112 } from "react/jsx-runtime";
 function tabKindLabel(tab) {
@@ -34547,7 +35007,7 @@ var ViewerTabs = memo55(function ViewerTabs2() {
   const closeTab = useViewerTabsStore((state) => state.closeTab);
   const closeAllTabs = useViewerTabsStore((state) => state.closeAllTabs);
   const updateSessionFileOperationIndex = useViewerTabsStore((state) => state.updateSessionFileOperationIndex);
-  useEffect62(() => {
+  useEffect63(() => {
     const handleKeyDown = (event) => {
       const target = event.target;
       const isInInput = target?.tagName === "INPUT" || target?.tagName === "TEXTAREA" || target?.isContentEditable;
@@ -34713,10 +35173,10 @@ ${tabKindLabel(tab)}`,
   });
 });
 // src/components/onboarding/OnboardingModal.tsx
-import { memo as memo58, useEffect as useEffect65 } from "react";
+import { memo as memo58, useEffect as useEffect66 } from "react";
 
 // src/components/onboarding/steps/ProviderSetupStep.tsx
-import { memo as memo56, useEffect as useEffect63, useState as useState57, useRef as useRef42 } from "react";
+import { memo as memo56, useEffect as useEffect64, useState as useState57, useRef as useRef42 } from "react";
 import {
   Copy as Copy5,
   Check as Check16,
@@ -34732,7 +35192,7 @@ import {
   Globe as Globe8
 } from "lucide-react";
 import { QRCodeSVG as QRCodeSVG3 } from "qrcode.react";
-import { jsx as jsx130, jsxs as jsxs113, Fragment as Fragment49 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs113, Fragment as Fragment50 } from "react/jsx-runtime";
 var CUSTOM_PROVIDER_COMPATIBILITY_OPTIONS = [
   { value: "openai-compatible", label: "OpenAI-compatible" },
   { value: "openai", label: "OpenAI" },
@@ -34839,34 +35299,34 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
   const { fetchBalance } = useOttoRouterBalance("ottorouter");
   const effectivePayg = payg?.effectiveSpendableUsd ?? balance ?? 0;
   const ottorouterStatusLabel = subscription?.active ? `GO ${(subscription.creditsRemaining ?? 0).toFixed(1)} credits` : `$${effectivePayg.toFixed(2)}`;
-  useEffect63(() => {
+  useEffect64(() => {
     if (prevTopupModalOpen.current && !isTopupModalOpen) {
       fetchBalance();
     }
     prevTopupModalOpen.current = isTopupModalOpen;
   }, [isTopupModalOpen, fetchBalance]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!authStatus.ottorouter.configured && !isSettingUp) {
       setIsSettingUp(true);
       onSetupWallet().finally(() => setIsSettingUp(false));
     }
   }, [authStatus.ottorouter.configured, onSetupWallet, isSettingUp]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (addingProvider && apiKeyInputRef.current) {
       apiKeyInputRef.current.focus();
     }
   }, [addingProvider]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (oauthSession && oauthCodeInputRef.current) {
       oauthCodeInputRef.current.focus();
     }
   }, [oauthSession]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (isImportModalOpen && importPrivateKeyRef.current) {
       importPrivateKeyRef.current.focus();
     }
   }, [isImportModalOpen]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!copilotPolling || !copilotDevice || !copilotPollFnRef.current)
       return;
     copilotCancelledRef.current = false;
@@ -34911,7 +35371,7 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
       clearTimeout(timeout);
     };
   }, [copilotPolling, copilotDevice]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!openAIPolling || !openAIDevice || !openAIPollFnRef.current)
       return;
     openAICancelledRef.current = false;
@@ -35264,7 +35724,7 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
     setImportWalletError(null);
     setImportPrivateKey("");
   };
-  useEffect63(() => {
+  useEffect64(() => {
     const handleNativeBack = (event) => {
       const customEvent = event;
       if (!customEvent.detail || customEvent.detail.handled)
@@ -36222,7 +36682,7 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
                       className: "flex-1 h-11 px-4 bg-foreground text-background rounded-lg font-medium hover:bg-foreground/90 transition-colors disabled:opacity-50 flex items-center justify-center gap-2",
                       children: isOpeningPopup ? /* @__PURE__ */ jsx130(StableSpinner, {
                         title: "Opening OAuth popup"
-                      }) : /* @__PURE__ */ jsxs113(Fragment49, {
+                      }) : /* @__PURE__ */ jsxs113(Fragment50, {
                         children: [
                           "Continue",
                           /* @__PURE__ */ jsx130(ExternalLink12, {
@@ -36381,7 +36841,7 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
                     children: /* @__PURE__ */ jsx130("div", {
                       className: "h-9 w-48 bg-muted-foreground/20 rounded"
                     })
-                  }) : openAIDevice ? /* @__PURE__ */ jsxs113(Fragment49, {
+                  }) : openAIDevice ? /* @__PURE__ */ jsxs113(Fragment50, {
                     children: [
                       /* @__PURE__ */ jsx130("code", {
                         className: "text-3xl font-mono font-bold tracking-widest text-foreground bg-muted px-6 py-3 rounded-lg select-all",
@@ -36429,7 +36889,7 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
                       className: "flex-1 h-11 px-4 bg-foreground text-background rounded-lg font-medium hover:bg-foreground/90 transition-colors disabled:opacity-50 flex items-center justify-center gap-2",
                       children: openAIPolling || openAILoading ? /* @__PURE__ */ jsx130(StableSpinner, {
                         title: "Opening OpenAI"
-                      }) : /* @__PURE__ */ jsxs113(Fragment49, {
+                      }) : /* @__PURE__ */ jsxs113(Fragment50, {
                         children: [
                           "Open OpenAI",
                           /* @__PURE__ */ jsx130(ExternalLink12, {
@@ -36484,7 +36944,7 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
                     })
                   ]
                 }),
-                copilotAuthMode === "oauth" ? /* @__PURE__ */ jsxs113(Fragment49, {
+                copilotAuthMode === "oauth" ? /* @__PURE__ */ jsxs113(Fragment50, {
                   children: [
                     /* @__PURE__ */ jsx130("p", {
                       className: "text-sm text-muted-foreground",
@@ -36497,7 +36957,7 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
                         children: /* @__PURE__ */ jsx130("div", {
                           className: "h-9 w-48 bg-muted-foreground/20 rounded"
                         })
-                      }) : copilotDevice ? /* @__PURE__ */ jsxs113(Fragment49, {
+                      }) : copilotDevice ? /* @__PURE__ */ jsxs113(Fragment50, {
                         children: [
                           /* @__PURE__ */ jsx130("code", {
                             className: "text-3xl font-mono font-bold tracking-widest text-foreground bg-muted px-6 py-3 rounded-lg select-all",
@@ -36517,7 +36977,7 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
                       }) : null
                     })
                   ]
-                }) : /* @__PURE__ */ jsxs113(Fragment49, {
+                }) : /* @__PURE__ */ jsxs113(Fragment50, {
                   children: [
                     /* @__PURE__ */ jsx130("p", {
                       className: "text-sm text-muted-foreground",
@@ -36590,7 +37050,7 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
                       className: "flex-1 h-11 px-4 bg-foreground text-background rounded-lg font-medium hover:bg-foreground/90 transition-colors disabled:opacity-50 flex items-center justify-center gap-2",
                       children: copilotPolling || copilotLoading ? /* @__PURE__ */ jsx130(StableSpinner, {
                         title: "Opening GitHub"
-                      }) : /* @__PURE__ */ jsxs113(Fragment49, {
+                      }) : /* @__PURE__ */ jsxs113(Fragment50, {
                         children: [
                           "Open GitHub",
                           /* @__PURE__ */ jsx130(ExternalLink12, {
@@ -36619,9 +37079,9 @@ var ProviderSetupStep = memo56(function ProviderSetupStep2({
 });
 
 // src/components/onboarding/steps/DefaultsStep.tsx
-import { memo as memo57, useState as useState58, useEffect as useEffect64, useId as useId5, useRef as useRef43 } from "react";
+import { memo as memo57, useState as useState58, useEffect as useEffect65, useId as useId5, useRef as useRef43 } from "react";
 import { ArrowLeft, Sparkles as Sparkles9, ChevronDown as ChevronDown15 } from "lucide-react";
-import { jsx as jsx131, jsxs as jsxs114, Fragment as Fragment50 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs114, Fragment as Fragment51 } from "react/jsx-runtime";
 var DefaultsStep = memo57(function DefaultsStep2({
   authStatus,
   onComplete,
@@ -36642,7 +37102,7 @@ var DefaultsStep = memo57(function DefaultsStep2({
   const modelId = useId5();
   const agentId = useId5();
   const approvalId = useId5();
-  useEffect64(() => {
+  useEffect65(() => {
     const loadConfig = async () => {
       try {
         const [configData, modelsData] = await Promise.all([
@@ -36673,7 +37133,7 @@ var DefaultsStep = memo57(function DefaultsStep2({
     };
     loadConfig();
   }, []);
-  useEffect64(() => {
+  useEffect65(() => {
     if (config2?.agents?.length) {
       const agents = config2.agents;
       if (!selectedAgent || !agents.includes(selectedAgent)) {
@@ -36681,7 +37141,7 @@ var DefaultsStep = memo57(function DefaultsStep2({
       }
     }
   }, [config2, selectedAgent]);
-  useEffect64(() => {
+  useEffect65(() => {
     if (allModels?.[selectedProvider] && hasUserChangedProvider.current) {
       const providerModels = allModels[selectedProvider];
       if (!providerModels.models.some((m) => m.id === selectedModel)) {
@@ -36956,14 +37416,14 @@ var DefaultsStep = memo57(function DefaultsStep2({
               onClick: handleFinish,
               disabled: isSaving,
               className: "flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors disabled:opacity-50",
-              children: isSaving ? /* @__PURE__ */ jsxs114(Fragment50, {
+              children: isSaving ? /* @__PURE__ */ jsxs114(Fragment51, {
                 children: [
                   /* @__PURE__ */ jsx131(StableSpinner, {
                     title: "Setting up defaults"
                   }),
                   "Setting up..."
                 ]
-              }) : /* @__PURE__ */ jsxs114(Fragment50, {
+              }) : /* @__PURE__ */ jsxs114(Fragment51, {
                 children: [
                   "Start Using otto",
                   /* @__PURE__ */ jsx131(Sparkles9, {
@@ -37014,7 +37474,7 @@ var OnboardingModal = memo58(function OnboardingModal2({
     importCopilotTokenFromGh,
     getCopilotDiagnostics
   } = useAuthStatus();
-  useEffect65(() => {
+  useEffect66(() => {
     if (!isOpen)
       return;
     const handleNativeBack = (event) => {
@@ -37100,9 +37560,9 @@ var OnboardingModal = memo58(function OnboardingModal2({
   });
 });
 // src/components/dashboard/UsageDashboard.tsx
-import { useCallback as useCallback46, useEffect as useEffect66, useMemo as useMemo36, useState as useState59 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect67, useMemo as useMemo36, useState as useState59 } from "react";
 import { AlertTriangle as AlertTriangle3, ArrowLeft as ArrowLeft2, Globe2 as Globe25, RefreshCw as RefreshCw15 } from "lucide-react";
-import { jsx as jsx133, jsxs as jsxs116, Fragment as Fragment51 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs116, Fragment as Fragment52 } from "react/jsx-runtime";
 function formatNumber(n) {
   if (!Number.isFinite(n) || n === 0)
     return "0";
@@ -37690,7 +38150,7 @@ function UsageDashboard({ onBack }) {
       setLoading(false);
     }
   }, [scope]);
-  useEffect66(() => {
+  useEffect67(() => {
     fetchStats();
   }, [fetchStats]);
   const handleBack = useCallback46(() => {
@@ -37814,7 +38274,7 @@ function UsageDashboard({ onBack }) {
               className: "py-24 text-center text-xs text-muted-foreground",
               children: "loading…"
             }),
-            stats && /* @__PURE__ */ jsxs116(Fragment51, {
+            stats && /* @__PURE__ */ jsxs116(Fragment52, {
               children: [
                 /* @__PURE__ */ jsxs116("div", {
                   className: "rounded-2xl border border-border bg-gradient-to-br from-card to-card/40 px-6 py-7",
@@ -37953,7 +38413,7 @@ function UsageDashboard({ onBack }) {
                                     " api"
                                   ]
                                 }),
-                                stats.totals.messagesByAuth.oauth > 0 && /* @__PURE__ */ jsxs116(Fragment51, {
+                                stats.totals.messagesByAuth.oauth > 0 && /* @__PURE__ */ jsxs116(Fragment52, {
                                   children: [
                                     /* @__PURE__ */ jsx133("span", {
                                       className: "text-muted-foreground/40",
@@ -37969,7 +38429,7 @@ function UsageDashboard({ onBack }) {
                                     })
                                   ]
                                 }),
-                                stats.totals.messagesByAuth.subscription > 0 && /* @__PURE__ */ jsxs116(Fragment51, {
+                                stats.totals.messagesByAuth.subscription > 0 && /* @__PURE__ */ jsxs116(Fragment52, {
                                   children: [
                                     /* @__PURE__ */ jsx133("span", {
                                       className: "text-muted-foreground/40",
@@ -38144,4 +38604,4 @@ export {
   AssistantMessageGroup
 };
 
-//# debugId=D87EB3763E9B505964756E2164756E21
+//# debugId=FBCDE45D41C93AD964756E2164756E21