@skippr/live-agent-sdk 0.36.0 → 0.37.0

package/dist/esm/lib-exports.js

@@ -137,12 +137,24 @@ function useAuth({ appKey }) {
       setIsSubmitting(false);
     }
   }, [appKey]);
-  const logout = useCallback(() => {
+  const logout = useCallback(async () => {
+    const token = authToken;
     if (appKey)
       clearStoredToken(appKey);
     setAuthToken(null);
     setError("");
-  }, [appKey]);
+    if (!token)
+      return;
+    try {
+      await fetch(`${API_URL}/v1/auth/logout`, {
+        method: "POST",
+        credentials: "omit",
+        headers: { Authorization: `Bearer ${token}` }
+      });
+    } catch (e) {
+      console.warn("[Skippr] Failed to revoke session on logout:", e);
+    }
+  }, [appKey, authToken]);
   return {
     isAuthenticated,
     isValidating,
@@ -160,23 +172,17 @@ import { useCallback as useCallback2, useEffect as useEffect2, useState as useSt
 var API_URL2 = "https://specialist.skippr.ai/api";
 function useAvailableModules({
   enabled,
-  bearerToken
+  bearerToken,
+  authedFetch
 }) {
   const [modules, setModules] = useState2([]);
   const [isLoading, setIsLoading] = useState2(false);
   const [error, setError] = useState2(null);
   const fetchModules = useCallback2(async () => {
-    if (!bearerToken) {
-      setError("No auth token available");
-      return;
-    }
     setIsLoading(true);
     setError(null);
     try {
-      const resp = await fetch(`${API_URL2}/v1/modules/available`, {
-        credentials: "omit",
-        headers: { Authorization: `Bearer ${bearerToken}` }
-      });
+      const resp = await authedFetch(`${API_URL2}/v1/modules/available`);
       if (!resp.ok) {
         const body = await resp.json().catch(() => null);
         throw new Error(body?.detail || `Failed to load modules: ${resp.status}`);
@@ -188,7 +194,7 @@ function useAvailableModules({
     } finally {
       setIsLoading(false);
     }
-  }, [bearerToken]);
+  }, [authedFetch]);
   useEffect2(() => {
     if (!enabled || !bearerToken)
       return;
@@ -205,12 +211,9 @@ function useAvailableModules({
 // src/hooks/useSession.ts
 import { useCallback as useCallback3, useEffect as useEffect3, useRef, useState as useState3 } from "react";
 var API_URL3 = "https://specialist.skippr.ai/api";
-async function fetchSessionMessages(sessionId, bearerToken) {
+async function fetchSessionMessages(sessionId, authedFetch) {
   try {
-    const resp = await fetch(`${API_URL3}/v1/sessions/${sessionId}/messages`, {
-      credentials: "omit",
-      headers: { Authorization: `Bearer ${bearerToken}` }
-    });
+    const resp = await authedFetch(`${API_URL3}/v1/sessions/${sessionId}/messages`);
     if (!resp.ok)
       return [];
     const { messages } = await resp.json();
@@ -225,6 +228,7 @@ async function fetchSessionMessages(sessionId, bearerToken) {
     return [];
   }
 }
+var REFRESH_BUFFER_MS = 180000;
 async function requestScreenShare() {
   try {
     return await navigator.mediaDevices.getDisplayMedia({ video: { displaySurface: "browser" } });
@@ -250,13 +254,14 @@ async function exchangeForBearerToken(appKey, userToken) {
   if (!resp.ok) {
     throw new Error(`Token exchange failed: ${resp.status}`);
   }
-  const { token } = await resp.json();
-  return token;
+  const { token, expiresAt } = await resp.json();
+  return { token, expiresAt: new Date(expiresAt).getTime() };
 }
 function useSession({
   captureMode = "screenshare",
   authToken,
   appKey,
+  getUserToken,
   userToken,
   onStart,
   onStartError,
@@ -274,25 +279,106 @@ function useSession({
   const [isPaused, setIsPaused] = useState3(false);
   const [isPausing, setIsPausing] = useState3(false);
   const [historyMessages, setHistoryMessages] = useState3([]);
+  const [authFailed, setAuthFailed] = useState3(false);
+  const tokenRef = useRef(authToken ? { token: authToken, expiresAt: null } : null);
+  const getUserTokenRef = useRef(getUserToken);
+  getUserTokenRef.current = getUserToken ?? (userToken ? () => Promise.resolve(userToken) : undefined);
+  const failedBearerRef = useRef(null);
+  const inFlightExchangeRef = useRef(null);
+  const canExchange = useCallback3(() => !!appKey && !!getUserTokenRef.current, [appKey]);
+  const reExchange = useCallback3(async () => {
+    if (inFlightExchangeRef.current)
+      return inFlightExchangeRef.current;
+    const provider = getUserTokenRef.current;
+    if (!appKey || !provider)
+      throw new Error("No token provider available");
+    const exchange = (async () => {
+      const userToken2 = await provider();
+      const { token, expiresAt } = await exchangeForBearerToken(appKey, userToken2);
+      tokenRef.current = { token, expiresAt };
+      setBearerToken(token);
+      return token;
+    })();
+    inFlightExchangeRef.current = exchange;
+    try {
+      return await exchange;
+    } finally {
+      inFlightExchangeRef.current = null;
+    }
+  }, [appKey]);
+  const getValidBearer = useCallback3(async () => {
+    const current = tokenRef.current;
+    if (current) {
+      if (current.expiresAt === null)
+        return current.token;
+      if (Date.now() < current.expiresAt - REFRESH_BUFFER_MS)
+        return current.token;
+    }
+    if (canExchange())
+      return reExchange();
+    return current?.token ?? null;
+  }, [canExchange, reExchange]);
+  const authedFetch = useCallback3(async (input, init = {}) => {
+    const isSecretMode = canExchange();
+    const onTerminalAuthFailure = () => {
+      if (isSecretMode)
+        setAuthFailed(true);
+      else
+        window.dispatchEvent(new Event("skippr:logout"));
+    };
+    const baseHeaders = init.headers ?? {};
+    const run = (token) => fetch(input, {
+      ...init,
+      credentials: "omit",
+      headers: token ? { ...baseHeaders, Authorization: `Bearer ${token}` } : baseHeaders
+    });
+    let bearer;
+    try {
+      bearer = await getValidBearer();
+    } catch (e) {
+      onTerminalAuthFailure();
+      throw e;
+    }
+    let resp = await run(bearer);
+    const canRetry = resp.status === 401 && isSecretMode && bearer !== failedBearerRef.current;
+    if (canRetry) {
+      let refreshed;
+      try {
+        refreshed = await reExchange();
+      } catch (e) {
+        onTerminalAuthFailure();
+        throw e;
+      }
+      resp = await run(refreshed);
+      failedBearerRef.current = resp.status === 401 ? refreshed : null;
+    } else if (resp.status !== 401) {
+      failedBearerRef.current = null;
+    }
+    if (resp.status === 401)
+      onTerminalAuthFailure();
+    else if (resp.ok)
+      setAuthFailed(false);
+    return resp;
+  }, [canExchange, getValidBearer, reExchange]);
   useEffect3(() => {
     let stale = false;
     if (authToken) {
+      tokenRef.current = { token: authToken, expiresAt: null };
       setBearerToken(authToken);
       return;
     }
-    if (appKey && userToken) {
-      exchangeForBearerToken(appKey, userToken).then((token) => {
-        if (!stale)
-          setBearerToken(token);
-      }).catch((e) => {
-        if (!stale)
-          setError(e instanceof Error ? e.message : "Token exchange failed");
+    if (canExchange()) {
+      reExchange().catch((e) => {
+        if (stale)
+          return;
+        setError(e instanceof Error ? e.message : "Token exchange failed");
+        setAuthFailed(true);
       });
     }
     return () => {
       stale = true;
     };
-  }, [authToken, appKey, userToken]);
+  }, [authToken, canExchange, reExchange]);
   const pauseOnUnloadRef = useRef(null);
   pauseOnUnloadRef.current = connection !== null && !isPaused && sessionId && bearerToken ? { sessionId, bearerToken } : null;
   useEffect3(() => {
@@ -328,14 +414,12 @@ function useSession({
       screenStream = await requestScreenShare();
     }
     const requestAgentControls = agentControls?.highlight === true ? { highlight: true } : undefined;
-    const headers = { Authorization: `Bearer ${bearerToken}` };
     try {
       let resolvedSessionId = existingSessionId;
       if (!resolvedSessionId) {
-        const createResp = await fetch(`${API_URL3}/v1/sessions`, {
+        const createResp = await authedFetch(`${API_URL3}/v1/sessions`, {
           method: "POST",
-          credentials: "omit",
-          headers: { "Content-Type": "application/json", ...headers },
+          headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             agentId,
             captureMode,
@@ -350,10 +434,9 @@ function useSession({
         const { session: session2 } = await createResp.json();
         resolvedSessionId = session2.id;
       }
-      const startResp = await fetch(`${API_URL3}/v1/sessions/${resolvedSessionId}/start`, {
+      const startResp = await authedFetch(`${API_URL3}/v1/sessions/${resolvedSessionId}/start`, {
         method: "POST",
-        credentials: "omit",
-        headers: { "Content-Type": "application/json", ...headers },
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ captureMode, agentControls: requestAgentControls })
       });
       if (!startResp.ok) {
@@ -362,7 +445,7 @@ function useSession({
         throw new Error(body?.detail || `Failed to start session: ${startResp.status}`);
       }
       const { session, connection: conn } = await startResp.json();
-      const history2 = existingSessionId ? await fetchSessionMessages(session.id, bearerToken) : [];
+      const history2 = existingSessionId ? await fetchSessionMessages(session.id, authedFetch) : [];
       setSessionId(session.id);
       setHistoryMessages(history2);
       setConnection({
@@ -379,16 +462,14 @@ function useSession({
     } finally {
       setIsStarting(false);
     }
-  }, [captureMode, bearerToken, onStart, onStartError]);
+  }, [captureMode, bearerToken, authedFetch, onStart, onStartError]);
   const pauseSession = useCallback3(async () => {
     if (!sessionId || !bearerToken)
       return;
     setIsPausing(true);
     try {
-      const resp = await fetch(`${API_URL3}/v1/sessions/${sessionId}/pause`, {
-        method: "POST",
-        credentials: "omit",
-        headers: { Authorization: `Bearer ${bearerToken}` }
+      const resp = await authedFetch(`${API_URL3}/v1/sessions/${sessionId}/pause`, {
+        method: "POST"
       });
       if (!resp.ok) {
         const body = await resp.json().catch(() => null);
@@ -399,7 +480,7 @@ function useSession({
       setIsPausing(false);
       return;
     }
-    const history2 = await fetchSessionMessages(sessionId, bearerToken);
+    const history2 = await fetchSessionMessages(sessionId, authedFetch);
     stopStream(pendingScreenStream);
     setPendingScreenStream(null);
     setShouldConnect(false);
@@ -407,16 +488,14 @@ function useSession({
     setHistoryMessages(history2);
     setIsPaused(true);
     setIsPausing(false);
-  }, [sessionId, bearerToken, pendingScreenStream]);
+  }, [sessionId, bearerToken, authedFetch, pendingScreenStream]);
   const disconnect = useCallback3(async () => {
     setIsDisconnecting(true);
     try {
       if (sessionId && bearerToken) {
         try {
-          await fetch(`${API_URL3}/v1/sessions/${sessionId}/pause`, {
-            method: "POST",
-            credentials: "omit",
-            headers: { Authorization: `Bearer ${bearerToken}` }
+          await authedFetch(`${API_URL3}/v1/sessions/${sessionId}/pause`, {
+            method: "POST"
           });
         } catch {}
       }
@@ -432,7 +511,7 @@ function useSession({
     } finally {
       setIsDisconnecting(false);
     }
-  }, [sessionId, bearerToken, pendingScreenStream, onDisconnect]);
+  }, [sessionId, bearerToken, authedFetch, pendingScreenStream, onDisconnect]);
   return {
     connection,
     shouldConnect,
@@ -447,7 +526,9 @@ function useSession({
     isPausing,
     historyMessages,
     pendingScreenStream,
-    bearerToken
+    bearerToken,
+    authedFetch,
+    authFailed
   };
 }
 
@@ -1450,17 +1531,24 @@ var createLucideIcon = (iconName, iconNode) => {
   return Component;
 };
 
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle-check.js
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle-alert.js
 var __iconNode = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+];
+var CircleAlert = createLucideIcon("circle-alert", __iconNode);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle-check.js
+var __iconNode2 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-var CircleCheck = createLucideIcon("circle-check", __iconNode);
+var CircleCheck = createLucideIcon("circle-check", __iconNode2);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/loader-circle.js
-var __iconNode2 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-var LoaderCircle = createLucideIcon("loader-circle", __iconNode2);
+var __iconNode3 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+var LoaderCircle = createLucideIcon("loader-circle", __iconNode3);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sparkles.js
-var __iconNode3 = [
+var __iconNode4 = [
   [
     "path",
     {
@@ -1472,9 +1560,9 @@ var __iconNode3 = [
   ["path", { d: "M22 4h-4", key: "gwowj6" }],
   ["circle", { cx: "4", cy: "20", r: "2", key: "6kqj1y" }]
 ];
-var Sparkles = createLucideIcon("sparkles", __iconNode3);
+var Sparkles = createLucideIcon("sparkles", __iconNode4);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/bot.js
-var __iconNode4 = [
+var __iconNode5 = [
   ["path", { d: "M12 8V4H8", key: "hb8ula" }],
   ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
   ["path", { d: "M2 14h2", key: "vft8re" }],
@@ -1482,23 +1570,23 @@ var __iconNode4 = [
   ["path", { d: "M15 13v2", key: "1xurst" }],
   ["path", { d: "M9 13v2", key: "rq6x2g" }]
 ];
-var Bot = createLucideIcon("bot", __iconNode4);
+var Bot = createLucideIcon("bot", __iconNode5);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/calendar.js
-var __iconNode5 = [
+var __iconNode6 = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-var Calendar = createLucideIcon("calendar", __iconNode5);
+var Calendar = createLucideIcon("calendar", __iconNode6);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevron-down.js
-var __iconNode6 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-var ChevronDown = createLucideIcon("chevron-down", __iconNode6);
+var __iconNode7 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+var ChevronDown = createLucideIcon("chevron-down", __iconNode7);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle.js
-var __iconNode7 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-var Circle = createLucideIcon("circle", __iconNode7);
+var __iconNode8 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+var Circle = createLucideIcon("circle", __iconNode8);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/graduation-cap.js
-var __iconNode8 = [
+var __iconNode9 = [
   [
     "path",
     {
@@ -1509,9 +1597,9 @@ var __iconNode8 = [
   ["path", { d: "M22 10v6", key: "1lu8f3" }],
   ["path", { d: "M6 12.5V16a6 3 0 0 0 12 0v-3.5", key: "1r8lef" }]
 ];
-var GraduationCap = createLucideIcon("graduation-cap", __iconNode8);
+var GraduationCap = createLucideIcon("graduation-cap", __iconNode9);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/headset.js
-var __iconNode9 = [
+var __iconNode10 = [
   [
     "path",
     {
@@ -1521,15 +1609,15 @@ var __iconNode9 = [
   ],
   ["path", { d: "M21 16v2a4 4 0 0 1-4 4h-5", key: "1x7m43" }]
 ];
-var Headset = createLucideIcon("headset", __iconNode9);
+var Headset = createLucideIcon("headset", __iconNode10);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mail.js
-var __iconNode10 = [
+var __iconNode11 = [
   ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
   ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
 ];
-var Mail = createLucideIcon("mail", __iconNode10);
+var Mail = createLucideIcon("mail", __iconNode11);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
-var __iconNode11 = [
+var __iconNode12 = [
   [
     "path",
     {
@@ -1538,9 +1626,9 @@ var __iconNode11 = [
     }
   ]
 ];
-var MessageCircle = createLucideIcon("message-circle", __iconNode11);
+var MessageCircle = createLucideIcon("message-circle", __iconNode12);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-square.js
-var __iconNode12 = [
+var __iconNode13 = [
   [
     "path",
     {
@@ -1549,9 +1637,9 @@ var __iconNode12 = [
     }
   ]
 ];
-var MessageSquare = createLucideIcon("message-square", __iconNode12);
+var MessageSquare = createLucideIcon("message-square", __iconNode13);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
-var __iconNode13 = [
+var __iconNode14 = [
   ["path", { d: "M12 19v3", key: "npa21l" }],
   ["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
   ["path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2", key: "cqa7eg" }],
@@ -1559,40 +1647,40 @@ var __iconNode13 = [
   ["path", { d: "m2 2 20 20", key: "1ooewy" }],
   ["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }]
 ];
-var MicOff = createLucideIcon("mic-off", __iconNode13);
+var MicOff = createLucideIcon("mic-off", __iconNode14);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
-var __iconNode14 = [
+var __iconNode15 = [
   ["path", { d: "M12 19v3", key: "npa21l" }],
   ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
   ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
 ];
-var Mic = createLucideIcon("mic", __iconNode14);
+var Mic = createLucideIcon("mic", __iconNode15);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/minimize-2.js
-var __iconNode15 = [
+var __iconNode16 = [
   ["path", { d: "m14 10 7-7", key: "oa77jy" }],
   ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
   ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
   ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
 ];
-var Minimize2 = createLucideIcon("minimize-2", __iconNode15);
+var Minimize2 = createLucideIcon("minimize-2", __iconNode16);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
-var __iconNode16 = [
+var __iconNode17 = [
   ["path", { d: "M12 17v4", key: "1riwvh" }],
   ["path", { d: "M17 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 1.184-1.826", key: "cv7jms" }],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }],
   ["path", { d: "M8 21h8", key: "1ev6f3" }],
   ["path", { d: "M8.656 3H20a2 2 0 0 1 2 2v10a2 2 0 0 1-.293 1.042", key: "z8ni2w" }]
 ];
-var MonitorOff = createLucideIcon("monitor-off", __iconNode16);
+var MonitorOff = createLucideIcon("monitor-off", __iconNode17);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
-var __iconNode17 = [
+var __iconNode18 = [
   ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
   ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
 ];
-var Monitor = createLucideIcon("monitor", __iconNode17);
+var Monitor = createLucideIcon("monitor", __iconNode18);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.js
-var __iconNode18 = [
+var __iconNode19 = [
   [
     "path",
     {
@@ -1601,15 +1689,15 @@ var __iconNode18 = [
     }
   ]
 ];
-var MousePointer2 = createLucideIcon("mouse-pointer-2", __iconNode18);
+var MousePointer2 = createLucideIcon("mouse-pointer-2", __iconNode19);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pause.js
-var __iconNode19 = [
+var __iconNode20 = [
   ["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
   ["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
 ];
-var Pause = createLucideIcon("pause", __iconNode19);
+var Pause = createLucideIcon("pause", __iconNode20);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
-var __iconNode20 = [
+var __iconNode21 = [
   [
     "path",
     {
@@ -1626,9 +1714,9 @@ var __iconNode20 = [
     }
   ]
 ];
-var PhoneOff = createLucideIcon("phone-off", __iconNode20);
+var PhoneOff = createLucideIcon("phone-off", __iconNode21);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/play.js
-var __iconNode21 = [
+var __iconNode22 = [
   [
     "path",
     {
@@ -1637,9 +1725,9 @@ var __iconNode21 = [
     }
   ]
 ];
-var Play = createLucideIcon("play", __iconNode21);
+var Play = createLucideIcon("play", __iconNode22);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rocket.js
-var __iconNode22 = [
+var __iconNode23 = [
   ["path", { d: "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5", key: "qeys4" }],
   [
     "path",
@@ -1657,9 +1745,9 @@ var __iconNode22 = [
   ],
   ["path", { d: "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05", key: "92ym6u" }]
 ];
-var Rocket = createLucideIcon("rocket", __iconNode22);
+var Rocket = createLucideIcon("rocket", __iconNode23);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
-var __iconNode23 = [
+var __iconNode24 = [
   [
     "path",
     {
@@ -1669,15 +1757,15 @@ var __iconNode23 = [
   ],
   ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ];
-var Send = createLucideIcon("send", __iconNode23);
+var Send = createLucideIcon("send", __iconNode24);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/user-plus.js
-var __iconNode24 = [
+var __iconNode25 = [
   ["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
   ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }],
   ["line", { x1: "19", x2: "19", y1: "8", y2: "14", key: "1bvyxn" }],
   ["line", { x1: "22", x2: "16", y1: "11", y2: "11", key: "1shjgl" }]
 ];
-var UserPlus = createLucideIcon("user-plus", __iconNode24);
+var UserPlus = createLucideIcon("user-plus", __iconNode25);
 // src/components/HighlightOverlay.tsx
 import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState4 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -1926,6 +2014,8 @@ function useLiveAgent() {
     throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
   }
   const {
+    usesHostAuth,
+    authFailed,
     connection,
     shouldConnect,
     historyMessages,
@@ -3549,6 +3639,9 @@ function Sidebar({
     agentMode,
     agentControls
   } = useLiveAgent();
+  const internalCtx = useContextValue(LiveAgentContext);
+  const usesHostAuth = internalCtx?.usesHostAuth ?? false;
+  const authFailed = internalCtx?.authFailed ?? false;
   const showAgenda = agentMode !== "always_on";
   const isFloating = variant === "floating";
   const isSidebar = variant === "sidebar";
@@ -3571,17 +3664,7 @@ function Sidebar({
     style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
     children: [
       !hideHeader && /* @__PURE__ */ jsx18(ChatHeader, {}),
-      !isAuthenticated && isValidating ? /* @__PURE__ */ jsx18("div", {
-        className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-        children: /* @__PURE__ */ jsx18(LoadingDots, {
-          label: "Loading..."
-        })
-      }) : !isAuthenticated ? /* @__PURE__ */ jsx18(LoginFlow, {
-        requestOtp,
-        verifyOtp,
-        error: authError,
-        isSubmitting: isAuthSubmitting
-      }) : /* @__PURE__ */ jsx18(AuthenticatedContent, {
+      authFailed ? /* @__PURE__ */ jsx18(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx18(AuthenticatedContent, {
         isConnected,
         isPaused,
         isPausing,
@@ -3603,6 +3686,16 @@ function Sidebar({
         agentId,
         agentControls,
         showAgenda
+      }) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx18("div", {
+        className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
+        children: /* @__PURE__ */ jsx18(LoadingDots, {
+          label: "Loading..."
+        })
+      }) : /* @__PURE__ */ jsx18(LoginFlow, {
+        requestOtp,
+        verifyOtp,
+        error: authError,
+        isSubmitting: isAuthSubmitting
       })
     ]
   });
@@ -3721,6 +3814,24 @@ function AuthenticatedContent({
     ]
   });
 }
+function AuthError() {
+  return /* @__PURE__ */ jsxs16("div", {
+    className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:px-6 skippr:py-4 skippr:text-center",
+    children: [
+      /* @__PURE__ */ jsx18(CircleAlert, {
+        className: "skippr:mb-3 skippr:size-7 skippr:text-destructive"
+      }),
+      /* @__PURE__ */ jsx18("p", {
+        className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
+        children: "We couldn't verify your session"
+      }),
+      /* @__PURE__ */ jsx18("p", {
+        className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
+        children: "Please contact administrator."
+      })
+    ]
+  });
+}
 function ConnectedBanner() {
   const remaining = useSessionRemaining();
   return /* @__PURE__ */ jsx18(SessionWarningBanner, {
@@ -3782,6 +3893,7 @@ function LiveAgent(props) {
     agentId: hostAgentId,
     authToken: authTokenProp,
     appKey,
+    getUserToken,
     userToken,
     position = "right",
     variant = "floating",
@@ -3804,7 +3916,8 @@ function LiveAgent(props) {
     }
   }
   const auth = useAuth({ appKey });
-  const effectiveAuthToken = authTokenProp || auth.authToken || undefined;
+  const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
+  const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
   const hasModuleSelector = !hostAgentId;
   const [activeModule, setActiveModule] = useState11(null);
   const agentId = hasModuleSelector ? activeModule?.id ?? null : hostAgentId;
@@ -3842,11 +3955,14 @@ function LiveAgent(props) {
     isPaused,
     historyMessages,
     pendingScreenStream,
-    bearerToken
+    bearerToken,
+    authedFetch,
+    authFailed
   } = useSession({
     captureMode,
     authToken: effectiveAuthToken,
     appKey,
+    getUserToken,
     userToken,
     onStart: minimizeOnSessionStart,
     onStartError: expandOnSessionStartError,
@@ -3870,7 +3986,8 @@ function LiveAgent(props) {
     refetch: refetchModules
   } = useAvailableModules({
     enabled: hasModuleSelector && isPanelOpen,
-    bearerToken
+    bearerToken,
+    authedFetch
   });
   const activeModuleForAgent = useMemo5(() => {
     if (activeModule)
@@ -3931,7 +4048,7 @@ function LiveAgent(props) {
     setIsPanelOpen(false);
   }, [minimizable]);
   const isConnected = connection !== null;
-  const isAuthenticated = !!userToken || !!authTokenProp || auth.isAuthenticated;
+  const isAuthenticated = bearerToken !== null || auth.isAuthenticated;
   const ctx = useMemo5(() => ({
     connection,
     shouldConnect,
@@ -3962,6 +4079,8 @@ function LiveAgent(props) {
     expandPanel,
     minimizePanel,
     isAuthenticated,
+    usesHostAuth,
+    authFailed,
     isValidating: auth.isValidating,
     authError: auth.error,
     requestOtp: auth.requestOtp,
@@ -4011,6 +4130,8 @@ function LiveAgent(props) {
     expandPanel,
     minimizePanel,
     isAuthenticated,
+    usesHostAuth,
+    authFailed,
     auth.isValidating,
     auth.error,
     auth.requestOtp,