@skippr/live-agent-sdk 0.24.0 → 0.26.0

package/dist/esm/lib-exports.js

@@ -1,6 +1,6 @@
 // src/components/LiveAgent.tsx
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
-import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef6, useState as useState8 } from "react";
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
@@ -173,6 +173,7 @@ function useSession({ agentId, authToken, appKey, userToken }) {
   const [errorCode, setErrorCode] = useState2(null);
   const [sessionId, setSessionId] = useState2(null);
   const [bearerToken, setBearerToken] = useState2(authToken ?? null);
+  const [pendingScreenStream, setPendingScreenStream] = useState2(null);
   useEffect2(() => {
     let stale = false;
     if (authToken) {
@@ -197,10 +198,18 @@ function useSession({ agentId, authToken, appKey, userToken }) {
       setError("No auth token available");
       return;
     }
-    const headers = { Authorization: `Bearer ${bearerToken}` };
     setIsStarting(true);
     setError("");
     setErrorCode(null);
+    let screenStream = null;
+    try {
+      screenStream = await navigator.mediaDevices.getDisplayMedia({
+        video: { displaySurface: "browser" }
+      });
+    } catch {
+      screenStream = null;
+    }
+    const headers = { Authorization: `Bearer ${bearerToken}` };
     try {
       const createResp = await fetch(`${API_URL2}/v1/sessions`, {
         method: "POST",
@@ -230,8 +239,13 @@ function useSession({ agentId, authToken, appKey, userToken }) {
         livekitUrl: conn.livekitUrl,
         token: conn.token
       });
+      setPendingScreenStream(screenStream);
       setShouldConnect(true);
     } catch (e) {
+      if (screenStream) {
+        for (const track of screenStream.getTracks())
+          track.stop();
+      }
       setError(e instanceof Error ? e.message : "Failed to start session");
     } finally {
       setIsStarting(false);
@@ -248,17 +262,57 @@ function useSession({ agentId, authToken, appKey, userToken }) {
         });
       } catch {}
     }
+    if (pendingScreenStream) {
+      for (const track of pendingScreenStream.getTracks())
+        track.stop();
+    }
     setError("");
     setShouldConnect(false);
     setConnection(null);
     setSessionId(null);
-  }, [sessionId, bearerToken]);
-  return { connection, shouldConnect, isStarting, error, errorCode, startSession, disconnect };
+    setPendingScreenStream(null);
+  }, [sessionId, bearerToken, pendingScreenStream]);
+  return {
+    connection,
+    shouldConnect,
+    isStarting,
+    error,
+    errorCode,
+    startSession,
+    disconnect,
+    pendingScreenStream
+  };
 }
 
-// src/components/MinimizedBubble.tsx
-import { useLocalParticipant, useVoiceAssistant } from "@livekit/components-react";
-import { ScreenSharePresets } from "livekit-client";
+// src/components/AutoStartMedia.tsx
+import { useConnectionState, useLocalParticipant } from "@livekit/components-react";
+import { ConnectionState, Track } from "livekit-client";
+import { useEffect as useEffect3, useRef } from "react";
+function AutoStartMedia({ pendingScreenStream }) {
+  const { localParticipant } = useLocalParticipant();
+  const connectionState = useConnectionState();
+  const didStartRef = useRef(false);
+  useEffect3(() => {
+    if (didStartRef.current)
+      return;
+    if (connectionState !== ConnectionState.Connected)
+      return;
+    didStartRef.current = true;
+    localParticipant.setMicrophoneEnabled(true).catch((error) => console.error("Failed to enable microphone:", error));
+    if (pendingScreenStream) {
+      const videoTrack = pendingScreenStream.getVideoTracks()[0];
+      if (videoTrack) {
+        videoTrack.contentHint = "detail";
+        localParticipant.publishTrack(videoTrack, { source: Track.Source.ScreenShare }).catch((error) => {
+          console.error("Failed to publish screen share track:", error);
+          for (const track of pendingScreenStream.getTracks())
+            track.stop();
+        });
+      }
+    }
+  }, [connectionState, localParticipant, pendingScreenStream]);
+  return null;
+}
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/createLucideIcon.js
 import { forwardRef as forwardRef2, createElement as createElement3 } from "react";
 
@@ -350,70 +404,63 @@ var createLucideIcon = (iconName, iconNode) => {
   return Component;
 };
 
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle-check.js
+var __iconNode = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+];
+var CircleCheck = createLucideIcon("circle-check", __iconNode);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/loader-circle.js
-var __iconNode = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-var LoaderCircle = createLucideIcon("loader-circle", __iconNode);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle-question-mark.js
-var __iconNode2 = [
+var __iconNode2 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+var LoaderCircle = createLucideIcon("loader-circle", __iconNode2);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sparkles.js
+var __iconNode3 = [
   [
     "path",
     {
-      d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719",
-      key: "1sd12s"
+      d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z",
+      key: "1s2grr"
     }
   ],
-  ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
-  ["path", { d: "M12 17h.01", key: "p32p05" }]
+  ["path", { d: "M20 2v4", key: "1rf3ol" }],
+  ["path", { d: "M22 4h-4", key: "gwowj6" }],
+  ["circle", { cx: "4", cy: "20", r: "2", key: "6kqj1y" }]
 ];
-var MessageCircleQuestionMark = createLucideIcon("message-circle-question-mark", __iconNode2);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-left.js
-var __iconNode3 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }]
-];
-var PanelLeft = createLucideIcon("panel-left", __iconNode3);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send-horizontal.js
+var Sparkles = createLucideIcon("sparkles", __iconNode3);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/calendar.js
 var __iconNode4 = [
+  ["path", { d: "M8 2v4", key: "1cmpym" }],
+  ["path", { d: "M16 2v4", key: "4m81vk" }],
+  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
+  ["path", { d: "M3 10h18", key: "8toen8" }]
+];
+var Calendar = createLucideIcon("calendar", __iconNode4);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevron-down.js
+var __iconNode5 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+var ChevronDown = createLucideIcon("chevron-down", __iconNode5);
+// ../../node_modules/.bun/lucide-react@1.8.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@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/eye.js
+var __iconNode7 = [
   [
     "path",
     {
-      d: "M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z",
-      key: "117uat"
+      d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
+      key: "1nclc0"
     }
   ],
-  ["path", { d: "M6 12h16", key: "s4cdu5" }]
-];
-var SendHorizontal = createLucideIcon("send-horizontal", __iconNode4);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/arrow-left.js
-var __iconNode5 = [
-  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
-  ["path", { d: "M19 12H5", key: "x3x0zl" }]
-];
-var ArrowLeft = createLucideIcon("arrow-left", __iconNode5);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/bot.js
-var __iconNode6 = [
-  ["path", { d: "M12 8V4H8", key: "hb8ula" }],
-  ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
-  ["path", { d: "M2 14h2", key: "vft8re" }],
-  ["path", { d: "M20 14h2", key: "4cs60a" }],
-  ["path", { d: "M15 13v2", key: "1xurst" }],
-  ["path", { d: "M9 13v2", key: "rq6x2g" }]
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-var Bot = createLucideIcon("bot", __iconNode6);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/check.js
-var __iconNode7 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-var Check = createLucideIcon("check", __iconNode7);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle.js
-var __iconNode8 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-var Circle = createLucideIcon("circle", __iconNode8);
+var Eye = createLucideIcon("eye", __iconNode7);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mail.js
-var __iconNode9 = [
+var __iconNode8 = [
   ["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", __iconNode9);
+var Mail = createLucideIcon("mail", __iconNode8);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
-var __iconNode10 = [
+var __iconNode9 = [
   [
     "path",
     {
@@ -422,20 +469,9 @@ var __iconNode10 = [
     }
   ]
 ];
-var MessageCircle = createLucideIcon("message-circle", __iconNode10);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-square.js
-var __iconNode11 = [
-  [
-    "path",
-    {
-      d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",
-      key: "18887p"
-    }
-  ]
-];
-var MessageSquare = createLucideIcon("message-square", __iconNode11);
+var MessageCircle = createLucideIcon("message-circle", __iconNode9);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
-var __iconNode12 = [
+var __iconNode10 = [
   ["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" }],
@@ -443,38 +479,40 @@ var __iconNode12 = [
   ["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", __iconNode12);
+var MicOff = createLucideIcon("mic-off", __iconNode10);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
-var __iconNode13 = [
+var __iconNode11 = [
   ["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", __iconNode13);
+var Mic = createLucideIcon("mic", __iconNode11);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/minimize-2.js
+var __iconNode12 = [
+  ["path", { d: "m14 10 7-7", key: "oa77jy" }],
+  ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
+  ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
+  ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
+];
+var Minimize2 = createLucideIcon("minimize-2", __iconNode12);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
-var __iconNode14 = [
+var __iconNode13 = [
   ["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", __iconNode14);
+var MonitorOff = createLucideIcon("monitor-off", __iconNode13);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
-var __iconNode15 = [
+var __iconNode14 = [
   ["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", __iconNode15);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-right.js
-var __iconNode16 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M15 3v18", key: "14nvp0" }]
-];
-var PanelRight = createLucideIcon("panel-right", __iconNode16);
+var Monitor = createLucideIcon("monitor", __iconNode14);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
-var __iconNode17 = [
+var __iconNode15 = [
   [
     "path",
     {
@@ -491,27 +529,32 @@ var __iconNode17 = [
     }
   ]
 ];
-var PhoneOff = createLucideIcon("phone-off", __iconNode17);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/settings.js
-var __iconNode18 = [
+var PhoneOff = createLucideIcon("phone-off", __iconNode15);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
+var __iconNode16 = [
   [
     "path",
     {
-      d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
-      key: "1i5ecw"
+      d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z",
+      key: "1ffxy3"
     }
   ],
-  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-];
-var Settings = createLucideIcon("settings", __iconNode18);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode19 = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+  ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ];
-var X = createLucideIcon("x", __iconNode19);
+var Send = createLucideIcon("send", __iconNode16);
 // src/components/MinimizedBubble.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect4 } from "react";
+
+// src/hooks/useAgentVoiceState.ts
+import { useVoiceAssistant } from "@livekit/components-react";
+function useAgentVoiceState() {
+  const { state } = useVoiceAssistant();
+  return {
+    state,
+    isSpeaking: state === "speaking",
+    isListening: state === "listening"
+  };
+}
 
 // src/hooks/useLiveAgent.ts
 import { use } from "react";
@@ -524,6 +567,36 @@ function useLiveAgent() {
   return publicValue;
 }
 
+// src/hooks/useMediaControls.ts
+import { useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react";
+import { ScreenSharePresets } from "livekit-client";
+import { useCallback as useCallback3 } from "react";
+var SCREEN_SHARE_OPTIONS = {
+  video: { displaySurface: "browser" },
+  resolution: ScreenSharePresets.h720fps30.resolution,
+  contentHint: "detail"
+};
+function useMediaControls() {
+  const { localParticipant } = useLocalParticipant2();
+  const isMuted = !localParticipant.isMicrophoneEnabled;
+  const isScreenSharing = localParticipant.isScreenShareEnabled;
+  const toggleMute = useCallback3(async () => {
+    try {
+      await localParticipant.setMicrophoneEnabled(isMuted);
+    } catch (error) {
+      console.error("Failed to toggle microphone:", error);
+    }
+  }, [localParticipant, isMuted]);
+  const toggleScreenShare = useCallback3(async () => {
+    try {
+      await localParticipant.setScreenShareEnabled(!isScreenSharing, SCREEN_SHARE_OPTIONS);
+    } catch (error) {
+      console.error("Failed to toggle screen share:", error);
+    }
+  }, [localParticipant, isScreenSharing]);
+  return { isMuted, toggleMute, isScreenSharing, toggleScreenShare };
+}
+
 // src/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -531,15 +604,102 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/components/ui/tooltip.tsx
+// src/components/Logo.tsx
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function Tooltip({ label, children, position = "top" }) {
-  return /* @__PURE__ */ jsxs("span", {
+function Logo({ className }) {
+  const reactId = useId().replace(/:/g, "");
+  const clipId = `skippr-logo-clip-${reactId}`;
+  const gradientId = `skippr-logo-gradient-${reactId}`;
+  return /* @__PURE__ */ jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 30 30",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Skippr",
+    className,
+    children: [
+      /* @__PURE__ */ jsxs("g", {
+        clipPath: `url(#${clipId})`,
+        children: [
+          /* @__PURE__ */ jsx("path", {
+            d: "M0 10C0 4.47715 4.47715 0 10 0H20C25.5228 0 30 4.47715 30 10V20C30 25.5228 25.5228 30 20 30H10C4.47715 30 0 25.5228 0 20V10Z",
+            fill: "#2D2D3F"
+          }),
+          /* @__PURE__ */ jsx("rect", {
+            x: "7.83325",
+            y: "14.9404",
+            width: "12.4083",
+            height: "4.72833",
+            rx: "2.36417",
+            transform: "rotate(-45 7.83325 14.9404)",
+            fill: "#52FFF9"
+          }),
+          /* @__PURE__ */ jsx("path", {
+            d: "M18.8975 12.5928C20.2728 12.5928 21.3877 13.647 21.3877 14.9474C21.3877 16.2479 20.2728 17.3021 18.8975 17.3021L11.4269 17.3021C10.0516 17.3021 8.93665 16.2479 8.93665 14.9474C8.93665 13.647 10.0516 12.5928 11.4269 12.5928L18.8975 12.5928Z",
+            fill: `url(#${gradientId})`
+          }),
+          /* @__PURE__ */ jsx("rect", {
+            x: "10.1665",
+            y: "20.4404",
+            width: "12.4083",
+            height: "4.72833",
+            rx: "2.36417",
+            transform: "rotate(-45 10.1665 20.4404)",
+            fill: "white"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("defs", {
+        children: [
+          /* @__PURE__ */ jsxs("linearGradient", {
+            id: gradientId,
+            x1: "18.9237",
+            y1: "16.9997",
+            x2: "11.4129",
+            y2: "14.1904",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx("stop", {
+                offset: "0.473958",
+                stopColor: "white"
+              }),
+              /* @__PURE__ */ jsx("stop", {
+                offset: "1",
+                stopColor: "#52FFF9"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("clipPath", {
+            id: clipId,
+            children: /* @__PURE__ */ jsx("rect", {
+              width: "30",
+              height: "30",
+              fill: "white"
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/ui/tooltip.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ALIGN_CLASSES = {
+  center: "skippr:left-1/2 skippr:-translate-x-1/2",
+  start: "skippr:left-0",
+  end: "skippr:right-0"
+};
+function Tooltip({ label, children, position = "top", align = "center" }) {
+  return /* @__PURE__ */ jsxs2("span", {
     className: "skippr:relative skippr:inline-flex skippr:group",
     children: [
       children,
-      /* @__PURE__ */ jsx("span", {
-        className: cn("skippr:pointer-events-none skippr:absolute skippr:left-1/2 skippr:-translate-x-1/2 skippr:z-10", "skippr:whitespace-nowrap skippr:rounded-md skippr:bg-foreground skippr:px-2 skippr:py-1", "skippr:text-[11px] skippr:text-background skippr:font-medium", "skippr:opacity-0 skippr:scale-95 skippr:transition-all skippr:duration-150", "skippr:group-hover:opacity-100 skippr:group-hover:scale-100", "skippr:group-focus-within:opacity-100 skippr:group-focus-within:scale-100", position === "top" && "skippr:bottom-full skippr:mb-1.5", position === "bottom" && "skippr:top-full skippr:mt-1.5"),
+      /* @__PURE__ */ jsx2("span", {
+        className: cn("skippr:pointer-events-none skippr:absolute skippr:z-10", "skippr:whitespace-nowrap skippr:rounded-md skippr:bg-foreground skippr:px-2 skippr:py-1", "skippr:text-[11px] skippr:text-background skippr:font-medium", "skippr:opacity-0 skippr:scale-95 skippr:transition-all skippr:duration-150", "skippr:group-hover:opacity-100 skippr:group-hover:scale-100", "skippr:group-focus-within:opacity-100 skippr:group-focus-within:scale-100", ALIGN_CLASSES[align], position === "top" && "skippr:bottom-full skippr:mb-1.5", position === "bottom" && "skippr:top-full skippr:mt-1.5"),
         "aria-hidden": "true",
         children: label
       })
@@ -548,141 +708,111 @@ function Tooltip({ label, children, position = "top" }) {
 }
 
 // src/components/MinimizedBubble.tsx
-import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
-function AgentAvatar({ agentState }) {
+import { jsx as jsx3, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+var BUBBLE_BUTTON = "skippr:flex skippr:size-12 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-[14px] skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all skippr:hover:-translate-y-0.5 skippr:active:translate-y-0";
+function AgentBubbleContent({ agentState }) {
   if (agentState === "speaking") {
-    return /* @__PURE__ */ jsxs2("div", {
-      className: "skippr:flex skippr:items-end skippr:justify-center skippr:gap-[3px] skippr:h-5",
+    return /* @__PURE__ */ jsxs3("div", {
+      className: "skippr:flex skippr:h-5 skippr:items-center skippr:justify-center skippr:gap-[3px]",
       children: [
-        /* @__PURE__ */ jsx2("span", {
-          className: "skippr:w-[3px] skippr:h-full skippr:rounded-full skippr:bg-primary-foreground skippr:origin-bottom skippr:animate-skippr-bar-1"
+        /* @__PURE__ */ jsx3("span", {
+          className: "skippr:w-[3px] skippr:h-2 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_infinite]"
         }),
-        /* @__PURE__ */ jsx2("span", {
-          className: "skippr:w-[3px] skippr:h-full skippr:rounded-full skippr:bg-primary-foreground skippr:origin-bottom skippr:animate-skippr-bar-2"
+        /* @__PURE__ */ jsx3("span", {
+          className: "skippr:w-[3px] skippr:h-3.5 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.15s_infinite]"
         }),
-        /* @__PURE__ */ jsx2("span", {
-          className: "skippr:w-[3px] skippr:h-full skippr:rounded-full skippr:bg-primary-foreground skippr:origin-bottom skippr:animate-skippr-bar-3"
+        /* @__PURE__ */ jsx3("span", {
+          className: "skippr:w-[3px] skippr:h-2.5 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.3s_infinite]"
         }),
-        /* @__PURE__ */ jsx2("span", {
-          className: "skippr:w-[3px] skippr:h-full skippr:rounded-full skippr:bg-primary-foreground skippr:origin-bottom skippr:animate-skippr-bar-4"
+        /* @__PURE__ */ jsx3("span", {
+          className: "skippr:w-[3px] skippr:h-4 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.45s_infinite]"
+        }),
+        /* @__PURE__ */ jsx3("span", {
+          className: "skippr:w-[3px] skippr:h-1.5 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.6s_infinite]"
         })
       ]
     });
   }
-  if (agentState === "listening") {
-    return /* @__PURE__ */ jsx2(Bot, {
-      className: "skippr:relative skippr:z-10 skippr:size-5 skippr:animate-skippr-breathe"
-    });
-  }
   if (agentState === "thinking") {
-    return /* @__PURE__ */ jsx2(Bot, {
-      className: "skippr:relative skippr:z-10 skippr:size-5 skippr:animate-pulse"
+    return /* @__PURE__ */ jsxs3("div", {
+      className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-[4px]",
+      children: [
+        /* @__PURE__ */ jsx3("span", {
+          className: "skippr:size-1.5 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:0ms]"
+        }),
+        /* @__PURE__ */ jsx3("span", {
+          className: "skippr:size-1.5 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:150ms]"
+        }),
+        /* @__PURE__ */ jsx3("span", {
+          className: "skippr:size-1.5 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:300ms]"
+        })
+      ]
     });
   }
-  return /* @__PURE__ */ jsx2(Bot, {
-    className: "skippr:relative skippr:z-10 skippr:size-5"
+  return /* @__PURE__ */ jsx3(Logo, {
+    className: "skippr:size-7"
   });
 }
 function ConnectedBubbleContent() {
-  const { expandPanel, disconnect } = useLiveAgent();
-  const { state: agentState } = useVoiceAssistant();
-  const { localParticipant } = useLocalParticipant();
-  const isMuted = !localParticipant.isMicrophoneEnabled;
-  const isScreenSharing = localParticipant.isScreenShareEnabled;
-  const toggleMute = useCallback3(async () => {
-    try {
-      await localParticipant.setMicrophoneEnabled(isMuted);
-    } catch (e) {
-      console.error("Failed to toggle microphone:", e);
-    }
-  }, [localParticipant, isMuted]);
-  const toggleScreenShare = useCallback3(async () => {
-    try {
-      await localParticipant.setScreenShareEnabled(!isScreenSharing, {
-        video: { displaySurface: "browser" },
-        resolution: ScreenSharePresets.h720fps30.resolution,
-        contentHint: "detail"
-      });
-    } catch (e) {
-      console.error("Failed to toggle screen share:", e);
-    }
-  }, [localParticipant, isScreenSharing]);
-  const isSpeaking = agentState === "speaking";
-  const isListening = agentState === "listening";
-  return /* @__PURE__ */ jsxs2(Fragment, {
+  const { expandPanel, disconnect, position } = useLiveAgent();
+  const { state: agentState } = useAgentVoiceState();
+  const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
+  const tooltipAlign = position === "right" ? "end" : "start";
+  return /* @__PURE__ */ jsxs3(Fragment, {
     children: [
-      /* @__PURE__ */ jsx2(Tooltip, {
-        label: "Open chat & transcript",
-        children: /* @__PURE__ */ jsxs2("button", {
+      /* @__PURE__ */ jsx3(Tooltip, {
+        label: isMuted ? "Unmute" : "Mute",
+        align: tooltipAlign,
+        children: /* @__PURE__ */ jsx3("button", {
           type: "button",
-          onClick: expandPanel,
-          className: cn("skippr:relative skippr:size-11 skippr:rounded-full", "skippr:bg-primary skippr:text-primary-foreground", "skippr:flex skippr:items-center skippr:justify-center", "skippr:cursor-pointer skippr:transition-all skippr:duration-300", "skippr:hover:brightness-110", isListening && "skippr:animate-skippr-pulse-ring"),
-          "aria-label": "Open chat & transcript",
-          children: [
-            isSpeaking && /* @__PURE__ */ jsxs2(Fragment, {
-              children: [
-                /* @__PURE__ */ jsx2("span", {
-                  className: "skippr:absolute skippr:inset-0 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-speak-ripple"
-                }),
-                /* @__PURE__ */ jsx2("span", {
-                  className: "skippr:absolute skippr:inset-0 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-speak-ripple-delayed"
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsx2(AgentAvatar, {
-              agentState
-            })
-          ]
+          onClick: toggleMute,
+          "aria-label": isMuted ? "Unmute" : "Mute",
+          className: cn(BUBBLE_BUTTON, isMuted ? "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
+          children: isMuted ? /* @__PURE__ */ jsx3(MicOff, {
+            className: "skippr:size-5"
+          }) : /* @__PURE__ */ jsx3(Mic, {
+            className: "skippr:size-5"
+          })
         })
       }),
-      /* @__PURE__ */ jsx2("div", {
-        className: "skippr:mx-1 skippr:h-6 skippr:w-px skippr:bg-border"
-      }),
-      /* @__PURE__ */ jsxs2("div", {
-        className: "skippr:flex skippr:items-center skippr:gap-1",
-        children: [
-          /* @__PURE__ */ jsx2(Tooltip, {
-            label: isMuted ? "Unmute" : "Mute",
-            children: /* @__PURE__ */ jsx2("button", {
-              type: "button",
-              onClick: toggleMute,
-              className: cn("skippr:size-9 skippr:rounded-full skippr:flex skippr:items-center skippr:justify-center", "skippr:transition-colors skippr:cursor-pointer", isMuted ? "skippr:bg-destructive skippr:text-white" : "skippr:text-foreground skippr:hover:bg-accent"),
-              "aria-label": isMuted ? "Unmute" : "Mute",
-              children: isMuted ? /* @__PURE__ */ jsx2(MicOff, {
-                className: "skippr:size-4"
-              }) : /* @__PURE__ */ jsx2(Mic, {
-                className: "skippr:size-4"
-              })
-            })
-          }),
-          /* @__PURE__ */ jsx2(Tooltip, {
-            label: isScreenSharing ? "Stop sharing" : "Share screen",
-            children: /* @__PURE__ */ jsx2("button", {
-              type: "button",
-              onClick: toggleScreenShare,
-              className: cn("skippr:size-9 skippr:rounded-full skippr:flex skippr:items-center skippr:justify-center", "skippr:transition-colors skippr:cursor-pointer", isScreenSharing ? "skippr:text-foreground skippr:hover:bg-accent" : "skippr:bg-destructive skippr:text-white"),
-              "aria-label": isScreenSharing ? "Stop sharing" : "Share screen",
-              children: isScreenSharing ? /* @__PURE__ */ jsx2(MonitorOff, {
-                className: "skippr:size-4"
-              }) : /* @__PURE__ */ jsx2(Monitor, {
-                className: "skippr:size-4"
-              })
-            })
+      /* @__PURE__ */ jsx3(Tooltip, {
+        label: isScreenSharing ? "Stop sharing" : "Share screen",
+        align: tooltipAlign,
+        children: /* @__PURE__ */ jsx3("button", {
+          type: "button",
+          onClick: toggleScreenShare,
+          "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
+          className: cn(BUBBLE_BUTTON, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
+          children: isScreenSharing ? /* @__PURE__ */ jsx3(MonitorOff, {
+            className: "skippr:size-5"
+          }) : /* @__PURE__ */ jsx3(Monitor, {
+            className: "skippr:size-5"
           })
-        ]
-      }),
-      /* @__PURE__ */ jsx2("div", {
-        className: "skippr:mx-1 skippr:h-6 skippr:w-px skippr:bg-border"
+        })
       }),
-      /* @__PURE__ */ jsx2(Tooltip, {
+      /* @__PURE__ */ jsx3(Tooltip, {
         label: "End session",
-        children: /* @__PURE__ */ jsx2("button", {
+        align: tooltipAlign,
+        children: /* @__PURE__ */ jsx3("button", {
           type: "button",
           onClick: () => disconnect(),
-          className: "skippr:size-9 skippr:rounded-full skippr:flex skippr:items-center skippr:justify-center skippr:bg-destructive skippr:text-white skippr:cursor-pointer skippr:transition-colors skippr:hover:bg-destructive/90",
-          "aria-label": "Hang up",
-          children: /* @__PURE__ */ jsx2(PhoneOff, {
-            className: "skippr:size-4"
+          "aria-label": "End session",
+          className: cn(BUBBLE_BUTTON, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
+          children: /* @__PURE__ */ jsx3(PhoneOff, {
+            className: "skippr:size-5"
+          })
+        })
+      }),
+      /* @__PURE__ */ jsx3(Tooltip, {
+        label: "Open chat & transcript",
+        align: tooltipAlign,
+        children: /* @__PURE__ */ jsx3("button", {
+          type: "button",
+          onClick: expandPanel,
+          "aria-label": "Open chat & transcript",
+          className: cn(BUBBLE_BUTTON, "skippr:bg-bubble skippr:hover:brightness-110"),
+          children: /* @__PURE__ */ jsx3(AgentBubbleContent, {
+            agentState
           })
         })
       })
@@ -690,123 +820,25 @@ function ConnectedBubbleContent() {
   });
 }
 function IdleBubbleContent() {
-  const { expandPanel, startSession, isStarting, isAuthenticated } = useLiveAgent();
-  const [showCapabilities, setShowCapabilities] = useState3(true);
-  const fadeTimer = useRef(null);
-  useEffect3(() => {
-    fadeTimer.current = setTimeout(() => setShowCapabilities(false), 5000);
-    return () => {
-      if (fadeTimer.current)
-        clearTimeout(fadeTimer.current);
-    };
-  }, []);
-  const handleStart = useCallback3(() => {
-    if (!isAuthenticated) {
-      expandPanel();
-      return;
-    }
-    startSession();
-  }, [isAuthenticated, expandPanel, startSession]);
-  return /* @__PURE__ */ jsxs2("div", {
-    className: "skippr:flex skippr:items-center skippr:gap-0",
-    onMouseEnter: () => !isStarting && setShowCapabilities(true),
-    onMouseLeave: () => !isStarting && setShowCapabilities(false),
-    children: [
-      /* @__PURE__ */ jsx2("button", {
-        type: "button",
-        onClick: handleStart,
-        disabled: isStarting,
-        className: cn("skippr:relative skippr:size-11 skippr:rounded-full", "skippr:bg-primary skippr:text-primary-foreground", "skippr:flex skippr:items-center skippr:justify-center", "skippr:cursor-pointer skippr:transition-all skippr:duration-300", "skippr:hover:brightness-110", isStarting && "skippr:animate-skippr-pulse-ring skippr:cursor-not-allowed"),
-        "aria-label": "AI Agent",
-        children: /* @__PURE__ */ jsx2(Bot, {
-          className: "skippr:relative skippr:z-10 skippr:size-5"
+  const { expandPanel, position } = useLiveAgent();
+  const tooltipAlign = position === "right" ? "end" : "start";
+  return /* @__PURE__ */ jsx3(Tooltip, {
+    label: "Open Skippr assistant",
+    align: tooltipAlign,
+    children: /* @__PURE__ */ jsxs3("button", {
+      type: "button",
+      onClick: expandPanel,
+      "aria-label": "Skippr assistant",
+      className: cn(BUBBLE_BUTTON, "skippr:relative skippr:bg-bubble skippr:hover:brightness-110"),
+      children: [
+        /* @__PURE__ */ jsx3(Logo, {
+          className: "skippr:relative skippr:z-10 skippr:size-7"
+        }),
+        /* @__PURE__ */ jsx3("span", {
+          className: "skippr:absolute skippr:-inset-[3px] skippr:animate-pulse skippr:rounded-[17px] skippr:border-2 skippr:border-bubble/50"
         })
-      }),
-      isStarting ? /* @__PURE__ */ jsxs2("div", {
-        className: "skippr:flex skippr:items-center skippr:gap-2 skippr:ml-2 skippr:mr-1 skippr:whitespace-nowrap skippr:text-xs skippr:text-muted-foreground",
-        children: [
-          /* @__PURE__ */ jsx2("span", {
-            className: "skippr:inline-block skippr:size-1.5 skippr:rounded-full skippr:bg-primary skippr:animate-pulse"
-          }),
-          "Setting up voice & screen..."
-        ]
-      }) : /* @__PURE__ */ jsxs2(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx2("div", {
-            className: cn("skippr:overflow-hidden skippr:transition-all skippr:duration-500 skippr:ease-in-out", showCapabilities ? "skippr:max-w-64 skippr:opacity-100 skippr:ml-2 skippr:mr-1" : "skippr:max-w-0 skippr:opacity-0 skippr:ml-0 skippr:mr-0"),
-            "aria-hidden": !showCapabilities,
-            children: /* @__PURE__ */ jsxs2("button", {
-              type: "button",
-              onClick: handleStart,
-              tabIndex: showCapabilities ? 0 : -1,
-              className: "skippr:flex skippr:items-center skippr:gap-3 skippr:whitespace-nowrap skippr:text-xs skippr:text-muted-foreground skippr:cursor-pointer skippr:hover:text-foreground skippr:transition-colors",
-              children: [
-                /* @__PURE__ */ jsxs2("span", {
-                  className: "skippr:flex skippr:items-center skippr:gap-1",
-                  children: [
-                    /* @__PURE__ */ jsx2(Mic, {
-                      className: "skippr:size-3"
-                    }),
-                    "Talk"
-                  ]
-                }),
-                /* @__PURE__ */ jsx2("span", {
-                  className: "skippr:text-border",
-                  children: "·"
-                }),
-                /* @__PURE__ */ jsxs2("span", {
-                  className: "skippr:flex skippr:items-center skippr:gap-1",
-                  children: [
-                    /* @__PURE__ */ jsx2(Monitor, {
-                      className: "skippr:size-3"
-                    }),
-                    "Screen"
-                  ]
-                }),
-                /* @__PURE__ */ jsx2("span", {
-                  className: "skippr:text-border",
-                  children: "·"
-                }),
-                /* @__PURE__ */ jsxs2("span", {
-                  className: "skippr:flex skippr:items-center skippr:gap-1",
-                  children: [
-                    /* @__PURE__ */ jsx2(MessageSquare, {
-                      className: "skippr:size-3"
-                    }),
-                    "Chat"
-                  ]
-                })
-              ]
-            })
-          }),
-          /* @__PURE__ */ jsx2("div", {
-            className: cn("skippr:overflow-hidden skippr:transition-all skippr:duration-500 skippr:ease-in-out", showCapabilities ? "skippr:max-w-0 skippr:opacity-0" : "skippr:max-w-12 skippr:opacity-100"),
-            "aria-hidden": showCapabilities,
-            children: /* @__PURE__ */ jsxs2("div", {
-              className: "skippr:flex skippr:items-center",
-              children: [
-                /* @__PURE__ */ jsx2("div", {
-                  className: "skippr:mx-1 skippr:h-6 skippr:w-px skippr:bg-border"
-                }),
-                /* @__PURE__ */ jsx2(Tooltip, {
-                  label: "Start session",
-                  children: /* @__PURE__ */ jsx2("button", {
-                    type: "button",
-                    onClick: handleStart,
-                    tabIndex: showCapabilities ? -1 : 0,
-                    className: "skippr:size-9 skippr:rounded-full skippr:flex skippr:items-center skippr:justify-center skippr:transition-colors skippr:cursor-pointer skippr:bg-primary skippr:text-primary-foreground skippr:hover:brightness-110",
-                    "aria-label": "Start session",
-                    children: /* @__PURE__ */ jsx2(Monitor, {
-                      className: "skippr:size-4"
-                    })
-                  })
-                })
-              ]
-            })
-          })
-        ]
-      })
-    ]
+      ]
+    })
   });
 }
 function WelcomeBubble({
@@ -814,18 +846,18 @@ function WelcomeBubble({
   position,
   onDismiss
 }) {
-  useEffect3(() => {
+  useEffect4(() => {
     const timer = setTimeout(onDismiss, 5000);
     return () => clearTimeout(timer);
   }, [onDismiss]);
-  return /* @__PURE__ */ jsxs2("button", {
+  return /* @__PURE__ */ jsxs3("button", {
     type: "button",
     className: cn("skippr:absolute skippr:bottom-full skippr:mb-3", "skippr:max-w-64 skippr:rounded-xl skippr:bg-card skippr:shadow-lg", "skippr:border skippr:border-border skippr:px-4 skippr:py-3", "skippr:text-sm skippr:text-foreground skippr:leading-relaxed skippr:text-left", "skippr:animate-[skippr-fade-in_0.3s_ease-out]", "skippr:cursor-pointer", position === "right" ? "skippr:right-0" : "skippr:left-0"),
     onClick: onDismiss,
     "aria-label": "Dismiss",
     children: [
       message,
-      /* @__PURE__ */ jsx2("span", {
+      /* @__PURE__ */ jsx3("span", {
         className: cn("skippr:absolute skippr:top-full skippr:size-2.5", "skippr:border-l skippr:border-t skippr:border-border skippr:bg-card", "skippr:rotate-[225deg]", position === "right" ? "skippr:right-5" : "skippr:left-5", "skippr:-mt-[5px]")
       })
     ]
@@ -836,31 +868,63 @@ function MinimizedBubble({
   welcomeDismissed,
   onDismissWelcome
 }) {
-  const { isConnected, position } = useLiveAgent();
-  return /* @__PURE__ */ jsxs2("div", {
-    className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-0", "skippr:rounded-full skippr:bg-card skippr:shadow-2xl", "skippr:border skippr:border-border", "skippr:p-1.5", "skippr:transition-all skippr:duration-300 skippr:ease-in-out", position === "right" ? "skippr:right-6" : "skippr:left-6"),
+  const { isConnected, isStarting, position } = useLiveAgent();
+  const inSession = isConnected || isStarting;
+  return /* @__PURE__ */ jsxs3("div", {
+    className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", position === "right" ? "skippr:right-6" : "skippr:left-6"),
     children: [
-      welcomeMessage && !isConnected && !welcomeDismissed && /* @__PURE__ */ jsx2(WelcomeBubble, {
+      welcomeMessage && !inSession && !welcomeDismissed && /* @__PURE__ */ jsx3(WelcomeBubble, {
         message: welcomeMessage,
         position,
         onDismiss: onDismissWelcome
       }),
-      isConnected ? /* @__PURE__ */ jsx2(ConnectedBubbleContent, {}) : /* @__PURE__ */ jsx2(IdleBubbleContent, {})
+      inSession ? /* @__PURE__ */ jsx3(ConnectedBubbleContent, {}) : /* @__PURE__ */ jsx3(IdleBubbleContent, {})
     ]
   });
 }
 
+// src/components/ObservingBanner.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ObservingBanner() {
+  const { isConnected } = useLiveAgent();
+  const { isScreenSharing } = useMediaControls();
+  if (!isConnected || !isScreenSharing)
+    return null;
+  return /* @__PURE__ */ jsx4("div", {
+    className: "skippr:fixed skippr:top-0 skippr:left-0 skippr:right-0 skippr:z-[2147483647] skippr:flex skippr:justify-center skippr:pointer-events-none",
+    children: /* @__PURE__ */ jsxs4("div", {
+      className: "skippr:pointer-events-auto skippr:flex skippr:items-center skippr:gap-2 skippr:bg-indigo-500/95 skippr:backdrop-blur-sm skippr:text-white skippr:text-xs skippr:font-medium skippr:px-4 skippr:py-1.5 skippr:rounded-b-lg skippr:shadow-lg",
+      children: [
+        /* @__PURE__ */ jsxs4("span", {
+          className: "skippr:relative skippr:flex skippr:size-1.5",
+          children: [
+            /* @__PURE__ */ jsx4("span", {
+              className: "skippr:absolute skippr:inline-flex skippr:size-full skippr:animate-ping skippr:rounded-full skippr:bg-emerald-400 skippr:opacity-75"
+            }),
+            /* @__PURE__ */ jsx4("span", {
+              className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-emerald-400"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx4(Eye, {
+          className: "skippr:size-3.5"
+        }),
+        /* @__PURE__ */ jsx4("span", {
+          children: "Skippr is observing this page"
+        })
+      ]
+    })
+  });
+}
+
 // src/components/Sidebar.tsx
-import { useConnectionState } from "@livekit/components-react";
-import { ConnectionState } from "livekit-client";
-import { useEffect as useEffect8, useState as useState8 } from "react";
+import { useEffect as useEffect11 } from "react";
 
 // src/hooks/useCombinedMessages.ts
-import { useVoiceAssistant as useVoiceAssistant2 } from "@livekit/components-react";
 import { useMemo as useMemo4 } from "react";
 
 // src/hooks/useChatMessages.ts
-import { useChat, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react";
+import { useChat, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react";
 import { useMemo as useMemo2 } from "react";
 
 // src/lib/filterSystemMessages.ts
@@ -872,7 +936,7 @@ function filterSystemMessages(messages) {
 // src/hooks/useChatMessages.ts
 function useChatMessages() {
   const { chatMessages: rawMessages, send, isSending } = useChat();
-  const { localParticipant } = useLocalParticipant2();
+  const { localParticipant } = useLocalParticipant3();
   const localIdentity = localParticipant.identity;
   const chatMessages = useMemo2(() => {
     const sortedMessages = rawMessages.map((msg) => ({
@@ -888,11 +952,11 @@ function useChatMessages() {
 }
 
 // src/hooks/useStreamingTranscript.ts
-import { useLocalParticipant as useLocalParticipant3, useTranscriptions } from "@livekit/components-react";
+import { useLocalParticipant as useLocalParticipant4, useTranscriptions } from "@livekit/components-react";
 import { useMemo as useMemo3 } from "react";
 function useStreamingTranscript() {
   const transcriptions = useTranscriptions();
-  const { localParticipant } = useLocalParticipant3();
+  const { localParticipant } = useLocalParticipant4();
   const localIdentity = localParticipant.identity;
   const transcriptMessages = useMemo3(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
     id: stream.streamInfo.id,
@@ -924,7 +988,7 @@ function mergeChatsIntoTranscripts(transcripts, chats) {
 function useCombinedMessages() {
   const { transcriptMessages } = useStreamingTranscript();
   const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
-  const { state: agentState } = useVoiceAssistant2();
+  const { state: agentState } = useAgentVoiceState();
   const allMessages = useMemo4(() => {
     if (chatMessages.length === 0)
       return transcriptMessages;
@@ -940,11 +1004,11 @@ import { useCallback as useCallback4 } from "react";
 
 // src/hooks/useAgentState.ts
 import { useRemoteParticipants } from "@livekit/components-react";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState3 } from "react";
 function useAgentState(attributeKey, parse, initial) {
-  const [value, setValue] = useState4(initial);
+  const [value, setValue] = useState3(initial);
   const remoteParticipants = useRemoteParticipants();
-  useEffect4(() => {
+  useEffect5(() => {
     const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
     if (agentParticipant) {
       const attr = agentParticipant.attributes?.[attributeKey];
@@ -995,30 +1059,152 @@ function usePhaseUpdates() {
   return { phases };
 }
 
-// src/hooks/useQuestionUpdates.ts
-import { useCallback as useCallback5 } from "react";
-function parseQuestions(json) {
-  try {
-    const data = JSON.parse(json);
-    if (data.type === "question_update" && Array.isArray(data.questions)) {
-      return data.questions;
-    }
-  } catch {}
-  return null;
+// src/hooks/useSessionRemaining.ts
+import { useEffect as useEffect6, useRef as useRef2, useState as useState4 } from "react";
+
+// src/lib/format.ts
+function formatTime(seconds) {
+  const m = Math.floor(seconds / 60).toString().padStart(2, "0");
+  const s = (seconds % 60).toString().padStart(2, "0");
+  return `${m}:${s}`;
+}
+function parseNumber(s) {
+  const n = Number(s);
+  return n > 0 ? n : null;
 }
-function useQuestionUpdates() {
-  const parse = useCallback5(parseQuestions, []);
-  const questions = useAgentState("questions", parse, []);
-  return { questions };
+
+// src/hooks/useSessionRemaining.ts
+function useSessionRemaining() {
+  const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
+  const endTimeRef = useRef2(null);
+  const [remaining, setRemaining] = useState4(null);
+  useEffect6(() => {
+    if (maxCallDuration === null || endTimeRef.current !== null)
+      return;
+    const endTime = Date.now() + maxCallDuration * 1000;
+    endTimeRef.current = endTime;
+    const tick = () => {
+      const secs = Math.ceil((endTime - Date.now()) / 1000);
+      setRemaining(Math.max(secs, 0));
+    };
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [maxCallDuration]);
+  return remaining;
 }
 
 // src/lib/constants.ts
-var SIDEBAR_WIDTH = 480;
+var SIDEBAR_WIDTH = 360;
 
-// src/components/ui/button.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var variantClasses = {
+// src/hooks/useElapsedSeconds.ts
+import { useEffect as useEffect7, useState as useState5 } from "react";
+function useElapsedSeconds(isRunning) {
+  const [elapsed, setElapsed] = useState5(0);
+  useEffect7(() => {
+    if (!isRunning) {
+      setElapsed(0);
+      return;
+    }
+    const startedAt = Date.now();
+    setElapsed(0);
+    const id = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startedAt) / 1000));
+    }, 1000);
+    return () => clearInterval(id);
+  }, [isRunning]);
+  return elapsed;
+}
+
+// src/components/ChatHeader.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChatHeader() {
+  const { isConnected, minimizePanel, minimizable } = useLiveAgent();
+  const elapsed = useElapsedSeconds(isConnected);
+  return /* @__PURE__ */ jsxs5("header", {
+    className: "skippr:sticky skippr:top-0 skippr:z-10 skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-between skippr:border-b skippr:border-border skippr:bg-primary skippr:px-4 skippr:py-3",
+    children: [
+      /* @__PURE__ */ jsx5("p", {
+        className: "skippr:text-sm skippr:font-semibold skippr:text-primary-foreground",
+        children: "Skippr"
+      }),
+      /* @__PURE__ */ jsxs5("div", {
+        className: "skippr:flex skippr:items-center skippr:gap-2",
+        children: [
+          isConnected && /* @__PURE__ */ jsxs5("div", {
+            className: "skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-primary-foreground/20 skippr:px-2.5 skippr:py-1",
+            children: [
+              /* @__PURE__ */ jsxs5("span", {
+                className: "skippr:relative skippr:flex skippr:size-1.5",
+                children: [
+                  /* @__PURE__ */ jsx5("span", {
+                    className: "skippr:absolute skippr:inline-flex skippr:h-full skippr:w-full skippr:animate-ping skippr:rounded-full skippr:bg-red-400 skippr:opacity-75"
+                  }),
+                  /* @__PURE__ */ jsx5("span", {
+                    className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx5("span", {
+                className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
+                children: "REC"
+              }),
+              /* @__PURE__ */ jsx5("span", {
+                className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
+                children: formatTime(elapsed)
+              })
+            ]
+          }),
+          minimizable && /* @__PURE__ */ jsx5("button", {
+            type: "button",
+            onClick: minimizePanel,
+            "aria-label": "Minimize",
+            className: "skippr:flex skippr:size-6 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-md skippr:text-primary-foreground/70 skippr:transition-colors skippr:hover:bg-primary-foreground/10 skippr:hover:text-primary-foreground",
+            children: /* @__PURE__ */ jsx5(Minimize2, {
+              className: "skippr:size-3.5"
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/LoadingDots.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function LoadingDots({ label }) {
+  return /* @__PURE__ */ jsxs6("div", {
+    className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
+    children: [
+      /* @__PURE__ */ jsxs6("div", {
+        className: "skippr:flex skippr:gap-1",
+        children: [
+          /* @__PURE__ */ jsx6("span", {
+            className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
+          }),
+          /* @__PURE__ */ jsx6("span", {
+            className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
+          }),
+          /* @__PURE__ */ jsx6("span", {
+            className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx6("p", {
+        className: "skippr:text-xs skippr:text-muted-foreground",
+        children: label
+      })
+    ]
+  });
+}
+
+// src/components/LoginFlow.tsx
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef3, useState as useState6 } from "react";
+
+// src/components/ui/button.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var variantClasses = {
   default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
   destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
   outline: "skippr:border skippr:border-input skippr:bg-background skippr:shadow-xs skippr:hover:bg-accent skippr:hover:text-accent-foreground",
@@ -1036,7 +1222,7 @@ var sizeClasses = {
   "icon-lg": "skippr:size-10"
 };
 var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
-  return /* @__PURE__ */ jsx3("button", {
+  return /* @__PURE__ */ jsx7("button", {
     className: cn("skippr:inline-flex skippr:items-center skippr:justify-center skippr:gap-2 skippr:whitespace-nowrap skippr:rounded-md skippr:text-sm skippr:font-medium skippr:ring-offset-background skippr:transition-all skippr:cursor-pointer skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-ring skippr:focus-visible:ring-offset-2 skippr:disabled:pointer-events-none skippr:disabled:opacity-50 skippr:shrink-0 skippr:[&_svg]:pointer-events-none skippr:[&_svg:not([class*='size-'])]:size-4 skippr:[&_svg]:shrink-0", variantClasses[variant], sizeClasses[size], className),
     ref,
     ...props
@@ -1044,79 +1230,29 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
 });
 Button.displayName = "Button";
 
-// src/components/ChatHeader.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function ChatHeader({ onOpenSettings }) {
-  const { closePanel, minimizePanel, minimizable } = useLiveAgent();
-  return /* @__PURE__ */ jsxs3("div", {
-    className: "skippr:flex skippr:items-center skippr:gap-3 skippr:bg-primary skippr:px-4 skippr:py-3 skippr:text-primary-foreground",
-    children: [
-      /* @__PURE__ */ jsx4("div", {
-        className: "skippr:flex skippr:size-6 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-primary-foreground/20",
-        children: /* @__PURE__ */ jsx4(Bot, {
-          className: "skippr:size-3.5 skippr:text-primary-foreground"
-        })
-      }),
-      /* @__PURE__ */ jsx4("div", {
-        className: "skippr:flex-1",
-        children: /* @__PURE__ */ jsx4("p", {
-          className: "skippr:text-sm skippr:font-semibold skippr:leading-none",
-          children: "AI Agent"
-        })
-      }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "skippr:flex skippr:items-center skippr:gap-1",
-        children: [
-          /* @__PURE__ */ jsx4(Button, {
-            variant: "ghost",
-            size: "icon-xs",
-            onClick: onOpenSettings,
-            className: "skippr:text-primary-foreground skippr:hover:bg-primary-foreground/20 skippr:hover:text-primary-foreground",
-            "aria-label": "Settings",
-            children: /* @__PURE__ */ jsx4(Settings, {
-              className: "skippr:size-4"
-            })
-          }),
-          /* @__PURE__ */ jsx4(Button, {
-            variant: "ghost",
-            size: "icon-xs",
-            onClick: minimizable ? minimizePanel : closePanel,
-            className: "skippr:text-primary-foreground skippr:hover:bg-primary-foreground/20 skippr:hover:text-primary-foreground",
-            "aria-label": "Close",
-            children: /* @__PURE__ */ jsx4(X, {
-              className: "skippr:size-4"
-            })
-          })
-        ]
-      })
-    ]
-  });
-}
-
 // src/components/LoginFlow.tsx
-import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } 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] = useState5("email");
-  const [email, setEmail] = useState5("");
-  const handleRequestOtp = useCallback6(async (emailValue) => {
+  const [step, setStep] = useState6("email");
+  const [email, setEmail] = useState6("");
+  const handleRequestOtp = useCallback5(async (emailValue) => {
     const success = await requestOtp(emailValue);
     if (success)
       setStep("otp");
   }, [requestOtp]);
-  const handleVerifyOtp = useCallback6(async (code) => {
+  const handleVerifyOtp = useCallback5(async (code) => {
     await verifyOtp(email, code);
   }, [verifyOtp, email]);
-  const handleBack = useCallback6(() => {
+  const handleBack = useCallback5(() => {
     setStep("email");
   }, []);
-  const handleResend = useCallback6(async () => {
+  const handleResend = useCallback5(async () => {
     await requestOtp(email);
   }, [requestOtp, email]);
   if (step === "otp") {
-    return /* @__PURE__ */ jsx5(OtpStep, {
+    return /* @__PURE__ */ jsx8(OtpStep, {
       email,
       onSubmit: handleVerifyOtp,
       onResend: handleResend,
@@ -1125,7 +1261,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
       isSubmitting
     });
   }
-  return /* @__PURE__ */ jsx5(EmailStep, {
+  return /* @__PURE__ */ jsx8(EmailStep, {
     email,
     onEmailChange: setEmail,
     onSubmit: handleRequestOtp,
@@ -1139,30 +1275,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
     if (email.trim())
       onSubmit(email.trim());
   }
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs4("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "skippr:mb-4 skippr:text-center",
         children: [
-          /* @__PURE__ */ jsx5(Mail, {
+          /* @__PURE__ */ jsx8(Mail, {
             className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
           }),
-          /* @__PURE__ */ jsx5("p", {
+          /* @__PURE__ */ jsx8("p", {
             className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
             children: "Sign in to continue"
           }),
-          /* @__PURE__ */ jsx5("p", {
+          /* @__PURE__ */ jsx8("p", {
             className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
             children: "Your email will be used to identify you across sessions"
           })
         ]
       }),
-      /* @__PURE__ */ jsxs4("form", {
+      /* @__PURE__ */ jsxs7("form", {
         onSubmit: handleSubmit,
         className: "skippr:flex skippr:flex-col skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx5("input", {
+          /* @__PURE__ */ jsx8("input", {
             type: "email",
             placeholder: "you@example.com",
             value: email,
@@ -1171,15 +1307,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, 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__ */ jsx5(Button, {
+          /* @__PURE__ */ jsx8(Button, {
             type: "submit",
             disabled: isSubmitting || !email.trim(),
             className: "skippr:w-full",
-            children: isSubmitting ? /* @__PURE__ */ jsx5(LoaderCircle, {
+            children: isSubmitting ? /* @__PURE__ */ jsx8(LoaderCircle, {
               className: "skippr:size-4 skippr:animate-spin"
             }) : "Continue"
           }),
-          error && /* @__PURE__ */ jsx5("p", {
+          error && /* @__PURE__ */ jsx8("p", {
             className: "skippr:text-xs skippr:text-center skippr:text-destructive",
             children: error
           })
@@ -1189,30 +1325,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
   });
 }
 function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
-  const [digits, setDigits] = useState5(Array(OTP_LENGTH).fill(""));
-  const [resendCooldown, setResendCooldown] = useState5(0);
-  const inputRefs = useRef2([]);
-  const submittedRef = useRef2(false);
-  useEffect5(() => {
+  const [digits, setDigits] = useState6(Array(OTP_LENGTH).fill(""));
+  const [resendCooldown, setResendCooldown] = useState6(0);
+  const inputRefs = useRef3([]);
+  const submittedRef = useRef3(false);
+  useEffect8(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  useEffect5(() => {
+  useEffect8(() => {
     if (error)
       submittedRef.current = false;
   }, [error]);
-  useEffect5(() => {
+  useEffect8(() => {
     if (resendCooldown <= 0)
       return;
     const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
     return () => clearTimeout(timer);
   }, [resendCooldown]);
-  const submitCode = useCallback6((code) => {
+  const submitCode = useCallback5((code) => {
     if (submittedRef.current || isSubmitting)
       return;
     submittedRef.current = true;
     onSubmit(code);
   }, [onSubmit, isSubmitting]);
-  const handleDigitChange = useCallback6((index2, value) => {
+  const handleDigitChange = useCallback5((index2, value) => {
     const digit = value.replace(/\D/g, "").slice(-1);
     const newDigits = [...digits];
     newDigits[index2] = digit;
@@ -1226,12 +1362,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
         submitCode(code);
     }
   }, [digits, submitCode]);
-  const handleKeyDown = useCallback6((index2, e) => {
+  const handleKeyDown = useCallback5((index2, e) => {
     if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
       inputRefs.current[index2 - 1]?.focus();
     }
   }, [digits]);
-  const handlePaste = useCallback6((e) => {
+  const handlePaste = useCallback5((e) => {
     e.preventDefault();
     const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
     if (pasted.length > 0) {
@@ -1259,22 +1395,22 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
     submittedRef.current = false;
     inputRefs.current[0]?.focus();
   }
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs4("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "skippr:mb-4 skippr:text-center",
         children: [
-          /* @__PURE__ */ jsx5("p", {
+          /* @__PURE__ */ jsx8("p", {
             className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
             children: "Enter verification code"
           }),
-          /* @__PURE__ */ jsxs4("p", {
+          /* @__PURE__ */ jsxs7("p", {
             className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
             children: [
               "We sent a 6-digit code to",
               " ",
-              /* @__PURE__ */ jsx5("span", {
+              /* @__PURE__ */ jsx8("span", {
                 className: "skippr:font-medium skippr:text-foreground",
                 children: email
               })
@@ -1282,13 +1418,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs4("form", {
+      /* @__PURE__ */ jsxs7("form", {
         onSubmit: handleSubmit,
         className: "skippr:flex skippr:flex-col skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx5("div", {
+          /* @__PURE__ */ jsx8("div", {
             className: "skippr:flex skippr:justify-center skippr:gap-1.5",
-            children: digits.map((digit, index2) => /* @__PURE__ */ jsx5("input", {
+            children: digits.map((digit, index2) => /* @__PURE__ */ jsx8("input", {
               ref: (el) => {
                 inputRefs.current[index2] = el;
               },
@@ -1303,29 +1439,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, 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__ */ jsx5("p", {
+          error && /* @__PURE__ */ jsx8("p", {
             className: "skippr:text-xs skippr:text-center skippr:text-destructive",
             children: error
           }),
-          /* @__PURE__ */ jsx5(Button, {
+          /* @__PURE__ */ jsx8(Button, {
             type: "submit",
             disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
             className: "skippr:w-full",
-            children: isSubmitting ? /* @__PURE__ */ jsx5(LoaderCircle, {
+            children: isSubmitting ? /* @__PURE__ */ jsx8(LoaderCircle, {
               className: "skippr:size-4 skippr:animate-spin"
             }) : "Verify"
           }),
-          /* @__PURE__ */ jsxs4("div", {
+          /* @__PURE__ */ jsxs7("div", {
             className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
             children: [
-              /* @__PURE__ */ jsx5("button", {
+              /* @__PURE__ */ jsx8("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__ */ jsx5("button", {
+              /* @__PURE__ */ jsx8("button", {
                 type: "button",
                 onClick: handleResend,
                 disabled: isSubmitting || resendCooldown > 0,
@@ -1341,476 +1477,351 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
 }
 
 // src/components/MeetingControls.tsx
-import { useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react";
-import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
-import { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef3, useState as useState6 } from "react";
-
-// src/lib/format.ts
-function formatTime(seconds) {
-  const m = Math.floor(seconds / 60).toString().padStart(2, "0");
-  const s = (seconds % 60).toString().padStart(2, "0");
-  return `${m}:${s}`;
-}
-function parseNumber(s) {
-  const n = Number(s);
-  return n > 0 ? n : null;
-}
-
-// src/components/SessionWarningBanner.tsx
-import { jsx as jsx6 } 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__ */ jsx6("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"
-  });
-}
-
-// src/components/MeetingControls.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var CONTROL_BUTTON = "skippr:flex skippr:size-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:transition-colors";
 function MeetingControls({ onHangUp }) {
-  const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
-  const { localParticipant } = useLocalParticipant4();
-  const isMuted = !localParticipant.isMicrophoneEnabled;
-  const isScreenSharing = localParticipant.isScreenShareEnabled;
-  const endTimeRef = useRef3(null);
-  const [remaining, setRemaining] = useState6(null);
-  useEffect6(() => {
-    if (maxCallDuration === null || endTimeRef.current !== null)
-      return;
-    endTimeRef.current = Date.now() + maxCallDuration * 1000;
-    const tick = () => {
-      const secs = Math.ceil((endTimeRef.current - Date.now()) / 1000);
-      setRemaining(Math.max(secs, 0));
-    };
-    tick();
-    const id = setInterval(tick, 1000);
-    return () => clearInterval(id);
-  }, [maxCallDuration]);
-  const toggleMute = useCallback7(async () => {
-    try {
-      await localParticipant.setMicrophoneEnabled(isMuted);
-    } catch (e) {
-      console.error("Failed to toggle microphone:", e);
-    }
-  }, [localParticipant, isMuted]);
-  const toggleScreenShare = useCallback7(async () => {
-    try {
-      await localParticipant.setScreenShareEnabled(!isScreenSharing, {
-        video: { displaySurface: "browser" },
-        resolution: ScreenSharePresets2.h720fps30.resolution,
-        contentHint: "detail"
-      });
-    } catch (e) {
-      console.error("Failed to toggle screen share:", e);
-    }
-  }, [localParticipant, isScreenSharing]);
-  useEffect6(() => {
-    toggleMute().then(() => toggleScreenShare());
-  }, []);
-  return /* @__PURE__ */ jsxs5("div", {
+  const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
+  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__ */ jsx7(SessionWarningBanner, {
-        remaining
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "skippr:flex skippr:items-center skippr:justify-between skippr:border-b skippr:px-4 skippr:py-3",
+      /* @__PURE__ */ jsxs8("div", {
+        className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsxs5("div", {
-            className: "skippr:flex skippr:items-center skippr:gap-2",
-            children: [
-              /* @__PURE__ */ jsx7(Tooltip, {
-                label: isMuted ? "Unmute" : "Mute",
-                children: /* @__PURE__ */ jsx7(Button, {
-                  size: "icon-sm",
-                  variant: isMuted ? "destructive" : "outline",
-                  onClick: toggleMute,
-                  "aria-label": isMuted ? "Unmute" : "Mute",
-                  children: isMuted ? /* @__PURE__ */ jsx7(MicOff, {
-                    className: "skippr:size-4"
-                  }) : /* @__PURE__ */ jsx7(Mic, {
-                    className: "skippr:size-4"
-                  })
-                })
-              }),
-              /* @__PURE__ */ jsx7(Tooltip, {
-                label: isScreenSharing ? "Stop sharing" : "Share screen",
-                children: /* @__PURE__ */ jsx7(Button, {
-                  size: "icon-sm",
-                  variant: isScreenSharing ? "outline" : "destructive",
-                  onClick: toggleScreenShare,
-                  "aria-label": isScreenSharing ? "Stop sharing" : "Share screen",
-                  children: isScreenSharing ? /* @__PURE__ */ jsx7(MonitorOff, {
-                    className: "skippr:size-4"
-                  }) : /* @__PURE__ */ jsx7(Monitor, {
-                    className: "skippr:size-4"
-                  })
-                })
-              })
-            ]
+          /* @__PURE__ */ jsx9("button", {
+            type: "button",
+            onClick: toggleMute,
+            "aria-label": isMuted ? "Unmute" : "Mute",
+            className: cn(CONTROL_BUTTON, 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, {
+              className: "skippr:size-5"
+            })
           }),
-          remaining !== null && /* @__PURE__ */ jsx7("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__ */ jsx9("button", {
+            type: "button",
+            onClick: toggleScreenShare,
+            "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
+            className: cn(CONTROL_BUTTON, 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, {
+              className: "skippr:size-5"
+            })
           }),
-          /* @__PURE__ */ jsx7(Tooltip, {
-            label: "End session",
-            children: /* @__PURE__ */ jsx7(Button, {
-              size: "icon-sm",
-              variant: "destructive",
-              onClick: onHangUp,
-              "aria-label": "Hang up",
-              children: /* @__PURE__ */ jsx7(PhoneOff, {
-                className: "skippr:size-4"
-              })
+          /* @__PURE__ */ jsx9("button", {
+            type: "button",
+            onClick: onHangUp,
+            "aria-label": "End session",
+            className: cn(CONTROL_BUTTON, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
+            children: /* @__PURE__ */ jsx9(PhoneOff, {
+              className: "skippr:size-5"
             })
           })
         ]
+      }),
+      /* @__PURE__ */ jsx9("p", {
+        className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
+        children: "Powered by Skippr"
       })
     ]
   });
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect7, useRef as useRef4 } from "react";
+import { useEffect as useEffect10, useRef as useRef5 } from "react";
 
 // src/components/ChatInput.tsx
-import { useState as useState7 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function ChatInput({ sendChatMessage, isSendingChat }) {
+import { useEffect as useEffect9, useRef as useRef4, useState as useState7 } 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] = useState7("");
+  const textareaRef = useRef4(null);
   const canSend = inputText.trim().length > 0 && !isSendingChat;
+  useEffect9(() => {
+    if (autoFocus)
+      textareaRef.current?.focus();
+  }, [autoFocus]);
+  function resizeTextarea() {
+    const el = textareaRef.current;
+    if (!el)
+      return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, MAX_INPUT_HEIGHT)}px`;
+  }
+  function handleChange(e) {
+    setInputText(e.target.value);
+    resizeTextarea();
+  }
   function handleSubmit(e) {
     e.preventDefault();
     const text = inputText.trim();
     if (!text || isSendingChat)
       return;
     setInputText("");
+    resizeTextarea();
     sendChatMessage(text).catch(() => setInputText(text));
+    textareaRef.current?.focus();
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
   }
-  return /* @__PURE__ */ jsxs6("form", {
+  return /* @__PURE__ */ jsx10("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__ */ jsx8("input", {
-        type: "text",
-        value: inputText,
-        onChange: (e) => setInputText(e.target.value),
-        placeholder: "Type a message...",
-        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__ */ jsx8("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__ */ jsx8(SendHorizontal, {
-          className: "skippr:size-4"
+    className: "skippr:border-t skippr:border-border skippr:p-3",
+    children: /* @__PURE__ */ jsxs9("div", {
+      className: "skippr:flex skippr:items-center skippr:gap-2 skippr:rounded-xl skippr:bg-background skippr:ring-1 skippr:ring-foreground/10 skippr:px-3 skippr:py-2",
+      children: [
+        /* @__PURE__ */ jsx10("textarea", {
+          ref: textareaRef,
+          rows: 1,
+          value: inputText,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder: "Type a message...",
+          className: "skippr:flex-1 skippr:resize-none skippr:overflow-y-auto skippr:bg-transparent skippr:text-sm skippr:leading-5 skippr:text-foreground skippr:placeholder:text-muted-foreground skippr:outline-none",
+          style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
+        }),
+        /* @__PURE__ */ jsx10("button", {
+          type: "submit",
+          disabled: !canSend,
+          "aria-label": "Send message",
+          className: cn("skippr:flex skippr:size-8 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:transition-colors", canSend ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-muted-foreground/20 skippr:text-muted-foreground/60"),
+          children: /* @__PURE__ */ jsx10(Send, {
+            className: "skippr:size-3.5"
+          })
         })
-      })
-    ]
+      ]
+    })
   });
 }
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function formatTimestamp(ts) {
+  return new Date(ts).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+}
 function ChatMessage({ message }) {
-  const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx9("div", {
-    className: cn("skippr:flex skippr:w-full skippr:px-4 skippr:py-1", isUser ? "skippr:justify-end" : "skippr:justify-start"),
-    children: /* @__PURE__ */ jsx9("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
-    })
+  const isAgent = message.role === "assistant";
+  return /* @__PURE__ */ jsxs10("div", {
+    className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
+    children: [
+      isAgent && /* @__PURE__ */ jsx11("div", {
+        className: "skippr:mt-0.5 skippr:flex skippr:size-7 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-md skippr:bg-primary",
+        children: /* @__PURE__ */ jsx11(Sparkles, {
+          className: "skippr:size-3.5 skippr:text-primary-foreground"
+        })
+      }),
+      /* @__PURE__ */ jsxs10("div", {
+        className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
+        children: [
+          /* @__PURE__ */ jsx11("div", {
+            className: cn("skippr:rounded-2xl skippr:px-4 skippr:py-2.5 skippr:text-sm skippr:leading-relaxed", isAgent ? "skippr:border skippr:border-border skippr:bg-card skippr:text-foreground" : "skippr:bg-primary skippr:text-primary-foreground"),
+            children: message.content
+          }),
+          message.timestamp && /* @__PURE__ */ jsx11("span", {
+            className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
+            children: formatTimestamp(message.timestamp)
+          })
+        ]
+      })
+    ]
   });
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function TypingIndicator() {
-  return /* @__PURE__ */ jsx10("div", {
-    className: "skippr:flex skippr:items-center skippr:gap-1 skippr:px-4 skippr:py-3",
-    children: /* @__PURE__ */ jsxs7("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__ */ jsx10("span", {
-          className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:0ms]"
-        }),
-        /* @__PURE__ */ jsx10("span", {
-          className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:150ms]"
-        }),
-        /* @__PURE__ */ jsx10("span", {
-          className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:300ms]"
+  return /* @__PURE__ */ jsxs11("div", {
+    className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
+    children: [
+      /* @__PURE__ */ jsx12("div", {
+        className: "skippr:mt-0.5 skippr:flex skippr:size-7 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-md skippr:bg-primary",
+        children: /* @__PURE__ */ jsx12(Sparkles, {
+          className: "skippr:size-3.5 skippr:text-primary-foreground"
         })
-      ]
-    })
+      }),
+      /* @__PURE__ */ jsxs11("div", {
+        className: "skippr:inline-flex skippr:items-center skippr:gap-1 skippr:rounded-2xl skippr:border skippr:border-primary/20 skippr:bg-primary/10 skippr:px-4 skippr:py-2 skippr:text-xs skippr:text-primary",
+        children: [
+          /* @__PURE__ */ jsx12("span", {
+            children: "Agent is analyzing your screen"
+          }),
+          /* @__PURE__ */ jsxs11("span", {
+            className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
+            children: [
+              /* @__PURE__ */ jsx12("span", {
+                className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
+              }),
+              /* @__PURE__ */ jsx12("span", {
+                className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
+              }),
+              /* @__PURE__ */ jsx12("span", {
+                className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
+              })
+            ]
+          })
+        ]
+      })
+    ]
   });
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function MessageList({
   messages,
   isStreaming,
   sendChatMessage,
-  isSendingChat
+  isSendingChat,
+  autoFocus = false
 }) {
-  const scrollRef = useRef4(null);
+  const scrollRef = useRef5(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
-  useEffect7(() => {
+  useEffect10(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs12("div", {
     className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
     children: [
-      /* @__PURE__ */ jsx11("div", {
-        className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto",
-        children: /* @__PURE__ */ jsxs8("div", {
-          className: "skippr:flex skippr:flex-col skippr:gap-1 skippr:py-3",
-          children: [
-            messages.length === 0 && !showTyping && /* @__PURE__ */ jsxs8("div", {
-              className: "skippr:flex skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:py-10 skippr:text-center skippr:px-4",
-              children: [
-                /* @__PURE__ */ jsxs8("div", {
-                  className: "skippr:flex skippr:items-end skippr:justify-center skippr:gap-[3px] skippr:h-5",
-                  children: [
-                    /* @__PURE__ */ jsx11("span", {
-                      className: "skippr:w-[3px] skippr:rounded-full skippr:bg-primary/40 skippr:animate-[skippr-wave_1.2s_ease-in-out_infinite] skippr:h-2"
-                    }),
-                    /* @__PURE__ */ jsx11("span", {
-                      className: "skippr:w-[3px] skippr:rounded-full skippr:bg-primary/40 skippr:animate-[skippr-wave_1.2s_ease-in-out_0.15s_infinite] skippr:h-3"
-                    }),
-                    /* @__PURE__ */ jsx11("span", {
-                      className: "skippr:w-[3px] skippr:rounded-full skippr:bg-primary/40 skippr:animate-[skippr-wave_1.2s_ease-in-out_0.3s_infinite] skippr:h-4"
-                    }),
-                    /* @__PURE__ */ jsx11("span", {
-                      className: "skippr:w-[3px] skippr:rounded-full skippr:bg-primary/40 skippr:animate-[skippr-wave_1.2s_ease-in-out_0.45s_infinite] skippr:h-3"
-                    }),
-                    /* @__PURE__ */ jsx11("span", {
-                      className: "skippr:w-[3px] skippr:rounded-full skippr:bg-primary/40 skippr:animate-[skippr-wave_1.2s_ease-in-out_0.6s_infinite] skippr:h-2"
-                    })
-                  ]
-                }),
-                /* @__PURE__ */ jsx11("p", {
-                  className: "skippr:text-xs skippr:text-muted-foreground",
-                  children: "Agent is getting ready..."
-                })
-              ]
-            }),
-            messages.map((message) => /* @__PURE__ */ jsx11(ChatMessage, {
-              message
-            }, message.id)),
-            showTyping && /* @__PURE__ */ jsx11(TypingIndicator, {}),
-            /* @__PURE__ */ jsx11("div", {
-              ref: scrollRef
-            })
-          ]
-        })
-      }),
-      /* @__PURE__ */ jsx11(ChatInput, {
-        sendChatMessage,
-        isSendingChat
-      })
-    ]
-  });
-}
-
-// src/components/QuickActions.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-function QuickActions({ onStartSession, isStarting, error }) {
-  return /* @__PURE__ */ jsxs9("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__ */ jsx12("p", {
-        className: "skippr:mb-1 skippr:text-sm skippr:text-muted-foreground",
-        children: "How can I help you today?"
-      }),
-      /* @__PURE__ */ jsxs9(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,
+      /* @__PURE__ */ jsxs12("div", {
+        className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
         children: [
-          isStarting ? /* @__PURE__ */ jsx12(LoaderCircle, {
-            className: "skippr:size-4 skippr:animate-spin skippr:text-primary"
-          }) : /* @__PURE__ */ jsx12(MessageCircleQuestionMark, {
-            className: "skippr:size-4 skippr:text-primary"
+          messages.length === 0 && !showTyping && /* @__PURE__ */ jsx13(LoadingDots, {
+            label: "Waiting for conversation to begin..."
           }),
-          isStarting ? "Starting..." : "Start Session"
+          messages.map((message) => /* @__PURE__ */ jsx13(ChatMessage, {
+            message
+          }, message.id)),
+          showTyping && /* @__PURE__ */ jsx13(TypingIndicator, {}),
+          /* @__PURE__ */ jsx13("div", {
+            ref: scrollRef
+          })
         ]
       }),
-      error && /* @__PURE__ */ jsx12("p", {
-        className: "skippr:text-xs skippr:text-destructive",
-        children: error
+      /* @__PURE__ */ jsx13(ChatInput, {
+        sendChatMessage,
+        isSendingChat,
+        autoFocus
       })
     ]
   });
 }
 
 // src/components/SessionAgenda.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-function SessionAgenda({ phases, questions = [] }) {
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function SessionAgenda({ phases }) {
   if (phases.length === 0) {
-    return /* @__PURE__ */ jsxs10("div", {
-      className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
-      children: [
-        /* @__PURE__ */ jsx13("h3", {
-          className: "skippr:text-sm skippr:font-semibold",
-          children: "Agenda"
-        }),
-        /* @__PURE__ */ jsx13("p", {
-          className: "skippr:text-xs skippr:text-muted-foreground",
-          children: "Waiting for session..."
-        })
-      ]
-    });
-  }
-  return /* @__PURE__ */ jsxs10("div", {
-    className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
-    children: [
-      /* @__PURE__ */ jsx13("h3", {
-        className: "skippr:text-sm skippr:font-semibold",
-        children: "Agenda"
-      }),
-      /* @__PURE__ */ jsx13("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__ */ jsxs10("li", {
-            className: "skippr:flex skippr:flex-col skippr:gap-0.5",
-            children: [
-              /* @__PURE__ */ jsxs10("div", {
-                className: "skippr:flex skippr:items-center skippr:gap-2 skippr:text-sm",
-                children: [
-                  /* @__PURE__ */ jsx13(PhaseIcon, {
-                    status: phase.status
-                  }),
-                  /* @__PURE__ */ jsx13("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__ */ jsxs10("span", {
-                className: "skippr:ml-6 skippr:text-xs skippr:text-muted-foreground",
-                children: [
-                  answeredCount,
-                  "/",
-                  totalCount,
-                  " answered"
-                ]
-              })
-            ]
-          }, phase.name);
-        })
-      })
-    ]
-  });
-}
-function PhaseIcon({ status }) {
-  if (status === "completed") {
-    return /* @__PURE__ */ jsx13("div", {
-      className: "skippr:flex skippr:size-4 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-primary",
-      children: /* @__PURE__ */ jsx13(Check, {
-        className: "skippr:size-2.5 skippr:text-primary-foreground",
-        strokeWidth: 3
+    return /* @__PURE__ */ jsx14("div", {
+      className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
+      children: /* @__PURE__ */ jsx14(LoadingDots, {
+        label: "Waiting for agenda to load..."
       })
     });
   }
-  if (status === "active") {
-    return /* @__PURE__ */ jsx13(LoaderCircle, {
-      className: "skippr:size-4 skippr:shrink-0 skippr:text-primary skippr:animate-spin"
-    });
-  }
-  return /* @__PURE__ */ jsx13(Circle, {
-    className: "skippr:size-4 skippr:shrink-0 skippr:text-muted-foreground"
-  });
-}
-
-// src/components/SettingsView.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-function SettingsView({ onBack }) {
-  const { position, setPosition } = useLiveAgent();
-  return /* @__PURE__ */ jsxs11("div", {
-    className: "skippr:flex skippr:flex-1 skippr:flex-col",
-    children: [
-      /* @__PURE__ */ jsxs11("div", {
-        className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-4 skippr:py-3",
-        children: [
-          /* @__PURE__ */ jsx14(Button, {
-            variant: "ghost",
-            size: "icon-xs",
-            onClick: onBack,
-            "aria-label": "Back",
-            children: /* @__PURE__ */ jsx14(ArrowLeft, {
-              className: "skippr:size-4"
-            })
-          }),
-          /* @__PURE__ */ jsx14("p", {
-            className: "skippr:text-sm skippr:font-semibold",
-            children: "Settings"
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx14("div", {
-        className: "skippr:flex-1 skippr:overflow-y-auto skippr:p-4",
-        children: /* @__PURE__ */ jsxs11("div", {
-          className: "skippr:mb-4",
+  return /* @__PURE__ */ jsx14("div", {
+    className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
+    children: /* @__PURE__ */ jsx14("div", {
+      className: "skippr:space-y-1",
+      children: phases.map((phase) => {
+        const isActive = phase.status === "active";
+        const isCompleted = phase.status === "completed";
+        return /* @__PURE__ */ jsxs13("div", {
+          className: cn("skippr:flex skippr:items-start skippr:gap-2.5 skippr:rounded-lg skippr:p-2 skippr:transition-colors", isActive && "skippr:bg-primary/10"),
           children: [
-            /* @__PURE__ */ jsx14("p", {
-              className: "skippr:mb-2 skippr:text-xs skippr:font-medium skippr:uppercase skippr:tracking-wide skippr:text-muted-foreground",
-              children: "Widget Position"
+            /* @__PURE__ */ jsx14("div", {
+              className: "skippr:mt-0.5",
+              children: isCompleted ? /* @__PURE__ */ jsx14(CircleCheck, {
+                className: "skippr:size-4 skippr:text-chart-3"
+              }) : isActive ? /* @__PURE__ */ jsx14(Circle, {
+                className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
+              }) : /* @__PURE__ */ jsx14(Circle, {
+                className: "skippr:size-4 skippr:text-muted-foreground/30"
+              })
             }),
-            /* @__PURE__ */ jsxs11("div", {
-              className: "skippr:flex skippr:gap-2",
+            /* @__PURE__ */ jsxs13("div", {
+              className: "skippr:min-w-0 skippr:flex-1",
               children: [
-                /* @__PURE__ */ jsxs11("button", {
-                  type: "button",
-                  onClick: () => setPosition("left"),
-                  className: cn("skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:gap-2 skippr:rounded-lg skippr:border skippr:p-3 skippr:cursor-pointer skippr:transition-colors", position === "left" ? "skippr:border-primary skippr:bg-primary/5 skippr:text-primary" : "skippr:border-border skippr:text-muted-foreground skippr:hover:border-primary/40"),
-                  children: [
-                    /* @__PURE__ */ jsx14(PanelLeft, {
-                      className: "skippr:size-5"
-                    }),
-                    /* @__PURE__ */ jsx14("span", {
-                      className: "skippr:text-xs skippr:font-medium",
-                      children: "Left"
-                    })
-                  ]
+                /* @__PURE__ */ jsx14("p", {
+                  className: cn("skippr:text-sm", isCompleted && "skippr:text-muted-foreground skippr:line-through", isActive && "skippr:font-medium skippr:text-foreground", phase.status === "pending" && "skippr:text-muted-foreground"),
+                  children: phase.name
                 }),
-                /* @__PURE__ */ jsxs11("button", {
-                  type: "button",
-                  onClick: () => setPosition("right"),
-                  className: cn("skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:gap-2 skippr:rounded-lg skippr:border skippr:p-3 skippr:cursor-pointer skippr:transition-colors", position === "right" ? "skippr:border-primary skippr:bg-primary/5 skippr:text-primary" : "skippr:border-border skippr:text-muted-foreground skippr:hover:border-primary/40"),
-                  children: [
-                    /* @__PURE__ */ jsx14(PanelRight, {
-                      className: "skippr:size-5"
-                    }),
-                    /* @__PURE__ */ jsx14("span", {
-                      className: "skippr:text-xs skippr:font-medium",
-                      children: "Right"
-                    })
-                  ]
+                phase.highlights.length > 0 && /* @__PURE__ */ jsx14("ul", {
+                  className: "skippr:mt-1 skippr:space-y-0.5",
+                  children: phase.highlights.map((text) => /* @__PURE__ */ jsxs13("li", {
+                    className: cn("skippr:flex skippr:items-center skippr:gap-1.5 skippr:text-[11px] skippr:leading-tight", isCompleted ? "skippr:text-muted-foreground/40 skippr:line-through" : "skippr:text-muted-foreground/70"),
+                    children: [
+                      /* @__PURE__ */ jsx14("span", {
+                        className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
+                      }),
+                      text
+                    ]
+                  }, text))
                 })
               ]
             })
           ]
-        })
+        }, phase.name);
+      })
+    })
+  });
+}
+
+// src/components/SessionWarningBanner.tsx
+import { jsx as jsx15 } 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__ */ jsx15("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"
+  });
+}
+
+// src/components/StartSessionPrompt.tsx
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function StartSessionPrompt({
+  onStartSession,
+  isStarting,
+  error,
+  label = "Talk to Skippr"
+}) {
+  return /* @__PURE__ */ jsxs14("div", {
+    className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
+    children: [
+      /* @__PURE__ */ jsx16("button", {
+        type: "button",
+        onClick: onStartSession,
+        disabled: isStarting,
+        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",
+        children: isStarting ? "Starting..." : label
+      }),
+      error && /* @__PURE__ */ jsx16("p", {
+        className: "skippr:text-xs skippr:text-destructive",
+        children: error
       })
     ]
   });
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx15, jsxs as jsxs12, Fragment as Fragment2 } from "react/jsx-runtime";
-function Sidebar() {
+import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment2 } from "react/jsx-runtime";
+function Sidebar({
+  hideControls = false,
+  hideHeader = false,
+  startSessionLabel = "Talk to Skippr"
+}) {
   const {
     variant,
     isConnected,
@@ -1825,12 +1836,14 @@ function Sidebar() {
     authError,
     requestOtp,
     verifyOtp,
-    isAuthSubmitting
+    isAuthSubmitting,
+    sidebarTab: activeTab,
+    setSidebarTab: setActiveTab,
+    autoFocusChat
   } = useLiveAgent();
-  const [view, setView] = useState8("main");
   const isFloating = variant === "floating";
   const isSidebar = variant === "sidebar";
-  useEffect8(() => {
+  useEffect11(() => {
     if (!isSidebar)
       return;
     const prop = position === "right" ? "marginRight" : "marginLeft";
@@ -1844,105 +1857,160 @@ function Sidebar() {
       document.body.style.transition = "";
     };
   }, [isSidebar, isPanelOpen, position]);
-  return /* @__PURE__ */ jsx15("div", {
-    className: cn("skippr:fixed skippr:z-[9999]", "skippr:bg-background skippr:border skippr:border-border", "skippr:flex skippr:flex-col", "skippr:overflow-hidden", isFloating && "skippr:bottom-4 skippr:min-h-[28rem] skippr:max-h-[calc(100vh-6rem)] skippr:rounded-2xl skippr:shadow-2xl", isFloating && (position === "right" ? "skippr:right-4" : "skippr:left-4"), isFloating && "skippr:transition-[opacity,transform] skippr:duration-300 skippr:ease-in-out", isFloating && (position === "right" ? "skippr:origin-bottom-right" : "skippr:origin-bottom-left"), isFloating && !isPanelOpen && "skippr:scale-0 skippr:opacity-0 skippr:pointer-events-none", isFloating && isPanelOpen && "skippr:scale-100 skippr:opacity-100", isSidebar && "skippr:top-0 skippr:h-full", isSidebar && "skippr:transition-[width] skippr:duration-300 skippr:ease-in-out", isSidebar && position === "right" && "skippr:right-0 skippr:border-l skippr:border-l-border", isSidebar && position === "left" && "skippr:left-0 skippr:border-r skippr:border-r-border", isSidebar && !isPanelOpen && "skippr:w-0 skippr:border-0"),
+  return /* @__PURE__ */ jsxs15("div", {
+    className: cn("skippr:fixed skippr:z-[9999]", "skippr:bg-card", "skippr:flex skippr:flex-col", "skippr:overflow-hidden", isFloating && "skippr:border skippr:border-border skippr:bottom-[88px] skippr:h-[calc(100vh-112px)] skippr:rounded-2xl skippr:shadow-[0_8px_30px_rgba(0,0,0,0.16),0_4px_12px_rgba(0,0,0,0.08)]", isFloating && (position === "right" ? "skippr:right-6" : "skippr:left-6"), isFloating && "skippr:transition-[opacity,transform] skippr:duration-300 skippr:ease-in-out", isFloating && (position === "right" ? "skippr:origin-bottom-right" : "skippr:origin-bottom-left"), isFloating && !isPanelOpen && "skippr:scale-0 skippr:opacity-0 skippr:pointer-events-none", isFloating && isPanelOpen && "skippr:scale-100 skippr:opacity-100", isSidebar && "skippr:top-0 skippr:h-full", isSidebar && "skippr:transition-[width] skippr:duration-300 skippr:ease-in-out", isSidebar && position === "right" && "skippr:right-0 skippr:border-l skippr:border-l-border", isSidebar && position === "left" && "skippr:left-0 skippr:border-r skippr:border-r-border", isSidebar && !isPanelOpen && "skippr:w-0 skippr:border-0"),
     style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
-    children: view === "settings" ? /* @__PURE__ */ jsx15(SettingsView, {
-      onBack: () => setView("main")
-    }) : /* @__PURE__ */ jsxs12(Fragment2, {
-      children: [
-        /* @__PURE__ */ jsx15(ChatHeader, {
-          onOpenSettings: () => setView("settings")
-        }),
-        isConnected ? /* @__PURE__ */ jsx15(ConnectedContent, {
-          onDisconnect: disconnect
-        }) : isValidating ? /* @__PURE__ */ jsx15("div", {
-          className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-          children: /* @__PURE__ */ jsx15("p", {
-            className: "skippr:text-sm skippr:text-muted-foreground",
-            children: "Loading..."
-          })
-        }) : isAuthenticated ? /* @__PURE__ */ jsx15(QuickActions, {
-          onStartSession: startSession,
-          isStarting,
-          error
-        }) : /* @__PURE__ */ jsx15(LoginFlow, {
-          requestOtp,
-          verifyOtp,
-          error: authError,
-          isSubmitting: isAuthSubmitting
+    children: [
+      !hideHeader && /* @__PURE__ */ jsx17(ChatHeader, {}),
+      !isAuthenticated && isValidating ? /* @__PURE__ */ jsx17("div", {
+        className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
+        children: /* @__PURE__ */ jsx17(LoadingDots, {
+          label: "Loading..."
         })
-      ]
-    })
+      }) : !isAuthenticated ? /* @__PURE__ */ jsx17(LoginFlow, {
+        requestOtp,
+        verifyOtp,
+        error: authError,
+        isSubmitting: isAuthSubmitting
+      }) : /* @__PURE__ */ jsx17(AuthenticatedContent, {
+        isConnected,
+        onStartSession: startSession,
+        onDisconnect: disconnect,
+        isStarting,
+        error,
+        activeTab,
+        onTabChange: setActiveTab,
+        hideControls,
+        startSessionLabel,
+        autoFocusChat
+      })
+    ]
   });
 }
-function ConnectedContent({ onDisconnect }) {
-  const connectionState = useConnectionState();
-  const isConnected = connectionState === ConnectionState.Connected;
-  const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
-  const { phases } = usePhaseUpdates();
-  const { questions } = useQuestionUpdates();
-  if (!isConnected) {
-    return /* @__PURE__ */ jsx15("div", {
-      className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-      children: /* @__PURE__ */ jsx15("p", {
-        className: "skippr:text-sm skippr:text-muted-foreground",
-        children: "Connecting..."
-      })
-    });
-  }
-  const isAgentSpeaking = agentState === "speaking";
-  return /* @__PURE__ */ jsxs12(Fragment2, {
+function AuthenticatedContent({
+  isConnected,
+  onStartSession,
+  onDisconnect,
+  isStarting,
+  error,
+  activeTab,
+  onTabChange,
+  hideControls,
+  startSessionLabel,
+  autoFocusChat
+}) {
+  return /* @__PURE__ */ jsxs15(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx15(MeetingControls, {
-        onHangUp: onDisconnect
-      }),
-      /* @__PURE__ */ jsxs12("div", {
-        className: "skippr:flex skippr:min-h-0 skippr:flex-1",
+      isConnected && /* @__PURE__ */ jsx17(ConnectedBanner, {}),
+      /* @__PURE__ */ jsxs15("div", {
+        className: "skippr:flex skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
         children: [
-          /* @__PURE__ */ jsx15("div", {
-            className: "skippr:w-[180px] skippr:shrink-0 skippr:overflow-y-auto skippr:border-r",
-            children: /* @__PURE__ */ jsx15(SessionAgenda, {
-              phases,
-              questions
-            })
+          /* @__PURE__ */ jsxs15("button", {
+            type: "button",
+            className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "chat" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
+            onClick: () => onTabChange("chat"),
+            children: [
+              /* @__PURE__ */ jsx17(MessageCircle, {
+                className: "skippr:size-3.5"
+              }),
+              "Chat",
+              activeTab === "chat" && /* @__PURE__ */ jsx17("span", {
+                className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
+              })
+            ]
           }),
-          /* @__PURE__ */ jsx15("div", {
-            className: "skippr:flex skippr:min-w-0 skippr:flex-1 skippr:flex-col",
-            children: /* @__PURE__ */ jsx15(MessageList, {
-              messages: allMessages,
-              isStreaming: isAgentSpeaking,
-              sendChatMessage,
-              isSendingChat
-            })
+          /* @__PURE__ */ jsxs15("button", {
+            type: "button",
+            className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "agenda" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
+            onClick: () => onTabChange("agenda"),
+            children: [
+              /* @__PURE__ */ jsx17(Calendar, {
+                className: "skippr:size-3.5"
+              }),
+              "Agenda",
+              activeTab === "agenda" && /* @__PURE__ */ jsx17("span", {
+                className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
+              })
+            ]
           })
         ]
+      }),
+      /* @__PURE__ */ jsx17("div", {
+        className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
+        children: isConnected ? /* @__PURE__ */ jsx17(ConnectedBody, {
+          activeTab,
+          autoFocusChat
+        }) : /* @__PURE__ */ jsx17("div", {
+          className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
+          children: /* @__PURE__ */ jsx17(StartSessionPrompt, {
+            onStartSession,
+            isStarting,
+            error,
+            label: startSessionLabel
+          })
+        }, `${activeTab}-empty`)
+      }),
+      isConnected && !hideControls && /* @__PURE__ */ jsx17(MeetingControls, {
+        onHangUp: onDisconnect
       })
     ]
   });
 }
+function ConnectedBanner() {
+  const remaining = useSessionRemaining();
+  return /* @__PURE__ */ jsx17(SessionWarningBanner, {
+    remaining
+  });
+}
+function ConnectedBody({
+  activeTab,
+  autoFocusChat
+}) {
+  const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
+  const { phases } = usePhaseUpdates();
+  if (activeTab === "agenda") {
+    return /* @__PURE__ */ jsx17("div", {
+      className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
+      children: /* @__PURE__ */ jsx17(SessionAgenda, {
+        phases
+      })
+    }, "agenda");
+  }
+  return /* @__PURE__ */ jsx17("div", {
+    className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
+    children: /* @__PURE__ */ jsx17(MessageList, {
+      messages: allMessages,
+      isStreaming: agentState === "speaking",
+      sendChatMessage,
+      isSendingChat,
+      autoFocus: autoFocusChat
+    })
+  }, "chat");
+}
 
 // src/components/SidebarTrigger.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function SidebarTrigger() {
-  const { isPanelOpen, togglePanel, position, isMinimized } = useLiveAgent();
+  const { isPanelOpen, togglePanel, minimizePanel, minimizable, position, isMinimized } = useLiveAgent();
   if (isMinimized)
     return null;
-  return /* @__PURE__ */ jsx16(Button, {
-    size: "icon-lg",
-    onClick: togglePanel,
-    className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9998] skippr:size-14 skippr:rounded-full skippr:shadow-lg skippr:transition-all skippr:duration-300", position === "right" ? "skippr:right-6" : "skippr:left-6"),
-    title: isPanelOpen ? "Close chat" : "Chat with us",
-    children: isPanelOpen ? /* @__PURE__ */ jsx16(X, {
-      className: "skippr:size-6"
-    }) : /* @__PURE__ */ jsx16(MessageCircle, {
-      className: "skippr:size-6"
+  const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
+  return /* @__PURE__ */ jsx18("button", {
+    type: "button",
+    onClick: handleClick,
+    title: isPanelOpen ? "Close chat" : "Open chat",
+    "aria-label": isPanelOpen ? "Close chat" : "Open chat",
+    className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9998]", "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:rounded-[14px] skippr:bg-bubble skippr:text-white", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all", "skippr:cursor-pointer skippr:hover:brightness-110 skippr:hover:-translate-y-0.5 skippr:active:translate-y-0", position === "right" ? "skippr:right-6" : "skippr:left-6"),
+    children: isPanelOpen ? /* @__PURE__ */ jsx18(ChevronDown, {
+      className: "skippr:size-5"
+    }) : /* @__PURE__ */ jsx18(Logo, {
+      className: "skippr:size-7"
     })
   });
 }
 
 // src/components/LiveAgent.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function LiveAgent({
   agentId,
   authToken: authTokenProp,
@@ -1953,21 +2021,36 @@ function LiveAgent({
   minimizable = true,
   defaultOpen = false,
   welcomeMessage,
+  hideControls = false,
+  hideHeader = false,
+  startSessionLabel = "Talk to Skippr",
+  autoFocusChat = true,
+  showObservingBanner = true,
   children
 }) {
   const auth = useAuth({ appKey });
   const effectiveAuthToken = authTokenProp || auth.authToken || undefined;
-  const { connection, shouldConnect, isStarting, error, errorCode, startSession, disconnect } = useSession({
+  const {
+    connection,
+    shouldConnect,
+    isStarting,
+    error,
+    errorCode,
+    startSession,
+    disconnect,
+    pendingScreenStream
+  } = useSession({
     agentId,
     authToken: effectiveAuthToken,
     appKey,
     userToken
   });
-  const [isPanelOpen, setIsPanelOpen] = useState9(defaultOpen);
-  const [isMinimized, setIsMinimized] = useState9(minimizable && !defaultOpen);
-  const [welcomeDismissed, setWelcomeDismissed] = useState9(false);
-  const dismissWelcome = useCallback8(() => setWelcomeDismissed(true), []);
-  const [currentPosition, setCurrentPosition] = useState9(() => {
+  const [isPanelOpen, setIsPanelOpen] = useState8(defaultOpen);
+  const [isMinimized, setIsMinimized] = useState8(minimizable && !defaultOpen);
+  const [sidebarTab, setSidebarTab] = useState8("agenda");
+  const [welcomeDismissed, setWelcomeDismissed] = useState8(false);
+  const dismissWelcome = useCallback6(() => setWelcomeDismissed(true), []);
+  const [currentPosition, setCurrentPosition] = useState8(() => {
     try {
       const saved = localStorage.getItem("skippr_widget_position");
       if (saved === "left" || saved === "right")
@@ -1975,20 +2058,20 @@ function LiveAgent({
     } catch {}
     return position;
   });
-  const setPositionWithPersist = useCallback8((pos) => {
+  const setPositionWithPersist = useCallback6((pos) => {
     setCurrentPosition(pos);
     try {
       localStorage.setItem("skippr_widget_position", pos);
     } catch {}
   }, []);
-  const openPanel = useCallback8(() => setIsPanelOpen(true), []);
-  const closePanel = useCallback8(() => setIsPanelOpen(false), []);
-  const togglePanel = useCallback8(() => setIsPanelOpen((prev) => !prev), []);
-  const expandPanel = useCallback8(() => {
+  const openPanel = useCallback6(() => setIsPanelOpen(true), []);
+  const closePanel = useCallback6(() => setIsPanelOpen(false), []);
+  const togglePanel = useCallback6(() => setIsPanelOpen((prev) => !prev), []);
+  const expandPanel = useCallback6(() => {
     setIsMinimized(false);
     setIsPanelOpen(true);
   }, []);
-  const minimizePanel = useCallback8(() => {
+  const minimizePanel = useCallback6(() => {
     if (!minimizable)
       return;
     setIsMinimized(true);
@@ -1996,8 +2079,8 @@ function LiveAgent({
   }, [minimizable]);
   const isConnected = connection !== null;
   const isAuthenticated = !!userToken || !!authTokenProp || auth.isAuthenticated;
-  const prevConnectionRef = useRef5(connection);
-  useEffect9(() => {
+  const prevConnectionRef = useRef6(connection);
+  useEffect12(() => {
     const connectionChanged = prevConnectionRef.current !== connection;
     prevConnectionRef.current = connection;
     if (connectionChanged && minimizable) {
@@ -2031,7 +2114,10 @@ function LiveAgent({
     requestOtp: auth.requestOtp,
     verifyOtp: auth.verifyOtp,
     logoutAuth: auth.logout,
-    isAuthSubmitting: auth.isSubmitting
+    isAuthSubmitting: auth.isSubmitting,
+    sidebarTab,
+    setSidebarTab,
+    autoFocusChat
   }), [
     connection,
     shouldConnect,
@@ -2058,31 +2144,54 @@ function LiveAgent({
     auth.requestOtp,
     auth.verifyOtp,
     auth.logout,
-    auth.isSubmitting
+    auth.isSubmitting,
+    sidebarTab,
+    autoFocusChat
   ]);
-  return /* @__PURE__ */ jsx17(LiveAgentContext.Provider, {
+  return /* @__PURE__ */ jsx19(LiveAgentContext.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsxs13(LiveKitRoom, {
+    children: /* @__PURE__ */ jsxs16(LiveKitRoom, {
       serverUrl: connection?.livekitUrl,
       token: connection?.token,
       connect: shouldConnect,
       audio: true,
       onDisconnected: disconnect,
       children: [
-        connection && /* @__PURE__ */ jsx17(RoomAudioRenderer, {}),
-        isMinimized && /* @__PURE__ */ jsx17(MinimizedBubble, {
+        connection && /* @__PURE__ */ jsx19(RoomAudioRenderer, {}),
+        showObservingBanner && /* @__PURE__ */ jsx19(ObservingBanner, {}),
+        connection && /* @__PURE__ */ jsx19(AutoStartMedia, {
+          pendingScreenStream
+        }),
+        isMinimized && /* @__PURE__ */ jsx19(MinimizedBubble, {
           welcomeMessage,
           welcomeDismissed,
           onDismissWelcome: dismissWelcome
         }),
-        /* @__PURE__ */ jsx17(SidebarTrigger, {}),
-        /* @__PURE__ */ jsx17(Sidebar, {}),
+        /* @__PURE__ */ jsx19(SidebarTrigger, {}),
+        /* @__PURE__ */ jsx19(Sidebar, {
+          hideControls,
+          hideHeader,
+          startSessionLabel
+        }),
         children
       ]
     })
   });
 }
+// src/hooks/useIsLocalSpeaking.ts
+import { useIsSpeaking, useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react";
+function useIsLocalSpeaking() {
+  const { localParticipant } = useLocalParticipant5();
+  return useIsSpeaking(localParticipant);
+}
 export {
+  useMediaControls,
   useLiveAgent,
+  useIsLocalSpeaking,
+  useElapsedSeconds,
+  useAgentVoiceState,
+  parseNumber,
+  formatTime,
+  SCREEN_SHARE_OPTIONS,
   LiveAgent
 };