@skippr/live-agent-sdk 0.25.0 → 0.27.0

package/dist/esm/lib-exports.js

@@ -283,36 +283,6 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     pendingScreenStream
   };
 }
-
-// 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";
 
@@ -542,9 +512,6 @@ var __iconNode16 = [
   ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ];
 var Send = createLucideIcon("send", __iconNode16);
-// src/components/MinimizedBubble.tsx
-import { useEffect as useEffect4 } from "react";
-
 // src/hooks/useAgentVoiceState.ts
 import { useVoiceAssistant } from "@livekit/components-react";
 function useAgentVoiceState() {
@@ -568,7 +535,7 @@ function useLiveAgent() {
 }
 
 // src/hooks/useMediaControls.ts
-import { useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react";
+import { useLocalParticipant } from "@livekit/components-react";
 import { ScreenSharePresets } from "livekit-client";
 import { useCallback as useCallback3 } from "react";
 var SCREEN_SHARE_OPTIONS = {
@@ -577,7 +544,7 @@ var SCREEN_SHARE_OPTIONS = {
   contentHint: "detail"
 };
 function useMediaControls() {
-  const { localParticipant } = useLocalParticipant2();
+  const { localParticipant } = useLocalParticipant();
   const isMuted = !localParticipant.isMicrophoneEnabled;
   const isScreenSharing = localParticipant.isScreenShareEnabled;
   const toggleMute = useCallback3(async () => {
@@ -597,11 +564,155 @@ function useMediaControls() {
   return { isMuted, toggleMute, isScreenSharing, toggleScreenShare };
 }
 
-// src/assets/logo-icon.png
-var logo_icon_default = "./logo-icon-cn8fyke6.png";
+// src/components/AgentStateBanner.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function AgentStateBanner() {
+  const { isConnected } = useLiveAgent();
+  const { isScreenSharing } = useMediaControls();
+  const { state } = useAgentVoiceState();
+  if (!isConnected)
+    return null;
+  return /* @__PURE__ */ jsx("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__ */ jsx("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__ */ jsx(BannerContent, {
+        state,
+        isScreenSharing
+      })
+    })
+  });
+}
+function BannerContent({
+  state,
+  isScreenSharing
+}) {
+  if (state === "speaking") {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(SpeakingBars, {}),
+        /* @__PURE__ */ jsx("span", {
+          children: "Skippr is talking"
+        })
+      ]
+    });
+  }
+  if (state === "thinking") {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(ThinkingDots, {}),
+        /* @__PURE__ */ jsx("span", {
+          children: "Skippr is thinking"
+        })
+      ]
+    });
+  }
+  if (state === "listening" && isScreenSharing) {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(ObservingDot, {}),
+        /* @__PURE__ */ jsx(Eye, {
+          className: "skippr:size-3.5"
+        }),
+        /* @__PURE__ */ jsx("span", {
+          children: "Skippr is observing this page"
+        })
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(ObservingDot, {}),
+      /* @__PURE__ */ jsx("span", {
+        children: "Skippr is connected"
+      })
+    ]
+  });
+}
+function ObservingDot() {
+  return /* @__PURE__ */ jsxs("span", {
+    className: "skippr:relative skippr:flex skippr:size-1.5",
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:absolute skippr:inline-flex skippr:size-full skippr:animate-ping skippr:rounded-full skippr:bg-emerald-400 skippr:opacity-75"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-emerald-400"
+      })
+    ]
+  });
+}
+function ThinkingDots() {
+  return /* @__PURE__ */ jsxs("span", {
+    className: "skippr:flex skippr:items-center skippr:gap-[3px]",
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:0ms]"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:150ms]"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:300ms]"
+      })
+    ]
+  });
+}
+function SpeakingBars() {
+  return /* @__PURE__ */ jsxs("span", {
+    className: "skippr:flex skippr:items-center skippr:gap-[2px] skippr:h-3.5",
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_infinite] skippr:h-1.5"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.15s_infinite] skippr:h-3"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.3s_infinite] skippr:h-2"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.45s_infinite] skippr:h-3.5"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "skippr:w-[2px] skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.6s_infinite] skippr:h-1"
+      })
+    ]
+  });
+}
 
-// src/lib/assets.ts
-var LOGO_URL = logo_icon_default;
+// src/components/AutoStartMedia.tsx
+import { useConnectionState, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react";
+import { ConnectionState, Track } from "livekit-client";
+import { useEffect as useEffect3, useRef } from "react";
+function AutoStartMedia({ pendingScreenStream }) {
+  const { localParticipant } = useLocalParticipant2();
+  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;
+}
+
+// src/components/MinimizedBubble.tsx
+import { useEffect as useEffect4 } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -610,19 +721,101 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/components/Logo.tsx
+import { useId } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Logo({ className }) {
+  const reactId = useId().replace(/:/g, "");
+  const clipId = `skippr-logo-clip-${reactId}`;
+  const gradientId = `skippr-logo-gradient-${reactId}`;
+  return /* @__PURE__ */ jsxs2("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__ */ jsxs2("g", {
+        clipPath: `url(#${clipId})`,
+        children: [
+          /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsxs2("defs", {
+        children: [
+          /* @__PURE__ */ jsxs2("linearGradient", {
+            id: gradientId,
+            x1: "18.9237",
+            y1: "16.9997",
+            x2: "11.4129",
+            y2: "14.1904",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx2("stop", {
+                offset: "0.473958",
+                stopColor: "white"
+              }),
+              /* @__PURE__ */ jsx2("stop", {
+                offset: "1",
+                stopColor: "#52FFF9"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx2("clipPath", {
+            id: clipId,
+            children: /* @__PURE__ */ jsx2("rect", {
+              width: "30",
+              height: "30",
+              fill: "white"
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+
 // src/components/ui/tooltip.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } 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__ */ jsxs("span", {
+  return /* @__PURE__ */ jsxs3("span", {
     className: "skippr:relative skippr:inline-flex skippr:group",
     children: [
       children,
-      /* @__PURE__ */ jsx("span", {
+      /* @__PURE__ */ jsx3("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
@@ -632,113 +825,67 @@ function Tooltip({ label, children, position = "top", align = "center" }) {
 }
 
 // src/components/MinimizedBubble.tsx
-import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4, Fragment as Fragment2 } 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:h-5 skippr:items-center skippr:justify-center skippr:gap-[3px]",
-      children: [
-        /* @__PURE__ */ jsx2("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-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-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-4 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.45s_infinite]"
-        }),
-        /* @__PURE__ */ jsx2("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 === "thinking") {
-    return /* @__PURE__ */ jsxs2("div", {
-      className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-[4px]",
-      children: [
-        /* @__PURE__ */ jsx2("span", {
-          className: "skippr:size-1.5 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:0ms]"
-        }),
-        /* @__PURE__ */ jsx2("span", {
-          className: "skippr:size-1.5 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:150ms]"
-        }),
-        /* @__PURE__ */ jsx2("span", {
-          className: "skippr:size-1.5 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:300ms]"
-        })
-      ]
-    });
-  }
-  return /* @__PURE__ */ jsx2("img", {
-    src: LOGO_URL,
-    alt: "Skippr",
-    className: "skippr:size-7"
-  });
-}
 function ConnectedBubbleContent() {
   const { expandPanel, disconnect, position } = useLiveAgent();
-  const { state: agentState } = useAgentVoiceState();
   const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
   const tooltipAlign = position === "right" ? "end" : "start";
-  return /* @__PURE__ */ jsxs2(Fragment, {
+  return /* @__PURE__ */ jsxs4(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx2(Tooltip, {
+      /* @__PURE__ */ jsx4(Tooltip, {
         label: isMuted ? "Unmute" : "Mute",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx2("button", {
+        children: /* @__PURE__ */ jsx4("button", {
           type: "button",
           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__ */ jsx2(MicOff, {
+          children: isMuted ? /* @__PURE__ */ jsx4(MicOff, {
             className: "skippr:size-5"
-          }) : /* @__PURE__ */ jsx2(Mic, {
+          }) : /* @__PURE__ */ jsx4(Mic, {
             className: "skippr:size-5"
           })
         })
       }),
-      /* @__PURE__ */ jsx2(Tooltip, {
+      /* @__PURE__ */ jsx4(Tooltip, {
         label: isScreenSharing ? "Stop sharing" : "Share screen",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx2("button", {
+        children: /* @__PURE__ */ jsx4("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__ */ jsx2(MonitorOff, {
+          children: isScreenSharing ? /* @__PURE__ */ jsx4(MonitorOff, {
             className: "skippr:size-5"
-          }) : /* @__PURE__ */ jsx2(Monitor, {
+          }) : /* @__PURE__ */ jsx4(Monitor, {
             className: "skippr:size-5"
           })
         })
       }),
-      /* @__PURE__ */ jsx2(Tooltip, {
+      /* @__PURE__ */ jsx4(Tooltip, {
         label: "End session",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx2("button", {
+        children: /* @__PURE__ */ jsx4("button", {
           type: "button",
           onClick: () => disconnect(),
           "aria-label": "End session",
           className: cn(BUBBLE_BUTTON, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
-          children: /* @__PURE__ */ jsx2(PhoneOff, {
+          children: /* @__PURE__ */ jsx4(PhoneOff, {
             className: "skippr:size-5"
           })
         })
       }),
-      /* @__PURE__ */ jsx2(Tooltip, {
+      /* @__PURE__ */ jsx4(Tooltip, {
         label: "Open chat & transcript",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx2("button", {
+        children: /* @__PURE__ */ jsx4("button", {
           type: "button",
           onClick: expandPanel,
           "aria-label": "Open chat & transcript",
           className: cn(BUBBLE_BUTTON, "skippr:bg-bubble skippr:hover:brightness-110"),
-          children: /* @__PURE__ */ jsx2(AgentBubbleContent, {
-            agentState
+          children: /* @__PURE__ */ jsx4(Logo, {
+            className: "skippr:size-7"
           })
         })
       })
@@ -748,21 +895,19 @@ function ConnectedBubbleContent() {
 function IdleBubbleContent() {
   const { expandPanel, position } = useLiveAgent();
   const tooltipAlign = position === "right" ? "end" : "start";
-  return /* @__PURE__ */ jsx2(Tooltip, {
+  return /* @__PURE__ */ jsx4(Tooltip, {
     label: "Open Skippr assistant",
     align: tooltipAlign,
-    children: /* @__PURE__ */ jsxs2("button", {
+    children: /* @__PURE__ */ jsxs4("button", {
       type: "button",
       onClick: expandPanel,
       "aria-label": "Skippr assistant",
       className: cn(BUBBLE_BUTTON, "skippr:relative skippr:bg-bubble skippr:hover:brightness-110"),
       children: [
-        /* @__PURE__ */ jsx2("img", {
-          src: LOGO_URL,
-          alt: "Skippr",
+        /* @__PURE__ */ jsx4(Logo, {
           className: "skippr:relative skippr:z-10 skippr:size-7"
         }),
-        /* @__PURE__ */ jsx2("span", {
+        /* @__PURE__ */ jsx4("span", {
           className: "skippr:absolute skippr:-inset-[3px] skippr:animate-pulse skippr:rounded-[17px] skippr:border-2 skippr:border-bubble/50"
         })
       ]
@@ -778,14 +923,14 @@ function WelcomeBubble({
     const timer = setTimeout(onDismiss, 5000);
     return () => clearTimeout(timer);
   }, [onDismiss]);
-  return /* @__PURE__ */ jsxs2("button", {
+  return /* @__PURE__ */ jsxs4("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__ */ jsx4("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]")
       })
     ]
@@ -798,53 +943,19 @@ function MinimizedBubble({
 }) {
   const { isConnected, isStarting, position } = useLiveAgent();
   const inSession = isConnected || isStarting;
-  return /* @__PURE__ */ jsxs2("div", {
+  return /* @__PURE__ */ jsxs4("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 && !inSession && !welcomeDismissed && /* @__PURE__ */ jsx2(WelcomeBubble, {
+      welcomeMessage && !inSession && !welcomeDismissed && /* @__PURE__ */ jsx4(WelcomeBubble, {
         message: welcomeMessage,
         position,
         onDismiss: onDismissWelcome
       }),
-      inSession ? /* @__PURE__ */ jsx2(ConnectedBubbleContent, {}) : /* @__PURE__ */ jsx2(IdleBubbleContent, {})
+      inSession ? /* @__PURE__ */ jsx4(ConnectedBubbleContent, {}) : /* @__PURE__ */ jsx4(IdleBubbleContent, {})
     ]
   });
 }
 
-// src/components/ObservingBanner.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ObservingBanner() {
-  const { isConnected } = useLiveAgent();
-  const { isScreenSharing } = useMediaControls();
-  if (!isConnected || !isScreenSharing)
-    return null;
-  return /* @__PURE__ */ jsx3("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__ */ jsxs3("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__ */ jsxs3("span", {
-          className: "skippr:relative skippr:flex skippr:size-1.5",
-          children: [
-            /* @__PURE__ */ jsx3("span", {
-              className: "skippr:absolute skippr:inline-flex skippr:size-full skippr:animate-ping skippr:rounded-full skippr:bg-emerald-400 skippr:opacity-75"
-            }),
-            /* @__PURE__ */ jsx3("span", {
-              className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-emerald-400"
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsx3(Eye, {
-          className: "skippr:size-3.5"
-        }),
-        /* @__PURE__ */ jsx3("span", {
-          children: "Skippr is observing this page"
-        })
-      ]
-    })
-  });
-}
-
 // src/components/Sidebar.tsx
 import { useEffect as useEffect11 } from "react";
 
@@ -1045,50 +1156,50 @@ function useElapsedSeconds(isRunning) {
 }
 
 // src/components/ChatHeader.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ChatHeader() {
   const { isConnected, minimizePanel, minimizable } = useLiveAgent();
   const elapsed = useElapsedSeconds(isConnected);
-  return /* @__PURE__ */ jsxs4("header", {
+  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__ */ jsx4("p", {
+      /* @__PURE__ */ jsx5("p", {
         className: "skippr:text-sm skippr:font-semibold skippr:text-primary-foreground",
         children: "Skippr"
       }),
-      /* @__PURE__ */ jsxs4("div", {
+      /* @__PURE__ */ jsxs5("div", {
         className: "skippr:flex skippr:items-center skippr:gap-2",
         children: [
-          isConnected && /* @__PURE__ */ jsxs4("div", {
+          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__ */ jsxs4("span", {
+              /* @__PURE__ */ jsxs5("span", {
                 className: "skippr:relative skippr:flex skippr:size-1.5",
                 children: [
-                  /* @__PURE__ */ jsx4("span", {
+                  /* @__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__ */ jsx4("span", {
+                  /* @__PURE__ */ jsx5("span", {
                     className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx4("span", {
+              /* @__PURE__ */ jsx5("span", {
                 className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
                 children: "REC"
               }),
-              /* @__PURE__ */ jsx4("span", {
+              /* @__PURE__ */ jsx5("span", {
                 className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
                 children: formatTime(elapsed)
               })
             ]
           }),
-          minimizable && /* @__PURE__ */ jsx4("button", {
+          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__ */ jsx4(Minimize2, {
+            children: /* @__PURE__ */ jsx5(Minimize2, {
               className: "skippr:size-3.5"
             })
           })
@@ -1099,26 +1210,26 @@ function ChatHeader() {
 }
 
 // src/components/LoadingDots.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function LoadingDots({ label }) {
-  return /* @__PURE__ */ jsxs5("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs5("div", {
+      /* @__PURE__ */ jsxs6("div", {
         className: "skippr:flex skippr:gap-1",
         children: [
-          /* @__PURE__ */ jsx5("span", {
+          /* @__PURE__ */ jsx6("span", {
             className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
           }),
-          /* @__PURE__ */ jsx5("span", {
+          /* @__PURE__ */ jsx6("span", {
             className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
           }),
-          /* @__PURE__ */ jsx5("span", {
+          /* @__PURE__ */ jsx6("span", {
             className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
           })
         ]
       }),
-      /* @__PURE__ */ jsx5("p", {
+      /* @__PURE__ */ jsx6("p", {
         className: "skippr:text-xs skippr:text-muted-foreground",
         children: label
       })
@@ -1131,7 +1242,7 @@ import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef3
 
 // src/components/ui/button.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+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",
@@ -1150,7 +1261,7 @@ var sizeClasses = {
   "icon-lg": "skippr:size-10"
 };
 var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
-  return /* @__PURE__ */ jsx6("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
@@ -1159,7 +1270,7 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
 Button.displayName = "Button";
 
 // src/components/LoginFlow.tsx
-import { jsx as jsx7, jsxs as jsxs6 } 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 }) {
@@ -1180,7 +1291,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
     await requestOtp(email);
   }, [requestOtp, email]);
   if (step === "otp") {
-    return /* @__PURE__ */ jsx7(OtpStep, {
+    return /* @__PURE__ */ jsx8(OtpStep, {
       email,
       onSubmit: handleVerifyOtp,
       onResend: handleResend,
@@ -1189,7 +1300,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
       isSubmitting
     });
   }
-  return /* @__PURE__ */ jsx7(EmailStep, {
+  return /* @__PURE__ */ jsx8(EmailStep, {
     email,
     onEmailChange: setEmail,
     onSubmit: handleRequestOtp,
@@ -1203,30 +1314,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
     if (email.trim())
       onSubmit(email.trim());
   }
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "skippr:mb-4 skippr:text-center",
         children: [
-          /* @__PURE__ */ jsx7(Mail, {
+          /* @__PURE__ */ jsx8(Mail, {
             className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
           }),
-          /* @__PURE__ */ jsx7("p", {
+          /* @__PURE__ */ jsx8("p", {
             className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
             children: "Sign in to continue"
           }),
-          /* @__PURE__ */ jsx7("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__ */ jsxs6("form", {
+      /* @__PURE__ */ jsxs7("form", {
         onSubmit: handleSubmit,
         className: "skippr:flex skippr:flex-col skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx7("input", {
+          /* @__PURE__ */ jsx8("input", {
             type: "email",
             placeholder: "you@example.com",
             value: email,
@@ -1235,15 +1346,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__ */ jsx7(Button, {
+          /* @__PURE__ */ jsx8(Button, {
             type: "submit",
             disabled: isSubmitting || !email.trim(),
             className: "skippr:w-full",
-            children: isSubmitting ? /* @__PURE__ */ jsx7(LoaderCircle, {
+            children: isSubmitting ? /* @__PURE__ */ jsx8(LoaderCircle, {
               className: "skippr:size-4 skippr:animate-spin"
             }) : "Continue"
           }),
-          error && /* @__PURE__ */ jsx7("p", {
+          error && /* @__PURE__ */ jsx8("p", {
             className: "skippr:text-xs skippr:text-center skippr:text-destructive",
             children: error
           })
@@ -1323,22 +1434,22 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
     submittedRef.current = false;
     inputRefs.current[0]?.focus();
   }
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "skippr:mb-4 skippr:text-center",
         children: [
-          /* @__PURE__ */ jsx7("p", {
+          /* @__PURE__ */ jsx8("p", {
             className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
             children: "Enter verification code"
           }),
-          /* @__PURE__ */ jsxs6("p", {
+          /* @__PURE__ */ jsxs7("p", {
             className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
             children: [
               "We sent a 6-digit code to",
               " ",
-              /* @__PURE__ */ jsx7("span", {
+              /* @__PURE__ */ jsx8("span", {
                 className: "skippr:font-medium skippr:text-foreground",
                 children: email
               })
@@ -1346,13 +1457,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs6("form", {
+      /* @__PURE__ */ jsxs7("form", {
         onSubmit: handleSubmit,
         className: "skippr:flex skippr:flex-col skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx7("div", {
+          /* @__PURE__ */ jsx8("div", {
             className: "skippr:flex skippr:justify-center skippr:gap-1.5",
-            children: digits.map((digit, index2) => /* @__PURE__ */ jsx7("input", {
+            children: digits.map((digit, index2) => /* @__PURE__ */ jsx8("input", {
               ref: (el) => {
                 inputRefs.current[index2] = el;
               },
@@ -1367,29 +1478,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__ */ jsx7("p", {
+          error && /* @__PURE__ */ jsx8("p", {
             className: "skippr:text-xs skippr:text-center skippr:text-destructive",
             children: error
           }),
-          /* @__PURE__ */ jsx7(Button, {
+          /* @__PURE__ */ jsx8(Button, {
             type: "submit",
             disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
             className: "skippr:w-full",
-            children: isSubmitting ? /* @__PURE__ */ jsx7(LoaderCircle, {
+            children: isSubmitting ? /* @__PURE__ */ jsx8(LoaderCircle, {
               className: "skippr:size-4 skippr:animate-spin"
             }) : "Verify"
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
             children: [
-              /* @__PURE__ */ jsx7("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__ */ jsx7("button", {
+              /* @__PURE__ */ jsx8("button", {
                 type: "button",
                 onClick: handleResend,
                 disabled: isSubmitting || resendCooldown > 0,
@@ -1405,50 +1516,50 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
 }
 
 // src/components/MeetingControls.tsx
-import { jsx as jsx8, jsxs as jsxs7 } 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 { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
-  return /* @__PURE__ */ jsxs7("div", {
+  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__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx8("button", {
+          /* @__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__ */ jsx8(MicOff, {
+            children: isMuted ? /* @__PURE__ */ jsx9(MicOff, {
               className: "skippr:size-5"
-            }) : /* @__PURE__ */ jsx8(Mic, {
+            }) : /* @__PURE__ */ jsx9(Mic, {
               className: "skippr:size-5"
             })
           }),
-          /* @__PURE__ */ jsx8("button", {
+          /* @__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__ */ jsx8(MonitorOff, {
+            children: isScreenSharing ? /* @__PURE__ */ jsx9(MonitorOff, {
               className: "skippr:size-5"
-            }) : /* @__PURE__ */ jsx8(Monitor, {
+            }) : /* @__PURE__ */ jsx9(Monitor, {
               className: "skippr:size-5"
             })
           }),
-          /* @__PURE__ */ jsx8("button", {
+          /* @__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__ */ jsx8(PhoneOff, {
+            children: /* @__PURE__ */ jsx9(PhoneOff, {
               className: "skippr:size-5"
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsx8("p", {
+      /* @__PURE__ */ jsx9("p", {
         className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
         children: "Powered by Skippr"
       })
@@ -1461,7 +1572,7 @@ import { useEffect as useEffect10, useRef as useRef5 } from "react";
 
 // src/components/ChatInput.tsx
 import { useEffect as useEffect9, useRef as useRef4, useState as useState7 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+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("");
@@ -1498,13 +1609,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
       handleSubmit(e);
     }
   }
-  return /* @__PURE__ */ jsx9("form", {
+  return /* @__PURE__ */ jsx10("form", {
     onSubmit: handleSubmit,
     className: "skippr:border-t skippr:border-border skippr:p-3",
-    children: /* @__PURE__ */ jsxs8("div", {
+    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__ */ jsx9("textarea", {
+        /* @__PURE__ */ jsx10("textarea", {
           ref: textareaRef,
           rows: 1,
           value: inputText,
@@ -1514,12 +1625,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
           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__ */ jsx9("button", {
+        /* @__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__ */ jsx9(Send, {
+          children: /* @__PURE__ */ jsx10(Send, {
             className: "skippr:size-3.5"
           })
         })
@@ -1529,7 +1640,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
 }
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx10, jsxs as jsxs9 } 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",
@@ -1539,23 +1650,23 @@ function formatTimestamp(ts) {
 }
 function ChatMessage({ message }) {
   const isAgent = message.role === "assistant";
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
     children: [
-      isAgent && /* @__PURE__ */ jsx10("div", {
+      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__ */ jsx10(Sparkles, {
+        children: /* @__PURE__ */ jsx11(Sparkles, {
           className: "skippr:size-3.5 skippr:text-primary-foreground"
         })
       }),
-      /* @__PURE__ */ jsxs9("div", {
+      /* @__PURE__ */ jsxs10("div", {
         className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
         children: [
-          /* @__PURE__ */ jsx10("div", {
+          /* @__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__ */ jsx10("span", {
+          message.timestamp && /* @__PURE__ */ jsx11("span", {
             className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
             children: formatTimestamp(message.timestamp)
           })
@@ -1566,33 +1677,33 @@ function ChatMessage({ message }) {
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function TypingIndicator() {
-  return /* @__PURE__ */ jsxs10("div", {
+  return /* @__PURE__ */ jsxs11("div", {
     className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
     children: [
-      /* @__PURE__ */ jsx11("div", {
+      /* @__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__ */ jsx11(Sparkles, {
+        children: /* @__PURE__ */ jsx12(Sparkles, {
           className: "skippr:size-3.5 skippr:text-primary-foreground"
         })
       }),
-      /* @__PURE__ */ jsxs10("div", {
+      /* @__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__ */ jsx11("span", {
+          /* @__PURE__ */ jsx12("span", {
             children: "Agent is analyzing your screen"
           }),
-          /* @__PURE__ */ jsxs10("span", {
+          /* @__PURE__ */ jsxs11("span", {
             className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
             children: [
-              /* @__PURE__ */ jsx11("span", {
+              /* @__PURE__ */ jsx12("span", {
                 className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
               }),
-              /* @__PURE__ */ jsx11("span", {
+              /* @__PURE__ */ jsx12("span", {
                 className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
               }),
-              /* @__PURE__ */ jsx11("span", {
+              /* @__PURE__ */ jsx12("span", {
                 className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
               })
             ]
@@ -1604,7 +1715,7 @@ function TypingIndicator() {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function MessageList({
   messages,
   isStreaming,
@@ -1618,25 +1729,25 @@ function MessageList({
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
-  return /* @__PURE__ */ jsxs11("div", {
+  return /* @__PURE__ */ jsxs12("div", {
     className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
     children: [
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs12("div", {
         className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
         children: [
-          messages.length === 0 && !showTyping && /* @__PURE__ */ jsx12(LoadingDots, {
+          messages.length === 0 && !showTyping && /* @__PURE__ */ jsx13(LoadingDots, {
             label: "Waiting for conversation to begin..."
           }),
-          messages.map((message) => /* @__PURE__ */ jsx12(ChatMessage, {
+          messages.map((message) => /* @__PURE__ */ jsx13(ChatMessage, {
             message
           }, message.id)),
-          showTyping && /* @__PURE__ */ jsx12(TypingIndicator, {}),
-          /* @__PURE__ */ jsx12("div", {
+          showTyping && /* @__PURE__ */ jsx13(TypingIndicator, {}),
+          /* @__PURE__ */ jsx13("div", {
             ref: scrollRef
           })
         ]
       }),
-      /* @__PURE__ */ jsx12(ChatInput, {
+      /* @__PURE__ */ jsx13(ChatInput, {
         sendChatMessage,
         isSendingChat,
         autoFocus
@@ -1646,49 +1757,49 @@ function MessageList({
 }
 
 // src/components/SessionAgenda.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
-function SessionAgenda({ phases }) {
-  if (phases.length === 0) {
-    return /* @__PURE__ */ jsx13("div", {
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function SessionAgenda({ phases, hasStarted }) {
+  if (phases.length === 0 || !hasStarted) {
+    return /* @__PURE__ */ jsx14("div", {
       className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-      children: /* @__PURE__ */ jsx13(LoadingDots, {
+      children: /* @__PURE__ */ jsx14(LoadingDots, {
         label: "Waiting for agenda to load..."
       })
     });
   }
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx14("div", {
     className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
-    children: /* @__PURE__ */ jsx13("div", {
+    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__ */ jsxs12("div", {
+        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__ */ jsx13("div", {
+            /* @__PURE__ */ jsx14("div", {
               className: "skippr:mt-0.5",
-              children: isCompleted ? /* @__PURE__ */ jsx13(CircleCheck, {
+              children: isCompleted ? /* @__PURE__ */ jsx14(CircleCheck, {
                 className: "skippr:size-4 skippr:text-chart-3"
-              }) : isActive ? /* @__PURE__ */ jsx13(Circle, {
+              }) : isActive ? /* @__PURE__ */ jsx14(Circle, {
                 className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
-              }) : /* @__PURE__ */ jsx13(Circle, {
+              }) : /* @__PURE__ */ jsx14(Circle, {
                 className: "skippr:size-4 skippr:text-muted-foreground/30"
               })
             }),
-            /* @__PURE__ */ jsxs12("div", {
+            /* @__PURE__ */ jsxs13("div", {
               className: "skippr:min-w-0 skippr:flex-1",
               children: [
-                /* @__PURE__ */ jsx13("p", {
+                /* @__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
                 }),
-                phase.highlights.length > 0 && /* @__PURE__ */ jsx13("ul", {
+                phase.highlights.length > 0 && /* @__PURE__ */ jsx14("ul", {
                   className: "skippr:mt-1 skippr:space-y-0.5",
-                  children: phase.highlights.map((text) => /* @__PURE__ */ jsxs12("li", {
+                  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__ */ jsx13("span", {
+                      /* @__PURE__ */ jsx14("span", {
                         className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
                       }),
                       text
@@ -1705,12 +1816,12 @@ function SessionAgenda({ phases }) {
 }
 
 // src/components/SessionWarningBanner.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+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__ */ jsx14("div", {
+  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"
@@ -1718,24 +1829,24 @@ function SessionWarningBanner({ remaining }) {
 }
 
 // src/components/StartSessionPrompt.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function StartSessionPrompt({
   onStartSession,
   isStarting,
   error,
   label = "Talk to Skippr"
 }) {
-  return /* @__PURE__ */ jsxs13("div", {
+  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__ */ jsx15("button", {
+      /* @__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__ */ jsx15("p", {
+      error && /* @__PURE__ */ jsx16("p", {
         className: "skippr:text-xs skippr:text-destructive",
         children: error
       })
@@ -1744,7 +1855,7 @@ function StartSessionPrompt({
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx16, jsxs as jsxs14, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment3 } from "react/jsx-runtime";
 function Sidebar({
   hideControls = false,
   hideHeader = false,
@@ -1785,22 +1896,22 @@ function Sidebar({
       document.body.style.transition = "";
     };
   }, [isSidebar, isPanelOpen, position]);
-  return /* @__PURE__ */ jsxs14("div", {
+  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: [
-      !hideHeader && /* @__PURE__ */ jsx16(ChatHeader, {}),
-      !isAuthenticated && isValidating ? /* @__PURE__ */ jsx16("div", {
+      !hideHeader && /* @__PURE__ */ jsx17(ChatHeader, {}),
+      !isAuthenticated && isValidating ? /* @__PURE__ */ jsx17("div", {
         className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-        children: /* @__PURE__ */ jsx16(LoadingDots, {
+        children: /* @__PURE__ */ jsx17(LoadingDots, {
           label: "Loading..."
         })
-      }) : !isAuthenticated ? /* @__PURE__ */ jsx16(LoginFlow, {
+      }) : !isAuthenticated ? /* @__PURE__ */ jsx17(LoginFlow, {
         requestOtp,
         verifyOtp,
         error: authError,
         isSubmitting: isAuthSubmitting
-      }) : /* @__PURE__ */ jsx16(AuthenticatedContent, {
+      }) : /* @__PURE__ */ jsx17(AuthenticatedContent, {
         isConnected,
         onStartSession: startSession,
         onDisconnect: disconnect,
@@ -1827,50 +1938,50 @@ function AuthenticatedContent({
   startSessionLabel,
   autoFocusChat
 }) {
-  return /* @__PURE__ */ jsxs14(Fragment2, {
+  return /* @__PURE__ */ jsxs15(Fragment3, {
     children: [
-      isConnected && /* @__PURE__ */ jsx16(ConnectedBanner, {}),
-      /* @__PURE__ */ jsxs14("div", {
+      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__ */ jsxs14("button", {
+          /* @__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__ */ jsx16(MessageCircle, {
+              /* @__PURE__ */ jsx17(MessageCircle, {
                 className: "skippr:size-3.5"
               }),
               "Chat",
-              activeTab === "chat" && /* @__PURE__ */ jsx16("span", {
+              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__ */ jsxs14("button", {
+          /* @__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__ */ jsx16(Calendar, {
+              /* @__PURE__ */ jsx17(Calendar, {
                 className: "skippr:size-3.5"
               }),
               "Agenda",
-              activeTab === "agenda" && /* @__PURE__ */ jsx16("span", {
+              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__ */ jsx16("div", {
+      /* @__PURE__ */ jsx17("div", {
         className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
-        children: isConnected ? /* @__PURE__ */ jsx16(ConnectedBody, {
+        children: isConnected || isStarting ? /* @__PURE__ */ jsx17(ConnectedBody, {
           activeTab,
           autoFocusChat
-        }) : /* @__PURE__ */ jsx16("div", {
+        }) : /* @__PURE__ */ jsx17("div", {
           className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
-          children: /* @__PURE__ */ jsx16(StartSessionPrompt, {
+          children: /* @__PURE__ */ jsx17(StartSessionPrompt, {
             onStartSession,
             isStarting,
             error,
@@ -1878,7 +1989,7 @@ function AuthenticatedContent({
           })
         }, `${activeTab}-empty`)
       }),
-      isConnected && !hideControls && /* @__PURE__ */ jsx16(MeetingControls, {
+      isConnected && !hideControls && /* @__PURE__ */ jsx17(MeetingControls, {
         onHangUp: onDisconnect
       })
     ]
@@ -1886,7 +1997,7 @@ function AuthenticatedContent({
 }
 function ConnectedBanner() {
   const remaining = useSessionRemaining();
-  return /* @__PURE__ */ jsx16(SessionWarningBanner, {
+  return /* @__PURE__ */ jsx17(SessionWarningBanner, {
     remaining
   });
 }
@@ -1897,16 +2008,17 @@ function ConnectedBody({
   const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
   const { phases } = usePhaseUpdates();
   if (activeTab === "agenda") {
-    return /* @__PURE__ */ jsx16("div", {
+    return /* @__PURE__ */ jsx17("div", {
       className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
-      children: /* @__PURE__ */ jsx16(SessionAgenda, {
-        phases
+      children: /* @__PURE__ */ jsx17(SessionAgenda, {
+        phases,
+        hasStarted: allMessages.length > 0 || agentState === "speaking"
       })
     }, "agenda");
   }
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx17("div", {
     className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
-    children: /* @__PURE__ */ jsx16(MessageList, {
+    children: /* @__PURE__ */ jsx17(MessageList, {
       messages: allMessages,
       isStreaming: agentState === "speaking",
       sendChatMessage,
@@ -1917,30 +2029,28 @@ function ConnectedBody({
 }
 
 // src/components/SidebarTrigger.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function SidebarTrigger() {
   const { isPanelOpen, togglePanel, minimizePanel, minimizable, position, isMinimized } = useLiveAgent();
   if (isMinimized)
     return null;
   const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
-  return /* @__PURE__ */ jsx17("button", {
+  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__ */ jsx17(ChevronDown, {
+    children: isPanelOpen ? /* @__PURE__ */ jsx18(ChevronDown, {
       className: "skippr:size-5"
-    }) : /* @__PURE__ */ jsx17("img", {
-      src: LOGO_URL,
-      alt: "Skippr",
+    }) : /* @__PURE__ */ jsx18(Logo, {
       className: "skippr:size-7"
     })
   });
 }
 
 // src/components/LiveAgent.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function LiveAgent({
   agentId,
   authToken: authTokenProp,
@@ -1955,7 +2065,7 @@ function LiveAgent({
   hideHeader = false,
   startSessionLabel = "Talk to Skippr",
   autoFocusChat = true,
-  showObservingBanner = true,
+  showAgentStateBanner = true,
   children
 }) {
   const auth = useAuth({ appKey });
@@ -2078,27 +2188,27 @@ function LiveAgent({
     sidebarTab,
     autoFocusChat
   ]);
-  return /* @__PURE__ */ jsx18(LiveAgentContext.Provider, {
+  return /* @__PURE__ */ jsx19(LiveAgentContext.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsxs15(LiveKitRoom, {
+    children: /* @__PURE__ */ jsxs16(LiveKitRoom, {
       serverUrl: connection?.livekitUrl,
       token: connection?.token,
       connect: shouldConnect,
       audio: true,
       onDisconnected: disconnect,
       children: [
-        connection && /* @__PURE__ */ jsx18(RoomAudioRenderer, {}),
-        showObservingBanner && /* @__PURE__ */ jsx18(ObservingBanner, {}),
-        connection && /* @__PURE__ */ jsx18(AutoStartMedia, {
+        connection && /* @__PURE__ */ jsx19(RoomAudioRenderer, {}),
+        showAgentStateBanner && /* @__PURE__ */ jsx19(AgentStateBanner, {}),
+        connection && /* @__PURE__ */ jsx19(AutoStartMedia, {
           pendingScreenStream
         }),
-        isMinimized && /* @__PURE__ */ jsx18(MinimizedBubble, {
+        isMinimized && /* @__PURE__ */ jsx19(MinimizedBubble, {
           welcomeMessage,
           welcomeDismissed,
           onDismissWelcome: dismissWelcome
         }),
-        /* @__PURE__ */ jsx18(SidebarTrigger, {}),
-        /* @__PURE__ */ jsx18(Sidebar, {
+        /* @__PURE__ */ jsx19(SidebarTrigger, {}),
+        /* @__PURE__ */ jsx19(Sidebar, {
           hideControls,
           hideHeader,
           startSessionLabel