@skippr/live-agent-sdk 0.26.0 → 0.28.0

package/dist/esm/lib-exports.js

@@ -1,6 +1,14 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // src/components/LiveAgent.tsx
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
-import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef6, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo5, useRef as useRef7, useState as useState8 } from "react";
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
@@ -165,7 +173,13 @@ async function exchangeForBearerToken(appKey, userToken) {
   const { token } = await resp.json();
   return token;
 }
-function useSession({ agentId, authToken, appKey, userToken }) {
+function useSession({
+  agentId,
+  captureMode = "screenshare",
+  authToken,
+  appKey,
+  userToken
+}) {
   const [connection, setConnection] = useState2(null);
   const [shouldConnect, setShouldConnect] = useState2(false);
   const [isStarting, setIsStarting] = useState2(false);
@@ -202,12 +216,14 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     setError("");
     setErrorCode(null);
     let screenStream = null;
-    try {
-      screenStream = await navigator.mediaDevices.getDisplayMedia({
-        video: { displaySurface: "browser" }
-      });
-    } catch {
-      screenStream = null;
+    if (captureMode === "screenshare") {
+      try {
+        screenStream = await navigator.mediaDevices.getDisplayMedia({
+          video: { displaySurface: "browser" }
+        });
+      } catch {
+        screenStream = null;
+      }
     }
     const headers = { Authorization: `Bearer ${bearerToken}` };
     try {
@@ -215,7 +231,7 @@ function useSession({ agentId, authToken, appKey, userToken }) {
         method: "POST",
         credentials: "omit",
         headers: { "Content-Type": "application/json", ...headers },
-        body: JSON.stringify({ agentId })
+        body: JSON.stringify({ agentId, captureMode })
       });
       if (!createResp.ok) {
         const body = await createResp.json().catch(() => null);
@@ -250,7 +266,7 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     } finally {
       setIsStarting(false);
     }
-  }, [agentId, bearerToken]);
+  }, [agentId, captureMode, bearerToken]);
   const disconnect = useCallback2(async () => {
     if (sessionId && bearerToken) {
       try {
@@ -284,35 +300,14 @@ function useSession({ agentId, authToken, appKey, userToken }) {
   };
 }
 
-// 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;
-}
+// src/lib/constants.ts
+var SIDEBAR_WIDTH = 360;
+var WIDGET_ROOT_ID = "skippr-sdk-root";
+var REF_ATTR = "data-skippr-ref";
+var PRIVATE_ATTR = "data-skippr-private";
+var DOM_SNAPSHOT_TOPIC = "skippr.dom-snapshot";
+var DOM_EVENTS_TOPIC = "skippr.dom-events";
+var NAME_MAX_CHARS = 80;
 // ../../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,11 +537,8 @@ 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";
+import { useVoiceAssistant } from "@livekit/components-react/hooks";
 function useAgentVoiceState() {
   const { state } = useVoiceAssistant();
   return {
@@ -568,7 +560,7 @@ function useLiveAgent() {
 }
 
 // src/hooks/useMediaControls.ts
-import { useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react";
+import { useLocalParticipant } from "@livekit/components-react/hooks";
 import { ScreenSharePresets } from "livekit-client";
 import { useCallback as useCallback3 } from "react";
 var SCREEN_SHARE_OPTIONS = {
@@ -577,7 +569,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 +589,1001 @@ 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/hooks";
+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/DomCapture.tsx
+import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
+import { ConnectionState as ConnectionState2, ScreenSharePresets as ScreenSharePresets2, Track as Track2 } from "livekit-client";
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+
+// src/capture/a11yUtils.ts
+var ROLE_BY_TAG = {
+  a: "link",
+  button: "button",
+  input: "input",
+  select: "select",
+  textarea: "textarea",
+  label: "label",
+  nav: "navigation",
+  main: "main",
+  header: "header",
+  footer: "footer",
+  aside: "complementary",
+  form: "form",
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  h5: "heading",
+  h6: "heading",
+  img: "image",
+  ul: "list",
+  ol: "list",
+  li: "listitem",
+  table: "table",
+  tr: "row",
+  td: "cell",
+  th: "columnheader",
+  video: "video",
+  iframe: "iframe",
+  canvas: "canvas",
+  audio: "audio",
+  embed: "embed",
+  object: "object"
+};
+function inferRole(element) {
+  const explicitRole = element.getAttribute("role");
+  if (explicitRole)
+    return explicitRole;
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "input") {
+    const inputType = element.type;
+    if (inputType === "checkbox")
+      return "checkbox";
+    if (inputType === "radio")
+      return "radio";
+    if (inputType === "submit" || inputType === "button")
+      return "button";
+    return "input";
+  }
+  return ROLE_BY_TAG[tagName] ?? null;
+}
+function accessibleName(element, options = {}) {
+  const ariaLabel = element.getAttribute("aria-label");
+  if (ariaLabel)
+    return ariaLabel.trim().slice(0, NAME_MAX_CHARS);
+  if (!options.quick) {
+    const labelledBy = element.getAttribute("aria-labelledby");
+    if (labelledBy) {
+      const labelElement = document.getElementById(labelledBy);
+      if (labelElement)
+        return (labelElement.textContent || "").trim().slice(0, NAME_MAX_CHARS);
+    }
+    if (element.tagName === "INPUT" || element.tagName === "SELECT" || element.tagName === "TEXTAREA") {
+      const elementId = element.id;
+      if (elementId) {
+        const associatedLabel = document.querySelector(`label[for="${CSS.escape(elementId)}"]`);
+        if (associatedLabel?.textContent) {
+          return associatedLabel.textContent.trim().slice(0, NAME_MAX_CHARS);
+        }
+      }
+      const placeholder = element.getAttribute("placeholder");
+      if (placeholder)
+        return placeholder.trim().slice(0, NAME_MAX_CHARS);
+    }
+  }
+  if (element.tagName === "IMG") {
+    const altText = element.getAttribute("alt");
+    if (altText)
+      return altText.trim().slice(0, NAME_MAX_CHARS);
+  }
+  const titleAttr = element.getAttribute("title");
+  if (titleAttr)
+    return titleAttr.trim().slice(0, NAME_MAX_CHARS);
+  const textContent = (element.textContent || "").replace(/\s+/g, " ").trim();
+  if (textContent)
+    return textContent.slice(0, NAME_MAX_CHARS);
+  return "";
+}
+
+// src/capture/a11yTree.ts
+var REF_PREFIX = "r-";
+var VALUE_MAX_CHARS = 80;
+var HREF_MAX_CHARS = 60;
+var PAGE_CONTENT_MAX_BYTES = 14000;
+var NODE_LIMIT = 1500;
+var SENSITIVE_IFRAME_HOSTS = [
+  "js.stripe.com",
+  "checkout.stripe.com",
+  "connect.stripe.com",
+  "plaid.com",
+  "production.plaid.com",
+  "cdn.plaid.com",
+  "auth0.com",
+  "login.auth0.com",
+  "recaptcha.net",
+  "www.google.com",
+  "hcaptcha.com",
+  "newassets.hcaptcha.com",
+  "challenges.cloudflare.com"
+];
+var MASK_AUTOCOMPLETE_VALUES = new Set([
+  "cc-number",
+  "cc-exp",
+  "cc-exp-month",
+  "cc-exp-year",
+  "cc-csc",
+  "cc-name",
+  "cc-given-name",
+  "cc-family-name",
+  "current-password",
+  "new-password",
+  "one-time-code"
+]);
+var MASK_INPUT_TYPES = new Set(["password", "hidden"]);
+var MASK_NAME_PATTERN = /password|secret|token|api[_-]?key|ssn|tax[_-]?id|social[_-]?security|cvv|cvc|pin/i;
+var refCounter = 0;
+function generateNextRef() {
+  refCounter += 1;
+  return `${REF_PREFIX}${refCounter}`;
+}
+function advanceCounterPastExisting(ref) {
+  const parsedRefNumber = Number.parseInt(ref.slice(REF_PREFIX.length), 10);
+  if (Number.isFinite(parsedRefNumber) && parsedRefNumber > refCounter) {
+    refCounter = parsedRefNumber;
+  }
+}
+function intersectsViewport(rect, viewportWidth, viewportHeight) {
+  if (rect.width <= 0 || rect.height <= 0)
+    return false;
+  if (rect.bottom <= 0 || rect.top >= viewportHeight)
+    return false;
+  if (rect.right <= 0 || rect.left >= viewportWidth)
+    return false;
+  return true;
+}
+function isVisible(element, rect) {
+  if (!intersectsViewport(rect, window.innerWidth, window.innerHeight))
+    return false;
+  const style = window.getComputedStyle(element);
+  if (style.visibility === "hidden" || style.display === "none")
+    return false;
+  if (Number.parseFloat(style.opacity || "1") <= 0.01)
+    return false;
+  return true;
+}
+function isInteractive(element, role) {
+  if (role && role !== "heading" && role !== "image" && role !== "list" && role !== "listitem") {
+    const interactiveRoles = [
+      "button",
+      "link",
+      "input",
+      "select",
+      "textarea",
+      "checkbox",
+      "radio",
+      "tab",
+      "menuitem",
+      "option",
+      "switch",
+      "slider"
+    ];
+    if (interactiveRoles.includes(role))
+      return true;
+  }
+  if (element.tabIndex >= 0)
+    return true;
+  if (element.hasAttribute("onclick") || element.hasAttribute("contenteditable"))
+    return true;
+  return false;
+}
+function isBlindRegion(role) {
+  return role === "video" || role === "iframe" || role === "canvas" || role === "audio" || role === "embed" || role === "object";
+}
+function getIframeHost(element) {
+  const src = element.getAttribute("src");
+  if (!src)
+    return null;
+  try {
+    return new URL(src, window.location.href).host;
+  } catch {
+    return null;
+  }
+}
+function isSensitiveIframe(element) {
+  const host = getIframeHost(element);
+  if (!host)
+    return false;
+  return SENSITIVE_IFRAME_HOSTS.some((sensitiveHost) => host === sensitiveHost || host.endsWith(`.${sensitiveHost}`));
+}
+function isSameOriginIframe(element) {
+  const src = element.getAttribute("src");
+  if (!src)
+    return true;
+  try {
+    return new URL(src, window.location.href).origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+function nearestHeadingText(element) {
+  let currentNode = element;
+  while (currentNode && currentNode !== document.body) {
+    let previousSibling = currentNode.previousElementSibling;
+    while (previousSibling) {
+      if (/^H[1-6]$/.test(previousSibling.tagName) && previousSibling.textContent) {
+        return previousSibling.textContent.trim().slice(0, NAME_MAX_CHARS);
+      }
+      previousSibling = previousSibling.previousElementSibling;
+    }
+    currentNode = currentNode.parentElement;
+  }
+  return null;
+}
+function shouldMaskValue(input) {
+  if (input.tagName === "INPUT") {
+    const inputElement = input;
+    if (MASK_INPUT_TYPES.has(inputElement.type))
+      return true;
+    const autocompleteAttr = (inputElement.getAttribute("autocomplete") || "").toLowerCase().trim();
+    if (MASK_AUTOCOMPLETE_VALUES.has(autocompleteAttr))
+      return true;
+  }
+  const fieldName = (input.getAttribute("name") || "").trim();
+  const fieldId = (input.getAttribute("id") || "").trim();
+  if (MASK_NAME_PATTERN.test(fieldName) || MASK_NAME_PATTERN.test(fieldId))
+    return true;
+  return false;
+}
+function escapeAttributeValue(value) {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"").replace(/[\r\n]+/g, " ");
+}
+function extractAttrs(element, role) {
+  const attributes = [];
+  if (role === "link") {
+    const href = element.getAttribute("href");
+    if (href)
+      attributes.push(`href="${escapeAttributeValue(href.slice(0, HREF_MAX_CHARS))}"`);
+  }
+  if (role === "input" || role === "checkbox" || role === "radio") {
+    const input = element;
+    if (input.type && input.type !== "text")
+      attributes.push(`type="${input.type}"`);
+    if (shouldMaskValue(input)) {
+      attributes.push("valueMasked");
+    } else if (input.value && role === "input") {
+      attributes.push(`value="${escapeAttributeValue(input.value.slice(0, VALUE_MAX_CHARS))}"`);
+    }
+    if (input.checked)
+      attributes.push("checked");
+  }
+  if (role === "textarea") {
+    const textarea = element;
+    if (shouldMaskValue(textarea)) {
+      attributes.push("valueMasked");
+    } else if (textarea.value) {
+      attributes.push(`value="${escapeAttributeValue(textarea.value.slice(0, VALUE_MAX_CHARS))}"`);
+    }
+  }
+  if (role === "select") {
+    const select = element;
+    const selectedOption = select.options[select.selectedIndex];
+    if (selectedOption?.value?.trim()) {
+      attributes.push(`selected="${escapeAttributeValue(selectedOption.value.slice(0, VALUE_MAX_CHARS))}"`);
+    }
+  }
+  if (role === "heading") {
+    const headingLevel = element.tagName.match(/^H([1-6])$/)?.[1];
+    if (headingLevel)
+      attributes.push(`level="${headingLevel}"`);
+  }
+  if (role === "video" || role === "audio") {
+    const mediaElement = element;
+    try {
+      if (Number.isFinite(mediaElement.currentTime)) {
+        attributes.push(`currentTime="${mediaElement.currentTime.toFixed(1)}"`);
+      }
+      if (Number.isFinite(mediaElement.duration) && mediaElement.duration > 0) {
+        attributes.push(`duration="${mediaElement.duration.toFixed(1)}"`);
+      }
+      attributes.push(mediaElement.paused ? "paused" : "playing");
+      if (mediaElement.muted)
+        attributes.push("muted");
+      const mediaSrc = mediaElement.currentSrc || mediaElement.getAttribute("src");
+      if (mediaSrc) {
+        try {
+          attributes.push(`srcHost="${new URL(mediaSrc, window.location.href).host}"`);
+        } catch {}
+      }
+    } catch {}
+  }
+  if (role === "iframe") {
+    const host = getIframeHost(element);
+    if (host)
+      attributes.push(`srcHost="${host}"`);
+    if (isSensitiveIframe(element)) {
+      attributes.push("sensitive");
+    } else if (!isSameOriginIframe(element)) {
+      attributes.push("cross-origin");
+    }
+    const iframeRect = element.getBoundingClientRect();
+    attributes.push(`size="${Math.round(iframeRect.width)}x${Math.round(iframeRect.height)}"`);
+  }
+  if (role === "canvas") {
+    const canvas = element;
+    attributes.push(`size="${canvas.width}x${canvas.height}"`);
+    const heading = nearestHeadingText(element);
+    if (heading)
+      attributes.push(`nearestHeading="${escapeAttributeValue(heading)}"`);
+  }
+  if (role === "image") {
+    const image = element;
+    const imageSrc = image.getAttribute("src") || "";
+    if (/\.gif(\?|$)/i.test(imageSrc))
+      attributes.push("animated");
+  }
+  const isNativelyDisabled = "disabled" in element && element.disabled === true;
+  if (isNativelyDisabled || element.getAttribute("aria-disabled") === "true") {
+    attributes.push("disabled");
+  }
+  return attributes;
+}
+function ensureStableRef(element) {
+  const existingRef = element.getAttribute(REF_ATTR);
+  if (existingRef) {
+    advanceCounterPastExisting(existingRef);
+    return existingRef;
+  }
+  const newRef = generateNextRef();
+  element.setAttribute(REF_ATTR, newRef);
+  return newRef;
+}
+function formatNodeAsLine(entry) {
+  const indent = "  ".repeat(entry.depth);
+  const namePart = entry.name ? ` "${escapeAttributeValue(entry.name)}"` : "";
+  const attrsPart = entry.attrs.length > 0 ? ` ${entry.attrs.join(" ")}` : "";
+  return `${indent}${entry.role}${namePart} ${entry.ref}${attrsPart}`;
+}
+function shouldSkipSubtree(element) {
+  if (element.id === WIDGET_ROOT_ID)
+    return true;
+  if (element.hasAttribute(PRIVATE_ATTR))
+    return true;
+  const tagName = element.tagName;
+  if (tagName === "SCRIPT" || tagName === "STYLE" || tagName === "NOSCRIPT")
+    return true;
+  return false;
+}
+function shouldEmitElement(element, role) {
+  if (role === null)
+    return false;
+  return isInteractive(element, role) || role === "heading" || role === "image" || role === "label" || isBlindRegion(role);
+}
+function getSameOriginIframeBody(element) {
+  if (element.tagName !== "IFRAME")
+    return null;
+  if (!isSameOriginIframe(element) || isSensitiveIframe(element))
+    return null;
+  try {
+    return element.contentDocument?.body ?? null;
+  } catch {
+    return null;
+  }
+}
+function walkAndCollect(element, depth, entries) {
+  if (shouldSkipSubtree(element))
+    return;
+  const rect = element.getBoundingClientRect();
+  const role = inferRole(element);
+  const isVisibleAndEmittable = role !== null && isVisible(element, rect) && shouldEmitElement(element, role);
+  let childDepth = depth;
+  if (isVisibleAndEmittable && role) {
+    const ref = ensureStableRef(element);
+    entries.push({
+      depth,
+      role,
+      name: accessibleName(element),
+      ref,
+      attrs: extractAttrs(element, role),
+      area: rect.width * rect.height
+    });
+    childDepth = depth + 1;
+  }
+  if (role === "iframe") {
+    const iframeBody = getSameOriginIframeBody(element);
+    if (iframeBody) {
+      for (const child of Array.from(iframeBody.children)) {
+        walkAndCollect(child, childDepth, entries);
+      }
+    }
+    return;
+  }
+  if (role && isBlindRegion(role))
+    return;
+  for (const child of Array.from(element.children)) {
+    walkAndCollect(child, childDepth, entries);
+  }
+}
+function dropSmallestAreaEntriesUntilUnderLimit(entries) {
+  if (entries.length <= NODE_LIMIT)
+    return entries;
+  const indexedEntries = entries.map((entry, index2) => ({ entry, index: index2 }));
+  const entriesByAreaAscending = indexedEntries.slice(1).sort((a, b) => a.entry.area - b.entry.area);
+  const indicesToDrop = new Set(entriesByAreaAscending.slice(0, entries.length - NODE_LIMIT).map((indexed) => indexed.index));
+  const keptEntries = [];
+  for (let i = 0;i < entries.length; i++) {
+    if (!indicesToDrop.has(i))
+      keptEntries.push(entries[i]);
+  }
+  return keptEntries;
+}
+function buildAccessibilityTree() {
+  const collectedEntries = [];
+  const pageTitle = document.title || window.location.pathname;
+  collectedEntries.push({
+    depth: 0,
+    role: "page",
+    name: pageTitle.slice(0, NAME_MAX_CHARS),
+    ref: `${REF_PREFIX}0`,
+    attrs: [],
+    area: window.innerWidth * window.innerHeight
+  });
+  if (document.body) {
+    for (const child of Array.from(document.body.children)) {
+      walkAndCollect(child, 1, collectedEntries);
+    }
+  }
+  const exceededNodeLimit = collectedEntries.length > NODE_LIMIT;
+  const finalEntries = exceededNodeLimit ? dropSmallestAreaEntriesUntilUnderLimit(collectedEntries) : collectedEntries;
+  const treeLines = finalEntries.map(formatNodeAsLine);
+  let pageContent = treeLines.join(`
+`);
+  const exceededByteLimit = pageContent.length > PAGE_CONTENT_MAX_BYTES;
+  if (exceededByteLimit) {
+    pageContent = `${pageContent.slice(0, PAGE_CONTENT_MAX_BYTES)}
+<!-- truncated -->`;
+  }
+  return {
+    pageContent,
+    viewport: { width: window.innerWidth, height: window.innerHeight },
+    refCount: finalEntries.length - 1,
+    truncated: exceededNodeLimit || exceededByteLimit
+  };
+}
+
+// src/capture/domEvents.ts
+var MUTATION_DEBOUNCE_MS = 250;
+var textEncoder = new TextEncoder;
+function isInsideWidget(target) {
+  if (!(target instanceof Node))
+    return false;
+  let node = target;
+  while (node) {
+    if (node instanceof Element && node.id === WIDGET_ROOT_ID)
+      return true;
+    node = node.parentNode;
+  }
+  return false;
+}
+function findNearestRef(element) {
+  let currentNode = element;
+  while (currentNode) {
+    const ref = currentNode.getAttribute(REF_ATTR);
+    if (ref)
+      return { ref, node: currentNode };
+    currentNode = currentNode.parentElement;
+  }
+  return null;
+}
+function installDomEventListeners(localParticipant, options = {}) {
+  const { onTriggerEvent } = options;
+  function publishDomEvent(event) {
+    try {
+      localParticipant.publishData(textEncoder.encode(JSON.stringify(event)), {
+        reliable: true,
+        topic: DOM_EVENTS_TOPIC
+      }).catch(() => {
+        return;
+      });
+    } catch {}
+    if (onTriggerEvent) {
+      try {
+        onTriggerEvent();
+      } catch {}
+    }
+  }
+  const onClick = (event) => {
+    if (isInsideWidget(event.target))
+      return;
+    if (!(event.target instanceof Element))
+      return;
+    const matchedRef = findNearestRef(event.target);
+    const targetElement = matchedRef?.node ?? event.target;
+    publishDomEvent({
+      type: "click",
+      ref: matchedRef?.ref ?? null,
+      role: inferRole(targetElement) ?? targetElement.tagName.toLowerCase(),
+      name: accessibleName(targetElement, { quick: true }),
+      timestamp: Date.now()
+    });
+  };
+  document.addEventListener("click", onClick, true);
+  const onSubmit = (event) => {
+    if (isInsideWidget(event.target))
+      return;
+    if (!(event.target instanceof HTMLFormElement))
+      return;
+    const submittedForm = event.target;
+    publishDomEvent({
+      type: "submit",
+      ref: submittedForm.getAttribute(REF_ATTR),
+      formName: (submittedForm.name || submittedForm.id || "").slice(0, NAME_MAX_CHARS),
+      action: (submittedForm.action || "").slice(0, NAME_MAX_CHARS),
+      timestamp: Date.now()
+    });
+  };
+  document.addEventListener("submit", onSubmit, true);
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  let previousUrl = window.location.href;
+  const emitNavigationIfChanged = () => {
+    const nextUrl = window.location.href;
+    if (nextUrl === previousUrl)
+      return;
+    publishDomEvent({
+      type: "navigation",
+      from: previousUrl,
+      to: nextUrl,
+      title: document.title.slice(0, NAME_MAX_CHARS),
+      timestamp: Date.now()
+    });
+    previousUrl = nextUrl;
+  };
+  history.pushState = function patchedPushState(...args) {
+    originalPushState.apply(this, args);
+    queueMicrotask(emitNavigationIfChanged);
+  };
+  history.replaceState = function patchedReplaceState(...args) {
+    originalReplaceState.apply(this, args);
+    queueMicrotask(emitNavigationIfChanged);
+  };
+  const onPopState = () => emitNavigationIfChanged();
+  const onHashChange = () => emitNavigationIfChanged();
+  window.addEventListener("popstate", onPopState);
+  window.addEventListener("hashchange", onHashChange);
+  let pendingAddedRefs = new Set;
+  let pendingRemovedRefs = new Set;
+  let pendingMutationCount = 0;
+  let mutationFlushTimer = null;
+  const flushPendingMutations = () => {
+    mutationFlushTimer = null;
+    if (pendingMutationCount === 0)
+      return;
+    publishDomEvent({
+      type: "mutation",
+      summary: `${pendingMutationCount} subtree changes`,
+      addedRefs: Array.from(pendingAddedRefs),
+      removedRefs: Array.from(pendingRemovedRefs),
+      timestamp: Date.now()
+    });
+    pendingAddedRefs = new Set;
+    pendingRemovedRefs = new Set;
+    pendingMutationCount = 0;
+  };
+  const collectDescendantRefs = (node, targetSet) => {
+    if (!(node instanceof Element))
+      return;
+    if (node.id === WIDGET_ROOT_ID)
+      return;
+    const ref = node.getAttribute(REF_ATTR);
+    if (ref)
+      targetSet.add(ref);
+    for (const child of Array.from(node.children))
+      collectDescendantRefs(child, targetSet);
+  };
+  const observer = new MutationObserver((mutations) => {
+    let observedCount = 0;
+    for (const mutation of mutations) {
+      if (mutation.type !== "childList")
+        continue;
+      if (mutation.target instanceof Element && isInsideWidget(mutation.target))
+        continue;
+      if (mutation.addedNodes.length === 0 && mutation.removedNodes.length === 0)
+        continue;
+      for (const added of Array.from(mutation.addedNodes)) {
+        collectDescendantRefs(added, pendingAddedRefs);
+      }
+      for (const removed of Array.from(mutation.removedNodes)) {
+        collectDescendantRefs(removed, pendingRemovedRefs);
+      }
+      observedCount += 1;
+    }
+    if (observedCount === 0)
+      return;
+    pendingMutationCount += observedCount;
+    if (mutationFlushTimer)
+      clearTimeout(mutationFlushTimer);
+    mutationFlushTimer = setTimeout(flushPendingMutations, MUTATION_DEBOUNCE_MS);
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  return () => {
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("submit", onSubmit, true);
+    window.removeEventListener("popstate", onPopState);
+    window.removeEventListener("hashchange", onHashChange);
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    if (mutationFlushTimer)
+      clearTimeout(mutationFlushTimer);
+    observer.disconnect();
+  };
+}
+
+// src/capture/snapdom.ts
+var cachedSnapdomModule = null;
+function loadSnapdom() {
+  if (!cachedSnapdomModule)
+    cachedSnapdomModule = import("@zumer/snapdom");
+  return cachedSnapdomModule;
+}
+async function snapToCanvas(element, options = {}) {
+  const snapdomModule = await loadSnapdom();
+  return snapdomModule.snapdom.toCanvas(element, options);
+}
+
+// src/components/DomCapture.tsx
+var SNAPSHOT_INTERVAL_MS = 2000;
+var A11Y_PUBLISH_INTERVAL_MS = 2000;
+var CAPTURE_PRESET = ScreenSharePresets2.h1080fps30;
+var CAPTURE_FPS = CAPTURE_PRESET.encoding.maxFramerate ?? 30;
+var CAPTURE_BITRATE = 4000000;
+var DOM_SNAPSHOT_GZIP_THRESHOLD_BYTES = 14000;
+var MAX_CANVAS_DPR = 1.5;
+var CONSECUTIVE_FAILURES_BEFORE_REPORT = 3;
+var textEncoder2 = new TextEncoder;
+function shouldIncludeInSnapshot(element) {
+  if (!(element instanceof Element))
+    return true;
+  if (element.id === WIDGET_ROOT_ID)
+    return false;
+  if (element.hasAttribute?.(PRIVATE_ATTR))
+    return false;
+  return true;
+}
+function createPublishingCanvas() {
+  const dprBoost = Math.min(window.devicePixelRatio || 1, MAX_CANVAS_DPR);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.round(CAPTURE_PRESET.width * dprBoost);
+  canvas.height = Math.round(CAPTURE_PRESET.height * dprBoost);
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return null;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  return { canvas, ctx };
+}
+function getCanvasCaptureStream(canvas, fps) {
+  const captureStreamFn = canvas.captureStream;
+  if (typeof captureStreamFn !== "function") {
+    console.error("canvas.captureStream is not supported in this browser");
+    return null;
+  }
+  return captureStreamFn.call(canvas, fps);
+}
+async function paintViewportSnapshot(canvas, ctx) {
+  const dpr = window.devicePixelRatio || 1;
+  const snapshotCanvas = await snapToCanvas(document.documentElement, {
+    filter: shouldIncludeInSnapshot,
+    filterMode: "remove",
+    backgroundColor: "#ffffff",
+    fast: true,
+    dpr
+  });
+  const sourceX = window.scrollX * dpr;
+  const sourceY = window.scrollY * dpr;
+  const sourceWidth = window.innerWidth * dpr;
+  const sourceHeight = window.innerHeight * dpr;
+  const fitScale = Math.min(canvas.width / sourceWidth, canvas.height / sourceHeight);
+  const destWidth = sourceWidth * fitScale;
+  const destHeight = sourceHeight * fitScale;
+  const destX = (canvas.width - destWidth) / 2;
+  const destY = (canvas.height - destHeight) / 2;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(snapshotCanvas, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
+}
+async function gzipIfBeneficial(snapshotBytes) {
+  if (typeof CompressionStream === "undefined" || snapshotBytes.byteLength <= DOM_SNAPSHOT_GZIP_THRESHOLD_BYTES) {
+    return { bytes: snapshotBytes, compressionFlag: 0 };
+  }
+  try {
+    const blob = new Blob([new Uint8Array(snapshotBytes)]);
+    const stream = blob.stream().pipeThrough(new CompressionStream("gzip"));
+    const compressedBytes = new Uint8Array(await new Response(stream).arrayBuffer());
+    return { bytes: compressedBytes, compressionFlag: 1 };
+  } catch {
+    return { bytes: snapshotBytes, compressionFlag: 0 };
+  }
+}
+async function buildDomSnapshotFrame() {
+  const a11yTree = buildAccessibilityTree();
+  const snapshotJson = JSON.stringify({
+    pageContent: a11yTree.pageContent,
+    viewport: a11yTree.viewport,
+    truncated: a11yTree.truncated,
+    url: window.location.href,
+    title: document.title,
+    capturedAt: new Date().toISOString()
+  });
+  const snapshotBytes = textEncoder2.encode(snapshotJson);
+  const { bytes, compressionFlag } = await gzipIfBeneficial(snapshotBytes);
+  const frame = new Uint8Array(bytes.byteLength + 1);
+  frame[0] = compressionFlag;
+  frame.set(bytes, 1);
+  return frame;
+}
+function reportCaptureError(localParticipant) {
+  try {
+    localParticipant.publishData(textEncoder2.encode(JSON.stringify({ type: "capture_error" })), {
+      reliable: true,
+      topic: DOM_SNAPSHOT_TOPIC
+    }).catch(() => {
+      return;
+    });
+  } catch {}
+}
+async function unpublishAndStopTrack(localParticipant, videoTrack) {
+  try {
+    await localParticipant.unpublishTrack(videoTrack);
+  } catch {}
+  videoTrack.stop();
+}
+function DomCapture() {
+  const { localParticipant } = useLocalParticipant3();
+  const connectionState = useConnectionState2();
+  const didStartRef = useRef2(false);
+  useEffect4(() => {
+    if (didStartRef.current)
+      return;
+    if (connectionState !== ConnectionState2.Connected)
+      return;
+    const canvasAndCtx = createPublishingCanvas();
+    if (!canvasAndCtx)
+      return;
+    const { canvas, ctx } = canvasAndCtx;
+    const canvasStream = getCanvasCaptureStream(canvas, CAPTURE_FPS);
+    if (!canvasStream)
+      return;
+    const videoTrack = canvasStream.getVideoTracks()[0] ?? null;
+    if (!videoTrack)
+      return;
+    videoTrack.contentHint = "text";
+    didStartRef.current = true;
+    let cancelled = false;
+    let snapshotInFlight = false;
+    let a11yPublishInFlight = false;
+    let consecutiveCaptureFailures = 0;
+    localParticipant.setMicrophoneEnabled(true).catch((error) => console.error("Failed to enable microphone:", error));
+    localParticipant.publishTrack(videoTrack, {
+      source: Track2.Source.ScreenShare,
+      videoEncoding: {
+        maxBitrate: CAPTURE_BITRATE,
+        maxFramerate: CAPTURE_FPS
+      },
+      simulcast: false
+    }).catch((error) => {
+      console.error("Failed to publish DOM capture track:", error);
+      for (const track of canvasStream.getTracks())
+        track.stop();
+    });
+    const tickSnapshot = async () => {
+      if (cancelled || snapshotInFlight)
+        return;
+      snapshotInFlight = true;
+      try {
+        await paintViewportSnapshot(canvas, ctx);
+        if (cancelled)
+          return;
+        consecutiveCaptureFailures = 0;
+      } catch {
+        if (cancelled)
+          return;
+        consecutiveCaptureFailures += 1;
+        if (consecutiveCaptureFailures === CONSECUTIVE_FAILURES_BEFORE_REPORT) {
+          reportCaptureError(localParticipant);
+        }
+      } finally {
+        snapshotInFlight = false;
+      }
+    };
+    const tickA11yPublish = async () => {
+      if (cancelled || a11yPublishInFlight)
+        return;
+      a11yPublishInFlight = true;
+      try {
+        const frame = await buildDomSnapshotFrame();
+        if (cancelled)
+          return;
+        await localParticipant.publishData(frame, {
+          reliable: true,
+          topic: DOM_SNAPSHOT_TOPIC
+        });
+      } catch {} finally {
+        a11yPublishInFlight = false;
+      }
+    };
+    const cleanupDomEventListeners = installDomEventListeners(localParticipant, {
+      onTriggerEvent: () => {
+        tickA11yPublish();
+        tickSnapshot();
+      }
+    });
+    tickSnapshot();
+    tickA11yPublish();
+    const snapshotTimer = setInterval(tickSnapshot, SNAPSHOT_INTERVAL_MS);
+    const a11yPublishTimer = setInterval(tickA11yPublish, A11Y_PUBLISH_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      didStartRef.current = false;
+      clearInterval(snapshotTimer);
+      clearInterval(a11yPublishTimer);
+      cleanupDomEventListeners();
+      unpublishAndStopTrack(localParticipant, videoTrack);
+      for (const track of canvasStream.getTracks())
+        track.stop();
+    };
+  }, [connectionState, localParticipant]);
+  return null;
+}
+
+// src/components/MinimizedBubble.tsx
+import { useEffect as useEffect5 } from "react";
+
 // src/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -606,12 +1593,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 +1608,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 +1624,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 +1639,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 +1649,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 +1674,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 +1695,68 @@ 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 { expandPanel, disconnect, position, captureMode } = useLiveAgent();
   const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
   const tooltipAlign = position === "right" ? "end" : "start";
-  return /* @__PURE__ */ jsxs3(Fragment, {
+  const showScreenShareToggle = captureMode === "screenshare";
+  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, {
+      showScreenShareToggle && /* @__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 +1766,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"
         })
       ]
@@ -846,18 +1790,18 @@ function WelcomeBubble({
   position,
   onDismiss
 }) {
-  useEffect4(() => {
+  useEffect5(() => {
     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,61 +1814,27 @@ 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";
+import { useEffect as useEffect12 } from "react";
 
 // src/hooks/useCombinedMessages.ts
 import { useMemo as useMemo4 } from "react";
 
 // src/hooks/useChatMessages.ts
-import { useChat, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react";
+import { useChat, useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
 import { useMemo as useMemo2 } from "react";
 
 // src/lib/filterSystemMessages.ts
@@ -936,7 +1846,7 @@ function filterSystemMessages(messages) {
 // src/hooks/useChatMessages.ts
 function useChatMessages() {
   const { chatMessages: rawMessages, send, isSending } = useChat();
-  const { localParticipant } = useLocalParticipant3();
+  const { localParticipant } = useLocalParticipant4();
   const localIdentity = localParticipant.identity;
   const chatMessages = useMemo2(() => {
     const sortedMessages = rawMessages.map((msg) => ({
@@ -952,11 +1862,11 @@ function useChatMessages() {
 }
 
 // src/hooks/useStreamingTranscript.ts
-import { useLocalParticipant as useLocalParticipant4, useTranscriptions } from "@livekit/components-react";
+import { useLocalParticipant as useLocalParticipant5, useTranscriptions } from "@livekit/components-react/hooks";
 import { useMemo as useMemo3 } from "react";
 function useStreamingTranscript() {
   const transcriptions = useTranscriptions();
-  const { localParticipant } = useLocalParticipant4();
+  const { localParticipant } = useLocalParticipant5();
   const localIdentity = localParticipant.identity;
   const transcriptMessages = useMemo3(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
     id: stream.streamInfo.id,
@@ -1003,12 +1913,12 @@ function useCombinedMessages() {
 import { useCallback as useCallback4 } from "react";
 
 // src/hooks/useAgentState.ts
-import { useRemoteParticipants } from "@livekit/components-react";
-import { useEffect as useEffect5, useState as useState3 } from "react";
+import { useRemoteParticipants } from "@livekit/components-react/hooks";
+import { useEffect as useEffect6, useState as useState3 } from "react";
 function useAgentState(attributeKey, parse, initial) {
   const [value, setValue] = useState3(initial);
   const remoteParticipants = useRemoteParticipants();
-  useEffect5(() => {
+  useEffect6(() => {
     const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
     if (agentParticipant) {
       const attr = agentParticipant.attributes?.[attributeKey];
@@ -1060,7 +1970,7 @@ function usePhaseUpdates() {
 }
 
 // src/hooks/useSessionRemaining.ts
-import { useEffect as useEffect6, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect7, useRef as useRef3, useState as useState4 } from "react";
 
 // src/lib/format.ts
 function formatTime(seconds) {
@@ -1076,9 +1986,9 @@ function parseNumber(s) {
 // src/hooks/useSessionRemaining.ts
 function useSessionRemaining() {
   const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
-  const endTimeRef = useRef2(null);
+  const endTimeRef = useRef3(null);
   const [remaining, setRemaining] = useState4(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (maxCallDuration === null || endTimeRef.current !== null)
       return;
     const endTime = Date.now() + maxCallDuration * 1000;
@@ -1094,14 +2004,11 @@ function useSessionRemaining() {
   return remaining;
 }
 
-// src/lib/constants.ts
-var SIDEBAR_WIDTH = 360;
-
 // src/hooks/useElapsedSeconds.ts
-import { useEffect as useEffect7, useState as useState5 } from "react";
+import { useEffect as useEffect8, useState as useState5 } from "react";
 function useElapsedSeconds(isRunning) {
   const [elapsed, setElapsed] = useState5(0);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isRunning) {
       setElapsed(0);
       return;
@@ -1199,7 +2106,7 @@ function LoadingDots({ label }) {
 }
 
 // src/components/LoginFlow.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef4, useState as useState6 } from "react";
 
 // src/components/ui/button.tsx
 import { forwardRef as forwardRef3 } from "react";
@@ -1327,16 +2234,16 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
 function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
   const [digits, setDigits] = useState6(Array(OTP_LENGTH).fill(""));
   const [resendCooldown, setResendCooldown] = useState6(0);
-  const inputRefs = useRef3([]);
-  const submittedRef = useRef3(false);
-  useEffect8(() => {
+  const inputRefs = useRef4([]);
+  const submittedRef = useRef4(false);
+  useEffect9(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (error)
       submittedRef.current = false;
   }, [error]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (resendCooldown <= 0)
       return;
     const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
@@ -1479,7 +2386,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
 // src/components/MeetingControls.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var CONTROL_BUTTON = "skippr:flex skippr:size-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:transition-colors";
-function MeetingControls({ onHangUp }) {
+function MeetingControls({ onHangUp, showScreenShareToggle = true }) {
   const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
   return /* @__PURE__ */ jsxs8("div", {
     className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
@@ -1498,7 +2405,7 @@ function MeetingControls({ onHangUp }) {
               className: "skippr:size-5"
             })
           }),
-          /* @__PURE__ */ jsx9("button", {
+          showScreenShareToggle && /* @__PURE__ */ jsx9("button", {
             type: "button",
             onClick: toggleScreenShare,
             "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
@@ -1529,17 +2436,17 @@ function MeetingControls({ onHangUp }) {
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect10, useRef as useRef5 } from "react";
+import { useEffect as useEffect11, useRef as useRef6 } from "react";
 
 // src/components/ChatInput.tsx
-import { useEffect as useEffect9, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState7 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var MAX_INPUT_HEIGHT = 60;
 function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
   const [inputText, setInputText] = useState7("");
-  const textareaRef = useRef4(null);
+  const textareaRef = useRef5(null);
   const canSend = inputText.trim().length > 0 && !isSendingChat;
-  useEffect9(() => {
+  useEffect10(() => {
     if (autoFocus)
       textareaRef.current?.focus();
   }, [autoFocus]);
@@ -1684,9 +2591,9 @@ function MessageList({
   isSendingChat,
   autoFocus = false
 }) {
-  const scrollRef = useRef5(null);
+  const scrollRef = useRef6(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
-  useEffect10(() => {
+  useEffect11(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
@@ -1719,8 +2626,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 +2723,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,
@@ -1839,11 +2746,12 @@ function Sidebar({
     isAuthSubmitting,
     sidebarTab: activeTab,
     setSidebarTab: setActiveTab,
-    autoFocusChat
+    autoFocusChat,
+    captureMode
   } = useLiveAgent();
   const isFloating = variant === "floating";
   const isSidebar = variant === "sidebar";
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isSidebar)
       return;
     const prop = position === "right" ? "marginRight" : "marginLeft";
@@ -1882,7 +2790,8 @@ function Sidebar({
         onTabChange: setActiveTab,
         hideControls,
         startSessionLabel,
-        autoFocusChat
+        autoFocusChat,
+        showScreenShareToggle: captureMode === "screenshare"
       })
     ]
   });
@@ -1897,9 +2806,10 @@ function AuthenticatedContent({
   onTabChange,
   hideControls,
   startSessionLabel,
-  autoFocusChat
+  autoFocusChat,
+  showScreenShareToggle
 }) {
-  return /* @__PURE__ */ jsxs15(Fragment2, {
+  return /* @__PURE__ */ jsxs15(Fragment3, {
     children: [
       isConnected && /* @__PURE__ */ jsx17(ConnectedBanner, {}),
       /* @__PURE__ */ jsxs15("div", {
@@ -1937,7 +2847,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", {
@@ -1951,7 +2861,8 @@ function AuthenticatedContent({
         }, `${activeTab}-empty`)
       }),
       isConnected && !hideControls && /* @__PURE__ */ jsx17(MeetingControls, {
-        onHangUp: onDisconnect
+        onHangUp: onDisconnect,
+        showScreenShareToggle
       })
     ]
   });
@@ -1972,7 +2883,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 +2937,8 @@ function LiveAgent({
   hideHeader = false,
   startSessionLabel = "Talk to Skippr",
   autoFocusChat = true,
-  showObservingBanner = true,
+  showAgentStateBanner = true,
+  captureMode = "screenshare",
   children
 }) {
   const auth = useAuth({ appKey });
@@ -2041,6 +2954,7 @@ function LiveAgent({
     pendingScreenStream
   } = useSession({
     agentId,
+    captureMode,
     authToken: effectiveAuthToken,
     appKey,
     userToken
@@ -2079,8 +2993,8 @@ function LiveAgent({
   }, [minimizable]);
   const isConnected = connection !== null;
   const isAuthenticated = !!userToken || !!authTokenProp || auth.isAuthenticated;
-  const prevConnectionRef = useRef6(connection);
-  useEffect12(() => {
+  const prevConnectionRef = useRef7(connection);
+  useEffect13(() => {
     const connectionChanged = prevConnectionRef.current !== connection;
     prevConnectionRef.current = connection;
     if (connectionChanged && minimizable) {
@@ -2117,7 +3031,8 @@ function LiveAgent({
     isAuthSubmitting: auth.isSubmitting,
     sidebarTab,
     setSidebarTab,
-    autoFocusChat
+    autoFocusChat,
+    captureMode
   }), [
     connection,
     shouldConnect,
@@ -2146,7 +3061,8 @@ function LiveAgent({
     auth.logout,
     auth.isSubmitting,
     sidebarTab,
-    autoFocusChat
+    autoFocusChat,
+    captureMode
   ]);
   return /* @__PURE__ */ jsx19(LiveAgentContext.Provider, {
     value: ctx,
@@ -2158,20 +3074,26 @@ function LiveAgent({
       onDisconnected: disconnect,
       children: [
         connection && /* @__PURE__ */ jsx19(RoomAudioRenderer, {}),
-        showObservingBanner && /* @__PURE__ */ jsx19(ObservingBanner, {}),
-        connection && /* @__PURE__ */ jsx19(AutoStartMedia, {
+        connection && captureMode === "screenshare" && /* @__PURE__ */ jsx19(AutoStartMedia, {
           pendingScreenStream
         }),
-        isMinimized && /* @__PURE__ */ jsx19(MinimizedBubble, {
-          welcomeMessage,
-          welcomeDismissed,
-          onDismissWelcome: dismissWelcome
-        }),
-        /* @__PURE__ */ jsx19(SidebarTrigger, {}),
-        /* @__PURE__ */ jsx19(Sidebar, {
-          hideControls,
-          hideHeader,
-          startSessionLabel
+        connection && captureMode === "auto" && /* @__PURE__ */ jsx19(DomCapture, {}),
+        /* @__PURE__ */ jsxs16("div", {
+          id: WIDGET_ROOT_ID,
+          children: [
+            showAgentStateBanner && /* @__PURE__ */ jsx19(AgentStateBanner, {}),
+            isMinimized && /* @__PURE__ */ jsx19(MinimizedBubble, {
+              welcomeMessage,
+              welcomeDismissed,
+              onDismissWelcome: dismissWelcome
+            }),
+            /* @__PURE__ */ jsx19(SidebarTrigger, {}),
+            /* @__PURE__ */ jsx19(Sidebar, {
+              hideControls,
+              hideHeader,
+              startSessionLabel
+            })
+          ]
         }),
         children
       ]
@@ -2179,9 +3101,9 @@ function LiveAgent({
   });
 }
 // src/hooks/useIsLocalSpeaking.ts
-import { useIsSpeaking, useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react";
+import { useIsSpeaking, useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
 function useIsLocalSpeaking() {
-  const { localParticipant } = useLocalParticipant5();
+  const { localParticipant } = useLocalParticipant6();
   return useIsSpeaking(localParticipant);
 }
 export {