@skippr/live-agent-sdk 0.34.0 → 0.35.0

package/dist/esm/lib-exports.js

@@ -8,7 +8,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // src/components/LiveAgent.tsx
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
-import { useCallback as useCallback8, useMemo as useMemo5, useState as useState11 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo6, useRef as useRef10, useState as useState11 } from "react";
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
@@ -203,8 +203,41 @@ function useAvailableModules({
 }
 
 // src/hooks/useSession.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
+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) {
+  try {
+    const resp = await fetch(`${API_URL3}/v1/sessions/${sessionId}/messages`, {
+      credentials: "omit",
+      headers: { Authorization: `Bearer ${bearerToken}` }
+    });
+    if (!resp.ok)
+      return [];
+    const { messages } = await resp.json();
+    return messages.filter((message) => message.role !== "system").map((message) => ({
+      id: message.id,
+      role: message.role === "user" ? "user" : "assistant",
+      content: message.content,
+      source: "chat",
+      timestamp: new Date(message.createdAt).getTime()
+    }));
+  } catch {
+    return [];
+  }
+}
+async function requestScreenShare() {
+  try {
+    return await navigator.mediaDevices.getDisplayMedia({ video: { displaySurface: "browser" } });
+  } catch {
+    return null;
+  }
+}
+function stopStream(stream) {
+  if (!stream)
+    return;
+  for (const track of stream.getTracks())
+    track.stop();
+}
 async function exchangeForBearerToken(appKey, userToken) {
   const resp = await fetch(`${API_URL3}/v1/auth/token-exchange`, {
     method: "POST",
@@ -238,6 +271,10 @@ function useSession({
   const [sessionId, setSessionId] = useState3(null);
   const [bearerToken, setBearerToken] = useState3(authToken ?? null);
   const [pendingScreenStream, setPendingScreenStream] = useState3(null);
+  const [isPaused, setIsPaused] = useState3(false);
+  const [isPausing, setIsPausing] = useState3(false);
+  const [resumableSessions, setResumableSessions] = useState3([]);
+  const [historyMessages, setHistoryMessages] = useState3([]);
   useEffect3(() => {
     let stale = false;
     if (authToken) {
@@ -257,6 +294,46 @@ function useSession({
       stale = true;
     };
   }, [authToken, appKey, userToken]);
+  const refetchResumable = useCallback3(async () => {
+    if (!bearerToken) {
+      setResumableSessions([]);
+      return;
+    }
+    try {
+      const resp = await fetch(`${API_URL3}/v1/sessions/resumable`, {
+        credentials: "omit",
+        headers: { Authorization: `Bearer ${bearerToken}` }
+      });
+      if (!resp.ok) {
+        setResumableSessions([]);
+        return;
+      }
+      const { sessions } = await resp.json();
+      setResumableSessions(sessions);
+    } catch {
+      setResumableSessions([]);
+    }
+  }, [bearerToken]);
+  useEffect3(() => {
+    refetchResumable();
+  }, [refetchResumable]);
+  const pauseOnUnloadRef = useRef(null);
+  pauseOnUnloadRef.current = connection !== null && !isPaused && sessionId && bearerToken ? { sessionId, bearerToken } : null;
+  useEffect3(() => {
+    const onPageHide = () => {
+      const pending = pauseOnUnloadRef.current;
+      if (!pending)
+        return;
+      fetch(`${API_URL3}/v1/sessions/${pending.sessionId}/pause`, {
+        method: "POST",
+        credentials: "omit",
+        keepalive: true,
+        headers: { Authorization: `Bearer ${pending.bearerToken}` }
+      }).catch(() => {});
+    };
+    window.addEventListener("pagehide", onPageHide);
+    return () => window.removeEventListener("pagehide", onPageHide);
+  }, []);
   const startSession = useCallback3(async ({ agentId, agentControls }) => {
     if (!bearerToken) {
       setError("No auth token available");
@@ -272,13 +349,7 @@ function useSession({
     onStart?.();
     let screenStream = null;
     if (captureMode === "screenshare") {
-      try {
-        screenStream = await navigator.mediaDevices.getDisplayMedia({
-          video: { displaySurface: "browser" }
-        });
-      } catch {
-        screenStream = null;
-      }
+      screenStream = await requestScreenShare();
     }
     const requestAgentControls = agentControls?.highlight === true ? { highlight: true } : undefined;
     const headers = { Authorization: `Bearer ${bearerToken}` };
@@ -311,23 +382,97 @@ function useSession({
       }
       const { connection: conn } = await startResp.json();
       setSessionId(session.id);
+      setHistoryMessages([]);
       setConnection({
         livekitUrl: conn.livekitUrl,
         token: conn.token
       });
       setPendingScreenStream(screenStream);
       setShouldConnect(true);
+      setIsPaused(false);
     } catch (e) {
-      if (screenStream) {
-        for (const track of screenStream.getTracks())
-          track.stop();
-      }
+      stopStream(screenStream);
       setError(e instanceof Error ? e.message : "Failed to start session");
       onStartError?.();
     } finally {
       setIsStarting(false);
     }
   }, [captureMode, bearerToken, 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}` }
+      });
+      if (!resp.ok) {
+        const body = await resp.json().catch(() => null);
+        throw new Error(body?.detail || `Failed to pause: ${resp.status}`);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to pause session");
+      setIsPausing(false);
+      return;
+    }
+    const history2 = await fetchSessionMessages(sessionId, bearerToken);
+    stopStream(pendingScreenStream);
+    setPendingScreenStream(null);
+    setShouldConnect(false);
+    setConnection(null);
+    setHistoryMessages(history2);
+    setIsPaused(true);
+    setIsPausing(false);
+    await refetchResumable();
+  }, [sessionId, bearerToken, pendingScreenStream, refetchResumable]);
+  const resumeSession = useCallback3(async ({
+    sessionId: resumeId,
+    agentControls
+  }) => {
+    if (!bearerToken) {
+      setError("No auth token available");
+      return;
+    }
+    setIsStarting(true);
+    setError("");
+    setErrorCode(null);
+    onStart?.();
+    let screenStream = null;
+    if (captureMode === "screenshare") {
+      screenStream = await requestScreenShare();
+    }
+    const requestAgentControls = agentControls?.highlight === true ? { highlight: true } : undefined;
+    try {
+      const resp = await fetch(`${API_URL3}/v1/sessions/${resumeId}/resume`, {
+        method: "POST",
+        credentials: "omit",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${bearerToken}` },
+        body: JSON.stringify({ captureMode, agentControls: requestAgentControls })
+      });
+      if (!resp.ok) {
+        const body = await resp.json().catch(() => null);
+        setErrorCode(resp.status);
+        throw new Error(body?.detail || `Failed to resume: ${resp.status}`);
+      }
+      const { session, connection: conn } = await resp.json();
+      const history2 = await fetchSessionMessages(session.id, bearerToken);
+      setSessionId(session.id);
+      setConnection({ livekitUrl: conn.livekitUrl, token: conn.token });
+      setPendingScreenStream(screenStream);
+      setHistoryMessages(history2);
+      setShouldConnect(true);
+      setIsPaused(false);
+      setResumableSessions((prev) => prev.filter((s) => s.id !== resumeId));
+    } catch (e) {
+      stopStream(screenStream);
+      setError(e instanceof Error ? e.message : "Failed to resume session");
+      onStartError?.();
+    } finally {
+      setIsStarting(false);
+    }
+  }, [captureMode, bearerToken, onStart, onStartError]);
   const disconnect = useCallback3(async () => {
     setIsDisconnecting(true);
     try {
@@ -341,20 +486,20 @@ function useSession({
           });
         } catch {}
       }
-      if (pendingScreenStream) {
-        for (const track of pendingScreenStream.getTracks())
-          track.stop();
-      }
+      stopStream(pendingScreenStream);
       setError("");
       setShouldConnect(false);
       setConnection(null);
       setSessionId(null);
       setPendingScreenStream(null);
+      setHistoryMessages([]);
+      setIsPaused(false);
       onDisconnect?.();
+      await refetchResumable();
     } finally {
       setIsDisconnecting(false);
     }
-  }, [sessionId, bearerToken, pendingScreenStream, onDisconnect]);
+  }, [sessionId, bearerToken, pendingScreenStream, onDisconnect, refetchResumable]);
   return {
     connection,
     shouldConnect,
@@ -363,7 +508,14 @@ function useSession({
     error,
     errorCode,
     startSession,
+    pauseSession,
+    resumeSession,
     disconnect,
+    isPaused,
+    isPausing,
+    resumableSessions,
+    historyMessages,
+    refetchResumable,
     pendingScreenStream,
     bearerToken
   };
@@ -382,11 +534,11 @@ var NAME_MAX_CHARS = 80;
 // src/components/AutoStartMedia.tsx
 import { useConnectionState, useLocalParticipant } from "@livekit/components-react/hooks";
 import { ConnectionState, Track } from "livekit-client";
-import { useEffect as useEffect4, useRef } from "react";
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
 function AutoStartMedia({ pendingScreenStream }) {
   const { localParticipant } = useLocalParticipant();
   const connectionState = useConnectionState();
-  const didStartRef = useRef(false);
+  const didStartRef = useRef2(false);
   useEffect4(() => {
     if (didStartRef.current)
       return;
@@ -412,7 +564,7 @@ function AutoStartMedia({ pendingScreenStream }) {
 // src/components/DomCapture.tsx
 import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react/hooks";
 import { ConnectionState as ConnectionState2, ScreenSharePresets, Track as Track2 } from "livekit-client";
-import { useEffect as useEffect5, useRef as useRef2 } from "react";
+import { useEffect as useEffect5, useRef as useRef3 } from "react";
 
 // src/capture/a11yUtils.ts
 var ROLE_BY_TAG = {
@@ -1159,7 +1311,7 @@ async function unpublishAndStopTrack(localParticipant, videoTrack) {
 function DomCapture() {
   const { localParticipant } = useLocalParticipant2();
   const connectionState = useConnectionState2();
-  const didStartRef = useRef2(false);
+  const didStartRef = useRef3(false);
   useEffect5(() => {
     if (didStartRef.current)
       return;
@@ -1499,8 +1651,14 @@ var __iconNode18 = [
   ]
 ];
 var MousePointer2 = createLucideIcon("mouse-pointer-2", __iconNode18);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pause.js
 var __iconNode19 = [
+  ["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);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
+var __iconNode20 = [
   [
     "path",
     {
@@ -1517,9 +1675,20 @@ var __iconNode19 = [
     }
   ]
 ];
-var PhoneOff = createLucideIcon("phone-off", __iconNode19);
+var PhoneOff = createLucideIcon("phone-off", __iconNode20);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/play.js
+var __iconNode21 = [
+  [
+    "path",
+    {
+      d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
+      key: "10ikf1"
+    }
+  ]
+];
+var Play = createLucideIcon("play", __iconNode21);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rocket.js
-var __iconNode20 = [
+var __iconNode22 = [
   ["path", { d: "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5", key: "qeys4" }],
   [
     "path",
@@ -1537,9 +1706,9 @@ var __iconNode20 = [
   ],
   ["path", { d: "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05", key: "92ym6u" }]
 ];
-var Rocket = createLucideIcon("rocket", __iconNode20);
+var Rocket = createLucideIcon("rocket", __iconNode22);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
-var __iconNode21 = [
+var __iconNode23 = [
   [
     "path",
     {
@@ -1549,17 +1718,17 @@ var __iconNode21 = [
   ],
   ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ];
-var Send = createLucideIcon("send", __iconNode21);
+var Send = createLucideIcon("send", __iconNode23);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/user-plus.js
-var __iconNode22 = [
+var __iconNode24 = [
   ["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", __iconNode22);
+var UserPlus = createLucideIcon("user-plus", __iconNode24);
 // src/components/HighlightOverlay.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState4 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Z_INDEX = 2147483646;
 var HIGHLIGHT_PADDING = 6;
@@ -1664,8 +1833,8 @@ function findScrollableAncestor(el) {
 }
 function HighlightOverlay() {
   const [overlayState, setOverlayState] = useState4(null);
-  const targetElementRef = useRef3(null);
-  const pendingFrameRef = useRef3(null);
+  const targetElementRef = useRef4(null);
+  const pendingFrameRef = useRef4(null);
   const clearOverlay = useCallback4(() => {
     targetElementRef.current = null;
     setOverlayState(null);
@@ -1792,14 +1961,27 @@ function HighlightOverlay() {
 // src/components/MinimizedBubble.tsx
 import { useEffect as useEffect7 } from "react";
 
+// src/lib/react-compat.ts
+import * as React from "react";
+function selectContextHook(use2, useContext3) {
+  return use2 ?? useContext3;
+}
+var useContextValue = selectContextHook(React.use, React.useContext);
+
 // src/hooks/useLiveAgent.ts
-import { use } from "react";
 function useLiveAgent() {
-  const ctx = use(LiveAgentContext);
+  const ctx = useContextValue(LiveAgentContext);
   if (!ctx) {
     throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
   }
-  const { connection, shouldConnect, ...publicValue } = ctx;
+  const {
+    connection,
+    shouldConnect,
+    historyMessages,
+    phasesSnapshot,
+    setPhasesSnapshot,
+    ...publicValue
+  } = ctx;
   return publicValue;
 }
 
@@ -1861,14 +2043,29 @@ function pillStatusFromAgent(state, canSeePage) {
   return canSeePage ? "observing" : "connected";
 }
 function LauncherStatusPill() {
-  const { isConnected, isStarting, expandPanel, setSidebarTab, position, captureMode } = useLiveAgent();
+  const { isConnected, isStarting, isPaused, expandPanel, setSidebarTab, position, captureMode } = useLiveAgent();
   const { state } = useAgentVoiceState();
   const { isScreenSharing } = useMediaControls();
   const isStandingBy = isStarting && !isConnected;
-  if (!isConnected && !isStandingBy)
+  if (!isConnected && !isStandingBy && !isPaused)
     return null;
   const canSeePage = captureMode === "auto" || isScreenSharing;
-  const status = isStandingBy ? "standing-by" : pillStatusFromAgent(state, canSeePage);
+  let status;
+  if (isPaused) {
+    status = "paused";
+  } else if (isStandingBy) {
+    status = "standing-by";
+  } else {
+    status = pillStatusFromAgent(state, canSeePage);
+  }
+  let ariaLabel;
+  if (isStandingBy) {
+    ariaLabel = "Skippr is standing by — click to open";
+  } else if (isPaused) {
+    ariaLabel = "Session paused — click to open";
+  } else {
+    ariaLabel = `Skippr is ${status} — click to open chat`;
+  }
   const handleClick = () => {
     if (!isStandingBy)
       setSidebarTab("chat");
@@ -1878,7 +2075,7 @@ function LauncherStatusPill() {
     type: "button",
     onClick: handleClick,
     className: cn("skippr:fixed skippr:bottom-20 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", "skippr:rounded-full skippr:bg-bubble/95 skippr:backdrop-blur-sm", "skippr:px-3 skippr:py-1.5", "skippr:text-xs skippr:font-medium skippr:text-white", "skippr:shadow-[0_8px_24px_rgba(45,43,61,0.35)]", "skippr:cursor-pointer skippr:transition-colors skippr:hover:bg-bubble", "skippr:animate-[skippr-bubble-in_0.28s_ease-out]", position === "right" ? "skippr:right-6" : "skippr:left-6"),
-    "aria-label": isStandingBy ? "Skippr is standing by — click to open" : `Skippr is ${status} — click to open chat`,
+    "aria-label": ariaLabel,
     children: /* @__PURE__ */ jsxs2("span", {
       className: "skippr:flex skippr:items-center skippr:gap-2 skippr:animate-[skippr-pill-content_0.22s_ease-out]",
       children: [
@@ -1921,6 +2118,14 @@ function LauncherStatusPill() {
               children: "Skippr is thinking"
             })
           ]
+        }),
+        status === "paused" && /* @__PURE__ */ jsxs2(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx2(PausedDot, {}),
+            /* @__PURE__ */ jsx2("span", {
+              children: "Session paused"
+            })
+          ]
         })
       ]
     }, status)
@@ -1939,6 +2144,11 @@ function ConnectedDot() {
     ]
   });
 }
+function PausedDot() {
+  return /* @__PURE__ */ jsx2("span", {
+    className: "skippr:inline-flex skippr:size-2 skippr:rounded-full skippr:bg-amber-400"
+  });
+}
 function ObservingIcon() {
   return /* @__PURE__ */ jsxs2("svg", {
     viewBox: "0 0 24 24",
@@ -2090,34 +2300,60 @@ import { jsx as jsx4, jsxs as jsxs4, Fragment as Fragment2 } from "react/jsx-run
 var CONTROL_BUTTON = "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center skippr:rounded-[14px] skippr:cursor-pointer skippr:transition-all skippr:hover:-translate-y-0.5 skippr:active:translate-y-0";
 var CONTROL_SHADOW = "skippr:shadow-[0_4px_16px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.1)]";
 function ConnectedLauncher() {
-  const { expandPanel, disconnect, captureMode, setSidebarTab } = useLiveAgent();
+  const {
+    expandPanel,
+    disconnect,
+    pauseSession,
+    resumeSession,
+    isPaused,
+    isPausing,
+    captureMode,
+    setSidebarTab
+  } = useLiveAgent();
   const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
   const showScreenShareToggle = captureMode === "screenshare";
+  const showPaused = isPaused || isPausing;
   const openChat = () => {
     setSidebarTab("chat");
     expandPanel();
   };
   return /* @__PURE__ */ jsxs4(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx4("button", {
-        type: "button",
-        onClick: toggleMute,
-        "aria-label": isMuted ? "Unmute" : "Mute",
-        className: cn(CONTROL_BUTTON, CONTROL_SHADOW, isMuted ? "skippr:bg-destructive/10 skippr:text-destructive skippr:hover:bg-destructive/20" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
-        children: isMuted ? /* @__PURE__ */ jsx4(MicOff, {
-          className: "skippr:size-5"
-        }) : /* @__PURE__ */ jsx4(Mic, {
-          className: "skippr:size-5"
-        })
+      !showPaused && /* @__PURE__ */ jsxs4(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsx4("button", {
+            type: "button",
+            onClick: toggleMute,
+            "aria-label": isMuted ? "Unmute" : "Mute",
+            className: cn(CONTROL_BUTTON, CONTROL_SHADOW, isMuted ? "skippr:bg-destructive/10 skippr:text-destructive skippr:hover:bg-destructive/20" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
+            children: isMuted ? /* @__PURE__ */ jsx4(MicOff, {
+              className: "skippr:size-5"
+            }) : /* @__PURE__ */ jsx4(Mic, {
+              className: "skippr:size-5"
+            })
+          }),
+          showScreenShareToggle && /* @__PURE__ */ jsx4("button", {
+            type: "button",
+            onClick: toggleScreenShare,
+            "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
+            className: cn(CONTROL_BUTTON, CONTROL_SHADOW, isScreenSharing ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
+            children: isScreenSharing ? /* @__PURE__ */ jsx4(MonitorOff, {
+              className: "skippr:size-5"
+            }) : /* @__PURE__ */ jsx4(Monitor, {
+              className: "skippr:size-5"
+            })
+          })
+        ]
       }),
-      showScreenShareToggle && /* @__PURE__ */ jsx4("button", {
+      /* @__PURE__ */ jsx4("button", {
         type: "button",
-        onClick: toggleScreenShare,
-        "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
-        className: cn(CONTROL_BUTTON, CONTROL_SHADOW, isScreenSharing ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
-        children: isScreenSharing ? /* @__PURE__ */ jsx4(MonitorOff, {
+        onClick: () => isPaused ? resumeSession() : pauseSession(),
+        disabled: isPausing,
+        "aria-label": showPaused ? "Resume session" : "Pause session",
+        className: cn(CONTROL_BUTTON, CONTROL_SHADOW, "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted skippr:disabled:opacity-60"),
+        children: showPaused ? /* @__PURE__ */ jsx4(Play, {
           className: "skippr:size-5"
-        }) : /* @__PURE__ */ jsx4(Monitor, {
+        }) : /* @__PURE__ */ jsx4(Pause, {
           className: "skippr:size-5"
         })
       }),
@@ -2130,7 +2366,7 @@ function ConnectedLauncher() {
           className: "skippr:size-5"
         })
       }),
-      /* @__PURE__ */ jsx4("button", {
+      !showPaused && /* @__PURE__ */ jsx4("button", {
         type: "button",
         onClick: openChat,
         "aria-label": "Open chat",
@@ -2181,8 +2417,8 @@ function MinimizedBubble({
   welcomeDismissed,
   onDismissWelcome
 }) {
-  const { isConnected, isStarting, position } = useLiveAgent();
-  const inSession = isConnected;
+  const { isConnected, isStarting, isPaused, isPausing, position } = useLiveAgent();
+  const inSession = isConnected || isPaused || isPausing;
   return /* @__PURE__ */ jsxs4(Fragment2, {
     children: [
       /* @__PURE__ */ jsx4(LauncherStatusPill, {}),
@@ -2202,7 +2438,7 @@ function MinimizedBubble({
 }
 
 // src/components/Sidebar.tsx
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 
 // src/hooks/useCombinedMessages.ts
 import { useMemo as useMemo4 } from "react";
@@ -2273,18 +2509,25 @@ function useCombinedMessages() {
   const { transcriptMessages } = useStreamingTranscript();
   const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
   const { state: agentState } = useAgentVoiceState();
-  const allMessages = useMemo4(() => {
+  const historyMessages = useContextValue(LiveAgentContext)?.historyMessages ?? [];
+  const liveMessages = useMemo4(() => {
     if (chatMessages.length === 0)
       return transcriptMessages;
     if (transcriptMessages.length === 0)
       return chatMessages;
     return mergeChatsIntoTranscripts(transcriptMessages, chatMessages);
   }, [transcriptMessages, chatMessages]);
+  const allMessages = useMemo4(() => {
+    if (historyMessages.length === 0)
+      return liveMessages;
+    const seenIds = new Set(liveMessages.map((message) => message.id));
+    return [...historyMessages.filter((message) => !seenIds.has(message.id)), ...liveMessages];
+  }, [historyMessages, liveMessages]);
   return { allMessages, agentState, sendChatMessage, isSendingChat };
 }
 
 // src/hooks/usePhaseUpdates.ts
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9 } from "react";
 
 // src/hooks/useAgentState.ts
 import { useRemoteParticipants } from "@livekit/components-react/hooks";
@@ -2339,12 +2582,18 @@ function parsePhases(json) {
 }
 function usePhaseUpdates() {
   const parse = useCallback6(parsePhases, []);
-  const phases = useAgentState("phases", parse, []);
+  const livePhases = useAgentState("phases", parse, []);
+  const ctx = useContextValue(LiveAgentContext);
+  useEffect9(() => {
+    if (livePhases.length > 0)
+      ctx?.setPhasesSnapshot(livePhases);
+  }, [livePhases, ctx?.setPhasesSnapshot]);
+  const phases = livePhases.length > 0 ? livePhases : ctx?.phasesSnapshot ?? [];
   return { phases };
 }
 
 // src/hooks/useSessionRemaining.ts
-import { useEffect as useEffect9, useRef as useRef4, useState as useState6 } from "react";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState6 } from "react";
 
 // src/lib/format.ts
 function formatTime(seconds) {
@@ -2360,9 +2609,9 @@ function parseNumber(s) {
 // src/hooks/useSessionRemaining.ts
 function useSessionRemaining() {
   const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
-  const endTimeRef = useRef4(null);
+  const endTimeRef = useRef5(null);
   const [remaining, setRemaining] = useState6(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (maxCallDuration === null || endTimeRef.current !== null)
       return;
     const endTime = Date.now() + maxCallDuration * 1000;
@@ -2379,10 +2628,10 @@ function useSessionRemaining() {
 }
 
 // src/hooks/useElapsedSeconds.ts
-import { useEffect as useEffect10, useState as useState7 } from "react";
+import { useEffect as useEffect11, useState as useState7 } from "react";
 function useElapsedSeconds(isRunning) {
   const [elapsed, setElapsed] = useState7(0);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isRunning) {
       setElapsed(0);
       return;
@@ -2480,7 +2729,7 @@ function LoadingDots({ label }) {
 }
 
 // src/components/LoginFlow.tsx
-import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef5, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect12, useRef as useRef6, useState as useState8 } from "react";
 
 // src/components/ui/button.tsx
 import { forwardRef as forwardRef3 } from "react";
@@ -2608,16 +2857,16 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
 function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
   const [digits, setDigits] = useState8(Array(OTP_LENGTH).fill(""));
   const [resendCooldown, setResendCooldown] = useState8(0);
-  const inputRefs = useRef5([]);
-  const submittedRef = useRef5(false);
-  useEffect11(() => {
+  const inputRefs = useRef6([]);
+  const submittedRef = useRef6(false);
+  useEffect12(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     if (error)
       submittedRef.current = false;
   }, [error]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (resendCooldown <= 0)
       return;
     const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
@@ -2758,35 +3007,66 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
 }
 
 // src/components/MeetingControls.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var CONTROL_BUTTON2 = "skippr:flex skippr:size-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:transition-colors";
-function MeetingControls({ onHangUp, showScreenShareToggle = true }) {
+import { jsx as jsx9, jsxs as jsxs8, Fragment as Fragment3 } from "react/jsx-runtime";
+var CONTROL_BUTTON2 = "skippr:flex skippr:size-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:transition-colors skippr:disabled:cursor-not-allowed skippr:disabled:opacity-60";
+var MUTED_BUTTON = "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80";
+function MeetingControls({
+  onHangUp,
+  onPause,
+  onResume,
+  isPaused = false,
+  isPausing = false,
+  showScreenShareToggle = true
+}) {
   const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
+  const showPaused = isPaused || isPausing;
   return /* @__PURE__ */ jsxs8("div", {
     className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
     children: [
       /* @__PURE__ */ jsxs8("div", {
         className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx9("button", {
+          !showPaused && /* @__PURE__ */ jsxs8(Fragment3, {
+            children: [
+              /* @__PURE__ */ jsx9("button", {
+                type: "button",
+                onClick: toggleMute,
+                "aria-label": isMuted ? "Unmute" : "Mute",
+                className: cn(CONTROL_BUTTON2, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : MUTED_BUTTON),
+                children: isMuted ? /* @__PURE__ */ jsx9(MicOff, {
+                  className: "skippr:size-5"
+                }) : /* @__PURE__ */ jsx9(Mic, {
+                  className: "skippr:size-5"
+                })
+              }),
+              showScreenShareToggle && /* @__PURE__ */ jsx9("button", {
+                type: "button",
+                onClick: toggleScreenShare,
+                "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
+                className: cn(CONTROL_BUTTON2, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : MUTED_BUTTON),
+                children: isScreenSharing ? /* @__PURE__ */ jsx9(MonitorOff, {
+                  className: "skippr:size-5"
+                }) : /* @__PURE__ */ jsx9(Monitor, {
+                  className: "skippr:size-5"
+                })
+              })
+            ]
+          }),
+          showPaused ? onResume && /* @__PURE__ */ jsx9("button", {
             type: "button",
-            onClick: toggleMute,
-            "aria-label": isMuted ? "Unmute" : "Mute",
-            className: cn(CONTROL_BUTTON2, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80"),
-            children: isMuted ? /* @__PURE__ */ jsx9(MicOff, {
-              className: "skippr:size-5"
-            }) : /* @__PURE__ */ jsx9(Mic, {
+            onClick: onResume,
+            disabled: isPausing,
+            "aria-label": "Resume session",
+            className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
+            children: /* @__PURE__ */ jsx9(Play, {
               className: "skippr:size-5"
             })
-          }),
-          showScreenShareToggle && /* @__PURE__ */ jsx9("button", {
+          }) : onPause && /* @__PURE__ */ jsx9("button", {
             type: "button",
-            onClick: toggleScreenShare,
-            "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
-            className: cn(CONTROL_BUTTON2, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80"),
-            children: isScreenSharing ? /* @__PURE__ */ jsx9(MonitorOff, {
-              className: "skippr:size-5"
-            }) : /* @__PURE__ */ jsx9(Monitor, {
+            onClick: onPause,
+            "aria-label": "Pause session",
+            className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
+            children: /* @__PURE__ */ jsx9(Pause, {
               className: "skippr:size-5"
             })
           }),
@@ -2810,17 +3090,17 @@ function MeetingControls({ onHangUp, showScreenShareToggle = true }) {
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect13, useRef as useRef7 } from "react";
+import { useEffect as useEffect14, useRef as useRef8 } from "react";
 
 // src/components/ChatInput.tsx
-import { useEffect as useEffect12, useRef as useRef6, useState as useState9 } from "react";
+import { useEffect as useEffect13, useRef as useRef7, useState as useState9 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var MAX_INPUT_HEIGHT = 60;
 function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
   const [inputText, setInputText] = useState9("");
-  const textareaRef = useRef6(null);
+  const textareaRef = useRef7(null);
   const canSend = inputText.trim().length > 0 && !isSendingChat;
-  useEffect12(() => {
+  useEffect13(() => {
     if (autoFocus)
       textareaRef.current?.focus();
   }, [autoFocus]);
@@ -2965,9 +3245,9 @@ function MessageList({
   isSendingChat,
   autoFocus = false
 }) {
-  const scrollRef = useRef7(null);
+  const scrollRef = useRef8(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
-  useEffect13(() => {
+  useEffect14(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
@@ -2999,7 +3279,7 @@ function MessageList({
 }
 
 // src/components/ModuleSelector.tsx
-import { useEffect as useEffect14, useRef as useRef8, useState as useState10 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo5, useRef as useRef9, useState as useState10 } from "react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var AGENT_TYPE_ICONS = {
   onboarding: UserPlus,
@@ -3019,13 +3299,15 @@ function ModuleSelector() {
     selectModule,
     isStarting,
     isDisconnecting,
-    error
+    error,
+    resumableSessions
   } = useLiveAgent();
   const isBusy = isStarting || isDisconnecting;
-  const scrollRef = useRef8(null);
+  const resumableAgentIds = useMemo5(() => new Set(resumableSessions.map((s) => s.agentId)), [resumableSessions]);
+  const scrollRef = useRef9(null);
   const [showScrollHint, setShowScrollHint] = useState10(false);
   const [isScrolled, setIsScrolled] = useState10(false);
-  useEffect14(() => {
+  useEffect15(() => {
     const el = scrollRef.current;
     if (!el)
       return;
@@ -3109,6 +3391,7 @@ function ModuleSelector() {
                   const isFeatured = index2 === 0;
                   const isWide = index2 === availableModules.length - 1 && availableModules.length % 2 === 1;
                   const Icon2 = getAgentIcon(module.type);
+                  const canResume = resumableAgentIds.has(module.id);
                   const base = "skippr:group skippr:flex skippr:cursor-pointer skippr:gap-3 skippr:rounded-xl skippr:text-left skippr:transition-colors skippr:disabled:cursor-not-allowed skippr:disabled:opacity-50";
                   const layout = isWide ? "skippr:items-center skippr:p-3.5 skippr:pb-5" : "skippr:flex-col skippr:items-start skippr:p-3.5";
                   const variant = isFeatured ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-background skippr:ring-1 skippr:ring-foreground/10 skippr:hover:bg-muted/50";
@@ -3128,9 +3411,23 @@ function ModuleSelector() {
                       /* @__PURE__ */ jsxs13("div", {
                         className: "skippr:min-w-0 skippr:w-full skippr:space-y-0.5",
                         children: [
-                          /* @__PURE__ */ jsx14("p", {
-                            className: "skippr:line-clamp-1 skippr:text-sm skippr:font-semibold",
-                            children: module.name
+                          /* @__PURE__ */ jsxs13("div", {
+                            className: "skippr:flex skippr:items-center skippr:gap-1.5",
+                            children: [
+                              /* @__PURE__ */ jsx14("p", {
+                                className: "skippr:line-clamp-1 skippr:text-sm skippr:font-semibold",
+                                children: module.name
+                              }),
+                              canResume && /* @__PURE__ */ jsxs13("span", {
+                                className: `skippr:inline-flex skippr:shrink-0 skippr:items-center skippr:gap-0.5 skippr:rounded-full skippr:px-1.5 skippr:py-0.5 skippr:text-[9px] skippr:font-medium skippr:uppercase skippr:tracking-wide ${isFeatured ? "skippr:bg-primary-foreground/20 skippr:text-primary-foreground" : "skippr:bg-bubble/15 skippr:text-bubble"}`,
+                                children: [
+                                  /* @__PURE__ */ jsx14(Play, {
+                                    className: "skippr:size-2.5"
+                                  }),
+                                  "Resume"
+                                ]
+                              })
+                            ]
                           }),
                           module.description && /* @__PURE__ */ jsx14("p", {
                             className: isFeatured ? "skippr:line-clamp-2 skippr:text-[11px] skippr:leading-snug skippr:text-primary-foreground/70" : "skippr:line-clamp-2 skippr:text-[11px] skippr:leading-snug skippr:text-muted-foreground",
@@ -3227,18 +3524,27 @@ function SessionWarningBanner({ remaining }) {
 
 // src/components/StartSessionPrompt.tsx
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var PROMPT_BUTTON = "skippr:cursor-pointer skippr:rounded-xl skippr:bg-primary skippr:px-8 skippr:py-3 skippr:text-sm skippr:font-medium skippr:text-primary-foreground skippr:transition-all skippr:hover:bg-primary/90 skippr:disabled:cursor-not-allowed skippr:disabled:opacity-60";
 function StartSessionPrompt({
   onStartSession,
   agentId,
   agentControls,
   isStarting,
   error,
-  label = "Talk to Skippr"
+  label = "Talk to Skippr",
+  canResume = false,
+  onResume
 }) {
   return /* @__PURE__ */ jsxs15("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
     children: [
-      /* @__PURE__ */ jsx17("button", {
+      canResume && onResume ? /* @__PURE__ */ jsx17("button", {
+        type: "button",
+        onClick: onResume,
+        disabled: isStarting,
+        className: PROMPT_BUTTON,
+        children: isStarting ? "Resuming..." : "Resume session"
+      }) : /* @__PURE__ */ jsx17("button", {
         type: "button",
         onClick: () => {
           if (!agentId)
@@ -3246,7 +3552,7 @@ function StartSessionPrompt({
           onStartSession(agentControls ? { agentId, agentControls } : { agentId });
         },
         disabled: isStarting || !agentId,
-        className: "skippr:cursor-pointer skippr:rounded-xl skippr:bg-primary skippr:px-8 skippr:py-3 skippr:text-sm skippr:font-medium skippr:text-primary-foreground skippr:transition-all skippr:hover:bg-primary/90 skippr:disabled:cursor-not-allowed skippr:disabled:opacity-60",
+        className: PROMPT_BUTTON,
         children: isStarting ? "Starting..." : label
       }),
       error && /* @__PURE__ */ jsx17("p", {
@@ -3258,7 +3564,7 @@ function StartSessionPrompt({
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx18, jsxs as jsxs16, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16, Fragment as Fragment4 } from "react/jsx-runtime";
 function Sidebar({
   hideControls = false,
   hideHeader = false,
@@ -3268,8 +3574,14 @@ function Sidebar({
     variant,
     isConnected,
     isStarting,
+    isDisconnecting,
+    isPausing,
+    isPaused,
     error,
     startSession,
+    pauseSession,
+    resumeSession,
+    resumableSession,
     disconnect,
     isPanelOpen,
     position,
@@ -3289,7 +3601,7 @@ function Sidebar({
   } = useLiveAgent();
   const isFloating = variant === "floating";
   const isSidebar = variant === "sidebar";
-  useEffect15(() => {
+  useEffect16(() => {
     if (!isSidebar)
       return;
     const prop = position === "right" ? "marginRight" : "marginLeft";
@@ -3320,7 +3632,13 @@ function Sidebar({
         isSubmitting: isAuthSubmitting
       }) : /* @__PURE__ */ jsx18(AuthenticatedContent, {
         isConnected,
+        isPaused,
+        isPausing,
+        isDisconnecting,
+        canResume: resumableSession !== null,
         onStartSession: startSession,
+        onPause: pauseSession,
+        onResume: resumeSession,
         onDisconnect: disconnect,
         isStarting,
         error,
@@ -3339,7 +3657,13 @@ function Sidebar({
 }
 function AuthenticatedContent({
   isConnected,
+  isPaused,
+  isPausing,
+  isDisconnecting,
+  canResume,
   onStartSession,
+  onPause,
+  onResume,
   onDisconnect,
   isStarting,
   error,
@@ -3353,9 +3677,18 @@ function AuthenticatedContent({
   agentId,
   agentControls
 }) {
-  const showSelectorAsPrompt = hasModuleSelector && !isConnected && !isStarting;
+  const inSession = isConnected || isStarting || isPaused || isPausing;
+  const showSelectorAsPrompt = hasModuleSelector && !inSession && !isDisconnecting;
   const showTabBar = !showSelectorAsPrompt;
-  return /* @__PURE__ */ jsxs16(Fragment3, {
+  let transitionLabel = null;
+  if (isPausing) {
+    transitionLabel = "Pausing...";
+  } else if (isStarting && !isConnected) {
+    transitionLabel = "Reconnecting...";
+  } else if (isPaused) {
+    transitionLabel = "Paused";
+  }
+  return /* @__PURE__ */ jsxs16(Fragment4, {
     children: [
       isConnected && /* @__PURE__ */ jsx18(ConnectedBanner, {}),
       showTabBar && /* @__PURE__ */ jsxs16("div", {
@@ -3393,9 +3726,22 @@ function AuthenticatedContent({
       }),
       /* @__PURE__ */ jsx18("div", {
         className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
-        children: showSelectorAsPrompt ? /* @__PURE__ */ jsx18(ModuleSelector, {}) : isConnected || isStarting ? /* @__PURE__ */ jsx18(ConnectedBody, {
-          activeTab,
-          autoFocusChat
+        children: isDisconnecting ? /* @__PURE__ */ jsx18("div", {
+          className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
+          children: /* @__PURE__ */ jsx18(LoadingDots, {
+            label: "Ending session..."
+          })
+        }) : showSelectorAsPrompt ? /* @__PURE__ */ jsx18(ModuleSelector, {}) : inSession ? /* @__PURE__ */ jsxs16(Fragment4, {
+          children: [
+            transitionLabel && /* @__PURE__ */ jsx18("div", {
+              className: "skippr:shrink-0 skippr:border-b skippr:border-border skippr:bg-muted/50 skippr:px-3 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:text-muted-foreground",
+              children: transitionLabel
+            }),
+            /* @__PURE__ */ jsx18(ConnectedBody, {
+              activeTab,
+              autoFocusChat
+            })
+          ]
         }) : /* @__PURE__ */ jsx18("div", {
           className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
           children: /* @__PURE__ */ jsx18(StartSessionPrompt, {
@@ -3404,12 +3750,18 @@ function AuthenticatedContent({
             agentControls,
             isStarting,
             error,
-            label: startSessionLabel
+            label: startSessionLabel,
+            canResume,
+            onResume
           })
         }, `${activeTab}-empty`)
       }),
-      isConnected && !hideControls && /* @__PURE__ */ jsx18(MeetingControls, {
+      (isConnected || isPaused) && !isDisconnecting && !hideControls && /* @__PURE__ */ jsx18(MeetingControls, {
         onHangUp: onDisconnect,
+        onPause,
+        onResume,
+        isPaused,
+        isPausing,
         showScreenShareToggle
       })
     ]
@@ -3527,10 +3879,16 @@ function LiveAgent(props) {
     shouldConnect,
     isStarting,
     isDisconnecting,
+    isPausing,
     error,
     errorCode,
     startSession,
+    pauseSession,
+    resumeSession: resumeSessionById,
     disconnect,
+    isPaused,
+    resumableSessions,
+    historyMessages,
     pendingScreenStream,
     bearerToken
   } = useSession({
@@ -3542,9 +3900,23 @@ function LiveAgent(props) {
     onStartError: expandOnSessionStartError,
     onDisconnect: minimizeOnSessionDisconnect
   });
+  const teardownInFlightRef = useRef10(false);
+  teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
+  const handleRoomDisconnected = useCallback8(() => {
+    if (teardownInFlightRef.current)
+      return;
+    disconnect();
+  }, [disconnect]);
+  const resumableSession = resumableSessions.find((s) => s.agentId === agentId) ?? null;
+  const resumeSession = useCallback8(async () => {
+    if (!resumableSession)
+      return;
+    await resumeSessionById({ sessionId: resumableSession.id, agentControls });
+  }, [resumableSession, resumeSessionById, agentControls]);
   const [isPanelOpen, setIsPanelOpen] = useState11(defaultOpen);
   const [isMinimized, setIsMinimized] = useState11(minimizable && !defaultOpen);
   const [sidebarTab, setSidebarTab] = useState11("agenda");
+  const [phasesSnapshot, setPhasesSnapshot] = useState11([]);
   const {
     modules: availableModules,
     isLoading: isLoadingModules,
@@ -3559,8 +3931,13 @@ function LiveAgent(props) {
     if (!found)
       return;
     setActiveModule(found);
-    startSession({ agentId: found.id, agentControls: found.controls });
-  }, [availableModules, startSession]);
+    const resumable = resumableSessions.find((s) => s.agentId === found.id);
+    if (resumable) {
+      resumeSessionById({ sessionId: resumable.id, agentControls: found.controls });
+    } else {
+      startSession({ agentId: found.id, agentControls: found.controls });
+    }
+  }, [availableModules, resumableSessions, startSession, resumeSessionById]);
   const [welcomeDismissed, setWelcomeDismissed] = useState11(false);
   const dismissWelcome = useCallback8(() => setWelcomeDismissed(true), []);
   const [currentPosition, setCurrentPosition] = useState11(() => {
@@ -3592,16 +3969,25 @@ function LiveAgent(props) {
   }, [minimizable]);
   const isConnected = connection !== null;
   const isAuthenticated = !!userToken || !!authTokenProp || auth.isAuthenticated;
-  const ctx = useMemo5(() => ({
+  const ctx = useMemo6(() => ({
     connection,
     shouldConnect,
     isConnected,
     isStarting,
     isDisconnecting,
+    isPausing,
     error,
     errorCode,
     startSession,
+    pauseSession,
+    resumeSession,
     disconnect,
+    isPaused,
+    resumableSession,
+    resumableSessions,
+    historyMessages,
+    phasesSnapshot,
+    setPhasesSnapshot,
     isPanelOpen,
     openPanel,
     closePanel,
@@ -3639,10 +4025,18 @@ function LiveAgent(props) {
     isConnected,
     isStarting,
     isDisconnecting,
+    isPausing,
     error,
     errorCode,
     startSession,
+    pauseSession,
+    resumeSession,
     disconnect,
+    isPaused,
+    resumableSession,
+    resumableSessions,
+    historyMessages,
+    phasesSnapshot,
     isPanelOpen,
     openPanel,
     closePanel,
@@ -3681,7 +4075,7 @@ function LiveAgent(props) {
       token: connection?.token,
       connect: shouldConnect,
       audio: true,
-      onDisconnected: disconnect,
+      onDisconnected: handleRoomDisconnected,
       children: [
         connection && /* @__PURE__ */ jsx20(RoomAudioRenderer, {}),
         connection && captureMode === "screenshare" && /* @__PURE__ */ jsx20(AutoStartMedia, {