@ottocode/web-sdk 0.1.267 → 0.1.269

package/dist/hooks/index.js

@@ -1007,6 +1007,55 @@ function useUpdateDefaults() {
 }
 // src/hooks/usePreferences.ts
 import { useCallback, useMemo, useSyncExternalStore } from "react";
+
+// src/lib/platform.ts
+function getPlatformWindow() {
+  if (typeof window === "undefined")
+    return null;
+  return window;
+}
+function openPlatformUrl(url) {
+  const win = getPlatformWindow();
+  if (!win?.OTTO_OPEN_URL)
+    return false;
+  win.OTTO_OPEN_URL(url);
+  return true;
+}
+function showPlatformNotification(notification) {
+  const win = getPlatformWindow();
+  if (!win?.OTTO_SHOW_NOTIFICATION)
+    return false;
+  win.OTTO_SHOW_NOTIFICATION(notification);
+  return true;
+}
+function listPlatformSystemFonts() {
+  const win = getPlatformWindow();
+  if (!win?.OTTO_LIST_SYSTEM_FONTS)
+    return null;
+  return win.OTTO_LIST_SYSTEM_FONTS();
+}
+function notifyPlatformFontFamilyChanged(fontFamily) {
+  const win = getPlatformWindow();
+  if (!win?.OTTO_SET_DESKTOP_FONT)
+    return false;
+  win.OTTO_SET_DESKTOP_FONT(fontFamily);
+  return true;
+}
+function openPlatformSession(sessionId) {
+  const win = getPlatformWindow();
+  if (!win?.OTTO_OPEN_SESSION)
+    return false;
+  win.OTTO_OPEN_SESSION(sessionId);
+  return true;
+}
+function hasPlatformOpenUrl() {
+  return !!getPlatformWindow()?.OTTO_OPEN_URL;
+}
+function hasPlatformSystemFonts() {
+  return !!getPlatformWindow()?.OTTO_LIST_SYSTEM_FONTS;
+}
+
+// src/hooks/usePreferences.ts
 var STORAGE_KEY = "otto-preferences";
 var DEFAULT_FONT_FAMILY = "IBM Plex Mono";
 var DEFAULT_STORED_PREFERENCES = {
@@ -1027,6 +1076,9 @@ function applyFontFamily(fontFamily) {
   }
   document.documentElement.style.setProperty("--otto-font-family", cssFontFamily(fontFamily));
   document.documentElement.dataset.ottoFontFamily = fontFamily;
+  if (notifyPlatformFontFamilyChanged(fontFamily)) {
+    return;
+  }
   if (window.self !== window.top) {
     window.parent.postMessage({ type: "otto-font-family-changed", fontFamily }, "*");
   }
@@ -2656,8 +2708,294 @@ function useSessionStream(sessionId, enabled = true) {
     updatePendingApproval
   ]);
 }
+// src/hooks/useClientEvents.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useQueryClient as useQueryClient6 } from "@tanstack/react-query";
+import {
+  buildClientEventsStreamUrl,
+  createClientEventsStream
+} from "@ottocode/api";
+
+// src/stores/toastStore.ts
+import { create as create10 } from "zustand";
+var toastId = 0;
+var useToastStore = create10((set) => ({
+  toasts: [],
+  addToast: (toast) => {
+    const id = `toast-${++toastId}`;
+    set((state) => ({
+      toasts: [...state.toasts, { ...toast, id }]
+    }));
+    return id;
+  },
+  removeToast: (id) => set((state) => ({
+    toasts: state.toasts.filter((t) => t.id !== id)
+  })),
+  updateToast: (id, updates) => set((state) => ({
+    toasts: state.toasts.map((t) => t.id === id ? { ...t, ...updates } : t)
+  })),
+  clearToasts: () => set({ toasts: [] })
+}));
+function toast(message, type = "default", duration = 4000) {
+  const id = useToastStore.getState().addToast({ message, type, duration });
+  if (duration > 0) {
+    setTimeout(() => {
+      useToastStore.getState().removeToast(id);
+    }, duration);
+  }
+  return id;
+}
+toast.success = (message, duration = 4000) => toast(message, "success", duration);
+toast.error = (message, duration = 5000) => toast(message, "error", duration);
+toast.info = (message, duration = 4000) => toast(message, "default", duration);
+toast.loading = (message) => toast(message, "loading", 0);
+toast.successWithAction = (message, action, duration = 6000) => {
+  const id = useToastStore.getState().addToast({
+    message,
+    type: "success",
+    duration,
+    action
+  });
+  if (duration > 0) {
+    setTimeout(() => {
+      useToastStore.getState().removeToast(id);
+    }, duration);
+  }
+  return id;
+};
+
+// src/lib/open-url.ts
+function openUrl(url) {
+  if (openPlatformUrl(url)) {
+    return;
+  }
+  if (window.self !== window.top) {
+    window.parent.postMessage({ type: "otto-open-url", url }, "*");
+  } else {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+}
+
+// src/hooks/useClientEvents.ts
+function toastTypeForLevel(level) {
+  if (level === "success")
+    return "success";
+  if (level === "error")
+    return "error";
+  return "default";
+}
+function notificationTargetHref(notification) {
+  return notification.action?.href ?? (notification.sessionId ? `/sessions/${encodeURIComponent(notification.sessionId)}` : undefined);
+}
+function openNotificationTarget(notification) {
+  const href = notificationTargetHref(notification);
+  if (!href || typeof window === "undefined")
+    return;
+  if (notification.sessionId && openPlatformSession(notification.sessionId)) {
+    return;
+  }
+  if (href.startsWith("/")) {
+    window.location.href = href;
+    return;
+  }
+  openUrl(href);
+}
+function requestNotificationPermission() {
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = (permission) => {
+      if (settled)
+        return;
+      settled = true;
+      setTimeout(() => resolve(permission ?? Notification.permission), 100);
+    };
+    try {
+      const result = Notification.requestPermission(finish);
+      if (result && typeof result.then === "function") {
+        result.then(finish).catch(() => finish());
+      }
+    } catch {
+      finish();
+    }
+    setTimeout(() => finish(), 1500);
+  });
+}
+function showInAppNotification(notification) {
+  const message = notification.body ? `${notification.title}: ${notification.body}` : notification.title;
+  const targetHref = notificationTargetHref(notification);
+  if (targetHref) {
+    const id = toast(message, toastTypeForLevel(notification.level), 6000);
+    useToastStore.getState().updateToast(id, {
+      activateActionOnClick: true,
+      action: notification.action ? {
+        ...notification.action,
+        onClick: () => openNotificationTarget(notification)
+      } : {
+        label: "Open session",
+        onClick: () => openNotificationTarget(notification)
+      }
+    });
+    return;
+  }
+  toast(message, toastTypeForLevel(notification.level), 5000);
+}
+function sendBrowserNotification(notification) {
+  if (typeof window === "undefined")
+    return false;
+  if (showPlatformNotification(notification))
+    return true;
+  if (window.parent && window.parent !== window) {
+    const message = {
+      type: "otto-notification",
+      notification
+    };
+    window.parent.postMessage(message, "*");
+    return true;
+  }
+  if (!("Notification" in window) || Notification.permission !== "granted")
+    return false;
+  const browserNotification = new Notification(notification.title, {
+    body: notification.body,
+    tag: notification.id,
+    data: { href: notificationTargetHref(notification) }
+  });
+  browserNotification.onclick = () => {
+    window.focus();
+    openNotificationTarget(notification);
+    browserNotification.close();
+  };
+  return true;
+}
+function updateSessionStatusInCache(queryClient, status) {
+  queryClient.setQueryData(sessionsQueryKey, (old) => {
+    if (!old)
+      return old;
+    return {
+      ...old,
+      pages: old.pages.map((page) => ({
+        ...page,
+        items: page.items.map((session) => session.id === status.sessionId ? {
+          ...session,
+          isRunning: status.status === "running"
+        } : session)
+      }))
+    };
+  });
+}
+function isLocalApiUrl(baseUrl) {
+  try {
+    const { hostname } = new URL(baseUrl);
+    return hostname === "localhost" || hostname === "127.0.0.1" || hostname.startsWith("192.168.") || hostname.startsWith("10.") || /^172\.(1[6-9]|2\d|3[01])\./.test(hostname);
+  } catch {
+    return false;
+  }
+}
+async function requestLocalhostAccess(baseUrl) {
+  const response = await fetch(new URL("/openapi.json", baseUrl), {
+    cache: "no-store",
+    credentials: "include"
+  });
+  if (!response.ok) {
+    throw new Error(`Local API returned ${response.status}`);
+  }
+}
+function useClientEvents(activeSessionId) {
+  const queryClient = useQueryClient6();
+  const activeSessionIdRef = useRef2(activeSessionId);
+  useEffect2(() => {
+    activeSessionIdRef.current = activeSessionId;
+  }, [activeSessionId]);
+  useEffect2(() => {
+    if (typeof window === "undefined" || window.parent !== window)
+      return;
+    if (!("Notification" in window))
+      return;
+    if (Notification.permission !== "default")
+      return;
+    if (window.localStorage.getItem("otto-notification-permission-prompted")) {
+      return;
+    }
+    window.localStorage.setItem("otto-notification-permission-prompted", "1");
+    const id = toast("Enable browser notifications for background session updates.", "default", 0);
+    useToastStore.getState().updateToast(id, {
+      action: {
+        label: "Enable",
+        onClick: async () => {
+          const permission = await requestNotificationPermission();
+          const currentPermission = Notification.permission;
+          if (permission === "granted" || currentPermission === "granted") {
+            toast.success("Browser notifications enabled.");
+          } else {
+            toast.info("Browser notifications were not enabled.");
+          }
+        }
+      }
+    });
+  }, []);
+  useEffect2(() => {
+    const controller = new AbortController;
+    let hasShownLocalAccessToast = false;
+    const baseUrl = getBaseUrl();
+    createClientEventsStream({
+      baseUrl,
+      onEvent: (event) => {
+        if (event.event === "heartbeat")
+          return;
+        let payload;
+        try {
+          payload = JSON.parse(event.data);
+        } catch (error) {
+          console.error("[client-events] Failed to parse event:", error);
+          return;
+        }
+        if (event.event === "session.status") {
+          const status = payload;
+          updateSessionStatusInCache(queryClient, status);
+          if (status.status !== "running") {
+            queryClient.invalidateQueries({
+              queryKey: sessionsQueryKey
+            });
+          }
+          return;
+        }
+        if (event.event === "notification") {
+          const notification = payload;
+          const isActiveVisibleSession = notification.sessionId === activeSessionIdRef.current && document.visibilityState === "visible";
+          const isSessionNotification = notification.source === "session" || !!notification.sessionId;
+          let sentSystemNotification = false;
+          if (!isActiveVisibleSession) {
+            sentSystemNotification = sendBrowserNotification(notification);
+          }
+          if (!isSessionNotification || !sentSystemNotification && !isActiveVisibleSession) {
+            showInAppNotification(notification);
+          }
+        }
+      },
+      onError: (error) => {
+        if (!controller.signal.aborted) {
+          console.error("[client-events] Stream error:", error);
+          if (!hasShownLocalAccessToast && isLocalApiUrl(baseUrl)) {
+            hasShownLocalAccessToast = true;
+            const id = toast("Safari may need permission to access the local otto server.", "default", 0);
+            useToastStore.getState().updateToast(id, {
+              action: {
+                label: "Allow access",
+                onClick: async () => {
+                  await requestLocalhostAccess(baseUrl);
+                  toast.success("Local otto server access confirmed.");
+                }
+              }
+            });
+          }
+        }
+      }
+    }, controller.signal);
+    return () => controller.abort();
+  }, [queryClient]);
+  return buildClientEventsStreamUrl({ baseUrl: getBaseUrl() });
+}
 // src/hooks/useTheme.ts
-import { useEffect as useEffect2, useState, useCallback as useCallback2, useMemo as useMemo3 } from "react";
+import { useEffect as useEffect3, useState, useCallback as useCallback2, useMemo as useMemo3 } from "react";
 var STORAGE_KEY2 = "otto-theme";
 function resolveInitialTheme() {
   if (typeof window === "undefined") {
@@ -2674,7 +3012,7 @@ function resolveInitialTheme() {
 }
 function useTheme() {
   const [theme, setTheme] = useState(() => resolveInitialTheme());
-  useEffect2(() => {
+  useEffect3(() => {
     if (typeof document === "undefined")
       return;
     const root = document.documentElement;
@@ -2692,7 +3030,7 @@ function useTheme() {
       window.parent.postMessage({ type: "otto-set-theme", theme }, "*");
     }
   }, [theme]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (typeof window === "undefined")
       return;
     const handler = (e) => {
@@ -2709,11 +3047,11 @@ function useTheme() {
   return useMemo3(() => ({ theme, setTheme, toggleTheme }), [theme, toggleTheme]);
 }
 // src/hooks/useWorkingDirectory.ts
-import { useEffect as useEffect3, useState as useState2 } from "react";
+import { useEffect as useEffect4, useState as useState2 } from "react";
 import { getCwd } from "@ottocode/api";
 function useWorkingDirectory() {
   const [dirName, setDirName] = useState2(null);
-  useEffect3(() => {
+  useEffect4(() => {
     const fetchWorkingDirectory = async () => {
       try {
         const response = await getCwd({ baseURL: getBaseUrl() });
@@ -2737,11 +3075,11 @@ function useWorkingDirectory() {
   return dirName;
 }
 // src/hooks/useKeyboardShortcuts.ts
-import { useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import { useEffect as useEffect5, useCallback as useCallback3 } from "react";
 
 // src/stores/focusStore.ts
-import { create as create10 } from "zustand";
-var useFocusStore = create10((set) => ({
+import { create as create11 } from "zustand";
+var useFocusStore = create11((set) => ({
   currentFocus: null,
   sessionIndex: 0,
   gitFileIndex: 0,
@@ -2753,9 +3091,9 @@ var useFocusStore = create10((set) => ({
 }));
 
 // src/stores/sidebarStore.ts
-import { create as create11 } from "zustand";
+import { create as create12 } from "zustand";
 import { persist } from "zustand/middleware";
-var useSidebarStore = create11()(persist((set) => ({
+var useSidebarStore = create12()(persist((set) => ({
   isCollapsed: false,
   toggleCollapse: () => set((state) => ({ isCollapsed: !state.isCollapsed })),
   setCollapsed: (collapsed) => set({ isCollapsed: collapsed })
@@ -2764,8 +3102,8 @@ var useSidebarStore = create11()(persist((set) => ({
 }));
 
 // src/stores/filePickerStore.ts
-import { create as create12 } from "zustand";
-var useFilePickerStore = create12((set) => ({
+import { create as create13 } from "zustand";
+var useFilePickerStore = create13((set) => ({
   isOpen: false,
   open: () => set({ isOpen: true }),
   close: () => set({ isOpen: false }),
@@ -3004,7 +3342,7 @@ function useKeyboardShortcuts({
     onReturnToInput,
     closeDiff
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown]);
@@ -3018,7 +3356,7 @@ function useKeyboardShortcuts({
 import {
   useState as useState3,
   useCallback as useCallback4,
-  useEffect as useEffect5
+  useEffect as useEffect6
 } from "react";
 var SUPPORTED_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 function generateId() {
@@ -3154,7 +3492,7 @@ function useImageUpload(options = {}) {
       addImages(imageFiles);
     }
   }, [addImages]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!pageWide)
       return;
     let dragCounter = 0;
@@ -3218,7 +3556,7 @@ function useImageUpload(options = {}) {
 import {
   useState as useState4,
   useCallback as useCallback5,
-  useEffect as useEffect6
+  useEffect as useEffect7
 } from "react";
 var IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 var PDF_TYPES = ["application/pdf"];
@@ -3475,7 +3813,7 @@ function useFileUpload(options = {}) {
       addFiles(pastedFiles);
     }
   }, [addFiles]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!pageWide)
       return;
     let dragCounter = 0;
@@ -3581,9 +3919,9 @@ function useMessageQueuePosition(sessionId, messageId) {
   return { isQueued: false, isRunning: false, position: null };
 }
 // src/hooks/useBranch.ts
-import { useQuery as useQuery7, useMutation as useMutation5, useQueryClient as useQueryClient6 } from "@tanstack/react-query";
+import { useQuery as useQuery7, useMutation as useMutation5, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
 function useCreateBranch(sessionId) {
-  const queryClient = useQueryClient6();
+  const queryClient = useQueryClient7();
   return useMutation5({
     mutationFn: (data) => {
       if (!sessionId)
@@ -3623,7 +3961,7 @@ function useParentSession(sessionId) {
   });
 }
 // src/hooks/useResearch.ts
-import { useQuery as useQuery8, useMutation as useMutation6, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
+import { useQuery as useQuery8, useMutation as useMutation6, useQueryClient as useQueryClient8 } from "@tanstack/react-query";
 import {
   createResearchSession as apiCreateResearchSession,
   deleteResearchSession as apiDeleteResearchSession,
@@ -3633,8 +3971,8 @@ import {
 } from "@ottocode/api";
 
 // src/stores/pendingResearchStore.ts
-import { create as create13 } from "zustand";
-var usePendingResearchStore = create13((set, get) => ({
+import { create as create14 } from "zustand";
+var usePendingResearchStore = create14((set, get) => ({
   pendingContexts: new Map,
   addContext: (parentSessionId, context) => {
     set((state) => {
@@ -3727,7 +4065,7 @@ function useResearchSessions(parentSessionId, enabled = true) {
   });
 }
 function useCreateResearchSession() {
-  const queryClient = useQueryClient7();
+  const queryClient = useQueryClient8();
   return useMutation6({
     mutationFn: ({
       parentSessionId,
@@ -3741,7 +4079,7 @@ function useCreateResearchSession() {
   });
 }
 function useDeleteResearchSession() {
-  const queryClient = useQueryClient7();
+  const queryClient = useQueryClient8();
   return useMutation6({
     mutationFn: (researchId) => researchApi.deleteResearchSession(researchId),
     onSuccess: () => {
@@ -3768,7 +4106,7 @@ function useInjectContext() {
   });
 }
 function useExportToSession() {
-  const queryClient = useQueryClient7();
+  const queryClient = useQueryClient8();
   return useMutation6({
     mutationFn: ({
       researchId,
@@ -3780,55 +4118,7 @@ function useExportToSession() {
   });
 }
 // src/hooks/useSetuPayments.ts
-import { useEffect as useEffect7, useRef as useRef2 } from "react";
-
-// src/stores/toastStore.ts
-import { create as create14 } from "zustand";
-var toastId = 0;
-var useToastStore = create14((set) => ({
-  toasts: [],
-  addToast: (toast) => {
-    const id = `toast-${++toastId}`;
-    set((state) => ({
-      toasts: [...state.toasts, { ...toast, id }]
-    }));
-    return id;
-  },
-  removeToast: (id) => set((state) => ({
-    toasts: state.toasts.filter((t) => t.id !== id)
-  })),
-  updateToast: (id, updates) => set((state) => ({
-    toasts: state.toasts.map((t) => t.id === id ? { ...t, ...updates } : t)
-  })),
-  clearToasts: () => set({ toasts: [] })
-}));
-function toast(message, type = "default", duration = 4000) {
-  const id = useToastStore.getState().addToast({ message, type, duration });
-  if (duration > 0) {
-    setTimeout(() => {
-      useToastStore.getState().removeToast(id);
-    }, duration);
-  }
-  return id;
-}
-toast.success = (message, duration = 4000) => toast(message, "success", duration);
-toast.error = (message, duration = 5000) => toast(message, "error", duration);
-toast.info = (message, duration = 4000) => toast(message, "default", duration);
-toast.loading = (message) => toast(message, "loading", 0);
-toast.successWithAction = (message, action, duration = 6000) => {
-  const id = useToastStore.getState().addToast({
-    message,
-    type: "success",
-    duration,
-    action
-  });
-  if (duration > 0) {
-    setTimeout(() => {
-      useToastStore.getState().removeToast(id);
-    }, duration);
-  }
-  return id;
-};
+import { useEffect as useEffect8, useRef as useRef3 } from "react";
 
 // src/stores/ottorouterStore.ts
 import { create as create15 } from "zustand";
@@ -3874,15 +4164,15 @@ var useTopupApprovalStore = create16((set) => ({
 
 // src/hooks/useSetuPayments.ts
 function useSetuPayments(sessionId) {
-  const clientRef = useRef2(null);
-  const loadingToastIdRef = useRef2(null);
+  const clientRef = useRef3(null);
+  const loadingToastIdRef = useRef3(null);
   const setBalance = useOttoRouterStore((s) => s.setBalance);
   const setPaymentPending = useOttoRouterStore((s) => s.setPaymentPending);
   const removeToast = useToastStore((s) => s.removeToast);
   const updateToast = useToastStore((s) => s.updateToast);
   const setPendingTopup = useTopupApprovalStore((s) => s.setPendingTopup);
   const clearPendingTopup = useTopupApprovalStore((s) => s.clearPendingTopup);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!sessionId)
       return;
     const client2 = new SSEClient;
@@ -4012,7 +4302,7 @@ function useSetuPayments(sessionId) {
   ]);
 }
 // src/hooks/useOttoRouterBalance.ts
-import { useEffect as useEffect8, useCallback as useCallback6 } from "react";
+import { useEffect as useEffect9, useCallback as useCallback6 } from "react";
 
 // src/stores/usageStore.ts
 import { create as create17 } from "zustand";
@@ -4106,7 +4396,7 @@ function useOttoRouterBalance(providerName) {
     setUsage
   ]);
   const needsUsageWindows = subscription?.active && !subscription.usageWindows;
-  useEffect8(() => {
+  useEffect9(() => {
     if (providerName === "ottorouter" && (balance === null || usdcBalance === null || needsUsageWindows)) {
       fetchBalance();
     }
@@ -4127,7 +4417,7 @@ function useShareStatus(sessionId) {
   return { data, isLoading, error };
 }
 // src/hooks/useToolApprovalShortcuts.ts
-import { useEffect as useEffect9, useCallback as useCallback7 } from "react";
+import { useEffect as useEffect10, useCallback as useCallback7 } from "react";
 function useToolApprovalShortcuts(sessionId) {
   const { pendingApprovals, removePendingApproval } = useToolApprovalStore();
   const sessionPendingApprovals = pendingApprovals;
@@ -4163,7 +4453,7 @@ function useToolApprovalShortcuts(sessionId) {
       console.error("Failed to approve all tool calls:", error);
     }
   }, [sessionId, sessionPendingApprovals, removePendingApproval]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!sessionId || sessionPendingApprovals.length === 0)
       return;
     const handleKeyDown = (e) => {
@@ -4193,14 +4483,14 @@ function useToolApprovalShortcuts(sessionId) {
   ]);
 }
 // src/hooks/useTopupCallback.ts
-import { useEffect as useEffect10, useRef as useRef3 } from "react";
+import { useEffect as useEffect11, useRef as useRef4 } from "react";
 var STORAGE_KEY3 = "pendingPolarCheckout";
 function useTopupCallback() {
-  const hasHandled = useRef3(false);
-  const loadingToastId = useRef3(null);
+  const hasHandled = useRef4(false);
+  const loadingToastId = useRef4(null);
   const setBalance = useOttoRouterStore((s) => s.setBalance);
   const removeToast = useToastStore((s) => s.removeToast);
-  useEffect10(() => {
+  useEffect11(() => {
     if (hasHandled.current)
       return;
     const params = new URLSearchParams(window.location.search);
@@ -4261,8 +4551,8 @@ function useTopupCallback() {
   }, [setBalance, removeToast]);
 }
 // src/hooks/useAuthStatus.ts
-import { useEffect as useEffect11, useCallback as useCallback8, useState as useState5, useRef as useRef4 } from "react";
-import { useQueryClient as useQueryClient8 } from "@tanstack/react-query";
+import { useEffect as useEffect12, useCallback as useCallback8, useState as useState5, useRef as useRef5 } from "react";
+import { useQueryClient as useQueryClient9 } from "@tanstack/react-query";
 
 // src/stores/onboardingStore.ts
 import { create as create18 } from "zustand";
@@ -4312,11 +4602,11 @@ function useAuthStatus() {
   const setError = useOnboardingStore((s) => s.setError);
   const authStatus = useOnboardingStore((s) => s.authStatus);
   const isOpen = useOnboardingStore((s) => s.isOpen);
-  const queryClient = useQueryClient8();
+  const queryClient = useQueryClient9();
   const [initialized, setInitialized] = useState5(false);
   const [oauthPolling, setOauthPolling] = useState5(false);
-  const oauthPollingRef = useRef4(null);
-  const preOauthProvidersRef = useRef4(new Set);
+  const oauthPollingRef = useRef5(null);
+  const preOauthProvidersRef = useRef5(new Set);
   const fetchAuthStatus = useCallback8(async () => {
     setLoading(true);
     setError(null);
@@ -4453,6 +4743,11 @@ function useAuthStatus() {
   }, []);
   const startOAuth = useCallback8((provider, mode) => {
     const url = apiClient.getOAuthStartUrl(provider, mode);
+    if (openPlatformUrl(url)) {
+      snapshotConfiguredProviders();
+      setOauthPolling(true);
+      return null;
+    }
     if (isInIframe) {
       snapshotConfiguredProviders();
       window.parent.postMessage({ type: "otto-open-url", url }, "*");
@@ -4468,6 +4763,11 @@ function useAuthStatus() {
   }, [snapshotConfiguredProviders]);
   const startOAuthManual = useCallback8(async (provider, mode) => {
     const { url, sessionId } = await apiClient.getOAuthUrl(provider, mode);
+    if (openPlatformUrl(url)) {
+      snapshotConfiguredProviders();
+      setOauthPolling(true);
+      return { popup: null, sessionId };
+    }
     if (isInIframe) {
       snapshotConfiguredProviders();
       window.parent.postMessage({ type: "otto-open-url", url }, "*");
@@ -4496,7 +4796,7 @@ function useAuthStatus() {
       setLoading(false);
     }
   }, [fetchAuthStatus, setLoading, setError]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!oauthPolling || !isInIframe)
       return;
     oauthPollingRef.current = setInterval(() => {
@@ -4510,7 +4810,7 @@ function useAuthStatus() {
       clearTimeout(timeout);
     };
   }, [oauthPolling, fetchAuthStatus]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!oauthPolling || !authStatus)
       return;
     const currentConfigured = Object.entries(authStatus.providers).filter(([, p]) => p.configured);
@@ -4519,7 +4819,7 @@ function useAuthStatus() {
       setOauthPolling(false);
     }
   }, [authStatus, oauthPolling]);
-  useEffect11(() => {
+  useEffect12(() => {
     const handleOAuthMessage = (event) => {
       if (event.data?.type === "oauth-success") {
         fetchAuthStatus();
@@ -4589,8 +4889,8 @@ function useAuthStatus() {
   };
 }
 // src/hooks/useTunnel.ts
-import { useQuery as useQuery10, useMutation as useMutation7, useQueryClient as useQueryClient9 } from "@tanstack/react-query";
-import { useEffect as useEffect12, useCallback as useCallback9, useRef as useRef5 } from "react";
+import { useQuery as useQuery10, useMutation as useMutation7, useQueryClient as useQueryClient10 } from "@tanstack/react-query";
+import { useEffect as useEffect13, useCallback as useCallback9, useRef as useRef6 } from "react";
 import {
   client as client2,
   getTunnelQr,
@@ -4633,7 +4933,7 @@ function useTunnelStatus() {
     queryFn: fetchTunnelStatus,
     refetchInterval: 3000
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (query.data) {
       setStatus(query.data.status);
       setUrl(query.data.url);
@@ -4643,7 +4943,7 @@ function useTunnelStatus() {
   return query;
 }
 function useStartTunnel() {
-  const queryClient = useQueryClient9();
+  const queryClient = useQueryClient10();
   const setStatus = useTunnelStore((s) => s.setStatus);
   const setUrl = useTunnelStore((s) => s.setUrl);
   const setError = useTunnelStore((s) => s.setError);
@@ -4675,7 +4975,7 @@ function useStartTunnel() {
   });
 }
 function useStopTunnel() {
-  const queryClient = useQueryClient9();
+  const queryClient = useQueryClient10();
   const reset = useTunnelStore((s) => s.reset);
   return useMutation7({
     mutationFn: stopTunnel,
@@ -4693,7 +4993,7 @@ function useTunnelQr() {
     queryFn: fetchTunnelQr,
     enabled: !!url
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (query.data?.ok && query.data.qrCode) {
       setQrCode(query.data.qrCode);
     }
@@ -4706,7 +5006,7 @@ function useTunnelStream() {
   const setError = useTunnelStore((s) => s.setError);
   const setProgress = useTunnelStore((s) => s.setProgress);
   const isExpanded = useTunnelStore((s) => s.isExpanded);
-  const eventSourceRef = useRef5(null);
+  const eventSourceRef = useRef6(null);
   const connect = useCallback9(() => {
     if (eventSourceRef.current) {
       eventSourceRef.current.close();
@@ -4733,7 +5033,7 @@ function useTunnelStream() {
       eventSourceRef.current = null;
     };
   }, [setStatus, setUrl, setError, setProgress]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (isExpanded) {
       const cleanup = connect();
       return cleanup;
@@ -4748,7 +5048,7 @@ function useTunnelStream() {
   return { connect };
 }
 // src/hooks/useProviderUsage.ts
-import { useEffect as useEffect13, useCallback as useCallback10, useRef as useRef6 } from "react";
+import { useEffect as useEffect14, useCallback as useCallback10, useRef as useRef7 } from "react";
 var POLL_INTERVAL = 60000;
 var STALE_THRESHOLD = 30000;
 var inflight = new Set;
@@ -4777,9 +5077,9 @@ function useProviderUsage(provider, authType) {
       inflight.delete(provider);
     }
   }, [provider, isOAuthProvider, setUsage, setLoading, setLastFetched]);
-  const fetchRef = useRef6(fetchUsage);
+  const fetchRef = useRef7(fetchUsage);
   fetchRef.current = fetchUsage;
-  useEffect13(() => {
+  useEffect14(() => {
     if (!provider || !isOAuthProvider)
       return;
     fetchRef.current();
@@ -4822,8 +5122,8 @@ function useGitDiffFullFile(file, staged = false, enabled = false) {
   });
 }
 // src/hooks/useMCP.ts
-import { useQuery as useQuery12, useMutation as useMutation8, useQueryClient as useQueryClient10 } from "@tanstack/react-query";
-import { useEffect as useEffect14, useRef as useRef7, useCallback as useCallback11 } from "react";
+import { useQuery as useQuery12, useMutation as useMutation8, useQueryClient as useQueryClient11 } from "@tanstack/react-query";
+import { useEffect as useEffect15, useRef as useRef8, useCallback as useCallback11 } from "react";
 import {
   listMcpServers,
   startMcpServer,
@@ -4845,7 +5145,7 @@ function useMCPServers() {
     },
     refetchInterval: 1e4
   });
-  useEffect14(() => {
+  useEffect15(() => {
     if (query.data?.servers) {
       setServers(query.data.servers);
     }
@@ -4853,7 +5153,7 @@ function useMCPServers() {
   return query;
 }
 function useStartMCPServer() {
-  const queryClient = useQueryClient10();
+  const queryClient = useQueryClient11();
   return useMutation8({
     mutationFn: async (name) => {
       const { data, error } = await startMcpServer({
@@ -4872,7 +5172,7 @@ function useStartMCPServer() {
   });
 }
 function useStopMCPServer() {
-  const queryClient = useQueryClient10();
+  const queryClient = useQueryClient11();
   const setLoading = useMCPStore((s) => s.setLoading);
   return useMutation8({
     mutationFn: async (name) => {
@@ -4894,7 +5194,7 @@ function useStopMCPServer() {
   });
 }
 function useAddMCPServer() {
-  const queryClient = useQueryClient10();
+  const queryClient = useQueryClient11();
   return useMutation8({
     mutationFn: async (params) => {
       const { data, error } = await addMcpServer({
@@ -4913,7 +5213,7 @@ function useAddMCPServer() {
   });
 }
 function useRemoveMCPServer() {
-  const queryClient = useQueryClient10();
+  const queryClient = useQueryClient11();
   return useMutation8({
     mutationFn: async (name) => {
       const { data, error } = await removeMcpServer({
@@ -4932,7 +5232,7 @@ function useRemoveMCPServer() {
   });
 }
 function useAuthenticateMCPServer() {
-  const queryClient = useQueryClient10();
+  const queryClient = useQueryClient11();
   return useMutation8({
     mutationFn: async (name) => {
       const { data, error } = await initiateMcpAuth({
@@ -4951,7 +5251,7 @@ function useAuthenticateMCPServer() {
   });
 }
 function useRevokeMCPAuth() {
-  const queryClient = useQueryClient10();
+  const queryClient = useQueryClient11();
   return useMutation8({
     mutationFn: async (name) => {
       const { data, error } = await revokeMcpAuth({
@@ -4988,15 +5288,15 @@ function useCopilotDevicePoller() {
   const copilotDevice = useMCPStore((s) => s.copilotDevice);
   const setCopilotDevice = useMCPStore((s) => s.setCopilotDevice);
   const setLoading = useMCPStore((s) => s.setLoading);
-  const queryClient = useQueryClient10();
-  const timerRef = useRef7(null);
+  const queryClient = useQueryClient11();
+  const timerRef = useRef8(null);
   const stopPolling = useCallback11(() => {
     if (timerRef.current) {
       clearInterval(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!copilotDevice) {
       stopPolling();
       return;
@@ -5031,8 +5331,8 @@ function useCopilotDevicePoller() {
   return copilotDevice;
 }
 // src/hooks/useSkills.ts
-import { useMutation as useMutation9, useQuery as useQuery13, useQueryClient as useQueryClient11 } from "@tanstack/react-query";
-import { useEffect as useEffect15 } from "react";
+import { useMutation as useMutation9, useQuery as useQuery13, useQueryClient as useQueryClient12 } from "@tanstack/react-query";
+import { useEffect as useEffect16 } from "react";
 function useSkills() {
   const setSkillsConfig = useSkillsStore((s) => s.setSkillsConfig);
   const query = useQuery13({
@@ -5042,7 +5342,7 @@ function useSkills() {
     },
     refetchInterval: 30000
   });
-  useEffect15(() => {
+  useEffect16(() => {
     if (query.data?.items) {
       setSkillsConfig({
         skills: query.data.items,
@@ -5055,7 +5355,7 @@ function useSkills() {
   return query;
 }
 function useUpdateSkillsConfig() {
-  const queryClient = useQueryClient11();
+  const queryClient = useQueryClient12();
   const setSkillsConfig = useSkillsStore((s) => s.setSkillsConfig);
   return useMutation9({
     mutationFn: (input) => apiClient.updateSkillsConfig(input),
@@ -5103,6 +5403,22 @@ function useSkillFileContent(name, filePath) {
     enabled: !!name && !!filePath
   });
 }
+// src/hooks/useContainerWidth.ts
+import { useEffect as useEffect17, useState as useState6 } from "react";
+function useContainerWidth(ref) {
+  const [width, setWidth] = useState6(0);
+  useEffect17(() => {
+    const el = ref.current;
+    if (!el)
+      return;
+    const update = () => setWidth(el.clientWidth);
+    update();
+    const observer = new ResizeObserver(() => update());
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return width;
+}
 export {
   useWorkingDirectory,
   useUpdateSkillsConfig,
@@ -5171,8 +5487,10 @@ export {
   useCreateResearchSession,
   useCreateBranch,
   useCopilotDevicePoller,
+  useContainerWidth,
   useConfig,
   useCommitChanges,
+  useClientEvents,
   useBranches,
   useAuthenticateMCPServer,
   useAuthStatus,
@@ -5182,4 +5500,4 @@ export {
   sessionsQueryKey
 };
 
-//# debugId=2FC62A50D828F41864756E2164756E21
+//# debugId=5F8DA6B0D961E4EF64756E2164756E21