@ottocode/web-sdk 0.1.288 → 0.1.289

package/dist/index.js

@@ -31392,7 +31392,7 @@ var BrowserPanelToggle = memo49(function BrowserPanelToggle2() {
   });
 });
 // src/components/browser/BrowserViewerPanel.tsx
-import { useEffect as useEffect56, useState as useState52 } from "react";
+import { useCallback as useCallback37, useEffect as useEffect56, useRef as useRef38, useState as useState52 } from "react";
 import {
   ChevronLeft as ChevronLeft2,
   ChevronRight as ChevronRight18,
@@ -31400,7 +31400,8 @@ import {
   Globe2 as Globe23,
   Plus as Plus9,
   RefreshCw as RefreshCw12,
-  Smartphone
+  Smartphone,
+  X as X23
 } from "lucide-react";
 
 // src/hooks/useSimulator.ts
@@ -31432,13 +31433,17 @@ function useSimulatorStatus() {
 import { jsx as jsx122, jsxs as jsxs106 } from "react/jsx-runtime";
 var DEFAULT_BROWSER_URL = "http://localhost:3000";
 var SIMULATOR_URL = "http://localhost:3200";
+var IFRAME_EMBED_TIMEOUT_MS = 6000;
 function normalizeBrowserUrl(value) {
   const trimmed = value.trim();
   if (!trimmed)
     return "";
   if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed))
     return trimmed;
-  return `http://${trimmed}`;
+  if (/^(localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\])(?::\d+)?(?:\/|$)/i.test(trimmed)) {
+    return `http://${trimmed}`;
+  }
+  return `https://${trimmed}`;
 }
 function isEmbeddableUrl(value) {
   if (!value)
@@ -31454,11 +31459,100 @@ function BrowserViewerPanel({ tab }) {
   const updateBrowserTabUrl = useViewerTabsStore((state) => state.updateBrowserTabUrl);
   const reloadBrowserTab = useViewerTabsStore((state) => state.reloadBrowserTab);
   const openBrowserTab = useViewerTabsStore((state) => state.openBrowserTab);
+  const contentRef = useRef38(null);
+  const iframeRef = useRef38(null);
+  const loadingDoneTimeoutRef = useRef38(null);
+  const iframeEmbedTimeoutRef = useRef38(null);
+  const isLoadingRef = useRef38(false);
   const [draftUrl, setDraftUrl] = useState52(tab.url);
+  const [historyEntries, setHistoryEntries] = useState52(() => tab.url ? [normalizeBrowserUrl(tab.url)] : []);
+  const [historyIndex, setHistoryIndex] = useState52(tab.url ? 0 : -1);
+  const [isLoading, setIsLoading] = useState52(() => isEmbeddableUrl(normalizeBrowserUrl(tab.url)));
+  const [loadingProgress, setLoadingProgress] = useState52(() => isEmbeddableUrl(normalizeBrowserUrl(tab.url)) ? 12 : 0);
+  const [embedError, setEmbedError] = useState52(null);
   const simulatorStatus = useSimulatorStatus();
+  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 clearIframeEmbedTimeout = useCallback37(() => {
+    if (iframeEmbedTimeoutRef.current) {
+      clearTimeout(iframeEmbedTimeoutRef.current);
+      iframeEmbedTimeoutRef.current = null;
+    }
+  }, []);
+  const completeLoading = useCallback37(() => {
+    clearIframeEmbedTimeout();
+    setEmbedError(null);
+    setLoadingProgress(100);
+    if (loadingDoneTimeoutRef.current) {
+      clearTimeout(loadingDoneTimeoutRef.current);
+    }
+    loadingDoneTimeoutRef.current = setTimeout(() => {
+      setIsLoading(false);
+      setLoadingProgress(0);
+      loadingDoneTimeoutRef.current = null;
+    }, 180);
+  }, [clearIframeEmbedTimeout]);
   useEffect56(() => {
     setDraftUrl(tab.url);
   }, [tab.url]);
+  useEffect56(() => {
+    isLoadingRef.current = isLoading;
+  }, [isLoading]);
+  useEffect56(() => {
+    if (!isLoading)
+      return;
+    setLoadingProgress((progress) => progress <= 0 || progress >= 100 ? 12 : progress);
+    const interval = setInterval(() => {
+      setLoadingProgress((progress) => {
+        if (progress >= 88)
+          return progress;
+        return Math.min(88, progress + Math.max(2, (90 - progress) * 0.12));
+      });
+    }, 250);
+    return () => clearInterval(interval);
+  }, [isLoading]);
+  useEffect56(() => () => {
+    if (loadingDoneTimeoutRef.current) {
+      clearTimeout(loadingDoneTimeoutRef.current);
+    }
+    clearIframeEmbedTimeout();
+  }, [clearIframeEmbedTimeout]);
+  useEffect56(() => {
+    if (!isLoading || !canRenderUrl || useNativeBrowser) {
+      clearIframeEmbedTimeout();
+      return;
+    }
+    clearIframeEmbedTimeout();
+    iframeEmbedTimeoutRef.current = setTimeout(() => {
+      setEmbedError("This site may block embedding in Otto, or it took too long to load.");
+      setIsLoading(false);
+      setLoadingProgress(0);
+    }, IFRAME_EMBED_TIMEOUT_MS);
+    return clearIframeEmbedTimeout;
+  }, [canRenderUrl, clearIframeEmbedTimeout, isLoading, useNativeBrowser]);
+  useEffect56(() => () => {
+    if (nativeBrowser?.isAvailable) {
+      nativeBrowser.unmount(tab.id);
+    }
+  }, [nativeBrowser, tab.id]);
+  useEffect56(() => {
+    const nextUrl = normalizeBrowserUrl(tab.url);
+    if (!nextUrl)
+      return;
+    setHistoryEntries((entries) => {
+      if (entries[historyIndex] === nextUrl)
+        return entries;
+      const nextEntries = entries.slice(0, historyIndex + 1);
+      nextEntries.push(nextUrl);
+      setHistoryIndex(nextEntries.length - 1);
+      setIsLoading(isEmbeddableUrl(nextUrl));
+      return nextEntries;
+    });
+  }, [tab.url, historyIndex]);
   useEffect56(() => {
     const url = simulatorStatus.data?.url ?? SIMULATOR_URL;
     if (tab.kind === "simulator" && simulatorStatus.data?.status === "connected" && url !== tab.url) {
@@ -31468,25 +31562,113 @@ function BrowserViewerPanel({ tab }) {
       });
     }
   }, [openBrowserTab, simulatorStatus.data, tab.kind, tab.url]);
-  const normalizedUrl = normalizeBrowserUrl(tab.url);
-  const canRenderUrl = isEmbeddableUrl(normalizedUrl);
+  useEffect56(() => {
+    if (!useNativeBrowser || !nativeBrowser?.isAvailable)
+      return;
+    const content = contentRef.current;
+    if (!content)
+      return;
+    let cancelled = false;
+    const mountNativeBrowser = () => {
+      const rect = content.getBoundingClientRect();
+      const visible = rect.width > 1 && rect.height > 1;
+      if (!visible) {
+        nativeBrowser.setVisible(tab.id, false);
+        return;
+      }
+      nativeBrowser.mount({
+        id: tab.id,
+        url: normalizedUrl,
+        reloadKey: tab.reloadKey,
+        bounds: {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height
+        },
+        visible
+      }).then(() => {
+        if (!cancelled && isLoadingRef.current)
+          completeLoading();
+      }).catch((error) => {
+        if (cancelled)
+          return;
+        const message = error instanceof Error ? error.message : "Unable to open the native desktop webview.";
+        setEmbedError(message);
+        setIsLoading(false);
+        setLoadingProgress(0);
+      });
+    };
+    mountNativeBrowser();
+    const resizeObserver = new ResizeObserver(mountNativeBrowser);
+    resizeObserver.observe(content);
+    window.addEventListener("resize", mountNativeBrowser);
+    return () => {
+      cancelled = true;
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", mountNativeBrowser);
+    };
+  }, [
+    completeLoading,
+    nativeBrowser,
+    normalizedUrl,
+    tab.id,
+    tab.reloadKey,
+    useNativeBrowser
+  ]);
   const navigate = (value) => {
     const nextUrl = normalizeBrowserUrl(value);
+    if (!nextUrl)
+      return;
+    setEmbedError(null);
+    setIsLoading(isEmbeddableUrl(nextUrl));
+    setLoadingProgress(isEmbeddableUrl(nextUrl) ? 12 : 0);
+    setHistoryEntries((entries) => {
+      const currentUrl = entries[historyIndex];
+      if (currentUrl === nextUrl)
+        return entries;
+      const nextEntries = entries.slice(0, historyIndex + 1);
+      nextEntries.push(nextUrl);
+      setHistoryIndex(nextEntries.length - 1);
+      return nextEntries;
+    });
+    updateBrowserTabUrl(tab.id, nextUrl);
+  };
+  const goToHistoryIndex = (index) => {
+    const nextUrl = historyEntries[index];
+    if (!nextUrl)
+      return;
+    setHistoryIndex(index);
+    setEmbedError(null);
+    setIsLoading(isEmbeddableUrl(nextUrl));
+    setLoadingProgress(isEmbeddableUrl(nextUrl) ? 12 : 0);
     updateBrowserTabUrl(tab.id, nextUrl);
   };
+  const stopLoading = () => {
+    try {
+      iframeRef.current?.contentWindow?.stop();
+    } catch {}
+    setIsLoading(false);
+    setLoadingProgress(0);
+    clearIframeEmbedTimeout();
+    if (nativeBrowser?.isAvailable) {
+      nativeBrowser.setVisible(tab.id, false);
+    }
+  };
   const simulatorError = tab.kind === "simulator" && simulatorStatus.data?.status === "error" ? simulatorStatus.data.error : null;
   return /* @__PURE__ */ jsxs106("div", {
     className: "h-full w-full min-w-0 bg-background flex flex-col",
     children: [
       /* @__PURE__ */ jsx122("div", {
-        className: "shrink-0 border-b border-border bg-[#0b0b0d] text-zinc-400",
+        className: "shrink-0 border-b border-border bg-sidebar text-muted-foreground",
         children: /* @__PURE__ */ jsxs106("div", {
-          className: "flex h-11 items-center gap-1 px-3",
+          className: "relative flex h-11 items-center gap-1 px-3",
           children: [
             /* @__PURE__ */ jsx122("button", {
               type: "button",
-              disabled: true,
-              className: "flex h-8 w-8 items-center justify-center rounded-md text-zinc-600",
+              onClick: () => goToHistoryIndex(historyIndex - 1),
+              disabled: !canGoBack,
+              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",
               title: "Back",
               children: /* @__PURE__ */ jsx122(ChevronLeft2, {
                 className: "h-4 w-4"
@@ -31494,8 +31676,9 @@ function BrowserViewerPanel({ tab }) {
             }),
             /* @__PURE__ */ jsx122("button", {
               type: "button",
-              disabled: true,
-              className: "flex h-8 w-8 items-center justify-center rounded-md text-zinc-600",
+              onClick: () => goToHistoryIndex(historyIndex + 1),
+              disabled: !canGoForward,
+              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",
               title: "Forward",
               children: /* @__PURE__ */ jsx122(ChevronRight18, {
                 className: "h-4 w-4"
@@ -31503,25 +31686,45 @@ function BrowserViewerPanel({ tab }) {
             }),
             /* @__PURE__ */ jsx122("button", {
               type: "button",
-              onClick: () => reloadBrowserTab(tab.id),
-              disabled: !canRenderUrl,
-              title: "Reload",
-              className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-white/5 hover:text-zinc-200 disabled:text-zinc-600 disabled:hover:bg-transparent",
-              children: /* @__PURE__ */ jsx122(RefreshCw12, {
+              onClick: () => {
+                if (isLoading) {
+                  stopLoading();
+                  return;
+                }
+                setEmbedError(null);
+                setIsLoading(true);
+                setLoadingProgress(12);
+                reloadBrowserTab(tab.id);
+              },
+              disabled: !isLoading && !canRenderUrl,
+              title: isLoading ? "Stop loading" : "Reload",
+              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: isLoading ? /* @__PURE__ */ jsx122(X23, {
+                className: "h-4 w-4"
+              }) : /* @__PURE__ */ jsx122(RefreshCw12, {
                 className: "h-4 w-4"
               })
             }),
             /* @__PURE__ */ jsx122("form", {
-              className: "mx-2 min-w-48 flex-1",
+              className: "relative mx-2 min-w-48 flex-1",
               onSubmit: (event) => {
                 event.preventDefault();
                 navigate(draftUrl);
               },
-              children: /* @__PURE__ */ jsx122("input", {
-                value: draftUrl,
-                onChange: (event) => setDraftUrl(event.target.value),
-                placeholder: "localhost:3000 or https://example.com",
-                className: "h-8 w-full rounded-md border border-zinc-800 bg-black/30 px-3 font-mono text-xs text-zinc-300 outline-none placeholder:text-zinc-600 focus:border-zinc-600"
+              children: /* @__PURE__ */ jsxs106("div", {
+                className: "relative h-8 overflow-hidden rounded-md border border-input bg-muted/30 focus-within:border-ring",
+                children: [
+                  loadingProgress > 0 && /* @__PURE__ */ jsx122("div", {
+                    className: "absolute inset-y-0 left-0 bg-primary/10 transition-[width] duration-200 ease-out",
+                    style: { width: `${loadingProgress}%` }
+                  }),
+                  /* @__PURE__ */ jsx122("input", {
+                    value: draftUrl,
+                    onChange: (event) => setDraftUrl(event.target.value),
+                    placeholder: "localhost:3000 or https://example.com",
+                    className: "relative z-10 h-full w-full bg-transparent px-3 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60"
+                  })
+                ]
               })
             }),
             /* @__PURE__ */ jsx122("button", {
@@ -31529,7 +31732,7 @@ function BrowserViewerPanel({ tab }) {
               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-white/5 hover:text-zinc-200 disabled:text-zinc-600 disabled:hover:bg-transparent",
+              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__ */ jsx122(ExternalLink11, {
                 className: "h-4 w-4"
               })
@@ -31542,7 +31745,7 @@ function BrowserViewerPanel({ tab }) {
                 newTab: true
               }),
               title: "New browser preview",
-              className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-white/5 hover:text-zinc-200",
+              className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground",
               children: /* @__PURE__ */ jsx122(Plus9, {
                 className: "h-4 w-4"
               })
@@ -31554,7 +31757,7 @@ function BrowserViewerPanel({ tab }) {
                 title: "Simulator"
               }),
               title: "Simulator preview",
-              className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-white/5 hover:text-zinc-200",
+              className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground",
               children: /* @__PURE__ */ jsx122(Smartphone, {
                 className: "h-4 w-4"
               })
@@ -31567,13 +31770,67 @@ function BrowserViewerPanel({ tab }) {
         children: simulatorError
       }),
       /* @__PURE__ */ jsx122("div", {
+        ref: contentRef,
         className: "min-h-0 flex-1 bg-muted/20",
-        children: canRenderUrl ? /* @__PURE__ */ jsx122("iframe", {
+        children: useNativeBrowser && canRenderUrl ? /* @__PURE__ */ jsx122("div", {
+          className: "h-full w-full bg-background"
+        }) : canRenderUrl && !embedError ? /* @__PURE__ */ jsx122("iframe", {
+          ref: iframeRef,
           title: tab.title,
           src: normalizedUrl,
+          onLoad: completeLoading,
           className: "h-full w-full border-0 bg-background",
           allow: "clipboard-read; clipboard-write; fullscreen; microphone; camera; geolocation; autoplay"
-        }, `${tab.id}:${tab.reloadKey}`) : /* @__PURE__ */ jsx122("div", {
+        }, `${tab.id}:${tab.reloadKey}`) : embedError ? /* @__PURE__ */ jsx122("div", {
+          className: "h-full w-full flex items-center justify-center p-6 text-center",
+          children: /* @__PURE__ */ jsxs106("div", {
+            className: "max-w-md rounded-lg border border-border bg-background p-6 shadow-sm",
+            children: [
+              /* @__PURE__ */ jsx122(Globe23, {
+                className: "mx-auto mb-3 h-8 w-8 text-muted-foreground"
+              }),
+              /* @__PURE__ */ jsx122("h2", {
+                className: "mb-2 text-sm font-semibold text-foreground",
+                children: "This site can't be embedded"
+              }),
+              /* @__PURE__ */ jsx122("p", {
+                className: "mb-4 text-xs leading-relaxed text-muted-foreground",
+                children: embedError
+              }),
+              /* @__PURE__ */ jsxs106("div", {
+                className: "flex flex-wrap justify-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsx122(Button, {
+                    type: "button",
+                    variant: "secondary",
+                    size: "sm",
+                    onClick: () => {
+                      setEmbedError(null);
+                      setIsLoading(true);
+                      setLoadingProgress(12);
+                      reloadBrowserTab(tab.id);
+                    },
+                    children: "Try again"
+                  }),
+                  nativeBrowser?.openWindow && /* @__PURE__ */ jsx122(Button, {
+                    type: "button",
+                    variant: "secondary",
+                    size: "sm",
+                    onClick: () => nativeBrowser.openWindow?.(normalizedUrl),
+                    children: "Open in desktop window"
+                  }),
+                  /* @__PURE__ */ jsx122(Button, {
+                    type: "button",
+                    variant: "secondary",
+                    size: "sm",
+                    onClick: () => window.open(normalizedUrl, "_blank", "noopener,noreferrer"),
+                    children: "Open externally"
+                  })
+                ]
+              })
+            ]
+          })
+        }) : /* @__PURE__ */ jsx122("div", {
           className: "h-full w-full flex items-center justify-center p-6 text-center",
           children: /* @__PURE__ */ jsxs106("div", {
             className: "max-w-md rounded-lg border border-border bg-background p-6 shadow-sm",
@@ -31608,7 +31865,7 @@ function BrowserViewerPanel({ tab }) {
 }
 // src/components/workspace/ViewerTabs.tsx
 import { memo as memo50, useEffect as useEffect57 } from "react";
-import { Code2, GitCommit as GitCommit5, Globe2 as Globe24, Smartphone as Smartphone2, X as X23 } from "lucide-react";
+import { Code2, GitCommit as GitCommit5, Globe2 as Globe24, Smartphone as Smartphone2, X as X24 } from "lucide-react";
 import { jsx as jsx123, jsxs as jsxs107 } from "react/jsx-runtime";
 function tabKindLabel(tab) {
   switch (tab.type) {
@@ -31778,6 +32035,8 @@ function renderTabContent(tab, closeTab, updateSessionFileOperationIndex) {
       });
   }
 }
+var VIEWER_MODE_TAB_BUTTON_BASE = "absolute top-0.5 z-20 h-7 w-9 rounded-full p-0 leading-none transform-none select-none bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring active:transform-none";
+var VIEWER_MODE_ICON_BASE_CLASS = "pointer-events-none absolute top-1/2 z-10 block h-4 w-4 -translate-x-1/2 -translate-y-1/2 shrink-0 transition-colors";
 var ViewerTabs = memo50(function ViewerTabs2() {
   const tabs = useViewerTabsStore((state) => state.tabs);
   const activeTabId = useViewerTabsStore((state) => state.activeTabId);
@@ -31830,28 +32089,31 @@ var ViewerTabs = memo50(function ViewerTabs2() {
             children: /* @__PURE__ */ jsxs107("div", {
               role: "tablist",
               "aria-label": "Viewer mode",
-              className: "relative h-8 inline-flex items-center rounded-full ring-1 ring-inset ring-sidebar-border bg-muted/40 p-0.5",
+              className: "relative h-8 w-[4.75rem] shrink-0 rounded-full ring-1 ring-inset ring-sidebar-border bg-muted/40 p-0.5",
               children: [
                 /* @__PURE__ */ jsx123("span", {
                   "aria-hidden": "true",
                   className: `absolute left-0.5 inset-y-0.5 w-9 rounded-full bg-background shadow-sm ring-1 ring-sidebar-border transition-transform duration-200 ease-out pointer-events-none ${activeMode === "preview" ? "translate-x-9" : "translate-x-0"}`
                 }),
-                /* @__PURE__ */ jsxs107("button", {
+                /* @__PURE__ */ jsx123(Code2, {
+                  "aria-hidden": "true",
+                  className: `${VIEWER_MODE_ICON_BASE_CLASS} left-5 ${activeMode === "work" ? "text-foreground" : "text-muted-foreground/70"}`
+                }),
+                /* @__PURE__ */ jsx123(Globe24, {
+                  "aria-hidden": "true",
+                  className: `${VIEWER_MODE_ICON_BASE_CLASS} left-14 ${activeMode === "preview" ? "text-foreground" : "text-muted-foreground/70"}`
+                }),
+                showWorkActivityDot && /* @__PURE__ */ jsx123("span", {
+                  className: "pointer-events-none absolute left-[2rem] top-1 z-10 h-1.5 w-1.5 rounded-full bg-primary"
+                }),
+                /* @__PURE__ */ jsx123("button", {
                   type: "button",
                   role: "tab",
                   "aria-selected": activeMode === "work",
                   onClick: () => setViewerMode("work"),
                   title: "Work tabs",
                   "aria-label": "Work tabs",
-                  className: `relative z-10 h-7 w-9 inline-flex items-center justify-center rounded-full p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors ${activeMode === "work" ? "text-foreground" : "text-muted-foreground/70 hover:text-foreground"}`,
-                  children: [
-                    /* @__PURE__ */ jsx123(Code2, {
-                      className: "h-4 w-4"
-                    }),
-                    showWorkActivityDot && /* @__PURE__ */ jsx123("span", {
-                      className: "absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-primary"
-                    })
-                  ]
+                  className: `${VIEWER_MODE_TAB_BUTTON_BASE} left-0.5`
                 }),
                 /* @__PURE__ */ jsx123("button", {
                   type: "button",
@@ -31860,10 +32122,7 @@ var ViewerTabs = memo50(function ViewerTabs2() {
                   onClick: handlePreviewMode,
                   title: "Preview tabs",
                   "aria-label": "Preview tabs",
-                  className: `relative z-10 h-7 w-9 inline-flex items-center justify-center rounded-full p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors ${activeMode === "preview" ? "text-foreground" : "text-muted-foreground/70 hover:text-foreground"}`,
-                  children: /* @__PURE__ */ jsx123(Globe24, {
-                    className: "h-4 w-4"
-                  })
+                  className: `${VIEWER_MODE_TAB_BUTTON_BASE} left-[2.375rem]`
                 })
               ]
             })
@@ -31875,7 +32134,7 @@ var ViewerTabs = memo50(function ViewerTabs2() {
                 const isActive = tab.id === activeTab.id;
                 const activityKind = getTabActivityKind(tab);
                 return /* @__PURE__ */ jsxs107("div", {
-                  className: `group h-12 w-44 max-w-56 shrink-0 px-3 border-r border-sidebar-border flex items-center gap-2 text-left transition-colors ${isActive ? "bg-sidebar text-sidebar-foreground" : "border-b bg-background text-muted-foreground/70 hover:text-foreground hover:bg-sidebar-accent/40"}`,
+                  className: `group h-12 w-44 max-w-56 shrink-0 px-3 border-r border-b border-sidebar-border flex items-center gap-2 text-left transition-colors ${isActive ? "border-b-transparent bg-sidebar text-sidebar-foreground" : "bg-background text-muted-foreground/70 hover:text-foreground hover:bg-sidebar-accent/40"}`,
                   title: `${tab.title}
 ${tabKindLabel(tab)}`,
                   children: [
@@ -31900,7 +32159,7 @@ ${tabKindLabel(tab)}`,
                       },
                       title: "Close tab",
                       className: "h-6 w-6 opacity-60 group-hover:opacity-100 shrink-0",
-                      children: /* @__PURE__ */ jsx123(X23, {
+                      children: /* @__PURE__ */ jsx123(X24, {
                         className: "h-3.5 w-3.5"
                       })
                     })
@@ -31918,7 +32177,7 @@ ${tabKindLabel(tab)}`,
                   title: "Close all tabs and collapse viewer",
                   "aria-label": "Close all tabs and collapse viewer",
                   className: "h-8 w-8 inline-flex items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-destructive/10 hover:text-destructive",
-                  children: /* @__PURE__ */ jsx123(X23, {
+                  children: /* @__PURE__ */ jsx123(X24, {
                     className: "h-3.5 w-3.5"
                   })
                 })
@@ -31927,12 +32186,28 @@ ${tabKindLabel(tab)}`,
           })
         ]
       }),
-      /* @__PURE__ */ jsx123("div", {
-        className: "flex-1 min-h-0 overflow-hidden",
-        children: activeTab ? renderTabContent(activeTab, closeTab, updateSessionFileOperationIndex) : /* @__PURE__ */ jsx123("div", {
-          className: "flex h-full items-center justify-center bg-sidebar text-muted-foreground/60 text-sm",
-          children: activeMode === "work" ? "No work tabs open" : "No preview tabs open"
-        })
+      /* @__PURE__ */ jsxs107("div", {
+        className: "relative flex-1 min-h-0 overflow-hidden",
+        children: [
+          previewTabs.map((tab) => {
+            const isActive = activeMode === "preview" && tab.id === activeTab?.id;
+            return /* @__PURE__ */ jsx123("div", {
+              "aria-hidden": !isActive,
+              className: `absolute inset-0 ${isActive ? "block" : "hidden"}`,
+              children: /* @__PURE__ */ jsx123(BrowserViewerPanel, {
+                tab
+              })
+            }, tab.id);
+          }),
+          activeMode === "work" && activeTab && /* @__PURE__ */ jsx123("div", {
+            className: "absolute inset-0",
+            children: renderTabContent(activeTab, closeTab, updateSessionFileOperationIndex)
+          }),
+          !activeTab && /* @__PURE__ */ jsx123("div", {
+            className: "absolute inset-0 flex items-center justify-center bg-sidebar text-muted-foreground/60 text-sm",
+            children: activeMode === "work" ? "No work tabs open" : "No preview tabs open"
+          })
+        ]
       })
     ]
   });
@@ -31941,12 +32216,12 @@ ${tabKindLabel(tab)}`,
 import { memo as memo53, useEffect as useEffect60 } from "react";
 
 // src/components/onboarding/steps/ProviderSetupStep.tsx
-import { memo as memo51, useEffect as useEffect58, useState as useState53, useRef as useRef38 } from "react";
+import { memo as memo51, useEffect as useEffect58, useState as useState53, useRef as useRef39 } from "react";
 import {
   Copy as Copy5,
   Check as Check16,
   CreditCard as CreditCard4,
-  X as X24,
+  X as X25,
   Key as Key2,
   ExternalLink as ExternalLink12,
   ArrowRight as ArrowRight3,
@@ -32031,20 +32306,20 @@ var ProviderSetupStep = memo51(function ProviderSetupStep2({
   const [copilotCodeCopied, setCopilotCodeCopied] = useState53(false);
   const [copilotModalOpen, setCopilotModalOpen] = useState53(false);
   const [copilotLoading, setCopilotLoading] = useState53(false);
-  const copilotPollRef = useRef38(undefined);
-  const copilotCancelledRef = useRef38(false);
-  const copilotPollFnRef = useRef38(onPollCopilotDeviceFlow);
+  const copilotPollRef = useRef39(undefined);
+  const copilotCancelledRef = useRef39(false);
+  const copilotPollFnRef = useRef39(onPollCopilotDeviceFlow);
   copilotPollFnRef.current = onPollCopilotDeviceFlow;
   const balance = useOttoRouterStore((s) => s.balance);
   const usdcBalance = useOttoRouterStore((s) => s.usdcBalance);
   const payg = useOttoRouterStore((s) => s.payg);
   const subscription = useOttoRouterStore((s) => s.subscription);
   const isBalanceLoading = useOttoRouterStore((s) => s.isLoading);
-  const apiKeyInputRef = useRef38(null);
-  const oauthCodeInputRef = useRef38(null);
-  const importPrivateKeyRef = useRef38(null);
+  const apiKeyInputRef = useRef39(null);
+  const oauthCodeInputRef = useRef39(null);
+  const importPrivateKeyRef = useRef39(null);
   const isTopupModalOpen = useOttoRouterStore((s) => s.isTopupModalOpen);
-  const prevTopupModalOpen = useRef38(false);
+  const prevTopupModalOpen = useRef39(false);
   const { fetchBalance } = useOttoRouterBalance("ottorouter");
   const effectivePayg = payg?.effectiveSpendableUsd ?? balance ?? 0;
   const setuStatusLabel = subscription?.active ? `GO ${(subscription.creditsRemaining ?? 0).toFixed(1)} credits` : `$${effectivePayg.toFixed(2)}`;
@@ -32743,7 +33018,7 @@ var ProviderSetupStep = memo51(function ProviderSetupStep2({
                                 type: "button",
                                 onClick: () => handleRemoveProvider(id),
                                 className: "ml-1 p-1 text-green-600/40 dark:text-green-500/40 hover:text-green-600/80 dark:hover:text-green-500/80 opacity-0 group-hover:opacity-100 transition-opacity",
-                                children: /* @__PURE__ */ jsx124(X24, {
+                                children: /* @__PURE__ */ jsx124(X25, {
                                   className: "w-3 h-3"
                                 })
                               })
@@ -32802,7 +33077,7 @@ var ProviderSetupStep = memo51(function ProviderSetupStep2({
                                       setApiKeyInput("");
                                     },
                                     className: "shrink-0 p-1.5 text-muted-foreground hover:text-foreground",
-                                    children: /* @__PURE__ */ jsx124(X24, {
+                                    children: /* @__PURE__ */ jsx124(X25, {
                                       className: "w-4 h-4"
                                     })
                                   })
@@ -33563,7 +33838,7 @@ var ProviderSetupStep = memo51(function ProviderSetupStep2({
 });
 
 // src/components/onboarding/steps/DefaultsStep.tsx
-import { memo as memo52, useState as useState54, useEffect as useEffect59, useId as useId5, useRef as useRef39 } from "react";
+import { memo as memo52, useState as useState54, useEffect as useEffect59, useId as useId5, useRef as useRef40 } from "react";
 import { ArrowLeft, Sparkles as Sparkles9, ChevronDown as ChevronDown15 } from "lucide-react";
 import { jsx as jsx125, jsxs as jsxs109, Fragment as Fragment48 } from "react/jsx-runtime";
 var DefaultsStep = memo52(function DefaultsStep2({
@@ -33581,7 +33856,7 @@ var DefaultsStep = memo52(function DefaultsStep2({
   const [selectedAgent, setSelectedAgent] = useState54(authStatus.defaults.agent || "build");
   const [selectedApproval, setSelectedApproval] = useState54(authStatus.defaults.toolApproval || "dangerous");
   const [guidedMode, setGuidedMode] = useState54(false);
-  const hasUserChangedProvider = useRef39(false);
+  const hasUserChangedProvider = useRef40(false);
   const providerId = useId5();
   const modelId = useId5();
   const agentId = useId5();
@@ -34040,7 +34315,7 @@ var OnboardingModal = memo53(function OnboardingModal2({
   });
 });
 // src/components/dashboard/UsageDashboard.tsx
-import { useCallback as useCallback37, useEffect as useEffect61, useMemo as useMemo33, useState as useState55 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect61, useMemo as useMemo33, useState as useState55 } from "react";
 import { AlertTriangle as AlertTriangle3, ArrowLeft as ArrowLeft2, Globe2 as Globe25, RefreshCw as RefreshCw14 } from "lucide-react";
 import { jsx as jsx127, jsxs as jsxs111, Fragment as Fragment49 } from "react/jsx-runtime";
 function formatNumber(n) {
@@ -34618,7 +34893,7 @@ function UsageDashboard({ onBack }) {
   const [loading, setLoading] = useState55(false);
   const [error, setError] = useState55(null);
   const [scope, setScope] = useState55("project");
-  const fetchStats = useCallback37(async () => {
+  const fetchStats = useCallback38(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -34633,7 +34908,7 @@ function UsageDashboard({ onBack }) {
   useEffect61(() => {
     fetchStats();
   }, [fetchStats]);
-  const handleBack = useCallback37(() => {
+  const handleBack = useCallback38(() => {
     if (onBack)
       return onBack();
     if (typeof window === "undefined")
@@ -34998,7 +35273,7 @@ function UsageDashboard({ onBack }) {
   });
 }
 // src/hooks/useClientEvents.ts
-import { useEffect as useEffect62, useRef as useRef40 } from "react";
+import { useEffect as useEffect62, useRef as useRef41 } from "react";
 import { useQueryClient as useQueryClient23 } from "@tanstack/react-query";
 import {
   buildClientEventsStreamUrl,
@@ -35185,7 +35460,7 @@ async function maybeShowLocalAccessToast(baseUrl) {
 }
 function useClientEvents(activeSessionId) {
   const queryClient = useQueryClient23();
-  const activeSessionIdRef = useRef40(activeSessionId);
+  const activeSessionIdRef = useRef41(activeSessionId);
   useEffect62(() => {
     activeSessionIdRef.current = activeSessionId;
   }, [activeSessionId]);
@@ -35268,7 +35543,7 @@ function useClientEvents(activeSessionId) {
   return buildClientEventsStreamUrl({ baseUrl: getBaseUrl() });
 }
 // src/hooks/useTheme.ts
-import { useEffect as useEffect63, useState as useState56, useCallback as useCallback38, useMemo as useMemo34 } from "react";
+import { useEffect as useEffect63, useState as useState56, useCallback as useCallback39, useMemo as useMemo34 } from "react";
 var STORAGE_KEY3 = "otto-theme";
 function resolveInitialTheme() {
   if (typeof window === "undefined") {
@@ -35314,7 +35589,7 @@ function useTheme() {
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
   }, []);
-  const toggleTheme = useCallback38(() => {
+  const toggleTheme = useCallback39(() => {
     setTheme((prev) => prev === "dark" ? "light" : "dark");
   }, []);
   return useMemo34(() => ({ theme, setTheme, toggleTheme }), [theme, toggleTheme]);
@@ -35348,7 +35623,7 @@ function useWorkingDirectory() {
   return dirName;
 }
 // src/hooks/useKeyboardShortcuts.ts
-import { useEffect as useEffect65, useCallback as useCallback39 } from "react";
+import { useEffect as useEffect65, useCallback as useCallback40 } from "react";
 
 // src/stores/sidebarStore.ts
 import { create as create24 } from "zustand";
@@ -35402,7 +35677,7 @@ function useKeyboardShortcuts({
   const toggleResearch = useResearchStore((state) => state.toggleSidebar);
   const toggleTerminalPanel = useTerminalStore((state) => state.togglePanel);
   const currentSessionIndex = sessionIds.indexOf(activeSessionId || "");
-  const handleKeyDown = useCallback39((e) => {
+  const handleKeyDown = useCallback40((e) => {
     const target = e.target;
     const isInInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
     const isInTerminal = !!target.closest("[data-terminal-viewer]");
@@ -35667,7 +35942,7 @@ function useKeyboardShortcuts({
 // src/hooks/useImageUpload.ts
 import {
   useState as useState58,
-  useCallback as useCallback40,
+  useCallback as useCallback41,
   useEffect as useEffect66
 } from "react";
 var SUPPORTED_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
@@ -35700,7 +35975,7 @@ function useImageUpload(options = {}) {
   const [isDragging, setIsDragging] = useState58(false);
   const [error, setError] = useState58(null);
   const maxSizeBytes = maxSizeMB * 1024 * 1024;
-  const validateFile = useCallback40((file) => {
+  const validateFile = useCallback41((file) => {
     if (!SUPPORTED_TYPES.includes(file.type)) {
       return `Unsupported file type: ${file.type}. Supported: PNG, JPEG, GIF, WebP`;
     }
@@ -35709,7 +35984,7 @@ function useImageUpload(options = {}) {
     }
     return null;
   }, [maxSizeBytes, maxSizeMB]);
-  const addImages = useCallback40(async (files) => {
+  const addImages = useCallback41(async (files) => {
     setError(null);
     const fileArray = Array.from(files);
     const remaining = maxImages - images.length;
@@ -35745,22 +36020,22 @@ function useImageUpload(options = {}) {
       setImages((prev) => [...prev, ...newImages]);
     }
   }, [images.length, maxImages, validateFile]);
-  const removeImage = useCallback40((id) => {
+  const removeImage = useCallback41((id) => {
     setImages((prev) => prev.filter((img) => img.id !== id));
     setError(null);
   }, []);
-  const clearImages = useCallback40(() => {
+  const clearImages = useCallback41(() => {
     setImages([]);
     setError(null);
   }, []);
-  const handleDragEnter = useCallback40((e) => {
+  const handleDragEnter = useCallback41((e) => {
     e.preventDefault();
     e.stopPropagation();
     if (e.dataTransfer.types.includes("Files")) {
       setIsDragging(true);
     }
   }, []);
-  const handleDragLeave = useCallback40((e) => {
+  const handleDragLeave = useCallback41((e) => {
     e.preventDefault();
     e.stopPropagation();
     const rect = e.currentTarget.getBoundingClientRect();
@@ -35770,11 +36045,11 @@ function useImageUpload(options = {}) {
       setIsDragging(false);
     }
   }, []);
-  const handleDragOver = useCallback40((e) => {
+  const handleDragOver = useCallback41((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
-  const handleDrop = useCallback40((e) => {
+  const handleDrop = useCallback41((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
@@ -35786,7 +36061,7 @@ function useImageUpload(options = {}) {
       }
     }
   }, [addImages]);
-  const handlePaste = useCallback40((e) => {
+  const handlePaste = useCallback41((e) => {
     const items = e.clipboardData?.items;
     if (!items)
       return;
@@ -35865,10 +36140,10 @@ function useImageUpload(options = {}) {
   };
 }
 // src/hooks/useSetuPayments.ts
-import { useEffect as useEffect67, useRef as useRef41 } from "react";
+import { useEffect as useEffect67, useRef as useRef42 } from "react";
 function useSetuPayments(sessionId) {
-  const clientRef = useRef41(null);
-  const loadingToastIdRef = useRef41(null);
+  const clientRef = useRef42(null);
+  const loadingToastIdRef = useRef42(null);
   const setBalance = useOttoRouterStore((s) => s.setBalance);
   const setPaymentPending = useOttoRouterStore((s) => s.setPaymentPending);
   const removeToast = useToastStore((s) => s.removeToast);
@@ -36223,4 +36498,4 @@ export {
   API_BASE_URL
 };
 
-//# debugId=B7D0C288A88BE19964756E2164756E21
+//# debugId=66B25A0616A3472664756E2164756E21