@skippr/live-agent-sdk 0.14.0 → 0.16.0

package/dist/esm/lib-exports.js

@@ -1,53 +1,219 @@
 // src/components/LiveAgent.tsx
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
-import { useCallback as useCallback5, useMemo as useMemo4, useState as useState5 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo4, useState as useState7 } from "react";
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
 var LiveAgentContext = createContext(null);
 
-// src/hooks/useSession.ts
-import { useCallback, useState } from "react";
+// src/hooks/useAuth.ts
+import { useCallback, useEffect, useState } from "react";
 var API_URL = "https://skipprapi-production.up.railway.app";
-function resolveAuthHeaders(authToken, appKey) {
-  if (authToken)
-    return { Authorization: `Bearer ${authToken}` };
-  if (appKey)
-    return { "X-App-Key": appKey };
-  return {};
+function storageKey(appKey) {
+  return `skippr_auth_${appKey}`;
 }
-function useSession({ agentId, authToken, appKey }) {
-  const [connection, setConnection] = useState(null);
-  const [shouldConnect, setShouldConnect] = useState(false);
-  const [isStarting, setIsStarting] = useState(false);
+function getStoredToken(appKey) {
+  try {
+    return localStorage.getItem(storageKey(appKey));
+  } catch {
+    return null;
+  }
+}
+function setStoredToken(appKey, token) {
+  try {
+    localStorage.setItem(storageKey(appKey), token);
+  } catch (e) {
+    console.error("[Skippr] Failed to persist auth token:", e);
+  }
+}
+function clearStoredToken(appKey) {
+  try {
+    localStorage.removeItem(storageKey(appKey));
+  } catch (e) {
+    console.error("[Skippr] Failed to clear auth token:", e);
+  }
+}
+function useAuth({ appKey }) {
+  const [authToken, setAuthToken] = useState(null);
+  const [isValidating, setIsValidating] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState("");
-  const [sessionId, setSessionId] = useState(null);
-  const [sessionToken, setSessionToken] = useState(null);
-  const startSession = useCallback(async () => {
+  const isAuthenticated = authToken !== null;
+  useEffect(() => {
+    if (!appKey)
+      return;
+    const stored = getStoredToken(appKey);
+    if (!stored)
+      return;
+    async function validateStoredToken() {
+      setIsValidating(true);
+      try {
+        const res = await fetch(`${API_URL}/v1/auth/validate-token`, {
+          headers: { Authorization: `Bearer ${stored}` }
+        });
+        if (res.ok) {
+          setAuthToken(stored);
+        } else {
+          clearStoredToken(appKey);
+        }
+      } catch {
+        clearStoredToken(appKey);
+      } finally {
+        setIsValidating(false);
+      }
+    }
+    validateStoredToken();
+  }, [appKey]);
+  useEffect(() => {
+    function handleLogout() {
+      setAuthToken(null);
+      setError("");
+    }
+    window.addEventListener("skippr:logout", handleLogout);
+    return () => window.removeEventListener("skippr:logout", handleLogout);
+  }, []);
+  const requestOtp = useCallback(async (email) => {
+    if (!appKey)
+      return false;
+    setIsSubmitting(true);
+    setError("");
+    try {
+      const resp = await fetch(`${API_URL}/v1/auth/request-otp`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-App-Key": appKey
+        },
+        body: JSON.stringify({ email })
+      });
+      if (!resp.ok) {
+        const body = await resp.json().catch(() => ({}));
+        throw new Error(body.detail || "Failed to send verification code");
+      }
+      return true;
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to send verification code");
+      return false;
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [appKey]);
+  const verifyOtp = useCallback(async (email, code) => {
+    if (!appKey)
+      return;
+    setIsSubmitting(true);
+    setError("");
+    try {
+      const resp = await fetch(`${API_URL}/v1/auth/verify-otp`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-App-Key": appKey
+        },
+        body: JSON.stringify({ email, code, recaptchaToken: "sdk" })
+      });
+      if (!resp.ok) {
+        const body = await resp.json().catch(() => ({}));
+        throw new Error(body.detail || "Invalid or expired verification code");
+      }
+      const { token } = await resp.json();
+      setStoredToken(appKey, token);
+      setAuthToken(token);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Verification failed");
+      return;
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [appKey]);
+  const logout = useCallback(() => {
+    if (appKey)
+      clearStoredToken(appKey);
+    setAuthToken(null);
+    setError("");
+  }, [appKey]);
+  return {
+    isAuthenticated,
+    isValidating,
+    authToken,
+    requestOtp,
+    verifyOtp,
+    logout,
+    error,
+    isSubmitting
+  };
+}
+
+// src/hooks/useSession.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+var API_URL2 = "https://skipprapi-production.up.railway.app";
+async function exchangeForBearerToken(appKey, userToken) {
+  const resp = await fetch(`${API_URL2}/v1/auth/token-exchange`, {
+    method: "POST",
+    headers: {
+      "X-App-Key": appKey,
+      "X-User-Token": userToken
+    }
+  });
+  if (!resp.ok) {
+    throw new Error(`Token exchange failed: ${resp.status}`);
+  }
+  const { token } = await resp.json();
+  return token;
+}
+function useSession({ agentId, authToken, appKey, userToken }) {
+  const [connection, setConnection] = useState2(null);
+  const [shouldConnect, setShouldConnect] = useState2(false);
+  const [isStarting, setIsStarting] = useState2(false);
+  const [error, setError] = useState2("");
+  const [sessionId, setSessionId] = useState2(null);
+  const [bearerToken, setBearerToken] = useState2(authToken ?? null);
+  useEffect2(() => {
+    let stale = false;
+    if (authToken) {
+      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");
+      });
+    }
+    return () => {
+      stale = true;
+    };
+  }, [authToken, appKey, userToken]);
+  const startSession = useCallback2(async () => {
+    if (!bearerToken) {
+      setError("No auth token available");
+      return;
+    }
+    const headers = { Authorization: `Bearer ${bearerToken}` };
     setIsStarting(true);
     setError("");
     try {
-      const authHeaders = resolveAuthHeaders(authToken, appKey);
-      const createResp = await fetch(`${API_URL}/v1/sessions`, {
+      const createResp = await fetch(`${API_URL2}/v1/sessions`, {
         method: "POST",
-        headers: { "Content-Type": "application/json", ...authHeaders },
+        headers: { "Content-Type": "application/json", ...headers },
         body: JSON.stringify({ agentId })
       });
       if (!createResp.ok) {
         throw new Error(`Failed to create session: ${createResp.status}`);
       }
       const { session } = await createResp.json();
-      const sessionHeaders = { "X-Session-Token": session.sessionToken };
-      const startResp = await fetch(`${API_URL}/v1/sessions/${session.id}/start`, {
+      const startResp = await fetch(`${API_URL2}/v1/sessions/${session.id}/start`, {
         method: "POST",
-        headers: sessionHeaders
+        headers
       });
       if (!startResp.ok) {
         throw new Error(`Failed to start session: ${startResp.status}`);
       }
       const { connection: conn } = await startResp.json();
       setSessionId(session.id);
-      setSessionToken(session.sessionToken);
       setConnection({
         livekitUrl: conn.livekitUrl,
         token: conn.token
@@ -58,14 +224,13 @@ function useSession({ agentId, authToken, appKey }) {
     } finally {
       setIsStarting(false);
     }
-  }, [agentId, authToken, appKey]);
-  const disconnect = useCallback(async () => {
-    if (sessionId && sessionToken) {
-      const sessionHeaders = { "X-Session-Token": sessionToken };
+  }, [agentId, bearerToken]);
+  const disconnect = useCallback2(async () => {
+    if (sessionId && bearerToken) {
       try {
-        await fetch(`${API_URL}/v1/sessions/${sessionId}/complete`, {
+        await fetch(`${API_URL2}/v1/sessions/${sessionId}/complete`, {
           method: "POST",
-          headers: { "Content-Type": "application/json", ...sessionHeaders },
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${bearerToken}` },
           body: JSON.stringify({})
         });
       } catch {}
@@ -74,15 +239,14 @@ function useSession({ agentId, authToken, appKey }) {
     setShouldConnect(false);
     setConnection(null);
     setSessionId(null);
-    setSessionToken(null);
-  }, [sessionId, sessionToken]);
+  }, [sessionId, bearerToken]);
   return { connection, shouldConnect, isStarting, error, startSession, disconnect };
 }
 
 // src/components/Sidebar.tsx
 import { useConnectionState } from "@livekit/components-react";
 import { ConnectionState } from "livekit-client";
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect7 } from "react";
 
 // src/hooks/useCombinedMessages.ts
 import { useVoiceAssistant } from "@livekit/components-react";
@@ -176,15 +340,15 @@ function useLiveAgent() {
 }
 
 // src/hooks/usePhaseUpdates.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 
 // src/hooks/useAgentState.ts
 import { useRemoteParticipants } from "@livekit/components-react";
-import { useEffect, useState as useState2 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 function useAgentState(attributeKey, parse, initial) {
-  const [value, setValue] = useState2(initial);
+  const [value, setValue] = useState3(initial);
   const remoteParticipants = useRemoteParticipants();
-  useEffect(() => {
+  useEffect3(() => {
     const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
     if (agentParticipant) {
       const attr = agentParticipant.attributes?.[attributeKey];
@@ -230,13 +394,13 @@ function parsePhases(json) {
   return null;
 }
 function usePhaseUpdates() {
-  const parse = useCallback2(parsePhases, []);
+  const parse = useCallback3(parsePhases, []);
   const phases = useAgentState("phases", parse, []);
   return { phases };
 }
 
 // src/hooks/useQuestionUpdates.ts
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4 } from "react";
 function parseQuestions(json) {
   try {
     const data = JSON.parse(json);
@@ -247,7 +411,7 @@ function parseQuestions(json) {
   return null;
 }
 function useQuestionUpdates() {
-  const parse = useCallback3(parseQuestions, []);
+  const parse = useCallback4(parseQuestions, []);
   const questions = useAgentState("questions", parse, []);
   return { questions };
 }
@@ -388,8 +552,14 @@ var Check = createLucideIcon("check", __iconNode5);
 // ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle.js
 var __iconNode6 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
 var Circle = createLucideIcon("circle", __iconNode6);
-// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mail.js
 var __iconNode7 = [
+  ["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", __iconNode7);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
+var __iconNode8 = [
   [
     "path",
     {
@@ -398,9 +568,9 @@ var __iconNode7 = [
     }
   ]
 ];
-var MessageCircle = createLucideIcon("message-circle", __iconNode7);
+var MessageCircle = createLucideIcon("message-circle", __iconNode8);
 // ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
-var __iconNode8 = [
+var __iconNode9 = [
   ["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" }],
@@ -408,32 +578,32 @@ var __iconNode8 = [
   ["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", __iconNode8);
+var MicOff = createLucideIcon("mic-off", __iconNode9);
 // ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
-var __iconNode9 = [
+var __iconNode10 = [
   ["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", __iconNode9);
+var Mic = createLucideIcon("mic", __iconNode10);
 // ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
-var __iconNode10 = [
+var __iconNode11 = [
   ["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", __iconNode10);
+var MonitorOff = createLucideIcon("monitor-off", __iconNode11);
 // ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
-var __iconNode11 = [
+var __iconNode12 = [
   ["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", __iconNode11);
+var Monitor = createLucideIcon("monitor", __iconNode12);
 // ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
-var __iconNode12 = [
+var __iconNode13 = [
   [
     "path",
     {
@@ -450,13 +620,13 @@ var __iconNode12 = [
     }
   ]
 ];
-var PhoneOff = createLucideIcon("phone-off", __iconNode12);
+var PhoneOff = createLucideIcon("phone-off", __iconNode13);
 // ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode13 = [
+var __iconNode14 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode13);
+var X = createLucideIcon("x", __iconNode14);
 // src/components/ui/button.tsx
 import { forwardRef as forwardRef3 } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -518,10 +688,257 @@ function ChatHeader({ onClose }) {
   });
 }
 
+// src/components/LoginFlow.tsx
+import { useCallback as useCallback5, useEffect as useEffect4, useRef, useState as useState4 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var OTP_LENGTH = 6;
+var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
+function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
+  const [step, setStep] = useState4("email");
+  const [email, setEmail] = useState4("");
+  const handleRequestOtp = useCallback5(async (emailValue) => {
+    const success = await requestOtp(emailValue);
+    if (success)
+      setStep("otp");
+  }, [requestOtp]);
+  const handleVerifyOtp = useCallback5(async (code) => {
+    await verifyOtp(email, code);
+  }, [verifyOtp, email]);
+  const handleBack = useCallback5(() => {
+    setStep("email");
+  }, []);
+  const handleResend = useCallback5(async () => {
+    await requestOtp(email);
+  }, [requestOtp, email]);
+  if (step === "otp") {
+    return /* @__PURE__ */ jsx3(OtpStep, {
+      email,
+      onSubmit: handleVerifyOtp,
+      onResend: handleResend,
+      onBack: handleBack,
+      error,
+      isSubmitting
+    });
+  }
+  return /* @__PURE__ */ jsx3(EmailStep, {
+    email,
+    onEmailChange: setEmail,
+    onSubmit: handleRequestOtp,
+    error,
+    isSubmitting
+  });
+}
+function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (email.trim())
+      onSubmit(email.trim());
+  }
+  return /* @__PURE__ */ jsxs2("div", {
+    className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        className: "skippr:mb-4 skippr:text-center",
+        children: [
+          /* @__PURE__ */ jsx3(Mail, {
+            className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
+          }),
+          /* @__PURE__ */ jsx3("p", {
+            className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
+            children: "Sign in to continue"
+          }),
+          /* @__PURE__ */ jsx3("p", {
+            className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
+            children: "Your email will be used to identify you across sessions"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs2("form", {
+        onSubmit: handleSubmit,
+        className: "skippr:flex skippr:flex-col skippr:gap-3",
+        children: [
+          /* @__PURE__ */ jsx3("input", {
+            type: "email",
+            placeholder: "you@example.com",
+            value: email,
+            onChange: (e) => onEmailChange(e.target.value),
+            disabled: isSubmitting,
+            required: true,
+            className: "skippr:w-full skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:px-3 skippr:py-2 skippr:text-sm skippr:text-foreground skippr:placeholder-muted-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
+          }),
+          /* @__PURE__ */ jsx3(Button, {
+            type: "submit",
+            disabled: isSubmitting || !email.trim(),
+            className: "skippr:w-full",
+            children: isSubmitting ? /* @__PURE__ */ jsx3(LoaderCircle, {
+              className: "skippr:size-4 skippr:animate-spin"
+            }) : "Continue"
+          }),
+          error && /* @__PURE__ */ jsx3("p", {
+            className: "skippr:text-xs skippr:text-center skippr:text-destructive",
+            children: error
+          })
+        ]
+      })
+    ]
+  });
+}
+function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
+  const [digits, setDigits] = useState4(Array(OTP_LENGTH).fill(""));
+  const [resendCooldown, setResendCooldown] = useState4(0);
+  const inputRefs = useRef([]);
+  const submittedRef = useRef(false);
+  useEffect4(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+  useEffect4(() => {
+    if (error)
+      submittedRef.current = false;
+  }, [error]);
+  useEffect4(() => {
+    if (resendCooldown <= 0)
+      return;
+    const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
+    return () => clearTimeout(timer);
+  }, [resendCooldown]);
+  const submitCode = useCallback5((code) => {
+    if (submittedRef.current || isSubmitting)
+      return;
+    submittedRef.current = true;
+    onSubmit(code);
+  }, [onSubmit, isSubmitting]);
+  const handleDigitChange = useCallback5((index2, value) => {
+    const digit = value.replace(/\D/g, "").slice(-1);
+    const newDigits = [...digits];
+    newDigits[index2] = digit;
+    setDigits(newDigits);
+    if (digit && index2 < OTP_LENGTH - 1) {
+      inputRefs.current[index2 + 1]?.focus();
+    }
+    if (digit && index2 === OTP_LENGTH - 1) {
+      const code = newDigits.join("");
+      if (code.length === OTP_LENGTH)
+        submitCode(code);
+    }
+  }, [digits, submitCode]);
+  const handleKeyDown = useCallback5((index2, e) => {
+    if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
+      inputRefs.current[index2 - 1]?.focus();
+    }
+  }, [digits]);
+  const handlePaste = useCallback5((e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
+    if (pasted.length > 0) {
+      const newDigits = Array(OTP_LENGTH).fill("");
+      for (let i = 0;i < pasted.length; i++) {
+        newDigits[i] = pasted[i];
+      }
+      setDigits(newDigits);
+      if (pasted.length === OTP_LENGTH)
+        submitCode(pasted);
+      else
+        inputRefs.current[pasted.length]?.focus();
+    }
+  }, [submitCode]);
+  function handleSubmit(e) {
+    e.preventDefault();
+    const code = digits.join("");
+    if (code.length === OTP_LENGTH)
+      submitCode(code);
+  }
+  function handleResend() {
+    onResend();
+    setResendCooldown(30);
+    setDigits(Array(OTP_LENGTH).fill(""));
+    submittedRef.current = false;
+    inputRefs.current[0]?.focus();
+  }
+  return /* @__PURE__ */ jsxs2("div", {
+    className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        className: "skippr:mb-4 skippr:text-center",
+        children: [
+          /* @__PURE__ */ jsx3("p", {
+            className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
+            children: "Enter verification code"
+          }),
+          /* @__PURE__ */ jsxs2("p", {
+            className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
+            children: [
+              "We sent a 6-digit code to",
+              " ",
+              /* @__PURE__ */ jsx3("span", {
+                className: "skippr:font-medium skippr:text-foreground",
+                children: email
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs2("form", {
+        onSubmit: handleSubmit,
+        className: "skippr:flex skippr:flex-col skippr:gap-3",
+        children: [
+          /* @__PURE__ */ jsx3("div", {
+            className: "skippr:flex skippr:justify-center skippr:gap-1.5",
+            children: digits.map((digit, index2) => /* @__PURE__ */ jsx3("input", {
+              ref: (el) => {
+                inputRefs.current[index2] = el;
+              },
+              type: "text",
+              inputMode: "numeric",
+              maxLength: 1,
+              value: digit,
+              onChange: (e) => handleDigitChange(index2, e.target.value),
+              onKeyDown: (e) => handleKeyDown(index2, e),
+              onPaste: handlePaste,
+              disabled: isSubmitting,
+              className: "skippr:h-10 skippr:w-10 skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:text-center skippr:text-sm skippr:font-semibold skippr:text-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
+            }, DIGIT_KEYS[index2]))
+          }),
+          error && /* @__PURE__ */ jsx3("p", {
+            className: "skippr:text-xs skippr:text-center skippr:text-destructive",
+            children: error
+          }),
+          /* @__PURE__ */ jsx3(Button, {
+            type: "submit",
+            disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
+            className: "skippr:w-full",
+            children: isSubmitting ? /* @__PURE__ */ jsx3(LoaderCircle, {
+              className: "skippr:size-4 skippr:animate-spin"
+            }) : "Verify"
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
+            children: [
+              /* @__PURE__ */ jsx3("button", {
+                type: "button",
+                onClick: onBack,
+                disabled: isSubmitting,
+                className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
+                children: "Change email"
+              }),
+              /* @__PURE__ */ jsx3("button", {
+                type: "button",
+                onClick: handleResend,
+                disabled: isSubmitting || resendCooldown > 0,
+                className: "skippr:text-primary hover:skippr:opacity-80 skippr:transition-opacity disabled:skippr:opacity-50",
+                children: resendCooldown > 0 ? `Resend in ${resendCooldown}s` : "Resend code"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
 // src/components/MeetingControls.tsx
 import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react";
 import { ScreenSharePresets } from "livekit-client";
-import { useCallback as useCallback4, useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
 
 // src/lib/format.ts
 function formatTime(seconds) {
@@ -535,12 +952,12 @@ function parseNumber(s) {
 }
 
 // src/components/SessionWarningBanner.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var SESSION_WARNING_THRESHOLD_SECS = 60;
 function SessionWarningBanner({ remaining }) {
   if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
     return null;
-  return /* @__PURE__ */ jsx3("div", {
+  return /* @__PURE__ */ jsx4("div", {
     "data-testid": "session-warning-banner",
     className: "skippr:bg-red-50 skippr:px-4 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:font-medium skippr:text-red-700",
     children: "Session ending soon"
@@ -548,15 +965,15 @@ function SessionWarningBanner({ remaining }) {
 }
 
 // src/components/MeetingControls.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function MeetingControls({ onHangUp }) {
   const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
   const { localParticipant } = useLocalParticipant3();
   const isMuted = !localParticipant.isMicrophoneEnabled;
   const isScreenSharing = localParticipant.isScreenShareEnabled;
-  const endTimeRef = useRef(null);
-  const [remaining, setRemaining] = useState3(null);
-  useEffect2(() => {
+  const endTimeRef = useRef2(null);
+  const [remaining, setRemaining] = useState5(null);
+  useEffect5(() => {
     if (maxCallDuration === null || endTimeRef.current !== null)
       return;
     endTimeRef.current = Date.now() + maxCallDuration * 1000;
@@ -568,14 +985,14 @@ function MeetingControls({ onHangUp }) {
     const id = setInterval(tick, 1000);
     return () => clearInterval(id);
   }, [maxCallDuration]);
-  const toggleMute = useCallback4(async () => {
+  const toggleMute = useCallback6(async () => {
     try {
       await localParticipant.setMicrophoneEnabled(isMuted);
     } catch (e) {
       console.error("Failed to toggle microphone:", e);
     }
   }, [localParticipant, isMuted]);
-  const toggleScreenShare = useCallback4(async () => {
+  const toggleScreenShare = useCallback6(async () => {
     try {
       await localParticipant.setScreenShareEnabled(!isScreenSharing, {
         video: { displaySurface: "browser" },
@@ -586,54 +1003,54 @@ function MeetingControls({ onHangUp }) {
       console.error("Failed to toggle screen share:", e);
     }
   }, [localParticipant, isScreenSharing]);
-  useEffect2(() => {
+  useEffect5(() => {
     toggleMute().then(() => toggleScreenShare());
   }, []);
-  return /* @__PURE__ */ jsxs2("div", {
+  return /* @__PURE__ */ jsxs3("div", {
     children: [
-      /* @__PURE__ */ jsx4(SessionWarningBanner, {
+      /* @__PURE__ */ jsx5(SessionWarningBanner, {
         remaining
       }),
-      /* @__PURE__ */ jsxs2("div", {
+      /* @__PURE__ */ jsxs3("div", {
         className: "skippr:flex skippr:items-center skippr:justify-between skippr:border-b skippr:px-4 skippr:py-3",
         children: [
-          /* @__PURE__ */ jsxs2("div", {
+          /* @__PURE__ */ jsxs3("div", {
             className: "skippr:flex skippr:items-center skippr:gap-2",
             children: [
-              /* @__PURE__ */ jsx4(Button, {
+              /* @__PURE__ */ jsx5(Button, {
                 size: "icon-sm",
                 variant: isMuted ? "destructive" : "outline",
                 onClick: toggleMute,
                 "aria-label": isMuted ? "Unmute" : "Mute",
-                children: isMuted ? /* @__PURE__ */ jsx4(MicOff, {
+                children: isMuted ? /* @__PURE__ */ jsx5(MicOff, {
                   className: "skippr:size-4"
-                }) : /* @__PURE__ */ jsx4(Mic, {
+                }) : /* @__PURE__ */ jsx5(Mic, {
                   className: "skippr:size-4"
                 })
               }),
-              /* @__PURE__ */ jsx4(Button, {
+              /* @__PURE__ */ jsx5(Button, {
                 size: "icon-sm",
                 variant: isScreenSharing ? "default" : "outline",
                 onClick: toggleScreenShare,
                 "aria-label": isScreenSharing ? "Stop sharing" : "Share screen",
-                children: isScreenSharing ? /* @__PURE__ */ jsx4(MonitorOff, {
+                children: isScreenSharing ? /* @__PURE__ */ jsx5(MonitorOff, {
                   className: "skippr:size-4"
-                }) : /* @__PURE__ */ jsx4(Monitor, {
+                }) : /* @__PURE__ */ jsx5(Monitor, {
                   className: "skippr:size-4"
                 })
               })
             ]
           }),
-          remaining !== null && /* @__PURE__ */ jsx4("span", {
+          remaining !== null && /* @__PURE__ */ jsx5("span", {
             className: cn("skippr:text-sm skippr:font-medium skippr:tabular-nums", remaining <= SESSION_WARNING_THRESHOLD_SECS ? "skippr:text-red-600 skippr:animate-pulse" : "skippr:text-muted-foreground"),
             children: formatTime(remaining)
           }),
-          /* @__PURE__ */ jsx4(Button, {
+          /* @__PURE__ */ jsx5(Button, {
             size: "icon-sm",
             variant: "destructive",
             onClick: onHangUp,
             "aria-label": "Hang up",
-            children: /* @__PURE__ */ jsx4(PhoneOff, {
+            children: /* @__PURE__ */ jsx5(PhoneOff, {
               className: "skippr:size-4"
             })
           })
@@ -644,13 +1061,13 @@ function MeetingControls({ onHangUp }) {
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
 
 // src/components/ChatInput.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ChatInput({ sendChatMessage, isSendingChat }) {
-  const [inputText, setInputText] = useState4("");
+  const [inputText, setInputText] = useState6("");
   const canSend = inputText.trim().length > 0 && !isSendingChat;
   function handleSubmit(e) {
     e.preventDefault();
@@ -660,11 +1077,11 @@ function ChatInput({ sendChatMessage, isSendingChat }) {
     setInputText("");
     sendChatMessage(text).catch(() => setInputText(text));
   }
-  return /* @__PURE__ */ jsxs3("form", {
+  return /* @__PURE__ */ jsxs4("form", {
     onSubmit: handleSubmit,
     className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-t skippr:border-border skippr:px-3 skippr:py-2",
     children: [
-      /* @__PURE__ */ jsx5("input", {
+      /* @__PURE__ */ jsx6("input", {
         type: "text",
         value: inputText,
         onChange: (e) => setInputText(e.target.value),
@@ -672,12 +1089,12 @@ function ChatInput({ sendChatMessage, isSendingChat }) {
         className: cn("skippr:flex-1 skippr:rounded-lg skippr:border skippr:border-border skippr:bg-background", "skippr:px-3 skippr:py-2 skippr:text-sm skippr:text-foreground", "skippr:placeholder:text-muted-foreground skippr:outline-none", "skippr:focus:ring-1 skippr:focus:ring-ring"),
         disabled: isSendingChat
       }),
-      /* @__PURE__ */ jsx5("button", {
+      /* @__PURE__ */ jsx6("button", {
         type: "submit",
         disabled: !canSend,
         "aria-label": "Send message",
         className: cn("skippr:flex skippr:size-9 skippr:shrink-0 skippr:items-center skippr:justify-center", "skippr:rounded-lg skippr:bg-primary skippr:text-primary-foreground", "skippr:transition-opacity", !canSend && "skippr:opacity-50 skippr:cursor-not-allowed"),
-        children: /* @__PURE__ */ jsx5(SendHorizontal, {
+        children: /* @__PURE__ */ jsx6(SendHorizontal, {
           className: "skippr:size-4"
         })
       })
@@ -686,12 +1103,12 @@ function ChatInput({ sendChatMessage, isSendingChat }) {
 }
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function ChatMessage({ message }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx6("div", {
+  return /* @__PURE__ */ jsx7("div", {
     className: cn("skippr:flex skippr:w-full skippr:px-4 skippr:py-1", isUser ? "skippr:justify-end" : "skippr:justify-start"),
-    children: /* @__PURE__ */ jsx6("div", {
+    children: /* @__PURE__ */ jsx7("div", {
       className: cn("skippr:max-w-[85%] skippr:whitespace-pre-wrap skippr:rounded-2xl skippr:px-4 skippr:py-2.5 skippr:text-sm skippr:leading-relaxed", isUser ? "skippr:rounded-br-sm skippr:bg-primary skippr:text-primary-foreground" : "skippr:rounded-bl-sm skippr:bg-muted skippr:text-foreground"),
       children: message.content
     })
@@ -699,20 +1116,20 @@ function ChatMessage({ message }) {
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function TypingIndicator() {
-  return /* @__PURE__ */ jsx7("div", {
+  return /* @__PURE__ */ jsx8("div", {
     className: "skippr:flex skippr:items-center skippr:gap-1 skippr:px-4 skippr:py-3",
-    children: /* @__PURE__ */ jsxs4("div", {
+    children: /* @__PURE__ */ jsxs5("div", {
       className: "skippr:flex skippr:items-center skippr:gap-1 skippr:rounded-2xl skippr:rounded-bl-sm skippr:bg-muted skippr:px-4 skippr:py-2.5",
       children: [
-        /* @__PURE__ */ jsx7("span", {
+        /* @__PURE__ */ jsx8("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:0ms]"
         }),
-        /* @__PURE__ */ jsx7("span", {
+        /* @__PURE__ */ jsx8("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:150ms]"
         }),
-        /* @__PURE__ */ jsx7("span", {
+        /* @__PURE__ */ jsx8("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:300ms]"
         })
       ]
@@ -721,38 +1138,38 @@ function TypingIndicator() {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function MessageList({
   messages,
   isStreaming,
   sendChatMessage,
   isSendingChat
 }) {
-  const scrollRef = useRef2(null);
+  const scrollRef = useRef3(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
-  useEffect3(() => {
+  useEffect6(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
-  return /* @__PURE__ */ jsxs5("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
     children: [
-      /* @__PURE__ */ jsx8("div", {
+      /* @__PURE__ */ jsx9("div", {
         className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto",
-        children: /* @__PURE__ */ jsxs5("div", {
+        children: /* @__PURE__ */ jsxs6("div", {
           className: "skippr:flex skippr:flex-col skippr:gap-1 skippr:py-3",
           children: [
-            messages.map((message) => /* @__PURE__ */ jsx8(ChatMessage, {
+            messages.map((message) => /* @__PURE__ */ jsx9(ChatMessage, {
               message
             }, message.id)),
-            showTyping && /* @__PURE__ */ jsx8(TypingIndicator, {}),
-            /* @__PURE__ */ jsx8("div", {
+            showTyping && /* @__PURE__ */ jsx9(TypingIndicator, {}),
+            /* @__PURE__ */ jsx9("div", {
               ref: scrollRef
             })
           ]
         })
       }),
-      /* @__PURE__ */ jsx8(ChatInput, {
+      /* @__PURE__ */ jsx9(ChatInput, {
         sendChatMessage,
         isSendingChat
       })
@@ -761,30 +1178,30 @@ function MessageList({
 }
 
 // src/components/QuickActions.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function QuickActions({ onStartSession, isStarting, error }) {
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:gap-6 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsx9("p", {
+      /* @__PURE__ */ jsx10("p", {
         className: "skippr:mb-1 skippr:text-sm skippr:text-muted-foreground",
         children: "How can I help you today?"
       }),
-      /* @__PURE__ */ jsxs6(Button, {
+      /* @__PURE__ */ jsxs7(Button, {
         variant: "outline",
         className: "skippr:h-auto skippr:flex-col skippr:gap-1.5 skippr:whitespace-normal skippr:py-3 skippr:text-xs",
         onClick: onStartSession,
         disabled: isStarting,
         children: [
-          isStarting ? /* @__PURE__ */ jsx9(LoaderCircle, {
+          isStarting ? /* @__PURE__ */ jsx10(LoaderCircle, {
             className: "skippr:size-4 skippr:animate-spin skippr:text-primary"
-          }) : /* @__PURE__ */ jsx9(MessageCircleQuestionMark, {
+          }) : /* @__PURE__ */ jsx10(MessageCircleQuestionMark, {
             className: "skippr:size-4 skippr:text-primary"
           }),
           isStarting ? "Starting..." : "Start Session"
         ]
       }),
-      error && /* @__PURE__ */ jsx9("p", {
+      error && /* @__PURE__ */ jsx10("p", {
         className: "skippr:text-xs skippr:text-destructive",
         children: error
       })
@@ -793,52 +1210,52 @@ function QuickActions({ onStartSession, isStarting, error }) {
 }
 
 // src/components/SessionAgenda.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function SessionAgenda({ phases, questions = [] }) {
   if (phases.length === 0) {
-    return /* @__PURE__ */ jsxs7("div", {
+    return /* @__PURE__ */ jsxs8("div", {
       className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
       children: [
-        /* @__PURE__ */ jsx10("h3", {
+        /* @__PURE__ */ jsx11("h3", {
           className: "skippr:text-sm skippr:font-semibold",
           children: "Agenda"
         }),
-        /* @__PURE__ */ jsx10("p", {
+        /* @__PURE__ */ jsx11("p", {
           className: "skippr:text-xs skippr:text-muted-foreground",
           children: "Waiting for session..."
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
     children: [
-      /* @__PURE__ */ jsx10("h3", {
+      /* @__PURE__ */ jsx11("h3", {
         className: "skippr:text-sm skippr:font-semibold",
         children: "Agenda"
       }),
-      /* @__PURE__ */ jsx10("ul", {
+      /* @__PURE__ */ jsx11("ul", {
         className: "skippr:flex skippr:flex-col skippr:gap-2",
         children: phases.map((phase) => {
           const phaseQuestions = questions.filter((q) => q.phaseName === phase.name);
           const answeredCount = phaseQuestions.filter((q) => q.status === "answered").length;
           const totalCount = phaseQuestions.length;
-          return /* @__PURE__ */ jsxs7("li", {
+          return /* @__PURE__ */ jsxs8("li", {
             className: "skippr:flex skippr:flex-col skippr:gap-0.5",
             children: [
-              /* @__PURE__ */ jsxs7("div", {
+              /* @__PURE__ */ jsxs8("div", {
                 className: "skippr:flex skippr:items-center skippr:gap-2 skippr:text-sm",
                 children: [
-                  /* @__PURE__ */ jsx10(PhaseIcon, {
+                  /* @__PURE__ */ jsx11(PhaseIcon, {
                     status: phase.status
                   }),
-                  /* @__PURE__ */ jsx10("span", {
+                  /* @__PURE__ */ jsx11("span", {
                     className: cn(phase.status === "completed" && "skippr:text-muted-foreground skippr:line-through", phase.status === "active" && "skippr:font-medium skippr:text-primary"),
                     children: phase.name
                   })
                 ]
               }),
-              totalCount > 0 && /* @__PURE__ */ jsxs7("span", {
+              totalCount > 0 && /* @__PURE__ */ jsxs8("span", {
                 className: "skippr:ml-6 skippr:text-xs skippr:text-muted-foreground",
                 children: [
                   answeredCount,
@@ -856,62 +1273,78 @@ function SessionAgenda({ phases, questions = [] }) {
 }
 function PhaseIcon({ status }) {
   if (status === "completed") {
-    return /* @__PURE__ */ jsx10("div", {
+    return /* @__PURE__ */ jsx11("div", {
       className: "skippr:flex skippr:size-4 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-primary",
-      children: /* @__PURE__ */ jsx10(Check, {
+      children: /* @__PURE__ */ jsx11(Check, {
         className: "skippr:size-2.5 skippr:text-primary-foreground",
         strokeWidth: 3
       })
     });
   }
   if (status === "active") {
-    return /* @__PURE__ */ jsx10(LoaderCircle, {
+    return /* @__PURE__ */ jsx11(LoaderCircle, {
       className: "skippr:size-4 skippr:shrink-0 skippr:text-primary skippr:animate-spin"
     });
   }
-  return /* @__PURE__ */ jsx10(Circle, {
+  return /* @__PURE__ */ jsx11(Circle, {
     className: "skippr:size-4 skippr:shrink-0 skippr:text-muted-foreground"
   });
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx11, jsxs as jsxs8, Fragment } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9, Fragment } from "react/jsx-runtime";
 function Sidebar() {
-  const { isConnected, isStarting, error, startSession, disconnect, isPanelOpen, closePanel } = useLiveAgent();
-  useEffect4(() => {
+  const {
+    isConnected,
+    isStarting,
+    error,
+    startSession,
+    disconnect,
+    isPanelOpen,
+    closePanel,
+    isAuthenticated,
+    isValidating,
+    authError,
+    requestOtp,
+    verifyOtp,
+    isAuthSubmitting
+  } = useLiveAgent();
+  useEffect7(() => {
     document.body.style.transition = "margin-right 300ms ease-in-out";
     document.body.style.marginRight = isPanelOpen ? `${SIDEBAR_WIDTH}px` : "0px";
   }, [isPanelOpen]);
-  useEffect4(() => {
+  useEffect7(() => {
     return () => {
       document.body.style.marginRight = "";
       document.body.style.transition = "";
     };
   }, []);
-  return /* @__PURE__ */ jsx11("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     className: cn("skippr:fixed skippr:top-0 skippr:right-0 skippr:h-full skippr:z-[9999]", "skippr:bg-background skippr:border-l skippr:border-border", "skippr:flex skippr:flex-col", "skippr:transition-all skippr:duration-300 skippr:ease-in-out skippr:overflow-hidden", !isPanelOpen && "skippr:w-0 skippr:border-l-0"),
     style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
-    children: isConnected ? /* @__PURE__ */ jsxs8(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx11(ChatHeader, {
-          onClose: closePanel
-        }),
-        /* @__PURE__ */ jsx11(ConnectedContent, {
-          onDisconnect: disconnect
-        })
-      ]
-    }) : /* @__PURE__ */ jsxs8(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx11(ChatHeader, {
-          onClose: closePanel
-        }),
-        /* @__PURE__ */ jsx11(QuickActions, {
-          onStartSession: startSession,
-          isStarting,
-          error
+    children: [
+      /* @__PURE__ */ jsx12(ChatHeader, {
+        onClose: closePanel
+      }),
+      isConnected ? /* @__PURE__ */ jsx12(ConnectedContent, {
+        onDisconnect: disconnect
+      }) : isValidating ? /* @__PURE__ */ jsx12("div", {
+        className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
+        children: /* @__PURE__ */ jsx12("p", {
+          className: "skippr:text-sm skippr:text-muted-foreground",
+          children: "Loading..."
         })
-      ]
-    })
+      }) : isAuthenticated ? /* @__PURE__ */ jsx12(QuickActions, {
+        onStartSession: startSession,
+        isStarting,
+        error
+      }) : /* @__PURE__ */ jsx12(LoginFlow, {
+        requestOtp,
+        verifyOtp,
+        error: authError,
+        isSubmitting: isAuthSubmitting
+      })
+    ]
   });
 }
 function ConnectedContent({ onDisconnect }) {
@@ -921,33 +1354,33 @@ function ConnectedContent({ onDisconnect }) {
   const { phases } = usePhaseUpdates();
   const { questions } = useQuestionUpdates();
   if (!isConnected) {
-    return /* @__PURE__ */ jsx11("div", {
+    return /* @__PURE__ */ jsx12("div", {
       className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-      children: /* @__PURE__ */ jsx11("p", {
+      children: /* @__PURE__ */ jsx12("p", {
         className: "skippr:text-sm skippr:text-muted-foreground",
         children: "Connecting..."
       })
     });
   }
   const isAgentSpeaking = agentState === "speaking";
-  return /* @__PURE__ */ jsxs8(Fragment, {
+  return /* @__PURE__ */ jsxs9(Fragment, {
     children: [
-      /* @__PURE__ */ jsx11(MeetingControls, {
+      /* @__PURE__ */ jsx12(MeetingControls, {
         onHangUp: onDisconnect
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs9("div", {
         className: "skippr:flex skippr:min-h-0 skippr:flex-1",
         children: [
-          /* @__PURE__ */ jsx11("div", {
+          /* @__PURE__ */ jsx12("div", {
             className: "skippr:w-[260px] skippr:shrink-0 skippr:overflow-y-auto skippr:border-r",
-            children: /* @__PURE__ */ jsx11(SessionAgenda, {
+            children: /* @__PURE__ */ jsx12(SessionAgenda, {
               phases,
               questions
             })
           }),
-          /* @__PURE__ */ jsx11("div", {
+          /* @__PURE__ */ jsx12("div", {
             className: "skippr:flex skippr:min-w-0 skippr:flex-1 skippr:flex-col",
-            children: /* @__PURE__ */ jsx11(MessageList, {
+            children: /* @__PURE__ */ jsx12(MessageList, {
               messages: allMessages,
               isStreaming: isAgentSpeaking,
               sendChatMessage,
@@ -961,44 +1394,49 @@ function ConnectedContent({ onDisconnect }) {
 }
 
 // src/components/SidebarTrigger.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var TRIGGER_GAP = 16;
 var TRIGGER_DEFAULT_RIGHT = 24;
 function SidebarTrigger() {
   const { isPanelOpen, togglePanel } = useLiveAgent();
-  return /* @__PURE__ */ jsx12(Button, {
+  return /* @__PURE__ */ jsx13(Button, {
     size: "icon-lg",
     onClick: togglePanel,
     className: "skippr:fixed skippr:bottom-6 skippr:z-[9998] skippr:size-14 skippr:rounded-full skippr:shadow-lg skippr:transition-all skippr:duration-300",
     style: { right: isPanelOpen ? SIDEBAR_WIDTH + TRIGGER_GAP : TRIGGER_DEFAULT_RIGHT },
     title: isPanelOpen ? "Close chat" : "Chat with us",
-    children: isPanelOpen ? /* @__PURE__ */ jsx12(X, {
+    children: isPanelOpen ? /* @__PURE__ */ jsx13(X, {
       className: "skippr:size-6"
-    }) : /* @__PURE__ */ jsx12(MessageCircle, {
+    }) : /* @__PURE__ */ jsx13(MessageCircle, {
       className: "skippr:size-6"
     })
   });
 }
 
 // src/components/LiveAgent.tsx
-import { jsx as jsx13, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10, Fragment as Fragment2 } from "react/jsx-runtime";
 function LiveAgent({
   agentId,
-  authToken,
+  authToken: authTokenProp,
   appKey,
+  userToken,
   defaultOpen = false,
   children
 }) {
+  const auth = useAuth({ appKey });
+  const effectiveAuthToken = authTokenProp || auth.authToken || undefined;
   const { connection, shouldConnect, isStarting, error, startSession, disconnect } = useSession({
     agentId,
-    authToken,
-    appKey
+    authToken: effectiveAuthToken,
+    appKey,
+    userToken
   });
-  const [isPanelOpen, setIsPanelOpen] = useState5(defaultOpen);
-  const openPanel = useCallback5(() => setIsPanelOpen(true), []);
-  const closePanel = useCallback5(() => setIsPanelOpen(false), []);
-  const togglePanel = useCallback5(() => setIsPanelOpen((prev) => !prev), []);
+  const [isPanelOpen, setIsPanelOpen] = useState7(defaultOpen);
+  const openPanel = useCallback7(() => setIsPanelOpen(true), []);
+  const closePanel = useCallback7(() => setIsPanelOpen(false), []);
+  const togglePanel = useCallback7(() => setIsPanelOpen((prev) => !prev), []);
   const isConnected = connection !== null;
+  const isAuthenticated = !!userToken || !!authTokenProp || auth.isAuthenticated;
   const ctx = useMemo4(() => ({
     connection,
     shouldConnect,
@@ -1010,7 +1448,14 @@ function LiveAgent({
     isPanelOpen,
     openPanel,
     closePanel,
-    togglePanel
+    togglePanel,
+    isAuthenticated,
+    isValidating: auth.isValidating,
+    authError: auth.error,
+    requestOtp: auth.requestOtp,
+    verifyOtp: auth.verifyOtp,
+    logoutAuth: auth.logout,
+    isAuthSubmitting: auth.isSubmitting
   }), [
     connection,
     shouldConnect,
@@ -1022,19 +1467,26 @@ function LiveAgent({
     isPanelOpen,
     openPanel,
     closePanel,
-    togglePanel
+    togglePanel,
+    isAuthenticated,
+    auth.isValidating,
+    auth.error,
+    auth.requestOtp,
+    auth.verifyOtp,
+    auth.logout,
+    auth.isSubmitting
   ]);
-  const widgetContent = /* @__PURE__ */ jsxs9(Fragment2, {
+  const widgetContent = /* @__PURE__ */ jsxs10(Fragment2, {
     children: [
-      connection && /* @__PURE__ */ jsx13(RoomAudioRenderer, {}),
-      /* @__PURE__ */ jsx13(SidebarTrigger, {}),
-      /* @__PURE__ */ jsx13(Sidebar, {}),
+      connection && /* @__PURE__ */ jsx14(RoomAudioRenderer, {}),
+      /* @__PURE__ */ jsx14(SidebarTrigger, {}),
+      /* @__PURE__ */ jsx14(Sidebar, {}),
       children
     ]
   });
-  return /* @__PURE__ */ jsx13(LiveAgentContext.Provider, {
+  return /* @__PURE__ */ jsx14(LiveAgentContext.Provider, {
     value: ctx,
-    children: connection ? /* @__PURE__ */ jsx13(LiveKitRoom, {
+    children: connection ? /* @__PURE__ */ jsx14(LiveKitRoom, {
       serverUrl: connection.livekitUrl,
       token: connection.token,
       connect: shouldConnect,