@skippr/live-agent-sdk 0.26.0 → 0.27.0

package/README.md

@@ -193,7 +193,7 @@ Self-contained widget component. Renders a floating button that opens a sidebar
 | `welcomeMessage` | `string` | — | Message shown on the minimized bubble |
 | `startSessionLabel` | `string` | `'Talk to Skippr'` | Label for the start-session button |
 | `autoFocusChat` | `boolean` | `true` | Whether the chat input auto-focuses when opened |
-| `showObservingBanner` | `boolean` | `true` | Whether to show the "Skippr is observing this page" banner during screen share |
+| `showAgentStateBanner` | `boolean` | `true` | Whether to show the top-pinned status banner (talking / thinking / listening / observing) while connected |
 
 ### `useLiveAgent()`
 
@@ -232,7 +232,7 @@ All hooks must be called within `<LiveAgent>`.
 | Hook | Returns | Description |
 |------|---------|-------------|
 | `useMediaControls()` | `{ isMuted, isScreenSharing, toggleMute, toggleScreenShare }` | Mic and screen share state and toggles |
-| `useAgentVoiceState()` | `{ isSpeaking, isThinking }` | Agent voice activity state |
+| `useAgentVoiceState()` | `{ state, isSpeaking, isListening }` | Agent voice activity state — `state` is the full agent state (`'listening' \| 'thinking' \| 'speaking' \| ...`) |
 | `useIsLocalSpeaking()` | `boolean` | Whether the local user is currently speaking |
 | `useElapsedSeconds(isRunning)` | `number` | Drift-safe elapsed seconds since the flag flipped to `true` |
 

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,6 +564,156 @@ function useMediaControls() {
   return { isMuted, toggleMute, isScreenSharing, toggleScreenShare };
 }
 
+// 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/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";
 import { twMerge } from "tailwind-merge";
@@ -606,12 +723,12 @@ function cn(...inputs) {
 
 // src/components/Logo.tsx
 import { useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+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__ */ jsxs("svg", {
+  return /* @__PURE__ */ jsxs2("svg", {
     width: "1em",
     height: "1em",
     viewBox: "0 0 30 30",
@@ -621,14 +738,14 @@ function Logo({ className }) {
     "aria-label": "Skippr",
     className,
     children: [
-      /* @__PURE__ */ jsxs("g", {
+      /* @__PURE__ */ jsxs2("g", {
         clipPath: `url(#${clipId})`,
         children: [
-          /* @__PURE__ */ jsx("path", {
+          /* @__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__ */ jsx("rect", {
+          /* @__PURE__ */ jsx2("rect", {
             x: "7.83325",
             y: "14.9404",
             width: "12.4083",
@@ -637,11 +754,11 @@ function Logo({ className }) {
             transform: "rotate(-45 7.83325 14.9404)",
             fill: "#52FFF9"
           }),
-          /* @__PURE__ */ jsx("path", {
+          /* @__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__ */ jsx("rect", {
+          /* @__PURE__ */ jsx2("rect", {
             x: "10.1665",
             y: "20.4404",
             width: "12.4083",
@@ -652,9 +769,9 @@ function Logo({ className }) {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs("defs", {
+      /* @__PURE__ */ jsxs2("defs", {
         children: [
-          /* @__PURE__ */ jsxs("linearGradient", {
+          /* @__PURE__ */ jsxs2("linearGradient", {
             id: gradientId,
             x1: "18.9237",
             y1: "16.9997",
@@ -662,19 +779,19 @@ function Logo({ className }) {
             y2: "14.1904",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx("stop", {
+              /* @__PURE__ */ jsx2("stop", {
                 offset: "0.473958",
                 stopColor: "white"
               }),
-              /* @__PURE__ */ jsx("stop", {
+              /* @__PURE__ */ jsx2("stop", {
                 offset: "1",
                 stopColor: "#52FFF9"
               })
             ]
           }),
-          /* @__PURE__ */ jsx("clipPath", {
+          /* @__PURE__ */ jsx2("clipPath", {
             id: clipId,
-            children: /* @__PURE__ */ jsx("rect", {
+            children: /* @__PURE__ */ jsx2("rect", {
               width: "30",
               height: "30",
               fill: "white"
@@ -687,18 +804,18 @@ function Logo({ className }) {
 }
 
 // src/components/ui/tooltip.tsx
-import { jsx as jsx2, jsxs as jsxs2 } 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__ */ jsxs2("span", {
+  return /* @__PURE__ */ jsxs3("span", {
     className: "skippr:relative skippr:inline-flex skippr:group",
     children: [
       children,
-      /* @__PURE__ */ jsx2("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
@@ -708,111 +825,67 @@ function Tooltip({ label, children, position = "top", align = "center" }) {
 }
 
 // src/components/MinimizedBubble.tsx
-import { jsx as jsx3, jsxs as jsxs3, 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__ */ jsxs3("div", {
-      className: "skippr:flex skippr:h-5 skippr:items-center skippr:justify-center skippr:gap-[3px]",
-      children: [
-        /* @__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__ */ 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__ */ 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__ */ 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 === "thinking") {
-    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__ */ jsx3(Logo, {
-    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__ */ jsxs3(Fragment, {
+  return /* @__PURE__ */ jsxs4(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx3(Tooltip, {
+      /* @__PURE__ */ jsx4(Tooltip, {
         label: isMuted ? "Unmute" : "Mute",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx3("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__ */ jsx3(MicOff, {
+          children: isMuted ? /* @__PURE__ */ jsx4(MicOff, {
             className: "skippr:size-5"
-          }) : /* @__PURE__ */ jsx3(Mic, {
+          }) : /* @__PURE__ */ jsx4(Mic, {
             className: "skippr:size-5"
           })
         })
       }),
-      /* @__PURE__ */ jsx3(Tooltip, {
+      /* @__PURE__ */ jsx4(Tooltip, {
         label: isScreenSharing ? "Stop sharing" : "Share screen",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx3("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__ */ jsx3(MonitorOff, {
+          children: isScreenSharing ? /* @__PURE__ */ jsx4(MonitorOff, {
             className: "skippr:size-5"
-          }) : /* @__PURE__ */ jsx3(Monitor, {
+          }) : /* @__PURE__ */ jsx4(Monitor, {
             className: "skippr:size-5"
           })
         })
       }),
-      /* @__PURE__ */ jsx3(Tooltip, {
+      /* @__PURE__ */ jsx4(Tooltip, {
         label: "End session",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx3("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__ */ jsx3(PhoneOff, {
+          children: /* @__PURE__ */ jsx4(PhoneOff, {
             className: "skippr:size-5"
           })
         })
       }),
-      /* @__PURE__ */ jsx3(Tooltip, {
+      /* @__PURE__ */ jsx4(Tooltip, {
         label: "Open chat & transcript",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx3("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__ */ jsx3(AgentBubbleContent, {
-            agentState
+          children: /* @__PURE__ */ jsx4(Logo, {
+            className: "skippr:size-7"
           })
         })
       })
@@ -822,19 +895,19 @@ function ConnectedBubbleContent() {
 function IdleBubbleContent() {
   const { expandPanel, position } = useLiveAgent();
   const tooltipAlign = position === "right" ? "end" : "start";
-  return /* @__PURE__ */ jsx3(Tooltip, {
+  return /* @__PURE__ */ jsx4(Tooltip, {
     label: "Open Skippr assistant",
     align: tooltipAlign,
-    children: /* @__PURE__ */ jsxs3("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__ */ jsx3(Logo, {
+        /* @__PURE__ */ jsx4(Logo, {
           className: "skippr:relative skippr:z-10 skippr:size-7"
         }),
-        /* @__PURE__ */ jsx3("span", {
+        /* @__PURE__ */ jsx4("span", {
           className: "skippr:absolute skippr:-inset-[3px] skippr:animate-pulse skippr:rounded-[17px] skippr:border-2 skippr:border-bubble/50"
         })
       ]
@@ -850,14 +923,14 @@ function WelcomeBubble({
     const timer = setTimeout(onDismiss, 5000);
     return () => clearTimeout(timer);
   }, [onDismiss]);
-  return /* @__PURE__ */ jsxs3("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__ */ jsx3("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]")
       })
     ]
@@ -870,53 +943,19 @@ function MinimizedBubble({
 }) {
   const { isConnected, isStarting, position } = useLiveAgent();
   const inSession = isConnected || isStarting;
-  return /* @__PURE__ */ jsxs3("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__ */ jsx3(WelcomeBubble, {
+      welcomeMessage && !inSession && !welcomeDismissed && /* @__PURE__ */ jsx4(WelcomeBubble, {
         message: welcomeMessage,
         position,
         onDismiss: onDismissWelcome
       }),
-      inSession ? /* @__PURE__ */ jsx3(ConnectedBubbleContent, {}) : /* @__PURE__ */ jsx3(IdleBubbleContent, {})
+      inSession ? /* @__PURE__ */ jsx4(ConnectedBubbleContent, {}) : /* @__PURE__ */ jsx4(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 { useEffect as useEffect11 } from "react";
 
@@ -1719,8 +1758,8 @@ function MessageList({
 
 // src/components/SessionAgenda.tsx
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-function SessionAgenda({ phases }) {
-  if (phases.length === 0) {
+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__ */ jsx14(LoadingDots, {
@@ -1816,7 +1855,7 @@ function StartSessionPrompt({
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx17, jsxs as jsxs15, 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,
@@ -1899,7 +1938,7 @@ function AuthenticatedContent({
   startSessionLabel,
   autoFocusChat
 }) {
-  return /* @__PURE__ */ jsxs15(Fragment2, {
+  return /* @__PURE__ */ jsxs15(Fragment3, {
     children: [
       isConnected && /* @__PURE__ */ jsx17(ConnectedBanner, {}),
       /* @__PURE__ */ jsxs15("div", {
@@ -1937,7 +1976,7 @@ function AuthenticatedContent({
       }),
       /* @__PURE__ */ jsx17("div", {
         className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
-        children: isConnected ? /* @__PURE__ */ jsx17(ConnectedBody, {
+        children: isConnected || isStarting ? /* @__PURE__ */ jsx17(ConnectedBody, {
           activeTab,
           autoFocusChat
         }) : /* @__PURE__ */ jsx17("div", {
@@ -1972,7 +2011,8 @@ function ConnectedBody({
     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
+        phases,
+        hasStarted: allMessages.length > 0 || agentState === "speaking"
       })
     }, "agenda");
   }
@@ -2025,7 +2065,7 @@ function LiveAgent({
   hideHeader = false,
   startSessionLabel = "Talk to Skippr",
   autoFocusChat = true,
-  showObservingBanner = true,
+  showAgentStateBanner = true,
   children
 }) {
   const auth = useAuth({ appKey });
@@ -2158,7 +2198,7 @@ function LiveAgent({
       onDisconnected: disconnect,
       children: [
         connection && /* @__PURE__ */ jsx19(RoomAudioRenderer, {}),
-        showObservingBanner && /* @__PURE__ */ jsx19(ObservingBanner, {}),
+        showAgentStateBanner && /* @__PURE__ */ jsx19(AgentStateBanner, {}),
         connection && /* @__PURE__ */ jsx19(AutoStartMedia, {
           pendingScreenStream
         }),